css.md

В свои ранние дни веб состоял в основном из чистого текста. С развитием браузеров веб-страницы с графическими элементами стали обычным делом. CSS - язык, разграничивающий содержимое (HTML) и внешний вид веб-страниц.

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

Как и у других языков, у CSS много версий. Мы описываем CSS2.0 - не самую новую, но самую поддерживаемую и распространенную версию.

ВАЖНО: Так как результатом применения CSS является изменение внешнего вида элементов, постарайтесь использовать CSS-песочницы при изучении языка. Например, dabblet. В данной статье рассматриваются в первую очередь синтаксис и общие рекомендации.

  1/* Для комментариев используется слэш-астериск, как на этой строчке.
  2   В CSS нет однострочных комментариев; все комментарии записываются таким способом */
  3
  4/* ####################
  5   ## СЕЛЕКТОРЫ
  6   #################### */
  7
  8/* Выражения в CSS очень просты */
  9селектор { атрибут: значение; /* другие атрибуты...*/ }
 10
 11/* селекторы используются для выбора элементов на странице
 12
 13Чтобы выбрать все элементы, используйте астериск: */
 14* { color:red; }
 15
 16/*
 17Если на странице присутствует такой элемент:
 18
 19<div class='some-class class2' id='someId' attr='value' otherAttr='en-us foo bar' />
 20*/
 21
 22/* его можно выбрать по одному классу */
 23.some-class { }
 24
 25/* или по обоим классам */
 26.some-class.class2 { }
 27
 28/* по названию тега */
 29div { }
 30
 31/* по идентификатору */
 32#someId { }
 33
 34/* по имеющемуся атрибуту */
 35[attr] { font-size:smaller; }
 36
 37/* или по атрибуту с определенным значением */
 38[attr='value'] { font-size:smaller; }
 39
 40/* можно выбрать атрибуты, начинающиеся с определенного значения (CSS3) */
 41[attr^='val'] { font-size:smaller; }
 42
 43/* или заканчивающиеся определенным значением (CSS3) */
 44[attr$='ue'] { font-size:smaller; }
 45
 46/* содержащие отделенное пробелами значение в названии атрибута (CSS3)  */
 47[otherAttr~='foo'] { font-size:smaller; }
 48
 49/* можно выбрать атрибут как с точным, так и со стоящим после значения “-” (U+002D) */
 50[otherAttr|='en'] { font-size:smaller; }
 51
 52
 53/* Более того, все это можно использовать вместе - между разными частями
 54не должно быть пробелов, иначе селектор будет иметь совершенно иное значение  */
 55div.some-class[attr$='ue'] { }
 56
 57/* Вы можете выбрать элемент по его родителю */
 58
 59/* прямой потомок другого элемента (выбранного с помощью селектора) */
 60div.some-parent > .class-name {}
 61
 62/* потомок любого родителя в дереве элементов
 63   следующая строка означает: "любой элемент класса "class-name",
 64   являющийся потомком div-элемента класса "some-parent"
 65   НЕЗАВИСИМО ОТ УРОВНЯ ВЛОЖЕННОСТИ" */
 66div.some-parent .class-name {}
 67
 68/* важно: этот же селектор без пробелов имеет иное значение
 69   можете догадаться, какое? */
 70div.some-parent.class-name {}
 71
 72/* вы можете выбрать элемент по первому предшествующему
 73   родственному элементу */
 74.i-am-before + .this-element { }
 75
 76/* или любому предшествующему родственнику перед элементом */
 77.i-am-any-before ~ .this-element {}
 78
 79
 80/* Существуют псевдоклассы, позволяющие изменять внешний вид элемента
 81   в зависимости от событий, произошедших с элементом */
 82
 83/* например, когда курсор наведен на элемент */
 84element:hover {}
 85
 86/* когда пользователь проходил по ссылке ранее */
 87element:visited {}
 88
 89/* или еще не проходил по ней */
 90element:link {}
 91
 92/* выбранное поле ввода (input) */
 93element:focus {}
 94
 95
 96/* ####################
 97   ## АТРИБУТЫ
 98   #################### */
 99
100selector {
101    
102    /* Единицы измерения */
103    width: 50%; /* проценты */
104    font-size: 2em; /* умножается на высоту шрифта (2em - в два раза больше) */
105    width: 200px; /* пиксели */
106    font-size: 20pt; /* пункты */
107    width: 5cm; /* сантиметры */
108    min-width: 50mm; /* миллиметры */
109    max-width: 5in; /* дюймы */
110    height: 0.2vh; /* умножается на высоту окна браузера (CSS3) */
111    width: 0.4vw; /* умножается на ширину окна браузера (CSS3) */
112    min-height: 0.1vmin; /* наименьшее из vh и vw (CSS3) */
113    max-width: 0.3vmax; /* наибольшее из vh и vw (CSS3) */
114    
115    /* Цвета */
116    background-color: #F6E;  /* сокращенная запись шестнадцатеричного кода */
117    background-color: #F262E2; /* стандартная запись шестнадцатеричного кода */
118    background-color: tomato; /* название цвета */
119    background-color: rgb(255, 255, 255); /* цветовая модель rgb */
120    background-color: rgb(10%, 20%, 50%); /* цветовая модель rgb в процентах */
121    background-color: rgba(255, 0, 0, 0.3); /* цветовая модель rgb (последний аргумент отвечает за прозрачность цвета) (CSS3) */
122    background-color: transparent; /* прозрачный цвет */
123    background-color: hsl(0, 100%, 50%); /* в формате hsl (CSS3) */
124    background-color: hsla(0, 100%, 50%, 0.3); /* в формате hsl (последний аргумент отвечает за непрозрачность цвета) (CSS3) */
125
126    
127    /* Изображения */
128    background-image: url(/path-to-image/image.jpg); /* кавычки внутри url() опциональны */
129    
130    /* Шрифты */
131    font-family: Arial;
132    font-family: "Courier New"; /* если в названии есть пробелы, заключите его в кавычки */
133    font-family: "Courier New", Trebuchet, Arial, sans-serif; /* если шрифт не найден,
134                             будет использован следующий за ним в списке */
135}

Использование ¶

Сохраните готовый файл с расширением .css

 1<!-- добавьте css файл в тег <head> на странице: -->
 2<link rel='stylesheet' type='text/css' href='path/to/style.css' />
 3
 4<!-- Можно использовать встроенные стили. Рекомендуется избегать подобного подхода. -->
 5<body>
 6  <style>
 7     a { color: purple; }
 8  </style>
 9</body>
10
11<!-- Можно установить стиль элемента напрямую.
12Используйте этот способ только в случае крайней необходимости. -->
13<div style="border: 1px solid red;">
14</div>

Приоритет ¶

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

Если взять следующую таблицу стилей:

 1/*A*/
 2p.class1[attr='value']
 3
 4/*B*/
 5p.class1 {}
 6
 7/*C*/
 8p.class2 {}
 9
10/*D*/
11p {}
12
13/*E*/
14p { property: value !important; }

и следующую разметку:

1<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
2</p>

Приоритет стилей будет таким: Помните: приоритет выставляется для атрибута, а не для всего блока стилей.

E имеет наивысший приоритет благодаря ключевому слову !important. Используйте только в случае крайней необходимости.
F идет следующим, так как является встроенным стилем.
A следующий, как самый конкретизированный.
конкретизированный == большее количество определителей. В этом примере 3 определителя: 1 тег p +
название класса class1 + 1 атрибут attr='value'
C следующий. Несмотря на одинаковое с B количество определителей, C определен позже.
Затем B
И последний D.

Совместимость ¶

Несмотря на то, что большая часть функций CSS2 (а также CSS3) поддерживается всеми браузерами и устройствами, не забывайте проверять совместимость CSS-правил с современными браузерами.

QuirksMode CSS замечательно подходит для этого.

To run a quick compatibility check, CanIUse is a great resource.

Использование ¶

Приоритет ¶

Совместимость ¶

Ресурсы для самостоятельного изучения ¶