Стиль для отдельного HTML-файла
Можно задавать стиль для тега или группы тегов так, чтобы определение работало на протяжении всего HTML-документа. Например, можно указать вид всех заголовков. Для этого достаточно написать определение в головной части документа через стилевые определения.
Стилевые определения или селекторы располагаются внутри блока
<style>. . . </style>
и «запаковываются» в HTML-комментарий.
Стилевое определение имеет вид:
Имя тега (или имена тегов через запятые)
{
характеристика: величина;
…
характеристика: величина;
}
Например:
<HTML>
<HEAD> <META http-equiv="Content-Type"
content="text/html">
<TITLE>Стиль для отдельного файла</TITLE>
<STYLE type="text/css">
<!--
H1,H2,H3,H4,H5,H6
{
text-align: right;
color:red;
font-family: "Arial Cyr",
Geneva, sans-serif;
}
-->
</STYLE>
</HEAD>
<BODY bgcolor=#DFF0D5 text=black>
<H2>Стиль для отдельного файла</H2>
<HR>
<P>Это обычный текст
<H3>Это заголовок</H3>
<P>Это снова обычный текст
</BODY
</HTML>
Результат работы этой программы:
Браузер отображает заголовки в этом документе рубленым шрифтом цвета red и выравнивает их по правому краю экрана. Такое поведение браузера соответствует следующей инструкции:
<STYLE type="text/css">
<!--
Н1,Н2,НЗ,Н4,Н5,Н6
{
text-align: right;
color: red;
font-family: "Arial Cyr", Geneva, sans-serif;
}
-->
</STYLE>
В приведенном выше примере использованы три характеристики:
• text-align: right; – задает выравнивание по
правому краю;
• color: red; – задает цвет red;
• font-family: "Arial Cyr", – задает рубленый
Geneva, sans-serif; шрифт.
Заголовки будут выводиться шрифтом Arial Cyr, если, конечно, этот шрифт есть в компьютере пользователя. Если шрифта нет, браузер последовательно ищет шрифты Geneva, Helvetica или, в конце концов, какой-нибудь рубленый шрифт (указание «sans-serif»). В случае полной неудачи браузер выведет текст «шрифтом по умолчанию», т. е., как правило, шрифтом Times New Roman.
Стиль для нескольких HTML-файлов
Обычной практикой является указание стилей в отдельном файле. Для таких файлов используют расширение css. Например, можно в файле style.css записать:
BODY {margin-left: 40рх;}
Hl,H2,H3,H4,H5,H6
{
text-align: right;
color: red;
font-family: "Arial Cyr", Geneva, sans-serif;
}
Для подключения этих указаний в разделе <head>...</head> HTML-файла
нужно поместить ссылку:
<LINK rel=stylesheet type="text/css“ href=style.css>
На этот стилевой файл могут ссылаться многие HTML-документы. Изменения в этом единственном файле скажутся на внешнем виде десятка страниц.
Обратите внимание на стилевое указание
body {margin-left: 40рх;}
Оно задает экранный отступ слева в 40 пикселов для всего документа в целом. Как видите, для задания страничного отступа можно обойтись без таблиц и полей, о которых говорилось HTML-кодах.
Комбинирование стилей
Были показаны три способа внедрения стилей в HTML-коды:
• указания в отдельном теге;
• указания в заголовке HTML-файла;
• указания в отдельном CSS-файле.
Теперь попробуем комбинировать эти способы. Какой из них окажется предпочтительнее, покажут примеры.
Проделаем серию опытов. Документ без CSS-указаний
В примере, код которого приводится ниже, заголовки выводятся черным цветом по белому.
<HTML>
<HEAD> <TITLE>Пример 1</TITLE>
</HEAD>
<BODY bgcolor=white
text=black>
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
<HЗ>Заголовок 3</HЗ>
</BODY>
</HTML>
CSS-указания в отдельном теге
Этот код отобразит первые два заголовка черным цветом, а последний — красным.
<HTML>
<HEAD>
<TITLE>Пример 2</TITLE>
</HEAD>
<BODY bgcolor=white
text=black>
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
<H3 style="color:red">
Заголовок 3 </H3>
</BODY>
</HTML>
CSS-указания в CSS-файле Файл prim.сss содержит:
H1,H2,H3
{
color: green;
}
Тогда HTML-файл с использованием этого файла имеет сл. вид.
<HTML>
<HEAD>
<!-- Подключение файла prim.css. - - >
<LINK rel=stylesheet type="text/css" href-prim.css>
<STYLE type="text/css">
<!--
H1,H2,H3
{
color: blue;
}
-->
</STYLE>
<TITLE>Пример 4</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
<H3 style="color:red">
Заголовок 3</H3>
</BODY> 
</HTML>
Рассмотрим другой порядок следования тегов <style> и <link>.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
H1,H2,H3
{
color: blue;
}
-->
</STYLE>
<!-- Подключение файла prim.css -->
<LINK rel=stylesheet type="text/css"
href=prim.css>
<TITLE>Пример 5</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
<H3 style="color:red">Заголовок 3</H3>
</BODY>
</HTML>
Таким образом, используя CSS можно:
· задавать поля, отступы, размер и тип шрифта, цвета текста и фона для отдельных элементов страницы (абзацев, слов, букв), оформлять красные строки и т.д.
· изменять оформление целого сайта, состоящего из сотен файлов, не прикасаясь к HTML-коду, редактируя всего лишь один CSS-файл;
· уменьшать количество тегов в HTML-документе, отделяя информационное наполнение HTML-файла от его внешнего представления на экране браузера.
Вопросы к самопроверке:
1. Как расшифровывается аббревиатура CSS?
2. Опишите назначение технологии CSS.
3. Каким атрибутом можно задать стиль в теге?
4. В каком специальном HTML-блоке <?????>...</?????> размещают стилевые описания?
5.В каком теге записывается ссылка на файл со стилевыми определениями, каким атрибутом она задается? Запишите эти имена вместо вопросительных знаков:
<???? rel = stylesheet type="text/css" ????=file.css>
6.Какие три способа задания стилевых описаний вам известны? Сравните эти способы и укажите назначение каждого из них.