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

CSS или Cascading Style Sheets - это язык, используемый для управления визуальным представлением документов, написанных на языке разметки, включая HTML, XML, XHTML, SVG и XUL.

Визуальная презентация HTML изначально определялась атрибутами HTML, но HTML 4 не признавал эти атрибуты, поскольку CSS был введен для разделения контроля визуального представления из контента.

Основной CSS-документ состоит из наборов правил. Каждый набор правил начинается с селектора, шаблона, который соответствует элементам в документе HTML или XML, и за ним следует блок с нулевым или большим количеством объявлений свойств, которые определяют представление соответствующих элементов. Селектор квази-идентичен селектору, используемому Javascript .querySelectorAll. Например:

/* This is a comment */ 

a {                             /* Select all <a> elements (HTML links), */
    color: orange;              /* change their text color to orange, */
    background-color: pink;     /* their background color to pink, */
    text-decoration: none;      /* and remove text decorations like underlines. */
}

a:hover {                       /* Select all <a> elements which are currently being hovered over with the :hover pseudo-class*/
    color: red;                 /* change the color to red */
    text-decoration: underline; /* and add an underline again */
}

Простой пример выше также иллюстрирует каскадный элемент CSS. Когда вы наводите ссылку на ссылку (т. <a> Элемент <a>) на странице HTML с этой таблицей стилей, применяемой к ней, применяются оба правила. Из-за первого правила ссылка будет иметь розовый фон. Но, поскольку селектор a:hover более конкретный, его свойства color и text-decoration переопределяют свойства из <a> правил <a>.

Каскадный порядок определяет, как специфичность и другие факторы определяют, какое значение свойства применяется к элементу.


Селекторный приоритет и специфичность

Каждый компонент селектора CSS может быть основан на одном или нескольких из четырех возможных атрибутов элемента HTML:

  1. Идентификатор элемента (из атрибута id)
  2. Имя одного из классов элементов (в атрибуте class)
  3. Имя тега элемента
  4. Свойства элемента или их значения

Селекторы, использующие селектор идентификаторов, имеют более высокий приоритет, чем селекторы с именами классов, а селекторы, использующие имя класса, имеют более высокий приоритет, чем селекторы, использующие имена тегов. Это называется приоритетом выбора. !important аннотация может быть использована для переопределения приоритета выбора, путем добавления нормального объявления к важной декларации. Однако, когда это возможно, более высокая специфичность в рамках обычной декларации должна использоваться вместо того, чтобы создавать важную декларацию посредством !important аннотации, чтобы предотвратить переопределения любых других стилей, которые могут потребоваться добавить, особенно те, которые впоследствии с естественным приоритетом.

Например:

a {                 /* any anchor element */
    color: orange;
}

.class1 {           /* any element with class name class1 */
    color: red;
}    

#anchor1 {          /* the element with id anchor1 */
    color: green;
}
<!-- Creates an anchor with a class of class1 and an ID of anchor1 -->
<a class="class1" id="anchor1">Sample</a>

В приведенном выше примере цвет текста содержимого элемента <a>, строка "Образец", будет зеленым.

Повторяющиеся вхождения одного и того же селектора также повышают специфичность, как указано в Рекомендации по выбору W3C уровня 3.

.class1.class1 {    /* repeated class selector */
    font-weight: bold;
}

.class1 {
    font-weight: normal;
}

Здесь повторный селектор имеет более высокую специфичность, чем сингулярный селектор, а font-weight нашей строки образца будет выделен жирным шрифтом.

Согласно MDN,

Специфика в основном является мерой того, насколько конкретным является селектор, - сколько элементов он мог бы сопоставить. [...] селекторы элементов имеют низкую специфичность. Селекторы классов имеют более высокую специфичность, поэтому [классы] будут побеждать против селекторов элементов. Селекторы идентификаторов имеют еще более высокую специфичность, поэтому [ID] будут выигрывать против селекторов классов.

Сложные селекторы могут быть созданы путем объединения нескольких простых. Также возможно стилизовать элементы в зависимости от атрибута:

/* The first <a> element inside a <p> element that next to an <h3> element
   that a direct child of #sidebar matches this rule */
#sidebar > h3 + p a:first-of-type {
    border-bottom: 1px solid #333;
    font-style: italic;
}

/* Only <img> elements with the 'alt' attribute match this rule */
img[alt] {
    background-color: #F00;
}

Правило CSS специфика калькулятор доступен здесь. Это может помочь, когда проект имеет один или несколько больших файлов CSS.


наследование

Наследование - ключевая особенность CSS.

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

  • Свойства, которые наследуются по умолчанию, - это color, font, letter-spacing, line-height, list-style, text-align text-indent, text-indent, text-transform, visibility, white-space и word-spacing.
  • Свойства, которые обычно не унаследованы, это background, border, display, float и clear, height и width, margin, min/max-height/width, outline, overflow, padding, position, text-decoration, vertical-align и z-index.

Стоит отметить, что любое свойство может быть унаследован с помощью inherit значение свойства. Это следует использовать с осторожностью, однако, поскольку Internet Explorer (вплоть до версии 7) не поддерживает это ключевое слово. В качестве примера:

/* Set the color of <p> elements to a light blue */
p {
    color: #C0FFEE;
}

/* Set the color of #sidebar to a light red */
#sidebar {
    color: #C55;
}

/* <p> elements inside #sidebar inherit their parent color (#C55) */
#sidebar p {
    color: inherit;
}


/* You may also override inherited styles using the !important annotation */
#sidebar p:first-of-type {
    color: orange !important;
}

Важное замечание:

По вопросам, связанным с CSS, попробуйте продемонстрировать свой код воспроизводимым образом, используя либо Stack Exchange Stack Snippets, либо альтернативный онлайн-редактор, который позволяет запускать и использовать код, такой как JS Bin, JSFiddle или CodePen (хотя обязательно обязательно включайте соответствующий код в вопрос).


Рекомендации

Интерактивное учебное пособие

CSS Diner - интерактивная игра, чтобы узнать о селекторах CSS.

Видеоурок

  • CodeSchool CSS Screencast - Изучите основы и основополагающие элементы CSS с CSS-кросс-кантри

Псевдо-селектор CSS

Проверка

Поддержка браузера

Предварительные процессоры CSS

Пост-процессоры CSS

Сброс таблиц стилей

CSS-рамки

Фактическая версия

  • CSS3 (CSS3 является последним стандартом для CSS)

Будущее

В настоящее время поддержка браузеров очень мало (если есть), и они все еще находятся в процессе работы:

Общение

Чат о CSS (и HTML/DOM) с другими пользователями: