css, подробная информация

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

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

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

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

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

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

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

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

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

Например:

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

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

/* the element with id anchor1 */
#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(хотя обязательно включайте в вопрос соответствующий код).

Ссылки

Справочник по Википедии
W3C CSS2.1 Спецификация
Спецификация селекторов W3C CSS3
Спецификация W3C CSS3 Media Queries
Домашняя страница каскадных таблиц стилей W3C
Way2Tutorial CSS Tutorial
Ссылка на SitePoint CSS
HTML Dog: учебники по HTML и CSS
Каскадные таблицы стилей в учебной программе по веб-стандартам
30 селекторов CSS, которые вы должны запомнить
Руководство по доступности веб-контента W3C
DevDocs - Сервис поиска документации
Учебные пособия по CSS для W3Schools
Изучите CSS макеты
Демонстрация всей комбинации селекторов CSS от w3schools
CSS-хитрости Альманах - список всех селекторов CSS с примером и объяснением
Сеть разработки Mozilla - CSS - содержит справочник по CSS, учебные пособия, демонстрационные материалы по CSS3 и ссылки на инструменты разработки

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

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

Видеоурок

Скринкаст CSS CodeSchool- изучите основы и основные элементы CSS с помощью CSS Cross-Country

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

Проверка

Соглашения об именах и методологии

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

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

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

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

CSS Framework css-frameworks

Будущее

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

Комната чата

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

HTML / CSS / DOM и веб-дизайн

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

css-animations css-calc css-content css-filters css-float css-grid css-modules css-multicolumn-layout css-position css-preprocessor css-selectors css-shapes css-specificity css-sprites css-tables css-transforms css-transitions css-variables

css