"54.235.4.196 - 54.235.4.196"

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

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

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

Базовый документ CSS состоит из наборов правил. Каждый набор правил начинается с селектора, шаблона, который соответствует элементам в документе HTML или XML, и сопровождается блоком из нуля или более объявлений свойств, которые определяют представление соответствующих элементов. Селектор .querySelectorAll идентичен селектору, используемому 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 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,

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

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

/* 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-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, попробуйте продемонстрировать свой код воспроизводимым способом, используя либо фрагменты стека Exchange Stack, либо, альтернативно, любой онлайн-редактор, который позволяет запускать и делиться кодом, таким как JS Bin, JSFiddle или CodePen (хотя обязательно всегда включайте соответствующий код в вопрос).


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

Интерактивный учебник

CSS Diner - интерактивная игра для изучения CSS-селекторов.

Видеоурок

  • CodeSchool CSS Screencast - Изучите основы и основные элементы CSS с помощью CSS Cross-Country

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

Проверка

Соглашения и методологии именования: bulb:

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

CSS препроцессоры

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

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

CSS рамки

Актуальная версия

  • CSS3 (CSS3 - новейший стандарт для CSS)

Будущее

Следующие в настоящее время имеют очень небольшую (если есть) поддержку браузера и все еще находятся в стадии разработки:

Комната чата

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


Связанные теги для определенных функций

]