Вы здесь

CSS селекторы, свойства, значения

Так же, как в HTML есть теги, в CSS есть "селекторы". Селекторы – это имена стилей, которые вы определяете во внутренних или внешних таблицах стилей. В данном учебнике основное внимание будет уделяться так называемым HTML селекторам, т.е. обычным именам тегов, которые используются в качестве селекторов стилей для изменения внешнего представления соответствующих HTML элементов.

У каждого селектора есть "свойства", определяемые внутри фигурных скобок. Свойства – это ключевые слова, такие как color, font-weight или background-color, которым присвоены определенные значения. Значения свойств присваиваются при помощи двоеточия и разделяются точкой с запятой:

body {
   font-size: 0.8em;
   color: navy;
}

В данном примере создается css селектор body, в котором определяется два свойства – font-size и color, которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст внутри элемента body (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8 em и темно-синим цветом.

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

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

Другие единицы измерения – pc (пики), cm (сантиметры), mm (миллиметры) и in (дюймы).

Если значение равно нулю, то нет необходимости указывать единицы измерения. Например, если вы хотите полностью убрать рамку вкруг элемента, то можно задать "border: 0".

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

В связи с этим считается, что гораздо более правильно использовать "em" или "%" в качестве единиц измерения размеров шрифтов (и может быть даже высоты и ширины, о которых вы узнаете в учебнике "CSS продвинутого уровня"), чем "px", которые означают неизменяемый размер текста в большинстве браузеров и должны использоваться достаточно редко (например, для определения размера рамок элементов).

Кроме HTML селекторов в CSS также можно определять селекторы классов и идентификаторов, о которых вы узнаете в учебнике "CSS среднего уровня".