Вы здесь

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, однако некоторые из них универсальны и могут использоваться со многими свойствами, поэтому с ними стоит познакомиться поближе.

  • em (например, font-size: 2em) используется для определения размера шрифта. Так "2em" означает, что заданный шрифт будет в два раза больше шрифта по умолчанию.
  • px (например, font-size: 12px) единица измерения - пиксели.
  • pt (например, font-size: 12pt) единица измерения – пункты.
  • % (например, font-size: 80%) единица измерения – проценты.

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

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

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

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

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