mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 17:41:41 +00:00
248 lines
11 KiB
Markdown
248 lines
11 KiB
Markdown
---
|
||
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)
|