По мотивам http://msdn2.microsoft.com/en-us/library/aa358833(VS.85).aspx
Базовый строительный блок Каскадных Таблиц Стиля (Cascading Style Sheets, CSS) - это правила стиля. Селекторы используются для определения элементов HTML-страницы, к которым будет применен тот или иной стиль.
Правила стиля
Правило стиля - это выражение, которое говорит браузеру, как отображать некую группу элементов на HTML-странице. Правило содержит селектор, за которым следует блок декларации. Блок декларации - это всё, что внутри фигурных скобок ({}). Например, следующий код модифицирует стандартное отображение HTML-элемента H1
селектор блок декларации
-------- -----------------------------
H1 { font-variant: small-caps; }
------------ ----------
свойство значение
Как мы уже поняли ранее, декларация состоит из свойства и его значения, раздедённые между собой двоеточием (:). Пробелы в блоке декларации игнорируются, поэтому используйте их как вам нравится для форматирования CSS-файла. Множественные декларации внутри кривых скобок разделены между собой точкой с запятой (;). Хорошим тоном считается всегда завершать декларацию точкой с запятой, даже если декларация одна единственная.
Дерево документа
Дерево документа - это иерархическое представление элементов, используемых при кодировке HTML-файла. Например, для HTML-кода
<body>
<div id="content">
<h1>Heading here</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<hr>
</div>
<div id="nav">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</body>
дерево документа может быть представлено так:
Все взаимосвязи между элементами дерева можно описать в терминах предков, потомков, родителей, детей и братьев. А именно: каждый элемент дерева, за исключением корневого body имеет единственного родителя. Например, у h1 левый div является родителем. И наоборот, h1 - ребёнок для левого div. body - предок для h1, а h1 - потомок для body. Наконец, все li между собой братья. Стили применяются к элементам в дереве документа на основании их типов, их относительной позиции в иерархии, а также атрибутов id или class.
Селекторы и комбинаторы
Простой селектор - это типовой селектор или универсальный селектор. Типовой селектор определяет любой HTML-элемент (например, см. CSS файл для ZenGarden). Универсальный селектор обозначается символом "звёздочка" (*) и определяет любой элемент в документе.
Простой селектор может быть расширен атрибутами id или class, а также псевдо-классами в любом порядке. Правило стиля применяется, если данный элемент попадает под определение селектора. Примеры селекторов:
H1 { color:blue; } - заголовок первого уровня
будет синего цвета
#myID { color:red; } - элемент с id="myID"
будет красного цвета
#myID:hover { color: orange; } - элемент с id="myID"
будет оранжевого цвета,
если на него навести курсор мышки
P.myClass { color:green; } - элемент p с class="myClass"
будет иметь текст зелёного цвета
P.myClass:hover { text-decoration:underline; } - элемент p с class="myClass"
будет иметь подчёркнутый текст ,
если на него навести курсор мышки
Простые селекторы могут быть составлены в комбинацию селекторов при помощи комбинационных символов (комбинаторов). Комбинаторы специфицируют контекстуальные отношения между простыми селекторами и бывают потомками (пробел между селекторами), детьми (знак "больше" (>)) и непосредственными братьями (знак "плюс" (+)). Например следующий код говорит, что тэг h2, являющийся непосредственным братом тэга h1 в дереве документа должен располагаться на 5 милиметров ближе к h1:
H1 + H2 { margin-top: -5mm; }Для оптимизации размера и читаемости CSS файла, элементы, имеющие один и тот же стиль, перечисляются через запятую, то есть группируются. Например:
H1, H2, H3 { font-family: helvetica; }Псевдо-классы и псевдо-элементы
Как уже было сказано выше, стили применяются к элементам согласно их позиции в дереве документа. Однако иногда необходимо применить особенный стиль к фрагменту HTML-документа, который невозможно распознать в дереве документа. И для стилизирования такой информации применяются псевдо-классы и псевдо-элементы. Псевдо-элементы применяются для определения стилей фрагментов элементов. Например, :first-letter или :first-line, то есть первая буква и первая строка текста соответсвенно. А псевдо-классы - для поведения элементов. Например, :first-child, :visited или :hover определяющие соответсвенно первого ребёнка, посещённую ссылку или поведение при наведении курсора мышки на элемент. Обычно псевдо-классы имеют динамическую природу в том смысле, что элемент приобретает и теряет стили в процессе взаимодействия пользователя со страницей.
При комбинировании селекторов типовые селекторы всегда должны быть раньше псевдо-элементов. Друние селекторы (id, class или псевдо-классы) могут встречаться в любом порядке.
P:first-child:first-line { text-transform: uppercase; }Поддержка селекторов в Internet Explorer
| Простые селекторы | Версия Internet Explorer |
|---|---|
| Тип, Группировка | 3 |
| Class, ID | 3 |
| Universal (*) | 5.0 |
| Комбинаторы | |
| Descendant ( ) | 3 |
| Child (>) | 7 |
| Adjacent Sibling (+) | 7 |
| Селекторы-аттрибуты | |
| Equality [=] | 7 |
| Existence [] | 7 |
| Hyphen [=] | 7 |
| Prefix [^=] | 7 |
| Substring [*=] | 7 |
| Suffix [$=] | 7 |
| Whitespace [~=] | 7 |
| Псевдо-классы и псевдо-элементы | |
| :link, :visited | 3 |
| :hover†, :active | 4 |
| :first-letter, :first-line | 5.5 |
| :first-child | 7 |
† Применимость селектора :hover была рапространена на все элементы лишь в Windows Internet Explorer 7.
0 коммент.:
Отправить комментарий