1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
|
---
language: css
contributors:
- ["Mohammad Valipour", "https://github.com/mvalipour"]
- ["Marco Scannadinari", "https://github.com/marcoms"]
- ["Geoffrey Liu", "https://github.com/g-liu"]
filename: learncss-ru.css
lang: ru-ru
---
В свои ранние дни веб состоял в основном из чистого текста. С развитием браузеров
веб-страницы с графическими элементами стали обычным делом.
CSS - язык, разграничивающий содержимое (HTML) и внешний вид веб-страниц.
Если коротко, то CSS предоставляет синтаксис, позволяющий выбирать различные
HTML элементы и определять их внешний вид.
Как и у других языков, у CSS много версий. Мы описываем CSS2.0 - не самую новую,
но самую поддерживаемую и распространенную версию.
**ВАЖНО:** Так как результатом применения CSS является изменение внешнего вида
элементов, постарайтесь использовать CSS-песочницы при изучении языка.
Например, [dabblet](http://dabblet.com/).
В данной статье рассматриваются в первую очередь синтаксис и общие рекомендации.
```css
/* Для комментариев используется слэш-астериск, как на этой строчке.
В CSS нет однострочных комментариев; все комментарии записываются таким способом */
/* ####################
## СЕЛЕКТОРЫ
#################### */
/* Выражения в CSS очень просты */
селектор { атрибут: значение; /* другие атрибуты...*/ }
/* селекторы используются для выбора элементов на странице
Чтобы выбрать все элементы, используйте астериск: */
* { color:red; }
/*
Если на странице присутствует такой элемент:
<div class='some-class class2' id='someId' attr='value' otherAttr='en-us foo bar' />
*/
/* его можно выбрать по одному классу */
.some-class { }
/* или по обоим классам */
.some-class.class2 { }
/* по названию тега */
div { }
/* по идентификатору */
#someId { }
/* по имеющемуся атрибуту */
[attr] { font-size:smaller; }
/* или по атрибуту с определенным значением */
[attr='value'] { font-size:smaller; }
/* можно выбрать атрибуты, начинающиеся с определенного значения (CSS3) */
[attr^='val'] { font-size:smaller; }
/* или заканчивающиеся определенным значением (CSS3) */
[attr$='ue'] { font-size:smaller; }
/* содержащие отделенное пробелами значение в названии атрибута (CSS3) */
[otherAttr~='foo'] { font-size:smaller; }
/* можно выбрать атрибут как с точным, так и со стоящим после значения “-” (U+002D) */
[otherAttr|='en'] { font-size:smaller; }
/* Более того, все это можно использовать вместе - между разными частями
не должно быть пробелов, иначе селектор будет иметь совершенно иное значение */
div.some-class[attr$='ue'] { }
/* Вы можете выбрать элемент по его родителю */
/* прямой потомок другого элемента (выбранного с помощью селектора) */
div.some-parent > .class-name {}
/* потомок любого родителя в дереве элементов
следующая строка означает: "любой элемент класса "class-name",
являющийся потомком div-элемента класса "some-parent"
НЕЗАВИСИМО ОТ УРОВНЯ ВЛОЖЕННОСТИ" */
div.some-parent .class-name {}
/* важно: этот же селектор без пробелов имеет иное значение
можете догадаться, какое? */
div.some-parent.class-name {}
/* вы можете выбрать элемент по первому предшествующему
родственному элементу */
.i-am-before + .this-element { }
/* или любому предшествующему родственнику перед элементом */
.i-am-any-before ~ .this-element {}
/* Существуют псевдоклассы, позволяющие изменять внешний вид элемента
в зависимости от событий, произошедших с элементом */
/* например, когда курсор наведен на элемент */
element:hover {}
/* когда пользователь проходил по ссылке ранее */
element:visited {}
/* или еще не проходил по ней */
element:link {}
/* выбранное поле ввода (input) */
element:focus {}
/* ####################
## АТРИБУТЫ
#################### */
selector {
/* Единицы измерения */
width: 50%; /* проценты */
font-size: 2em; /* умножается на высоту шрифта (2em - в два раза больше) */
width: 200px; /* пиксели */
font-size: 20pt; /* пункты */
width: 5cm; /* сантиметры */
min-width: 50mm; /* миллиметры */
max-width: 5in; /* дюймы */
height: 0.2vh; /* умножается на высоту окна браузера (CSS3) */
width: 0.4vw; /* умножается на ширину окна браузера (CSS3) */
min-height: 0.1vmin; /* наименьшее из vh и vw (CSS3) */
max-width: 0.3vmax; /* наибольшее из vh и vw (CSS3) */
/* Цвета */
background-color: #F6E; /* сокращенная запись шестнадцатеричного кода */
background-color: #F262E2; /* стандартная запись шестнадцатеричного кода */
background-color: tomato; /* название цвета */
background-color: rgb(255, 255, 255); /* цветовая модель rgb */
background-color: rgb(10%, 20%, 50%); /* цветовая модель rgb в процентах */
background-color: rgba(255, 0, 0, 0.3); /* цветовая модель rgb (последний аргумент отвечает за прозрачность цвета) (CSS3) */
background-color: transparent; /* прозрачный цвет */
background-color: hsl(0, 100%, 50%); /* в формате hsl (CSS3) */
background-color: hsla(0, 100%, 50%, 0.3); /* в формате hsl (последний аргумент отвечает за непрозрачность цвета) (CSS3) */
/* Изображения */
background-image: url(/path-to-image/image.jpg); /* кавычки внутри url() опциональны */
/* Шрифты */
font-family: Arial;
font-family: "Courier New"; /* если в названии есть пробелы, заключите его в кавычки */
font-family: "Courier New", Trebuchet, Arial, sans-serif; /* если шрифт не найден,
будет использован следующий за ним в списке */
}
```
## Использование
Сохраните готовый файл с расширением .css
```xml
<!-- добавьте css файл в тег <head> на странице: -->
<link rel='stylesheet' type='text/css' href='path/to/style.css' />
<!-- Можно использовать встроенные стили. Рекомендуется избегать подобного подхода. -->
<body>
<style>
a { color: purple; }
</style>
</body>
<!-- Можно установить стиль элемента напрямую.
Используйте этот способ только в случае крайней необходимости. -->
<div style="border: 1px solid red;">
</div>
```
## Приоритет
Как вы заметили, внешний вид элемента может определяться несколькими селекторами,
а значение атрибута элемента может быть установлено больше одного раза.
В подобных случаях одно из значений оказывается приоритетнее остальных.
Если взять следующую таблицу стилей:
```css
/*A*/
p.class1[attr='value']
/*B*/
p.class1 {}
/*C*/
p.class2 {}
/*D*/
p {}
/*E*/
p { property: value !important; }
```
и следующую разметку:
```xml
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>
```
Приоритет стилей будет таким:
Помните: приоритет выставляется для **атрибута**, а не для всего блока стилей.
* `E` имеет наивысший приоритет благодаря ключевому слову `!important`.
Используйте только в случае крайней необходимости.
* `F` идет следующим, так как является встроенным стилем.
* `A` следующий, как самый конкретизированный.
конкретизированный == большее количество определителей.
В этом примере 3 определителя: 1 тег `p` +
название класса `class1` + 1 атрибут `attr='value'`
* `C` следующий. Несмотря на одинаковое с `B` количество определителей,
`C` определен позже.
* Затем `B`
* И последний `D`.
## Совместимость
Несмотря на то, что большая часть функций CSS2 (а также CSS3) поддерживается всеми
браузерами и устройствами, не забывайте проверять совместимость CSS-правил
с современными браузерами.
[QuirksMode CSS](http://www.quirksmode.org/css/) замечательно подходит для этого.
To run a quick compatibility check, [CanIUse](http://caniuse.com) is a great resource.
## Ресурсы для самостоятельного изучения
* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
* [QuirksMode CSS](http://www.quirksmode.org/css/)
* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
|
