Введение в CSS часть 1

Каскадные таблицы стилей (CSS)

Хорошим тоном веб-программирования вообще и вёрстки в частности является разнесение стилей и собственно HTML-вёрстки в разные места (в разные файлы). HTML-вёрстка в чистом виде описывает структуру документа, а как документ выглядит — описывается стилями. Есть ещё третья составляющая, описывающая то, как документ себя ведёт — это джаваскрипты. Сейчас речь пойдёт о стилях.

Структура CSS-файла очень проста. Он весь состоит из таких блоков:

element {
 property: value;
 property: value;
 ...
}

Здесь element — это определение элемента, к которому относится данный стиль. Сам стиль записывается в фигурных скобках. Можно писать его в одну строчку, можно писать так, как в примере, фигурную скобку можно переносить на следующую строчку — без разницы. Внутри фигурных скобок идут наборы property: value; - где property это название CSS-свойства, а value — значение. Точка с запятой обязательна.

Селекторы

Для того, чтоб указать, к какому элементу применяются стили, вместо слова «element» пишется селектор. Самый простой селектор — это имя тэга. Например:

div {
 color: black;
}

Это правило применяется ко всем без исключения элементам div и делает в них цвет текста чёрным. Селектор класса начинается с точки — это наиболее часто используемый селектор. Например:

.hidden {
 display: none;
}

Это правило применяется ко всем элементам, у которых в свойстве class есть hidden. Причём класс может быть не обязательно одним, можно написать <span class="hidden styled"></span>, и к этому элементу будут применяться стили как для класса «.hidden», так и для класса «.styled». Если необходимо написать такой селектор, чтоб стиль применялся только к элементам, у которых есть и класс «hidden», и класс «styled», то в селекторе имена классов записывают через точку без пробела. Например:

li.c1.c2.c3 { ... }

Этот стиль будет применяться только к элементам <li>, у которых указаны и класс «c1», и класс «c2», и класс «c3» одновременно. Существует ещё селектор по свойству id элемента, для этого в начале селектора пишут решётку #. Например:

#leftBlock {
 color: red;
}

Это правило применится к элементу с id="leftBlock" (или к нескольким элементам, если их вдруг окажется несколько) и сделает текст красного цвета.

Но самая сила CSS в комбинировании селекторов. Если написать два селектора подряд, то правило стилей применится следующим образом: сначала будут найдены все элементы по первому селектору, а затем вложенные в них элементы по второму селектору. Поясню на примерах:

div ul { ... }

Это правило применится только к элементам ul, лежащим внутри элементов div.

.left ul li { ... }

Это правило будет применяться только к элементам <li>, лежащим внутри <ul>, которые лежат внутри элементов с классом «left».

.outerBox .innerBox span .dashed { ... }

Это правило применится только к элементам, имеющим класс «dashed», лежащим внутри элементов span, лежащих внутри элементов с классом «innerBox», лежащим внутри элементов «outerBox». К всем прочим элементам с классом «dashed» это правило применено не будет. Если нужно применить стиль только к непосредственно вложенным тегам, то используют символ >, например:

Кусок HTML-вёрстки:

<div>
 <span>1</span>
 <strong><span>2</span></strong>
</div>

Кусок CSS:

div>span { ... }

Это правило будет применено только к первому элементу <span>, потому что он вложен непосредственно в элемент <div>, а второй <span> - вложен в <strong>. Если надо задать стиль элементу, который расположен сразу после какого-то другого, то используют символ +, например:

span+.after { ... }

Это правило применится только к элементам с классом «after», которые расположены сразу после элементов <span>. Редко используются (так как полностью не поддерживаются некоторыми старыми браузерами) селекторы, обращающие внимание на другие свойства элементов, а не только на класс и id:

element[attribute="value"] { ... }

Применяется для всех элементов element, у которых свойство «attribute» равно «value». В частности, наиболее часто такой селектор употребляется для задания стилей тэгу <input>. Этот тэг может выглядеть как чекбокс, как радиокнопка, как обычная кнопка, как поле ввода — для того, чтоб задать стиль только одной его разновидности, применяют следующий вариант (для примера):

input[type="text"] { border: 1px solid silver; }

Этот стиль задаст сплошную границу толщиной в 1 пиксель светло-серого цвета для элементов <input>, выглядящих как поле ввода. Кроме того, существует, но практически не применяется, вариант, выглядящий так:

element[attribute~="value"]

Для тех случаев, когда значение атрибута может состоять из нескольких слов, и нужно совпадение не со всем его значением целиком, а только с одним словом.

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

Есть кусок HTML-вёрстки:

<div>
 <a href="#">link</a>
 <ul>
  <li><a href="#">link in list-item</a></li>
 </ul>
</div>

К нему применяются правила из следующего файла CSS:

a { color: red; }
li a { color: black; }

Первая ссылка, в которой текст «link», станет красного цвета, так как к ней применимо только одно правило, первое. Но ко второй ссылке применимы оба правила. Первое, более общее, которое задаёт красный цвет текста всем элементам <a> без исключения, и второе, которое задаёт чёрный цвет текста элементам <a>, которые лежат внутри <li>. Так как второе правило более «узкое», то будет применено оно. Селектор, содержащий имя класса, считается более узким, чем селектор просто с тэгом. Селектор по id элемента считается ещё более узким. То есть:

Есть HTML-вёрстка:

<span>1</span>
<span class="myspan">2</span>
<span class="myspan" id="s2">3</span>

Есть набор стилей:

span { color: blue; }
.myspan { color: green; }
#s2 { color: red; }

В этом примере единица будет синей, двойка — зелёной, тройка — красной. Более высоким приоритетом, по сравнению с обычными, пользуются селекторы, к которым применяются модификаторы. На самом деле приоритеты селекторов достаточно сложно вычисляются, в спецификации написано следующее:

• Наивысшим приоритетом пользуются стили, описанный прямо в самом элементе в свойстве style.
• Затем следуют селекторы по id элемента. Чем больше id элементов, вложенных друг в друга, перечислено в селекторе, тем он считается более узким и обладает большим приоритетом.
• Затем следуют селекторы по классам и псевдоклассам (модификаторам). Чем больше названий классов в селекторе, тем большим приоритетом он обладает.
• Ну и наименьший приоритет у обычных селекторов по названиям элементов.

Модификаторы селекторов

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

a:hover { ... }

Здесь «hover» - это модификатор. Это свойство будет применяться не ко всем элементам <a>, а только к тем, которые попадают под действие этого модификатора. «hover» - это движение курсора по элементу. То есть если написать:

a:hover { color: green; }

То при наведении курсора на ссылку, она будет зеленеть.

Возможные модификаторы (или, как их ещё называют, «псевдоклассы») элементов:

1. поддерживаемые всеми без исключениями браузерами:
   • link — если этот элемент — ссылка
   • visited — если этот элемент — посещённая ссылка
   • active — если этот элемент — активная ссылка
   • focus — если в этом элементе (или на нём) фокус ввода
2. поддерживаемые нормально всеми браузерами, кроме Internet Explorer:
   • hover — при наведении курсора мыши (в старый версиях IE работает только для ссылок)
   • first-child — первый элемент из лежащих в родительском элементе
   • last-child — последний элемент из лежащих в родительском элементе
   • first-line — для первой строки текста в элементе
   • first-letter — для первой буквы текста в элементе
   • before — пустое место перед элементом
   • after — пустое место после элемента
   • lang(...) — только если документ написан на определённом языке (указывается в скобках) — обычно не используется
3. поддерживаемые не всеми браузерами, или поддерживаемые криво и косо:
   • root — если тэг самый внешний в документе (в нём содержатся все остальные)
   • nth-child(n) — каждый n-ный элемент из лежащих в родительском
   • nth-last-child(n) — каждый n-ный элемент из лежащих в родительском, считая с конца
   • first-of-type — первый элемент из набора одинаковых
   • last-of-type — последний элемент из набора одинаковых
   • only-child — если элемент единственный вложенный в своём родительском
   • only-of-type — если элемент единственный своего типа из вложенных в своём родительском
   • empty — если элемент пуст
   • target — если ссылка имеет свойство name, равное хэшу ссылки (является целью ссылки на открытую в браузере страницу)
   • enabled — элемент активен (касается элементов форм)
   • disabled — элемент неактивен (касается элементов форм)
   • checked — элемент отмечен (касается чекбоксов и радиокнопок)
   • not(e) — если элемент не является селектором e

Все модификаторы можно комбинировать, записывая подряд друг за другом без пробела. Например,

p:first-line:hover { ... }

Правило применяется к первой строке текста при наведении на неё курсора.

Свойства (атрибуты) стиля могут иметь значения в виде строк (кусков текста), как, например, путь к картинке или название шрифта, а могут иметь значения в виде линейного размера (длины). Например:

span { font-size: 12pt; }

12pt — это размер в 12 поинтов. Единиц измерения длины в CSS предостаточно:

• px — пиксель,
• pt — поинт, 1/72 часть дюйма,
• pc — 12 поинтов,
• in — дюйм,
• cm — сантиметр,
• mm — миллиметр,
• % - процент (обычно от аналогичного размера родительского элемента),
• em — размер текущего шрифта (то есть если задать размер шрифта 12px, то 1em будет равен 12px, если задать размер шрифта в 6mm, то 1em будет равен 6mm),
• ex -обычно никогда не используемое свойство, x-height текущего шрифта, обычно примерно равна половине его высоты.

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