каскадність css
У цьому розділі докладно пояснюється, чому каскадні таблиці стилів (Cascading Style Sheets, CSS) називаються каскадними. Для початку давайте згадаємо, якими способами можна додати стиль на веб-сторінку:
- підключити зовнішню таблицю стилів;
- додати внутрішню таблицю стилів в HTML-документ;
- визначити стиль елемента, застосувавши до тегу атрибут style з необхідними значеннями (inline-стиль).
Ці способи додавання стилів можуть бути використані одночасно. Наприклад, для тегів
може бути одночасно визначити тип як у зовнішній таблиці стилів, так і у внутрішній. Крім того, в одній таблиці стилів може бути записано кілька варіантів форматування тегів
. наприклад:
У цьому прикладі для тегів
вказано три варіанти форматування. Але яким чином браузер розставляє пріоритети між стилями? Який стиль з вищенаведених буде обраний і за яким принципом? Це нам і належить з'ясувати.
пріоритети стилів
Каскадність CSS - це механізм, завдяки якому до елементу HTML-документа може застосовуватися більш ніж одне правило CSS. Правила можуть виходити з різних джерел: із зовнішнього та внутрішнього таблиці стилів, від механізму наслідування, від батьківських елементів, від класів і ID, від селектора тега, від атрибута style і т. Д. Оскільки в цих випадках часто відбувається конфлікт стилів, була створена система пріоритетів: в кінцевому підсумку застосовується той стиль, який виходить від джерела з більш високим пріоритетом.
Які джерела є більш значущими, а які - менше? Розібратися в цьому допоможе ця таблиця, де вказана вага (значимість) кожного селектора. Чим більше вага, тим вище пріоритет:
Якщо трапилося так, що два селектора мають однакову вагу, то пріоритет віддається тому стилю, який знаходиться нижче в коді. Якщо для одного елемента визначити тип і в зовнішній, і у внутрішній таблицях, то пріоритет віддається стилю в тій таблиці, яка знаходиться нижче в коді.
Приклад: у внутрішній таблиці стилів заданий червоний колір для тегів
. а у зовнішній - зелений колір для цих же тегів. У HTML-документі ви насамперед підключили зовнішню таблицю стилів, а потім додали внутрішню таблицю за допомогою тега . В результаті колір тегів
буде корисним.
Це - один із способів управляти значимістю стилів. Ще один спосіб підвищити пріоритет - спеціально збільшити вагу селектора, наприклад, додавши до нього ID або клас.
Скидання стилів за допомогою reset.css
У попередньому розділі ми вже згадували про те, що у кожного браузера є свої вбудовані стилі HTML-документів, створені для поліпшення Новомосковскбельності. Ви напевно вже бачили, як виглядає «гола» веб-сторінка в браузері: сині підкреслені посилання, чорний шрифт, напівжирний шрифт заголовків і т. Д.
Кожен браузер має свої відмінності у вбудованих стилях: наприклад, в IE немає відступу від верхнього краю вікна, а в Firefox є. Таких відмінностей існує багато. Щоб вони не створювали перешкод для кросбраузерності при написанні власного стилю CSS, можна скористатися методом скидання вбудованих стилів.
Інструмент для скидання стилів - це, по суті, та ж сама таблиця CSS, де описані правила, які скидають вбудовані стилі браузерів, встановлюючи базові значення властивостей. Називається така таблиця reset.css і служить для того, щоб ви могли почати створювати стиль «з нуля». Ось приклад стандартної таблиці скидання:
Звичайно ж, існують і інші варіації Reset CSS, наприклад, більш популярний зараз Normalize.css. який, на відміну від Reset CSS, зберігає багато корисних стилів за замовчуванням, а не пере їх начисто. Це зручно, оскільки позбавляє від необхідності знову оголошувати стилі для багатьох стандартних елементів.
Якщо потрібно, ви і самі можете створити свій файл скидання стилів, виходячи з ваших потреб.
А зараз коротко про те, що робить вищенаведена таблиця скидання стилів:
- в першому селекторі зібрані найбільш популярні теги, для яких видаляються всі відступи, рамки і поля, а також призначається розмір шрифту 100%;
- другий груповий селектор призначений для правильного відображення тегів HTML5 в старих браузерах;
- за допомогою властивості line-height селектора body встановлюється однаковий інтерліньяж (міжрядковий інтервал) для тексту;
- для списків ol. ul прибрані маркери;
- скасовані лапки і інший контент перед і після вмісту тегів blockquote. q;
- спрощено додавання рамок для комірок таблиць.
Файл скидання стилів необхідно підключати раніше, ніж власні стилі. Якщо ви уважно Новомосковсклі абзац про пріоритети, то вже зрозуміли, чому reset.css повинен знаходитися перед іншими стилями: тому що правила, зазначені нижче в коді, перезаписують правила, оголошені раніше.
Каскадність в CSS - це здатність стилів накладатися один на одного і поєднуватися. Підсумковий стиль елемента, який видно в браузері - це комбінація кількох послідовно застосованих стилів.
При конфлікті кількох стилів спрацьовує правило пріоритетів. Перевага віддається тому стилю, який вважається більш значущим.
Необхідно знати, як працюють правила розподілу пріоритетів між стилями, щоб створювати грамотні таблиці стилів.
Перша частина нашого підручника підійшла до кінця. Другий розділ книги ми почнемо з вивчення CSS шрифтів, веб-шрифтів і способів їх підключення.