---
contributors:
    - ["Mohammad Valipour", "https://github.com/mvalipour"]
    - ["Marco Scannadinari", "https://github.com/marcoms"]
    - ["Geoffrey Liu", "https://github.com/g-liu"]
filename: learncss-ru.css
---

В свои ранние дни веб состоял в основном из чистого текста. С развитием браузеров
веб-страницы с графическими элементами стали обычным делом.
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)