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

Групування

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

 

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

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

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

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

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

1. Декларації в атрибутах стилю йдуть без селектора і володіють найвищим пріоритетом
2. Селектори з атрибутом ідентифікатора id (наприклад, h1 # foo ) є наступними по важливості в ієрархії
3. Селектори з іншими атрибутами (наприклад, h1.foo і a [target]) або псевдокласи (наприклад, a: hover) розміщуються наступними в ієрархії найбільш важливих
4. Селектори без інших атрибутів крім імені елемента (наприклад, h1) займають наступну сходинку в ієрархії найбільш важливих
5. Універсальний селектор (*) володіє найменшим пріоритетом

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

1. Почніть зі значення 0.0.0.0
2. Якщо ви знайдете декларацію в атрибуті стилю, ви повинні змінити першу цифру на 1, що дасть вам 1.0.0.0. Тоді ви отримуєте найвище значення специфічності і необхідності в подальших розрахунках немає
3. Кожного разу, коли настає умова 2, додайте 1 до другої цифри. Наприклад, для ol # foo li # bar додайте 2 (1 за кожний id), що дає вам 0.2.0.0
4. Кожного разу як ви стикаєтеся з третім випадком, додайте одиницю до третьої цифри. Наприклад, для ol # foo li # bar a [target] додайте 1, що дає вам 0.2.1.0.
5. Кожного разу, коли виконується умова 4, додайте 1 до четвертої цифрі. Наприклад, для ol # foo li # bar a [target] додайте 3 (по одному за кожне ім’я елемента), що дає нам 0.2.1.3

Коли ви порівнюєте специфічність двох селекторів, почніть з найбільших цифр ліворуч. Число, яке більше іншого, буде більш специфічним. Якщо вони рівні, йдіть далі і порівнюйте наступні цифри.

Каскад

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

1. У запровадженому стилі
2. У зовнішній таблиці стилів (на яку посилається HTML-файл або яка імпортується)
3. У рядку елемента

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

Впроваджені таблиці стилів можуть бути виявлені в елементі стилю у верхній частині HTML-сторінки. Наступний код демонструє приклад сторінки з вбудованою таблицею стилів:

Приклад коду