Синтаксис стиля

Синтаксис стиля не слишком сильно отличается от синтаксиса HTML, он записываются следующим образом: Синтаксис: селектор {атрибут: значение} Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары атрибут:значение, где ":" является заменителем знака "=". Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее: H2 {color: red}

Селекторы могут описывать следующие элементы:

• тэги Пример: P {color: red} стиль применяется к тэгу <P>

• тэги потомков Пример: H1 B {color: red} стиль применяется к тэгу <B>, находящемуся внутри заголовка первого уровня, т.е. являющимся его потомком

• дочерние тэги Пример: OL>LI {color: red} стиль применяется к тэгу <LI>, который является дочерним элементом для тэга <OL>, т.е. на тэги <LI>, которые являются дочерними элементами для тэга <UL> стиль не распространяется

• сестринские тэги Пример: H1+H2 {margin-top: -5mm} стиль применяется к сестринским тэгам <H1> и <H2>, которые являются дочерними по отношению к одному и тому же родительскому тэгу, например <BODY>, в данном случае уменьшает разрыв между ними

• атрибуты тэгов Пример: DIV[class=red] {color: red } стиль применяется ко всем элементам, включенным в <DIV>, у которых атрибут class равен red

• ID Пример: P#12 {color: red } стиль применяется к тэгу <P>, у которого идентификатор ID равен 12

• классы Пример: .red {color: red} стиль применяется к любомым тэгам, у которых атрибут class равен red

• псевдоклассы Пример: A:visited {color: red } стиль применяется к посещенному тэгу <A>.

В том случае, если свойств у тэга предположительно много, то их разделяют точкой с запятой: H2 {color: red; font-size: 15pt} Если какой либо тэг в документе вставлен внутри другого тэга, то он наследует все его свойства, и для того, чтобы задать ему особые свойства необходимо использовать следующий синтаксис: H3 B {color: green} Здесь назначается зеленый цвет для текста выделенного тэгами <B> и </B>, если он является заголовком третьего уровня.

Включенные таблицы стилей

Включенные таблицы стилей позволяют управлять форматированием при помощи стандартных тэгов HTML, включая определения конкретного стиля для содержимого конкретного тэга, подобно его атрибутам. Сам по себе метод включения таблиц стилей в некотором смысле противоречит основной идее каскадных таблиц стилей. Так как ключевым моментом этой технологии является управление стилями отдельных страниц или узла целиком. Явное включение стилей аналогично использованию элемента <FONT> и должно применяться только в тех случаях, когда необходимо определить стиль только небольшого фрагмента текста. Пример: P {color:blue} стиль применяется к тэгу <P>, данный единичный абзац будет иметь синий текст.

Внедренные таблицы стилей

Внедренные таблицы стилей позволяют управлять отдельными страницами при помощи пары тэгов <STYLE> и </STYLE>. Эта пара со всем её содержимым помещается между тэгами <HTML> и <BODY>. При написании кода внедренной таблицы выбираются тэги, которые будут являться контейнерами текста. Действие таблицы стилей будет распространяться только на те фрагменты текста, которые будут заключены именно в эти тэги. Точно также, как и скрипты, таблицы стилей могут быть спрятаны от старых браузеров в комментарии <!- - и //- ->. Внедренные таблицы используют наиболее часто. Пример:

<HTML> <HEAD> </HEAD> <STYLE> BODY {color: #000000;} H3 {color: #0000ff;} A {color: #ff0000;} </STYLE> <BODY> содержимое </BODY> </HTML>