Псевдо-элементы

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

p:first-letter {

font-weight: bold;

font-size: 300%;

background-color: red;

}

Первая буква каждого параграфа будет теперь жирной и на 300% больше остального параграфа, и будет иметь красный фон.

Чтобы сделать первую строку каждого параграфа жирной, можно использовать следующее правило:

p:first-line {

font-weight: bold;

}

Вторым применением псевдо-элементов является генерация контента с помощью CSS, что является более сложным. Можно использовать псевдо-элементы :before или :after для определения, что контент должен быть вставлен перед или после элемента, который вы выбираете. Затем определяют то, что должно быть вставлено. В качестве простого примера можно использовать следующее правило для вставки декоративных изображений после каждой ссылки на страницу:

a:after{

content: " " url(flower.gif);

}

Можно также использовать функцию attr() для вставки значений атрибутов элементов после элемента. Например, можно вставить цель каждой ссылки в документ в скобках с помощью следующего кода:

a:after{

content: "(" attr(href) ")";

}

Такие правила прекрасно подходят для таблиц стилей печати, которые являются таблицами стилей, которые автоматически применяются, когда пользователь печатает страницу. Преимущество для пользователя состоит в том, что можно скрыть всю навигацию, которую невозможно использовать в печатном материале, и использовать описанную выше технику, чтобы читатель мог видеть адреса URL, на которые ссылается страница.

Можно также вставить увеличивающиеся цифровые значения после повторяющихся элементов (таких как маркеры списка или параграфы), используя функцию counter() — это объясняется более подробно в статье на сайте dev.opera.com article по счетчикам CSS (http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/).

Эти селекторы не поддерживаются в IE 6 или более младших версиях. Отметим также, что нежелательно вставлять важную информацию с помощью CSS, или этот контент будет недоступен вспомогательным технологиям, или если пользователь решит не использовать вашу таблицу стилей. Золотое правило состоит в том, что CSS предназначен для оформления, а HTML предназначен для важного контента.

Сокращенная запись css

Еще одной вещью, с чем вы будете регулярно cталкиваться в этом курсе, является сокращенная запись CSS. Можно объединить несколько связанных свойств CSS в одно свойство, чтобы сберечь свое время и усилия. В этом разделе мы рассмотрим доступные типы сокращений.

В этом разделе я уже использовал сокращенную запись, не говоря об этом. Правило border: 2px solid black; является сокращением для отдельно определяемых border-width: 2px;, border-style: solid; and border-color: black;.

Сравнение индивидуальных и сокращенных значений

Рассмотрим следующее правило для полей (сокращения для заполнения и границы работают таким же образом):

div.foo {

margin-top: 1em;

margin-right: 1.5em;

margin-bottom: 2em;

margin-left: 2.5em;

}

Это правило можно записать также в следующем виде:

div.foo {

margin: 1em 1.5em 2em 2.5em;

}