diff options
Diffstat (limited to 'ru-ru/css-ru.html.markdown')
| -rw-r--r-- | ru-ru/css-ru.html.markdown | 250 |
1 files changed, 250 insertions, 0 deletions
diff --git a/ru-ru/css-ru.html.markdown b/ru-ru/css-ru.html.markdown new file mode 100644 index 00000000..2e2d40b7 --- /dev/null +++ b/ru-ru/css-ru.html.markdown @@ -0,0 +1,250 @@ +--- +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) |