Цель: изучить создание таблиц стилей.
Содержание:
Практика - В конце страницы
Учебная задача 1. Изучи понятие - таблицы стилей CSS.
Задание 1. Прочитай материал. Изучи назначение таблицы стилей CSS
Возможности форматирования в языке HTML явно ограничены. Например, если понадобится изменить стилевое оформление однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять соответствующие теги. Кроме того, ряд тегов и атрибутов HTML объявлены устаревшими или отмененными. Задачи разметки текста сейчас решаются другими более совершенными способами, с использованием стилей.
Стиль – это правило, указывающее браузеру, как выводить на экран содержимое какого-то определенного тега.
Язык HTML отвечает за структуру документа, то есть выделяет заголовки и абзацы, изображения и гиперссылки, таблицы и списки. Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют указать, как будет выглядеть каждый элемент содержимого на экране: какой используется шрифт, выделен ли он жирным или курсивом, насколько он отступает от края страницы и т. д. Язык CSS позволяет задавать любые атрибуты в виде наборов параметров – так называемых стилей форматирования, а затем одним действием применить сразу всю группу атрибутов форматирования к различным элементам документа. В результате существенно уменьшается размер файла документа и время его загрузки из сети. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры этого стиля и вид текста поменяется автоматически.
Еще одно преимущество CSS состоит в том, что с их помощью можно легко добиться самого сложного форматирования текста. Стили упрощают определение интервалов между строками, отступов, цветов, используемых для текста и фона, размера шрифтов и многое другое.
Рекомендация. Как правило, текст следует форматировать посредством CSS, а некоторые теги, например такие как <FONT>, лучше совсем не использовать.
Замечание. Сбор и анализ информации о стилях CSS производится браузером из многих источников, с учетом приоритетов (отсюда – название этой технологии), сочетаясь и определяя свойства результирующего стиля, которые подобно каскаду водопадов, ступенчато ниспадают, начиная с внешних таблиц, продолжая на уровне документа и оканчивая свой путь во встроенных стилях тегов. Этот каскад свойств и стилевых правил и дал название стандарту каскадных таблиц стилей.
Язык CSS называют таблицами по устоявшейся традиции. Можно встретить и термин листы стилей, что является дословным переводом с английского слова sheets. По-русски эти листы правильнее было бы назвать списками правил форматирования.
Учебная задача 2. Изучи параметр style.
Описание стилей можно расположить
- внутри тега, используя параметр style
- в заголовке HTML-страницы или
- во внешнем файле.
Самая простая форма их определения возможна для отдельного тега с использованием параметра style.
Пример 1:
|
<html>
<head>
<title> Стили </title>
</head>
<body>
<p style="font-size: 24pt; font-style: italic; color: blue;">
Абзац с форматированием
</p>
</body>
</html>
|
Здесь для абзаца выбран размер шрифта (24 pt), курсив и синий цвет текста:
|
Некоторые свойства имеют общие групповые названия, например: font-size, font-style, font-family. В этом случае их можно задавать в сокращенной форме. Например, следующие записи равносильны:
<P style="font-family: ‘Times New Roman’; font-size: 12pt;
font-style: italic; font-weight: 400;">
<P style="font: ‘Times New Roman’ 12pt italic 400;">
Замечание. Вложенные кавычки должны быть разными.
Этот способ использования стилей CSS рекомендуется в единичных случаях – если данный стиль планируется применить только к одному элементу и только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, то рекомендуются другие способы связывания CSS и HTML, о которых речь пойдет далее.
Учебная задача 3. Изучи создание встроенных в заголовок таблиц стилей.
Атрибуты CSS можно расположить в заголовке страницы в специальном блоке описания стилей <STYLE>…</STYLE>. В этом случае они будут действовать на любые теги. В одном HTML-документе могут быть несколько таких блоков.
Пример 2:
|
<html>
<head>
<style type="text/css">
BODY { background: #F0F0F0; } /* Светло-серыйцветфона */
H2 {color: blue; font-size: 24pt; text-align: center; }
P {
text-indent: 30; color: green; font-size: 16pt;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Заголовок с форматированием </h2>
<p> Абзац с форматированием </p>
</body>
</html>
|
Атрибут type=”text/css” указывают браузеру на то, что следует использовать язык таблиц стилей CSS. Данный параметр не является обязательным, однако рекомендуется записывать его.
Блоки описания стилей могут содержать комментарии: /* Это комментарий */
|
Здесь для всей web-страницы с помощью специальных описаний (правил) задается цвет фона, определяется вид заголовков второго уровня, детали форматирования абзацев – величина отступа первой строки, цвет и размер букв, толщина (жирность) шрифта. Каждое описание заканчивается точкой с запятой. Последняя точка с запятой не обязательна.
Этот способ связывания CSS и HTML рекомендуется применять в тех случаях, когда необходимо задать какой-либо набор правил форматирования для отдельной страницы сайта, а все остальные страницы должны выглядеть по-своему.
Замечание. Ранние версии браузеров могут не поддерживать таблицы стилей. Поэтому существует устаревшая рекомендация скрывать содержимое блоков <STYLE>… </STYLE> в комментариях:
|
<STYLE type=”text/css”>
<!-описаниестиля->
</STYLE>
|
Учебная задача 4. Изучи использование внешней таблицы стилей
Внешние таблицы стилей – это отдельные файлы с расширением .css, в которых записаны правила оформления тегов.
Имеется файл my_styles.css
|
h1 {color: red;}
body {background: black; font: medium helvetica;}
|
Этот файл содержит два правила: для заголовков первого уровня и для тела документа.
В файле .cssмогут быть только правила и комментарии
Для присоединения таблиц стилей из файла к html-документу используется тег <link>. Он записывается в заголовке - «голове» документа.
Пример.
|
<html>
<head>
<title> Заголовокстраницы </title>
<link rel=“stylesheet” type=“text/css”href=“my_styles.css”>
</head>
…
|
Обязательные атрибуты тега:
1. rel = “stylesheet” – отвечает за установку взаимосвязи html-документа и css-таблицы
2. type=“text/css” – описывает тип данных в таблице стилей
3. href=“URL” – адрес может быть относительным или абсолютным:
href=“my_styles.css”
ПРАКТИКА
1. Создайте в Блокноте страницу с именем Загадки.htm
<html>
<head>
<title>загадки</title>
</head>
<body >
<h1 > Интеллектуальная разминка</h1>
<h2> Из семи букв в две</h2>
<p > Из какого слова из семи букв, можно удалить одну "букву", чтобы осталось две буквы? <p>
<p > (букварь)<p>
<h2 > Очень хрупкое</h2>
<p > Это нечто настолько хрупкое, что достаточно лишь назвать это по имени, как оно сразу же разрушается. О чём идёт речь?<p>
<p > (молчание)<p>
<h2 > Самое длинное односложное слово</h2>
<p > Самое длинное односложное слово в русском языке. <p>
<p > (вскользь)<p>
<h2 > Три буквы "е"</h2>
<p > Назовите слово, содержащее подряд три буквы "е". <p>
<p > (длинношеее)<p>
</body>
</html>
2. Выполни пример 1. Сохрани файл под именем Загадки1.htm
3.Выполни пример 2. Сохрани файл под именем Загадки2.htm
4. Выполни пример 3. Сохрани файл под именем Загадки3.htm
раскрыть » / « свернуть