CSS для Початківців

Керівництво для початківців по CSS

Ієрархія селекторів

Русский перевод: Иерархия селекторов

Групування

Коми, які поділяють селектори, дозволяють «розділяти» декларації між селекторами. Правило, яке продемонстровано нижче, вказує, що всі елементи i, елементи класу warning і елементи з ідентифікатором id="important" будуть підкреслені.

i, .warning, #important {
  text-decoration: underline;
}

Ієрархія селекторів

Якщо правила конфліктують:

  • Правило з більш специфічним селектором йде першим
  • Якщо два селектора мають однаковий рівень специфічності, правило, яке вказано пізніше в документі, йде першим

Як визначається специфічність селектора

Припустимо, ваші селектори об’єднані в наступному порядку і ті, що нагорі мають найвищий рівень специфічності:

  1. Декларації в атрибутах стилю йдуть без селектора і володіють найвищим пріоритетом
  2. Селектори з атрибутом ідентифікатора id є наступними по важливості
  3. Селектори з іншими атрибутами або псевдокласи розміщуються наступними
  4. Селектори без інших атрибутів крім імені елемента займають наступну сходинку
  5. Універсальний селектор * володіє найменшим пріоритетом

Для точного визначення специфічності слід виконати наступний процес:

  • Почніть зі значення 0.0.0.0
  • Якщо декларація в атрибуті стилю – перша цифра = 1
  • За кожний id додайте 1 до другої цифри
  • За кожний атрибут або псевдоклас додайте 1 до третьої цифри
  • За кожний елемент додайте 1 до четвертої цифри

Порівняння специфічності йде зліва направо: більше число – більш специфічне.

Каскад

Правила стилю можуть визначатися веб-дизайнерами в трьох різних місцях:

  • У запровадженому стилі
  • У зовнішній таблиці стилів
  • У рядку елемента

Впроваджені таблиці стилів

Можуть бути виявлені у верхній частині HTML-сторінки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded Style Sheet</title>
<style type="text/css">
.warning {color:#ff0000}
h1.warning {text-decoration:underline}
p.warning {font-weight:bold}
</style>
</head>
<body>
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>
</body>
</html>

← Відносне позиціонування