Псевдоклассы и псевдоэлементы

Псевдокласс (англ. pseudo-class) – класс, который существует не зависимо от того, объявлен атрибут class для элемента или нет. Такие классы существуют всегда и предусмотрены для некоторых элементов и их состояний. Самые часто используемые псевдоклассы это псевдоклассы элемента a. Для него существует четыре псевдокласса, в соответствии с состоянием этого элемента на текущий момент времени: hover, link, visited и active.

Псевдокласс hover позволяет определить стиль для гиперссылок, находящихся под курсором мыши в текущий момент времени; link – это еще не посещенные гиперссылки, visited – уже посещенные гиперссылки; active – активные или открываемые в данный момент ссылки. Чаще всех используется псевдокласс hover.

Синтаксически, псевдокласс указывается в селекторе после знака двоеточия.

Псевдокласс

a:hover {text-decoration: underline;}

Такая запись добавит эффект подчеркивания ссылки при наведении на нее мышкой. Разумеется это имеет смысл только когда эффект подчеркивания для ссылок отменен по умолчанию.

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

Комбинация класса и псевдокласса

a.nav-link:hover {color: #000;}

Многие современные браузеры имеют псевдокласс hover, предопределенный для всех HTML-элементов, в то время как, например браузер Internet Explorer 6.0 понимает псевдокласс hover только для элементов a. Использование псевдокласса hover позволяет делать некоторые интересные эффекты, вроде многоуровневого меню на основе CSS без использования JavaScript.

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

Псевдоэлемент (англ. pseudo-element) – это элемент или мнимый элемент, характеризующийся определенным критерием, и к которому могут быть отдельно применены CSS-свойства. Псевдоэлементы редко используются по причине плохой их поддержки различными браузерами, поэтому на данном этапе рассматриваться не будут.

Единицы измерения

Рассмотрим, какие бывают единицы измерения для указания размера объектов HTML-документа.

Формат представления размера предполагает необязательное использование знака числа. Если знак отсутствует, то число предполагается положительным. После знака, если он используется, без разрыва должно идти число, возможно с десятичной точкой. И затем, опять без разрыва, двухбуквенная аббревиатура единицы измерения. Указание аббревиатуры необязательно, если значение размера равно нулю.

Существует два типа представления длины: относительное и абсолютное.

Относительное представление задает длину относительно другого свойства длины. Существуют следующие относительные размеры длины:

• em – высота шрифта
• ex – высота символа X
• px – пиксели (относится к разрешению устройства вывода)

Единицы длины em и ex относятся к характеристикам шрифта самого элемента, за исключением свойства font-size, для которого за основу берутся характеристики шрифта родительского элемента.

Единицы измерения px (пиксели) относятся к разрешению устройства вывода, т.е. обычно к дисплею компьютера. Если плотность пикселей устройства вывода очень сильно отличается от плотности пикселей компьютерного дисплея, браузер вынужден масштабировать значения пикселей. Это происходит, например, при выводе веб-страницы на принтер.

Относительный размер может быть также задан в виде процентного соотношения, обычно по сравнению с величиной родительского элемента. В этом случае, после значения указывается знак «%».

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

• in – дюймы
• cm – сантиметры
• mm – миллиметры
• pt – пункты (1/72 дюйма)
• pc – пика (12 пунктов)

Абсолютные значения используются очень редко в профессиональном веб-дизайне.