Пріоритети в css і їх підвищення за рахунок important, комбінація і угруповання селектор,
Привіт, шановні Новомосковсктелі блогу KtoNaNovenkogo.ru. Сьогодні я пропоную продовжити розмову про селектори в Css. який ми почали ще в наведеній статті. Ще раніше ми з вами познайомилися з тим, що таке таблиці каскадних стилів, дізналися, що означають пікселі або EM в розмірах прийнятих в Css і багато іншого.
Комбінації і угруповання селекторів в CSS
З цих семи можливих видів в мові CSS можна складати комбінації. Всі комбінації, які ми будемо складати, мають безпосереднє відношення до ієрархії елементів Html коду (предки - нащадки, батьки - діти, брати - сестри).
Перший вид комбінації називається контекстний селектор. Він враховує взаємовідношення елементів Html коду за принципом «Предок - Нащадок»:
У першому прикладі йдеться, що всі елементи B (виділення жирним), у яких в предках є елементи Div, будуть пофарбовані в зелений колір.
У наведеному коді тільки підкреслений фрагмент буде пофарбований в зелений колір, тому що в числі його предків є Div, а другий фрагмент коду, виділений тегами B, залишиться того кольору, яка була обрана для нього за умовчанням, бо в числі його предків контейнера Div вже немає (тільки P і Body):
Такі комбінації працюють в будь-яких браузерах.
Наступним типом комбінацій буде дочірній селектор. який будується на принципах взаємин елементів коду за типом «Батько - Дитина»:
Записуються вони з розділяє знаком більше (>):
Даний запис буде трактуватися браузером так: для абзаців (Html тег P). «Батьком» (найближчим предком) яких є контейнер Div, буде використовуватися виділення червоним кольором.
У наведеному прикладі тільки обведені абзаци будуть пофарбовані в червоний колір, бо вони укладені безпосередньо в контейнер Div, який для них є батьком (найближчим предком). Якщо видозмінити наведений приклад дочірнього селектора на такий:
Те червоним вже буде виділено тільки останній абзац, тому що його батьком є тег Body, а два перших параграфа залишаться того кольору, який був передбачений для них за замовчуванням (Body для них предок, але не один з батьків, яким є Div). Дочірні селектори не працюють в браузері Ie 6.
Як і для чого групують селектори в CSS коді
Остання комбінація називається сусідні селектори і відповідає принципам відносин між елементами Html коду за типом «Сестри - Брати». Як роздільник у них може використовуватися або «+», або «
Даний запис означає, що вміст елемента I (виділення курсивом) буде пофарбовано в червоний колір тільки тоді, якщо його найближчим сусідом зліва (зверху за кодом) є елемент B (виділення жирним). Наприклад, дана умова буде дотримано в цьому прикладі:
Якщо записати сусідній селектор в Css коді в такому вигляді:
То це означатиме, що всі параграфи (P), у яких вище за кодом розташований сусідній елемент H1 (заголовок), будуть пофарбовані в червоний колір. Маються на увазі саме сусідні елементи (відносини типу «Сестри - Брати»). На наведеному нижче прикладі заданому селектору будуть задовольняти обведені абзаци:
Комбінації сусідніх селектор в браузері Ie 6 теж, на жаль, не підтримуються. У Ie 6 підтримується тільки перший вид комбінації, а в Ie 7 і вище підтримуються всі інші. В інших браузерах ніяких проблем виникати не повинно.
Селектори в Css можна ще і групувати. Наприклад, якщо у якихось із них використовується одне або кілька однакових правил, то їх можна об'єднати в групу для зменшення обсягу Css коду.
У наведеному на скріншоті прикладі, Css властивість «background: yellow» повторюється для кожного селектора заголовка (h1-3), що може викликати складності (багаторазова робота) при бажанні поміняти значення цієї властивості. Тому другий варіант згрупованої записи виглядає трохи краще.
Зверніть увагу, що при угрупованню селектори пишуться через кому. Якщо однакових правил буде більше, то і економія коду буде більш відчутною. А ті правила, які були унікальними, потрібно як і раніше записувати індивідуально.
Пріоритети Css властивостей (з important і без нього)
Тепер давайте подумаємо, а яке стильове оформлення буде використовувати браузер, якщо ніяких стилів для даного елемента Html коду не задано? А для цього існує відповідна специфікація валідатора WC3. де все це описано.
Для цього на сторінці зі специфікацією CSS потрібно прокрутити текст до кінця і перейти по посиланню «Default style sheet for HTML 4»:
Як ви можете бачити, зараз відбулося вже остаточне розділення Html і Css. Тобто навіть для чистого ХТМЛ коду браузер все одно буде використовувати дефолтні властивості таблиць стилів. Так ось властивості, прийняті за замовчуванням, мають найнижчий пріоритет.
Більш високий пріоритет мають властивості, які призначить користувач в налаштуваннях свого браузера. Ці стилі будуть застосовані до будь-яких документів, які він переглядає в цьому браузері.
Правда не у всіх браузерів є така можливість, але по крайней заходів, в Ie і Опері вона є. Тобто при бажанні користувач як джерело стильової розмітки зможе підключити свій власний файл CSS.
Наприклад, в Ie для цього потрібно вибрати з верхнього правого меню «Сервис» - «Властивості оглядача», а потім на першій вкладці «Загальні» клацнути по нижній кнопці «Оформлення». У вікні, вам потрібно поставити галочку в полі «Оформляти, використовуючи власний стиль», і за допомогою кнопки «Огляд» знайти на своєму комп'ютері потрібний вам файл стильової розмітки CSS:
Тобто якщо я (розробник сайту) захотів використовувати в оформленні будь-якого елементу Html коду стилі відмінні від дефолтних (пам'ятаєте, вони в специфікації описані), то користувач своїм власним файлом Css перебити моє оформлення не зможе.
Користувач буде змушений змиритися? Ні. Є у нього можливість підвищити пріоритет своїх властивостей CSS за допомогою додавання Important в кінці кожного з них. Пишеться це слово через символ пробілу і перед ним ставиться знак оклику:
Давайте узагальнимо у вигляді списку всю викладену інформацію з приводу пріоритетів стильових властивостей. Пріоритет буде спадати зверху вниз:
Саме зараз ми з вами і переходимо до питання каськадності таблиць стилів CSS. Давайте розглянемо це на прикладі, щоб було наочніше. Припустимо, що у нас є фрагмент коду з наступними Html елементами (параграф всередині контейнера Div):
Давайте спочатку пропишемо такі властивості:
В результаті буде застосовано і перше з них до параграфу (бо він утворений тегом P), і властивість, що задає сірий фон для елементу з класом «sbox», який знову ж таки є у цього параграфа:
А тепер давайте додамо до другого селектору (класу) ще одна властивість, яке буде конфліктувати з першим рядком (в них обох задається колір для тексту через color. Але значення при цьому використовуються різні):
В результаті колір тексту параграфа стане синім замість червоного.
Чому? Тому що саме таким способом вирішується конфлікт, коли один і той же елемент Html коду отримує відразу кілька однакових правил, але з різними значеннями і з різних місць Css коду. Для того, щоб визначити, пріоритет якого правила вище, потрібно вважати його селектори.
Крім цього самі селектори мають градацію за пріоритетами. Найвищий пріоритет у ID. У цьому прикладі колір тексту буде синім саме тому, що пріоритет Id (#out) буде вище, ніж у селектора тега (p):
Далі по драбинці пріоритетів, спрямованої вниз, слідують селектори класів, псевдокласів і атрибутів. У наступному прикладі знову програє тег (p) і колір тексту абзацу буде синім, бо тяга він з селектором вищого пріоритету (класу):
Ну, і найнижчим пріоритетом (не рахуючи універсальний *, що володіє найнижчим вагою і не вносить жодних змін в подібні бодання) мають селектори тегів і псевдоелементів.
Але знову ж таки потрібно вважати кількість селекторів одного і того ж рівня пріоритету, і чим їх буде більше, тим приоритетнее буде дана властивість. наприклад:
Якого кольору в результаті вийде текст параграфа? Правильно, саме червоного, тому що у цієї властивості більше селектор тегів (два проти одного). Ось як. Тобто спочатку вважаються Id. Якщо переможець не виявлений, то вважаються класи, псевдокласи і атрибути. Ну, а якщо і там нічого не вирішилося або таких не було знайдено, то вважаються селектори тегів і псевдоелементів.
Але цілком можлива ситуація, коли переможець не виявиться і селектори конкуруючих класів виявляться рівного пріоритету в сумі. Наприклад, для нашого багатостраждального параграфа укладеного в контейнер Div:
Цілком можна буде написати такий шматок Css коду:
Друга комбінація: застосувати дані властивості (color: blue) для елемента параграфа з класом sbox (p.sbox), який стоїть всередині будь-якого елементу з Id #in. Знову ж, вона повністю описує саме наш параграф. Давайте вважати селектори.
З ID в обох комбінаціях зустрічаються по одному разу, те ж саме можна сказати і про класи. Залишається тільки порахувати селектори тегів, але їх теж в обох комбінаціях використовується однакове число раз (один). Засада.
Вийшли рівні пріоритети у одного і того ж властивості, що має різні значення (колір тексту червоний, або синій). Як же браузер буде вирішувати цю дилему?
Тут буде діяти правило - хто останній. той і правий. Тому в моєму прикладі колір тексту параграфа буде синім, бо це властивість (color: blue) розташоване нижче в коді. Якщо ці правила поміняти місцями:
То в результаті колір тексту параграфа зміниться на червоний. Що й потрібно було довести. Можна дописати, наприклад, до будь-якої комбінації ще один селектор тега і ми переважили чашу терезів на його користь, навіть якщо вона і не варто нижче в коді:
У цьому випадку колір параграфа змінитися на синій. Універсальний селектор «*» взагалі ніякого впливу на підрахунок пріоритетів не робить. До речі, трохи вище ми розглянули спосіб підвищення пріоритету Css правил за допомогою додавання Important. У нашому прикладі це може виглядати так:
Якого кольору буде в цьому випадку текст параграфа? Зеленим, звичайно ж. І навіть вважати нічого не потрібно, бо додавання Important до стильового властивості вирішує це спірне питання однозначно, де б воно в коді не стояв і скільки у нього селектор не було.
Але Important не є єдиним способом беззастережного підвищення пріоритету властивості. Другий спосіб підвищення може полягати у використанні стильових властивостей в атрибуті Style потрібного вам Html елемента.
Тобто прописуєте всередині того ж багатостраждального тега P атрибут Style із завданням будь-якого кольору:
Ось і все. Тепер незалежно від того, які властивості прописані для цього елемента в зовнішньому файлі таблиці стилів або ж всередині тегів Style Html коду, колір тексту параграфа буде жовтим.
Але ось властивості з Important він перебити не зможе. Тобто в останньому прикладі, де ми додали правило «p», колір тексту і раніше буде зеленим, навіть незважаючи на style = "color: yellow".
Насправді пріоритет двох правил (з Important в зовнішньому файлі таблиці стилів і в атрибуті style) рівний, а значить потрібно переходити до підрахунку селектор. А хіба вони можуть бути всередині атрибута style?
Так ніяких не може бути, а це значить, що правило, прописане в атрибуті style, завжди програє правилом з Important тільки за рахунок меншого числа селекторів (нуль буде менше будь-якого числа).
Ну, а що ж тоді дасть найбільший пріоритет Css властивості. Правильно, його воно буде прописано в атрибуті style та ще з Important:
- Прописування властивості в атрибуті style потрібного тега разом з Important
- Додавання Important до властивості у зовнішньому файлі таблиць стилів або ж в тезі style прямо в Html коді
- Просте прописування цієї властивості в атрибуті style потрібно елемента
- Використання більшого числа Id для даного властивості
- Використання більшого числа селекторів класів, псевдокласів або атрибутів
- Використання більшого числа селекторів тегів і псевдоелементів
- Більш низьке розташування властивості в Css коді, при інших рівних умовах
Насправді правила в атрибуті style при верстці використовуються вкрай рідко (уявіть собі, як важко буде в цьому випадку вносити зміни у всьому коді сайту, а не в окремому файлі CSS).
Цей атрибут в основному використовують, коли тільки потрібно щось швидко протестувати. Ну, і ще це зручно, якщо ви вставляєте свій код в чужі Html сторінки, які мають своє стильове оформлення і яке може успадкувати (успадкування в CSS) і для ваших елементів, що вставляються.
На цьому вивчення селектор можна вважати закінченим, в наступній статті ми вже почнемо розбирати Css правила.
Удачі вам! До швидких зустрічей на сторінках блогу KtoNaNovenkogo.ru