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

Псевдокласс (англ. 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 пунктов)

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

Основные CSS-свойства

Данный раздел описывает основные CSS-свойства, применяемые в современном веб-дизайне. Все они сгруппированы для простоты их освоения. Ссылку на полный список CSS свойств, а также информацию о существующих стандартах CSS вы можете найти в разделе 5.1.

Свойства шрифта

В этой главе мы рассмотрим CSS-свойства, определяющие стиль текста: font, font-family, font-size, font-weight, font-style, line-height.

Начнем с определения font-family. С помощью этого свойства можно задать шрифт, который будет использоваться для текста внутри объекта, для которого это свойство задано. Ввиду того, что на компьютере пользователя нужного шрифта может не оказаться (не установлен), font-family обычно содержит несколько альтернативных названий шрифтов, заканчивая этот список общим названием семейства шрифтов.

Cвойства font-family

font-family: “Lucida Sans”, Verdana, sans-serif;

В данном примере указан предпочтительный шрифт – «Lucida Sans». Так как название этого шрифта состоит их двух слов, оно взято в кавычки. Это правило применимо ко всем названиям шрифтов, состоящим более чем из одного слова.

В случае, если шрифт «Lucida Sans» не установлен, браузер попытается использовать следующий в списке шрифт, а именно «Verdana». Если же и его на компьютере не окажется, то браузер будет использовать один из доступных шрифтов семейства «sans-serif», т.е. «без засечек».

Перечислим названия существующих семейств шрифтов: serif, sans-serif, monospace, script (или cursive), fantasy.

Ниже приведены несколько шрифтов семейства serif:

• Garamond
• Georgia
• New York
• Times
• Times New Roman

К шрифтам семейства sans-serif относятся:

• Arial
• Geneva
• Helvetica
• Lucida Sans
• Trebuchet
• Verdana
• Tahoma

Семейство monospace включает в себя:

• Courier
• Courier New
• Lucida Console
• Monaco

К семейству script относятся:

• Comic Sans MS
• Lucida Handwriting
• Zapf Chancery

И на последок несколько примеров шрифтов из семейства fantasy:

• Copperplate
• Desdemona
• Impact
• Kino

Как правило, в профессиональном веб-дизайне используется не более 3 – 4 шрифтов одновременно. Причем, разумеется это должны быть общедоступные и популярные шрифты. Для обычного текста используются как правило шрифты семейства sans-serif, такие как Arial, Tahoma, Verdana и пр. Для страниц предназначенных для печати, чаще всего используются шрифты serif. Monospace-шрифты, как правило, используются для отображения фрагментов кода. Шрифты семейства script и fantasy используются очень редко.

Указание только одного шрифта в качестве значения для font-family рассматривается CSS-валидатором W3C как некое нарушение правил, поэтому всегда следует указывать несколько альтернативных шрифтов, заканчивая список названием предпочтительного семейства шрифтов.

Ввиду наследования многих CSS-свойств дочерними объектами, в случае, когда на странице используется только одна разновидность шрифта, как правило, достаточно указать значение font-family один раз для элемента body. Элементы td, а также элементы формы не наследуют свойства шрифта, поэтому их нужно определять отдельно. Не нужно указывать font-family для каждого элемента, содержащего текст, это непрактично и неоптимально.

Размер шрифта указывается с помощью свойства font-size. В качестве значения, допустимы любые величины в любых единицах измерения (см. 5.4), плюс некие предопределенные значения например xx-small, x-small, small, medium, large, x-large и xx-large.

Свойство font-weight задает вес шрифта. Это свойство имеет несколько допустимых значений, однако на практике используются только два из них: normal и bold.

Стиль шрифта задается с помощью свойства font-style, которое имеет три допустимых значения: normal, italic и oblique. Значение oblique практически не используется по причине того, что поддерживается не всеми браузерами, да и необходимость использования oblique в веб-дизайне возникает крайне редко.

Одной из характеристик шрифта является межстрочный интервал или точнее высота строки. Свойство, отвечающее за этот параметр называется line-height. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается. Значение normal заставляет браузер вычислять расстояние между строк автоматически. Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы измерения (см. 5.4). Разрешается использовать процентную запись, в этом случае за 100 процентов берется высота шрифта.

Все вышеперечисленные свойства шрифта могут быть указаны с помощью сокращенной (shorthand) записи CSS свойства font. При этом значения свойств шрифта должны быть перечислены через пробел в следующем порядке: значение font-style, значение font-weight, значение font-size, значение font-family. Высота строки line-height может быть указана после величины размера шрифта, используя знак «/» в качестве разделителя. Рассмотрим несколько примеров:

Сокращенная (shorthand) запись свойств текста

font: 11px Arial, Verdana, sans-serif;

font: bold 12px/14px Tahoma, Arial, Verdana, sans-serif;

font: italic normal 10px Helvetica, Verdana, sans-serif;

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

Помимо вышеперечисленных свойств, существуют также такие свойства, как font-variant, text-decoration (см. 5.5.2) и text-transform.

Свойства эффектов текста

Свойство text-decoration отвечает за эффекты текста. Оно часто используется для выключения или включения подчеркивания текста гиперссылок. Поэтому наиболее часто используемые для него значения это none и underline, соответственно. Свойство text-decoration может принимать и другие значения, с которыми читатель может ознакомиться в любом справочнике по CSS.

Свойства выравнивания

К свойствам выравнивания относятся: text-align и vertical-align.

Свойство text-align определяет горизонтальное выравнивание текста в пределах элемента. Оно может принимать одно их четырех значений: left, right, center и justify. Последнее выравнивает текст одновременно по левому и правому краю.

Свойство vertical-align, как и следует из названия, отвечает за вертикальное выравнивание элемента или текста. Из всего множества допустимых значений практичных только три: top, middle и bottom. Обратите внимание, что значение, означающее выравнивание посередине называется middle, а не center.

Свойства переноса

Свойство white-space со значением nowrap запрещает перенос строк внутри текста, заключенного внутрь элемента. Помимо значения nowrap, стандарт CSS 2.1 предусматривает также normal, pre, pre-wrap и pre-line. В настоящий момент, на практике используются только два значения: normal и nowrap.

Свойства фона

В этом разделе будут рассмотрены CSS-свойства фона элемента, а именно background, background-color, background-image, background-repeat, background-position, background-attachment.

Цвет фона устанавливается с помощью background-color. В качестве значения свойство принимает код цвета или значение «transparent», что означает «прозрачный». Правила указания цвета рассмотрены в разделе 4.2.5.

В случае, когда в качестве фона необходимо использовать изображение, применяется свойство background-image. Пример его использования показан в примере ниже.

Использование background-image

background-image: url(../images/mypic.jpg);

Путь к файлу изображения указывается в скобках параметра url. Путь указывается относительно расположения CSS файла, а не HTML документа.

По умолчанию, изображение фона будет повторяться по горизонтали и вертикали, пока не заполнит собой весь элемент, к которому применили данное свойство. В случае, когда необходимо ограничить повторение изображения по горизонтали или по вертикали или предотвратить его повторение, используется CSS-свойство background-repeat. Оно принимает одно из следующих значений: repeat (значение по умолчанию), repeat-x, repeat-y, no-repeat. Смысл этих значений понятен по их названиям.

Еще одно немаловажное свойство, которое помогает при манипуляциях изображением фона, называется background-position. Оно предназначено для установки позиции изображения фона внутри элемента. В качестве значения, это свойство принимает один или комбинацию двух параметров. Это может быть пара числовых значений, разделенных пробелом и выраженных в каких- либо единицах измерения (см. 5.4) или процентах (со знаком «%») смещения относительно верхнего левого угла. Еще это может быть одно или комбинация двух значений, разделенных пробелом, из следующих допустимых: top, bottom, center, left, right. Немного поэкспериментировав на практике, можно легко понять, что означает каждое из этих значений. Ввиду хорошей поддержки этого свойства современными браузерами, оно является весьма полезным во многих случаях. Рассмотрим несколько примеров:

Примеры использования background-position

background-position: 20px 70px;

background-position: 50% 100%;

background-position: bottom right;

background-position: top center;

background-position: left;

Cвойство background-attachment определяет, будет ли изображение фона фиксироваться относительно окна просмотра (значение fixed) или будет перемещаться вместе с документом (значение scroll) в процессе его прокрутки.

Рассмотрим сокращенный (shorthand) способ записи вышеупомянутых свойств фона. Это делается при помощи CSS-свойства background. Рассмотрим несколько примеров:

Сокращенная запись свойств фона

background: #c8eeff url(../images/bg-body.png) repeat-x scroll top;

Из примера видно, что значения свойств фона идут в следующем порядке: background-color, background-image, background-repeat, background-attachment и background-position.

В случае, когда необходимо задать одновременно несколько свойств фона в пределах одного селектора, предпочтение следует отдавать сокращенной записи.

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

Никогда не следует применять прием использования однопиксельного цветного изображения в качестве картинки фона, по причине того, что такой цвет браузер не в состоянии отобразить при помощи background-color. Такой подход может оказаться неожиданным для другого разработчика, что наверняка приведет к дополнительным затратам времени при модификации документа. Это предостережение касается новичков, потому, что, к сожалению, многие учебные пособия по HTML изобилуют подобными «полезными советами».

Свойства цвета текста

При помощи CSS-свойства color задается цвет текста. При этом желательно соблюдать правила изложенные в 4.2.5.

Свойства границ элемента

В этом разделе мы рассмотрим свойства отображения границ элемента: border, border-color, border-style, border-width, border-top, border-bottom, border-left, border-right.

Цвет границы элемента задается при помощи свойства border-color (см. 4.2.5). Можно также использовать значение transparent, однако оно не поддерживается некоторыми браузерами.

Свойство border-style задает стиль отображения границы. Его допустимые значения показаны на рисунке 5-1.

Рисунок 5‑1. Допустимые значения для border-style.

Толщина границы определяется свойством border-width (см. также 5.4). О том, как влияет ширина границы на ширину отображаемого элемента, а также другие особенности модели отображения блочных элементов смотрите в разделе 6.2.2.

Сокращенная запись свойств границы задается при помощи CSS-свойства border:

Сокращенная запись свойств границы элемента

border: 1px solid #f00;

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

Замечание: в IE6 при стилях границы dotted и dashed ширины границы в 1px не существует, браузер самостоятельно ставит ширину в 2px.

Существует возможность определения границы элемента по частям – слева, справа, вверху и внизу. Для этого существуют соответствующие CSS-свойства: border-top-color, border-top-style, border-top-width, border-left-color, border-left-style, border-left-width и т.д. Существуют также соответствующие свойства для сокращенной записи: border-top, border-bottom, border-left и border-right.

Чтобы избавиться от отображения границы элемента, используйте свойство border-width с нулевым значением, например:

Отмена отображения границы элемента

input {border: none;}

Свойства обтекания

К свойствам обтекания относятся float и clear. Эти свойства широко используются в современных HTML-документах, оптимизированных для поисковых систем (см. раздел 7). Они отвечают за обтекание блоков текста и элементов.

Свойство float может иметь одно из следующих значений: left, right или none (значение по умолчанию). Это свойство устанавливает правило обтекания – справа от объекта (значение left) или слева от объекта (значение right).

Свойство clear отменяет обтекание для текущего элемента, при этом может принимать одно из следующих значений: left, right, both и none (значение по умолчанию). Соответственно, значение left отменяет обтекание справа, а значение right – обтекание слева, значение both отменяет обтекание с обеих сторон.

Свойства внешнего отступа

Свойство margin определяет внешний отступ для элемента по четырем сторонам: вверху, внизу, слева и справа. При этом он может быть задан по частям, используя свойства margin-top, margin-bottom, margin-left и margin-right. Существует также сокращенная запись внешних отступов по сторонам. Рассмотрим несколько примеров:

Внешний отступ

margin: 10px;

margin-top: 10px;

margin: 10px 20px 30px 40px;

margin: 10px 20px 30px;

margin: 10px 20px;

Первая запись в примере определяет внешний отступ, равный 10 пикселям по всем четырем сторонам элемента. Вторая запись определяет внешний отступ сверху, равный 10 пикселям. Следующая запись определяет отступ сверху 10 пикселей, справа – 20 пикселей, внизу – 30 пикселей, слева – 40 пикселей. В сокращенной записи отступа направления перечисляются начиная сверху и далее по часовой стрелке, т.е. справа, внизу и слева. В случае, когда отступ задан не для всех сторон, например как в четвертой и пятой записи, недостающие величины будут равны соответствующим величинам симметричных сторон. Так, в соответствии с четвертой записью, будет установлен внешний отступ сверху, равный 10 пикселям, слева и справа – 20 пикселей, внизу – 30 пикселей. Последняя запись предполагает отступ сверху и снизу по 10 пикселей, слева и справа – по 20 пикселей.