<< ПредыдущаяОглавлениеСледующая >>


4.3. Селекторы-теги и формат записи свойств в CSS

В предыдущем параграфе был рассмотрен селектор h1, для которого назначался цвет шрифта. Аналогичным образом в качестве селектора можно указать любой другой тег языка HTML, например,

p {color: #000000;}
p {font-size: 14px;}
p {background: #ffffff;}

Здесь для тега абзаца <p> заданы наборы свойств: цвет (color) – черный; размер шрифта (font-size) – 14 пунктов; фон (background) – белый. Теперь при использовании любого тега <p> в документе тексту будут назначены перечисленные свойства.

Указывать каждый раз один и тот же тег, для которого задаются различные свойства, не очень удобно, поэтому в CSS допускается группировать свойства, относящиеся к одному тегу, следующим образом:

p {
color: #000000;
font-size: 14pt;
background: #ffffff;
}

и это будет аналогично записи выше.

Если требуется к разным тегам применить один и тот же набор свойств, то в этом случае можно указать теги через запятую, а затем определить набор свойств, как это показано ниже:

body, p, b {
font-size: 14pt;
font-weight: normal;
font-family: Arial;
}

В приведенном примере тегам <body>, <p> и <b> назначаются свойства шрифта (font): размер – 14 пунктов; стиль шрифта (font-weight) – нормальный; имя шрифта (font-family) – Arial. Все эти свойства в CSS можно задать одной строкой с помощью свойства font, объединяющий в себе все свойства шрифта:

body, p, b {
     font: normal 14pt Arial;
}

и их порядок должен быть только таким: стиль, размер, имя шрифта.

Часто в HTML-документах теги вложены один в другой. Например, в тег абзаца <p> может быть вложен тег <b> для выделения полужирным фрагмента текста. В этом случае тег <p> называется родителем, а тег <b> - потомком:

<p>Пример текста с <b>вложенным</b> тегом

При этом возникает вопрос: что будет происходить, если для тега <p> определены свойства в таблице стилей, а для тега <b> нет? В этом случае теги-потомки наследуют свойства тега-родителя, т.е. если указан стиль

p {color: blue}

то на экране браузера будет отображена информация в таком виде (рис. 4.1):

Рис. 4.1. Пример наследования свойств тегом-потомком

По этому правилу применяются все свойства из заданной таблицы CSS к тегам-потомкам.

Наследование создает естественность при использовании стилей. Однако встречаются ситуации, когда необходимо, чтобы вложенный тег имел свойства отличные от наследуемых, например, чтобы в вышеприведенном примере текст в теге <b> не менял своего цвета. Этого можно добиться, используя контекстные селекторы, т.е. указать браузеру применять заданный стиль для тега, только тогда когда он вложен в один или несколько других тегов, например, так:

p b {color: black}

Рис. 4.2. Пример использования контекстных селекторов



<< ПредыдущаяОглавлениеСледующая >>