Розберемося з пріоритетами
Перерахуємо таблиці стилів по зростанню пріоритетів
- найменший пріоритет мають таблиці стилів розташовані в надрах самого браузера, вони грають роль стилів за замовчуванням
- трохи важливіше йдуть по пріоритету таблиці стилів створені користувачем в настройках браузера (що рідкість)
- далі стилі web сторінки. і що характерно, таблиці стилів web сторінки можуть бути оголошені трьома способами. кожен із способів створює таблицю зі своїм пріоритетом. перерахуємо їх по зростанню:
3.1. таблиці підключаються через тег . розташовуються в зовнішньому файлі css і мають найменший пріоритет серед інших таблиць web документа
3.2. таблиці поміщені в сам html документ, між тегами . мають більш високий пріоритет ніж таблиці в 3.1
3.3. таблиці стилів які розташовуються в атрибуті style = "...", більш пріоритетні ніж таблиці 3.2
3.4. самий високі пріоритет у стилів з міткою на кінці «! important»
За важливістю таблиці стилів згідно з даними пунктами можна записати так:
Приклад, є три стилю на web сторінці
- перший стиль розташований в файлі main.css з вмістом
Результуючий стиль для p буде color: green. так як він має найбільший пріоритет.
Каскад будувався таким чином: стиль в main.css замінив стиль для p, який розташовується в браузері в якості «за замовчуванням», тому що він має пріоритет вище; далі стиль в «Переміг» стиль для p зазначеним main.css; у нас є ще стиль в атрибуті самого тега p. тому він за пріоритетом вище ніж стиль color: red вказаний в . то він замінює його, в результаті результуючий стиль буде color: green.
А що таке специфічність?
З пріоритетами стилів з різних таблиць все зрозуміло, але може виникнути питання, а що якщо до одного html тегом звертається кілька стилів з однієї таблиці? Наприклад до заголовку h1, в файлі main.css буде прописано
Якого кольору буде заголовок h1. Відповідь: блакитного
Виявляється стилі в одній таблиці не завжди рівні за пріоритетом між собою, важливість стилю визначає таке поняття як специфічність. Це означає що чим специфічні селектор, тим більше пріоритетний стиль, в нашому випадку селектор «article h1" більш специфічний ніж «h1».
Визначити специфічність пріоритетом можна за наступним правилом:
Специфічність селектору будемо висловлювати в балах, в такий спосіб:
- селектор за кожен ідентифікатор отримує - 100 балів (приклад ідентифікатора «#id«)
- селектор за кожен клас, або псевдо клас - 10 балів (приклад класу і псевдокласу «.my«, «: href«)
- селектор за кожен тег получает- 1 бал (приклад «h1«)
У нашому випадку перший селектор «h1» має 1 бал, а другий селектор «article h1» має 2 бали, отже стиль color: blue важливіше чемcolor: red. тому в результаті колір заголовка буде блакитний.
Наведу приклад специфичностей селектор, в лівому стовпчику селектори. в правому «бали специфічності»
Після всього сказаного ...
Хочу відзначити кілька моментів, на які варто звернути увагу
- Питання про пріоритети, специфічність стилів йде тільки тоді, коли до одного елементу застосовується два і більше стилів. тобто коли виникає конфлікт стилів.
- Конфлікт стилів буде тільки тоді, коли стилі вказують на один елемент безпосередньо. Наприклад, якщо ми позначимо для тега article що колір тексту повинен бути блакитним. а потім для його дочірнього елемента h1 що колір тексту повинен бути зеленим. то результат для h1 буде зелений. ніякого конфлікту не виникає. Правило задає стиль безпосередньо елементу «не конкурент» правилом успадковане від батьківського елемента, він завжди важливіше.
- Якщо два і більше конфліктуючих правила однакові по специфічності (однакові бали), то застосовується той який написаний останнім.
Вам буде цікаво:
- Внутрішня оптимізація сайту (SEO)
- Структура і синтаксис SQL (витримка)
- Робота composer (швидкий старт)
- Теоретичні ази БД (введення в SQL)
Буду вдячний якщо ви поділитеся даними постом
