Селекторы. Наследование.
Одно из основных преимуществ CSS – это возможность легко применять набор стилей ко всем однотипным элементам.
Отредактировав всего одну строку CSS - файла можно поменять вид всех заголовков или таблиц сайта. Это позволяет разработчику сосредоточиться на дизайне, а не на рутинной работе.
Рассмотрим пример: необходимо чтобы все заголовки третьего уровня на странице были синего цвета. Если использовать только язык html, то придётся для каждого заголовка прописать следующие тэги с атрибутами:
<h3><font color=”blue”>Заголовок третьего уровня</font></h3>
Таких заголовков на странице может огромное количество соответственно код будет громоздким. Но если воспользоваться языком CSS, то код будет следующим:
На html-странице – <h3>Заголовок третьего уровня</h3>
На СSS странице будет всего одна запись – h3{color: blue}. К тому же если понадобится поменять цвет на другой, достаточно изменить одно слово.
Если требуется для какого-либо селектора применить несколько свойств, то они записываются через «;»: h3{color:blue; background:#ab2100;}
Селектор – это чаще всего (но не всегда) – элемент HTML – h1, p, em, table
P {color: silver;} em {background: red;}
В блок объявлений входит одно или несколько объявлений. После : и ; может быть произвольное количество пробелов.
Значение – это либо одно ключевое слово, либо несколько допустимых ключевых слов, разделенных пробелами:
P {font: medium Helvetica;}
Если указать неверное свойство или значение – все объявление будет проигнорировано целиком.
Допустимо группировать селекторы и объявления:
h1, h2, h3 {color: purple;}
h4, p {color: silver; background: green;}
Селекторы разделяются “ , ”, а объявления - “ ; ”
h1, p {
font: helvetica;
color: purple;
background: aqua;
}
Группировка – удобный способ, помогающий обеспечить небольшой объем, выразительность и простоту обслуживания таблиц стилей.
Наследование
Дерево документа
Дерево элементов, закодированное в исходном документе. Каждый элемент в этом дереве имеет только один родительский элемент, за исключением корневого элемента, у которого его нет.
Дочерний элемент
Элемент А называется дочерним по отношению к элементу B, если и только если B является родительским элементом элемента А.
Потомок
Элемент А называется потомком элемента B, если выполняется одно из следующих условий:
(1) А является дочерним элементом элемента B;
(2) А является дочерним элементом элемента C, который, в свою очередь, является потомком B.
Предок
Элемент А называется предком элемента B, если и только если B является потомком элемента А.
Сестринский элемент
Элемент А называется сестринским элементом элемента B, если и только если элементы А и B являются дочерними элементами одного и того же элемента. Элемент А является предшествующим сестринским элементом, если в дереве документа он находится перед элементом B. Элемент A является следующим сестринским элементом, если в дереве документа он находится после элемента B.
Предшествующий элемент
Элемент А называется предшествующим элементу B, если и только если (1) А является предком B или (2) А является предшествующим сестринским элементом элемента B.
Следующий элемент
Элемент А называется следующим за элементом B, если и только если B предшествует элементу А.
Наследование-это механизм, с помощью которого стили применяются не только к самим элементам, но также к их потомкам.
Пусть у нас есть такая WEB-страница:
<html>
<head> <title>Cписки</title> </head>
<body>
<ol>Упорядоченный список
<li>История
<li>Математика
<li>Физика
<li>Информатика
</ol>
<ul>Неупорядоченный список
<li>История
<li>Математика
<li>Физика
<li>Информатика
</body>
</html>
Например, если цвет применяется к элементу <ol>, то этот цвет будет применен также и к элементам <il> в этом списке.
ol { color: gray;}