Задание стиля страницы (Style Sheet) возможно либо в заголовке документа: в разделе <HEAD> с помощью команды <STYLE>, либо непосредственно в тексте с помощью дополнительного атрибута STYLE для команд разметки текста (<P>, <H1> и т.п.)
Синтаксис стиля не слишком сильно отличается от синтаксиса HTML, он записываются следующим образом:
селектор {атрибут: значение} |
Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары атрибут:значение, где ":" является заменителем знака "=".
Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее:
H2 {color: red} |
Селекторы могут описывать следующие элементы:
В том случае, если свойств у команды предположительно много, то их разделяют точкой с запятой:
H2 {color: red; font-size: 15pt} |
Если какая либо команда в документе вставлена внутри другой команды, то она наследует все свойства, и для того, чтобы задать ей особые свойства необходимо использовать следующий синтаксис:
H3 B {color: green} |
Здесь назначается зеленый цвет для текста выделенного командами <B> и </B>, если он является заголовком третьего уровня.
Следующий пример демонстрирует задание стиля в заголовке документа:
<HTML> <HEAD> <TITLE>Style Sheets</TITLE> <STYLE TYPE="text/css" TITLE="Bright Colours"> BODY { background: #FFFFFF;} P { color: blue; font-size: 12pt; font-family: Arial} H1 { color: red; font-size: 18pt} </STYLE </HEAD> <BODY> ... |
Атрибуты TYPE и TITLE команды <STYLE> являются необязательными. Атрибут TYPE задает определение MIME (Content-Type: "text/css") а атрибут TITLE используется для задания названия соответсвующего стиля документа.
Определение стиля обязатально требует задания начала и конца команды
<STYLE> ... </STYLE>
Задание цвета
P {color: #800000} /* RGB - color |
Задание размера
P {font-size: 32pt} /* pt - point, px - pixel |
Задание курсива
P {font-style: italic} |
Задание жирного шрифта
P {font-weight: bold} |
Задание семейства шрифтов
P {font-family: Arial} /* имя семейства шрифтов |
Задание размещения
P {text-align: center} /* center/left/right |
Задание отступов
P {margin-top: -10pt} P {margin-left: -20pt} P {margin-right: 15pt} P {text-indent: 5em } /* задание отступа в начале абзаца |
Использование команды <LINK> позволяет задать внешний стиль документа,
например,
<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.foo.org/sheet" TITLE="coolsheet"> |
Стиль соответсвующей команды языка HTML может быть изменен в ходе выполнения документа при помощи атрибута STYLE соответсующей команды разметки текста, например,
<H1 STYLE="color: #FF0000">Заголовок </H1> |
<H1 STYLE="color: #00FF00; text-align: right">Заголовок 1</H1> |
<H1 STYLE="text-align: left">Заголовок 2</H1> |
<H1 STYLE="font-size: 26pt">Заголовок 3</H1> |
Другой способ выбора стиля в документе связан с предопределением различных стилей в заголовке документа. Для выбора стиля используется два вида селекторов: CLASS и ID (идентификатор).
Использование селекторов зависет от способа декларации стиля в заголовке.
Задание выбора стиля по методу CLASS мозможно двумя способами:
P.redtext { color: #FF0000} |
Тогда соответствующий стиль параграфа включается командой
<P CLASS="redtext">text</P> |
.redtext { color: #FF0000} |
Тогда соответствующий стиль включается командой
<H1 CLASS="redtext">text</H1> |
Использование селекторов для задания отступов позволяет сделать наложение текста друг на друга как это сделано в следующем примере. Команда <DIV> создает блок текста, в пределах которого действуют заданные в этой команде значения атрибутов.
<HTML> <HEAD> <TITLE>Style Sheets</TITLE> <STYLE> .t1 { color: darkmagenta; margin-left: 10pt; font-size: 30pt; font-weight: bold; font-family: Courier New } .t2 { margin-top: -37pt; margin-left: 8pt; color: magenta; font-size: 30pt; font-weight: bold; font-family: Courier New } </STYLE> </HEAD> <BODY BGCOLOR=#FFFFFF> <DIV CLASS="t1">Объявление</DIV> <DIV CLASS="t2">Объявление</DIV> <p> <DIV class="t1">Объявление</DIV> <P> <p> <DIV CLASS="t2">Объявление</DIV> |
Принцип работы селектора ID аналогичен принципу работы селектора CLASS. Идентификатор ID должен быть уникальным и используется для задания имени стиля произвольной команды HTML (является более ранней командой языка HTML 3).
Определяется в заголовке документа
#redtext { color : #FF0000} |
Соответствующий стиль включается командой
<P ID="redtext">some text</P> would be coloured red. |
Команда SPAN позволяет менять стиль вывода текста внутри одной команды (внутри параграфа), например, следующий текст будет отбражен красным цветом. Это изменение сделано командой:
<SPAN STYLE="color: #FF0000">будет отбражен красным цветом</SPAN> |
Следующее определение в заголовке документа переопределяет стиль команды STRONG
STRONG { color: #00FF00} |
И если в документе встречается текст в скобках
<STRONG> ... </STRONG> |
То данный текст будет показан "зеленым" цветов и с соответвующим выделенем для команды STRONG (по-умолчанию - жирный текст)
Задание стиля
P STRONG { color: #00FF00} |
устанавливает зеленый цвет для параграфа помеченного командой STRONG,
между скобками
<P> ... <STRONG> ... </STRONG> ...</P> |
<P><STRONG>Этот текст ярко зеленый</STRONG></P> А этот - <STRONG>основного</STRONG> цвета. |