Merge pull request #1128 from jackunion/css/ru

[css/ru]

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)