Комбинированные стили CSS
CSS позволяет создавать стили с несколькими селекторами одновременно. Такие стили называются комбинированными.
Комбинированные стили предназначены для привязки к тегам, которые удовлетворяют одновременно нескольким условиям. Веб-мастер может назначить комбинированный стиль к тегу, вложенному в другой тег или к тегу, для которого указан определенный стилевой класс.
Правила для написания селекторов в комбинированном стиле:
- селекторами могут быть имена тегов, имена стилевых классов, имена именованных стилей;
- селекторы перечисляются слева направо по уровню вложенности тегов - теги, которые указаны правее, должны быть вложены в теги, которые стоят левее;
- допускается комбинирование имени тега с именем стилевого класса или с именованным стилем. В таком случае, для такого тега должно быть указано соответствующее имя стилевого класса или именованного стиля;
- селекторы в комбинированном стиле разделяются пробелами;
- стиль привязвается к тегу, который обозначен последним (самым правым) селектором.
Данные правила сложны для понимания, поэтому, лучше всего понять их работу на практических примерах.
ПРИМЕР 1:
P STRONG {color: Red}
...
<P>Этот текст будет <STRONG>красным и жирным</STRONG></P>
<P>Это простой текст</P>
|
В примере 1 в качестве селекторов используются теги <P>, <STRONG>. Тег <STRONG> должен быть вложен в тег <P>. Стиль будет привязан только к тегу <STRONG>.
ПРИМЕР 2:
P.blue {color: #0000FF}
...
<P CLASS="blue">Этот текст будет отображен синим цветом.</P>
<P>Это простой текст</P>
|
ПРИМЕР 3:
P.blue <EM> {color: #0000FF}
...
<P CLASS="blue">Этот текст будет <EM>синим и наклонным</EM>.</P>
<P>Это простой текст</P>
|
В примере 3 стиль будет применен только к фрагменту "синим и наклонным". Стиль "окрасит" цвет текста в синий, а тег <EM> сделает его наклонным.
Стандарт CSS разрешает определять одновременно несколько разных стилей, которые перечисляются через запятую.
H2, .warning, P STRONG <EM> {font-size: 10px}
В этом примере три разных стиля (стиль переопределения тега; стилевой класс; комбинированный стиль) задают размер шрифта в 10 пикселей.
Встроенные стили
Встроенные стили применяются редко. Они нарушают концепцию Web 2.0. Обычно встроенные стили применяют к единственному элементу html-страницы или во время экспериментов со стилями.
Встроенный стиль указывается в качестве атрибута STYLE конкретного тега.
<P STYLE="color: Red; font-size: 14px">Красный текст размером 14</P>
- встроенные стили не имеют селектора, они встраиваются в нужный тег;
- встроенные стили не содержат фигурные скобки;
- встроенный стиль может быть привязан только к одному тегу.
- в определении встроенного стиля в тех случаях, когда значение атрибута требует использования кавычек ("), используется знак апострофа (').
