mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 17:41:41 +00:00
Adam Bard
commit
0d5e0a1840
250
ru-ru/css-ru.html.markdown
Normal file
250
ru-ru/css-ru.html.markdown
Normal file
@ -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)
|
||||
Loading…
Reference in New Issue
Block a user