Описание тега css

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

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

Визуальное представление HTML изначально определялось атрибутами HTML, но в HTML 4 эти атрибуты не рекомендуются, так как CSS был введен для отделения управления визуальным представлением от содержимого. В октябре 1994 года Хокон Виум Ли впервые предложил каскадные таблицы стилей HTML, работая в ЦЕРН с сэром Тимом Бернерсом-Ли, который разрабатывал веб-браузер и изобретал 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:

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

Селекторы, использующие селектор ID, имеют более высокий приоритет, чем селекторы, использующие имена классов, а селекторы, использующие имя класса, имеют более высокий приоритет, чем селекторы, использующие имена тегов. Это называется приоритетом селектора. В!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> Элемент, строка "Образец", станет зеленым.

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

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

.class1 {
    font-weight: normal;
}

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

Согласно MDN,

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

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

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

Ссылки

Интерактивное руководство

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

Видеоурок

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

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

Проверка

Соглашения и методики присвоения имен: лампочка:

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

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

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

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

CSS-фреймворки css-фреймворки

Будущее

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

Чат

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

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

css-animations css-calc css-content css-filters css-float css-grid css-modules css-multicolumn-layout css-position css-preprocessor css-selectors css-shape css-specificity css-sprites css-tables css-transforms css-переходы css-переменные