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

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

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

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

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

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

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

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

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

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

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

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

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

Пример текста с вложенным тегом

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

p {color: blue}

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

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

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

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

p b {color: black}

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