mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-28 19:58:51 +00:00
251 lines
11 KiB
Markdown
251 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)
|