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

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

Визуальное представление HTML изначально определялось атрибутами HTML, но в HTML 4 эти атрибуты устарели, так как CSS был введен для отделения контроля визуального представления от контента. В октябре 1994 года Хокон Вьюм Ливпервые предложил Каскадные таблицы стилей HTMLво время работы в CERN с сэром Тимом Бернерсом-Ли, который разрабатывал веб-браузер и изобретал HTML.

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

/* 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>) в HTML-странице, к которой применена эта таблица стилей, применяются оба правила. Из-за первого правила ссылка будет иметь розовый фон. Но, поскольку селектор a:hoverболее специфичен, его свойства color и text-decoration переопределяют свойства из набора <a> правил.

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


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

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

  1. ID элемента (из атрибута 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>, строка «Образец», будет зеленым.

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

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

.class1 {
    font-weight: normal;
}

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

Согласно MDN,

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

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

/* The first <a> element inside a <p> element that's next to an <h3> element
   that's 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, { {X7}}, visibility, white-space и word-spacing.
  • Свойства, которые обычно не наследуются: background, border, display, float и clear, height и width, margin, min / max-height / width, outline, overflow, padding, position, {{ X15}}, 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's 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 Snippets Stack Exchangeили любой другой онлайн-редактор, который позволяет запускать и делиться кодом, таким как JS Bin, JSFiddleили CodePen(хотя обязательно включайте в вопрос соответствующий код).


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

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

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

Видеоурок

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

Проверка

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

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

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

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

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

CSS Framework css-frameworks

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

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

Будущее

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

Комната чата

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


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

css-animationscss-calccss-contentcss-filterscss-floatcss-gridcss-modulescss-multicolumn-layoutcss-positioncss-preprocessorcss-selectorscss-shapescss-specificitycss-spritescss-tablescss-transformscss-transitionscss-variables