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

Псевдоэлементы позволяют задать стиль логических элементов, не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста [5]. Например, объектная модель документа не предлагает удобного механизма для доступа к первому символу текста, поэтому псевдоэлементы позволяют изменить стиль недоступного иным образом элемента.

Синтаксис использования псевдоэлементов следующий:

Селектор:Псевдоэлемент { Описание правил стиля }

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

.foo:first-letter { color: red }

.foo:first-line { font-style: italic }

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

Далее перечислены все псевдоэлементы, их описание и свойства [2, 5]:

• after – применяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, который определяет содержимое для вставки.

Замечание. Псевдоэлементы after и before, а также стилевое свойство content не поддерживаются браузером Internet Explorer ни в одной его версии.

• before – по своему действию before аналогичен псевдоэлементу after, но вставляет контент до элемента.

• first-letter – определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.

Замечание. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал – увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.

• first-line – определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.

Замечание. К псевдоэлементу first-line могут применяться не все стилевые свойства. Допустимо использовать параметры, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.

3.1.8. Элементы css

3.1.8.1. Текст

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 3.1 [2, 5].

Таблица 3.1. CSS-свойства для работы со шрифтами
Свойство	Значение	Описание
font-family	имя шрифта	Задает список шрифтов
font-style	normal italic oblique	Нормальный шрифт Курсив Наклонный шрифт
font-variant	normal small-caps	Капитель (особые прописные буквы)
font-weight	normal lighter bold bolder 100-900	Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный
font-size	normal pt px %	Нормальный размер Пункты Пикселы Проценты

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.2 [2, 5].

Таблица 3.2. CSS-свойства для работы с текстом
Свойство	Значение	Описание
line-height	normal множитель точно %	Межстрочный интервал
text-decoration	none underline overline line-through blink	Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста
text-transform	none capitalize uppercase lowercase	Убрать все эффекты Начинать с прописных Все прописные Все строчные
text-align	left right center justify	Выравнивание текста
text-indent	точно %	Отступ первой строки