learnxinyminutes-docs/css.md at 912da583da39774e06731db39b046529e20ffa71

В свои ранние дни веб состоял в основном из чистого текста. С развитием браузеров веб-страницы с графическими элементами стали обычным делом. CSS - язык, разграничивающий содержимое (HTML) и внешний вид веб-страниц.

Если коротко, то CSS предоставляет синтаксис, позволяющий выбирать различные HTML элементы и определять их внешний вид.

Как и у других языков, у CSS много версий. Мы описываем CSS2.0 - не самую новую, но самую поддерживаемую и распространенную версию.

ВАЖНО: Так как результатом применения CSS является изменение внешнего вида элементов, постарайтесь использовать CSS-песочницы при изучении языка. Например, dabblet. В данной статье рассматриваются в первую очередь синтаксис и общие рекомендации.

/* Для комментариев используется слэш-астериск, как на этой строчке.
   В 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

<!-- добавьте 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>

Приоритет

Как вы заметили, внешний вид элемента может определяться несколькими селекторами, а значение атрибута элемента может быть установлено больше одного раза. В подобных случаях одно из значений оказывается приоритетнее остальных.

Если взять следующую таблицу стилей:

/*A*/
p.class1[attr='value']

/*B*/
p.class1 {}

/*C*/
p.class2 {}

/*D*/
p {}

/*E*/
p { property: value !important; }

и следующую разметку:

<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 замечательно подходит для этого.

To run a quick compatibility check, CanIUse is a great resource.

11 KiB Raw Blame History Unescape Escape

Использование

Приоритет

Совместимость

Ресурсы для самостоятельного изучения

11 KiB

Raw Blame History