Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. Спецификация таблиц стилей CSS

Спецификация таблиц стилей CSS

Спецификация css

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

Кроме floats и positions, специфика может стать одной из самых трудных вещей к которой нужно привыкнуть, не говоря уже о доскональном ее изучении. Селекторы, которые вы используете в CSS имеют разный вес и контролируются спецификой. Вот почему иногда, когда вы применяете правило к элементу, оно не отображается в вашем дизайне. Поэтому если вы часто пользуетесь известным хаком !important – эта статья для вас!

Как браузер читает CSS

Разберемся в азах чтения CSS различными браузерами. Во-первых, браузер читает стили сверху вниз:

/*Line 10*/
ul li a {
color: red;
}

/*Line 90*/
ul li a {
color: blue;
}

Правило, которое вы указали в строке 10 будет переопределено(overridden) и ссылка станет синего цвета, потому что браузер будет использовать то правило, которое находится ниже в таблице стилей и имеет больший приоритет.

Это также работает с фактическим порядком в котором были импортированы файлы CSS, например:

<link href='css/style.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>

Так как вы разместили custom.css после style.css все, что вы будете писать в style.css переопределится и заменится на стили custom.css. Этот метод часто используется создателями темплейтов, что дает пользователю возможность добавлять свои собственные стили без изменения основного файла. (Заметим, что custom.css не заменяет style.css полностью, а только те правила которые находятся в обоих таблицах стилей и были переопределены)

Специфика таблиц стилей

Все, что было указано выше, применяется только в том случае, если вы используете одинаковый вес на каждом селекторе. Если вы указали идентификаторы, классы или элементы, то вы даете им вес, а это и есть специфика таблиц стилей.

Есть четыре категории, которые определяют уровень специфики селектора: встроенные стили (это те, которые иногда использует JavaScript), ID, классы и элементы. Как измерить специфику? Специфика измеряется в очках/баллах:

  • ID – 100 баллов
  • Классы – 10 баллов
  • Элементы – 1 балл

Зная об этом, если вы используете селектор следующим образом:

#content .sidebar .module li a

Его общий вес составит 122 балла (100 + 10 + 10 + 1 +1), которым является ID, два класса и два элемента.

Что нужно помнить:

  • ID имеют слишком большой вес по сравнению с классами и элементами, поэтому вы должны ограничить использование ID в ваших стилях до минимума.
  • В случаях, когда селекторы имеют одинаковый вес, порядок их отображения будет в обратном направлении – снизу вверх.
  • Стили встроенные в HTML стилизуются в таблицах стилей, потому что они ближе к элементу.
  • Единственный способ чтобы переопределить встроенные стили, это использовать !important заявления.
  • Псевдо-классы и атрибуты имеют тот же вес, что и обычные классы.
  • Псевдо-элементы имеют такой же вес, как нормальный элемент.
  • Универсальный селектор (*) не имеет никакого веса.

Примеры

ul li a {
color: red;
}

Этот селектор будет держать вес 3, что означает, что только путем добавления класса в другом месте, вы сможете его заменить.

.content #sidebar {
width: 30%;
}

Вес этого селектора составляет 110 баллов, в основном из-за ID, который добавляет 100 баллов.

.post p:first-letter {
font-size: 16px;
}

Вес этого селектора составляет 12 баллов, так как псевдо-элемент :first-letter и «р» тэг весят по 1му баллу.

p {
font-family: Helvetica, arial, sans-serif;
}

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

Всегда имейте в виду, что для переопределения ID селектора, вы должны написать 256 классов для одного элемента, например:

#title {
font-weight: bold;
}

.home .page .content .main .posts .post .post-content .headline-area .wrapper 
/* ... etc. ... */ .title {
 font-weight: normal;
}

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

Высоких конверсий!

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2025 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Центр рекламных бюджетов". ИНН:5902052888, КПП:590201001, ОГРН: 1195958009730, Пермь, ул. Окулова, д. 75 к. 8 офис 501Б

ООО «Центр рекламных бюджетов» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний