Каскадные таблицы стилей (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; }
То при наведении курсора на ссылку, она будет зеленеть.
Возможные модификаторы (или, как их ещё называют, «псевдоклассы») элементов:
- поддерживаемые всеми без исключениями браузерами:
- link — если этот элемент — ссылка
- visited — если этот элемент — посещённая ссылка
- active — если этот элемент — активная ссылка
- focus — если в этом элементе (или на нём) фокус ввода
- поддерживаемые нормально всеми браузерами, кроме Internet Explorer:
- hover — при наведении курсора мыши (в старый версиях IE работает только для ссылок)
- first-child — первый элемент из лежащих в родительском элементе
- last-child — последний элемент из лежащих в родительском элементе
- first-line — для первой строки текста в элементе
- first-letter — для первой буквы текста в элементе
- before — пустое место перед элементом
- after — пустое место после элемента
- lang(...) — только если документ написан на определённом языке (указывается в скобках) — обычно не используется
- поддерживаемые не всеми браузерами, или поддерживаемые криво и косо:
- 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 размер шрифта на экране будет казаться нормально размера, а при печати страницы может оказаться очень мелким.
Комментариев нет:
Отправить комментарий
Ублюдочный Гугл поломал форму комментариев. Извините.
Примечание. Отправлять комментарии могут только участники этого блога.