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

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

У каждого селектора есть свойства, которые находятся внутри фигурных скобок. Примеры свойств: color, font-weight, background-color.

За свойством следует знак двоеточия (не путайте со знаком равенства), а затем указывается значение этого свойства. Несколько свойств разделяются между собой точкой с запятой (;):

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

Этот код устанавливает значения для свойств font-size и color селектора <body>. В нашем случае, стиль, примененный к HTML-документу, приведет к тому, что текст страницы (размещенный между тегами body) будет темно-синего цвета и размера 0,8 em.

Длина и проценты

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

em (например, font-size: 2em) – единица измерения, которая определяет вычисляемый размер шрифта. Например, 2em указывает на то, что размер должен быть в два раза больше величины текущего шрифта.
px (например, font-size: 12px) — единица измерения в пикселях.
pt (например, font-size: 12pt) — типографский пункт (1/72 дюйма, приблизительно 0,35 мм).
% (например, font-size: 80%) – единица измерения в процентах.
Среди других единиц измерения можно отметить pc (пика = 4.512мм), cm (сантиметры), mm (миллиметры) и in (дюймы).

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

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

← Float и Clear | Цвета →