Чому CSS каскадні

Каскадні Таблиці Стилів домашня сторінка

Каскадні таблиці стилів (CSS) є простим механізмом додавання стилів (таких як шрифти, кольори, інтервали) у Веб-документ.

Ця сторінка містить інформацію про те, як вивчати та використовувати CSS та доступне програмне забезпечення. А також новини від робочої групи CSS.

Highlights

Новини

5 лист 2024 Оновлений Робочий Чернетка: CSS Conditional Rules Level 5 . Оновлений Робочий Чернетка: Motion Path Level 1 .
4 жовт 2024 Оновлений Робочий Чернетка: CSS Anchor Positioning .
3 жовт 2024 Оновлений Робочий Чернетка: CSS Grid Layout Level 3 .
30 вер 2024 Updated Candidate Recommendation Draft: Текст у CSS .
19 вер 2024 Новий Робочий Чернетка: CSS Grid Layout Level 3 .

Поточні роботи

Деякі специфікації CSS Working Group:

Новини робочої групи

Minutes Open UI-WHATWG/HTML-CSSWG meeting 2024-11-07
Minutes Telecon 2024-11-06
Minutes Telecon 2024-10-30
Minutes View Transitions Breakout 2024-10-30
OpenUI-WHATWG/HTML-CSSWG meeting 2024-10-23
Minutes Telecon 2024-10-23
Minutes Telecon 2024-10-16
Minutes Telecon 2024-10-09
Minutes Telecon 2024-09-04
First Public Working Draft of CSS Grid Level 3 / Masonry Layout

Частина CSS WG (робочої групи), травня 2016 року.

Приєднуйтесь до спілкування

Якщо ви працюєте в організації членів W3C, ви також можете приєднатися до робочої групи.

Програмні засоби

Майже всі браузери в даний час підтримують CSS та багато інших програм. Щоб написати CSS, вам достатньо текстового редактора, але є багато інструментів, які полегшують цей процес.

Вивчення CSS

Історія CSS описана в 20 розділі книги Каскадні Таблиці Стилів, веб-дизайн, автори Hakon Wium Lie та Bert Bos (2nd ed., 1999, Addison Wesley, ISBN 0-201-59625-3)

Подібне

The CSS validator Перевіряє синтаксис (та інше) таблиць стилів.Digital Publishing Activity Набір простих таблиць стилів. Розроблені, коли сумісність браузерів була великою проблемою, але все ж таки корисна інформація. CSS Techniques for WCAG 2.0 Примітка про роль CSS у створенні сторінок доступними. SAC: The Simple API for CSS Інтерфейс між CSS аналізаторами та CSS процесорами. XSL (Розширювана Мова Таблиць Стилів) XSL та CSS мають багато особливостей, але XSL зосереджена на складних завданнях, особливо для друку. A MathML for CSS profile Описує підмножину MathML, яка допоможе бути відформатована тільки за допомогою CSS другого рівня

Навігація сайтом

Last updated Нд 10 Лис 2024 05:40:18

Каскадність CSS. Пріоритети стилів

У цьому розділі докладно пояснюється, чому каскадні таблиці стилів (Cascading Style Sheets, CSS) називаються каскадними. Для початку давайте згадаємо, як можна додати стиль на веб-сторінку:

підключити зовнішню таблицю стилів;
додати внутрішню таблицю стилів HTML-документ через тег ;
визначити стиль елемента, застосувавши тег атрибут style з необхідними значеннями (inline-стиль).

Ці способи додавання стилів можна використовувати одночасно. Наприклад, для тегів

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

. Наприклад:

p .your_class p #your_id p

У цьому прикладі для тегів

вказано три варіанти форматування. Але як браузер розставляє пріоритети між стилями? Який стиль із наведених вище буде обраний і за яким принципом? Це нам і належить з'ясувати.

Пріоритети стилів

Каскадність CSS – це механізм, завдяки якому елемент HTML-документа може застосовуватися більш ніж одне правило CSS. Правила можуть виходити з різних джерел: із зовнішньої та внутрішньої таблиці стилів, від механізму спадкування, від батьківських елементів, від класів та ID, від селектора тегу, від атрибуту style тощо. Система пріоритетів: зрештою застосовується той стиль, який походить від джерела з вищим пріоритетом.

Які джерела є більш значущими, а які менші? Розібратися в цьому допоможе ця таблиця, де вказана вага кожного селектора. Чим більша вага, тим вищий пріоритет:

Коли селектор складається з кількох інших селекторів, необхідно порахувати їхню загальну вагу. Ось як обчислюється пріоритет: за кожен селектор додається 1 у відповідну комірку. В інших осередках стоять нулі. Щоб отримати загальну вагу, необхідно "склеїти" всі числа в осередках.

Селектор	ID	Клас	Тег	Загальна вага
p	0	0	1	1
.your_class	0	1	0	10
p.your_class	0	1	1	11
#your_id	1	0	0	100
#your_id p	1	0	1	101
#your_id .your_class	1	1	0	110
p a	0	0	2	2
#your_id #my_id .your_class pa	2	1	2	212

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

Приклад: у внутрішній таблиці стилів заданий червоний колір для тегів

, а у зовнішній – зелений колір тих самих тегів. У HTML-документі ви спочатку підключили зовнішню таблицю стилів, а потім додали внутрішню таблицю за допомогою тега . У результаті колір тегів

буде червоним.

Це – один із способів керувати значимістю стилів.Ще один спосіб підвищити пріоритет – спеціально збільшити вагу селектора, наприклад додавши до нього ID або клас.

Оголошення !important

Якщо ви зіткнулися з екстреним випадком і вам необхідно підвищити значущість будь-якої якості, можна додати до нього оголошення !important :

Також !important перекриває inline-стилі. Занадто часто !important не вітається багатьма розробниками. В основному, це оголошення прийнято використовувати лише тоді, коли конфлікт стилів не можна перемогти іншими способами.

Скидання стилів за допомогою reset.css

У попередньому розділі ми вже згадували про те, що кожен браузер має свої вбудовані стилі HTML-документів, створені для поліпшення читабельності. Ви напевно вже бачили, як виглядає гола веб-сторінка в браузері: сині підкреслені посилання, чорний шрифт, напівжирне зображення заголовків і т.д. буд.

Кожен браузер має свої відмінності у вбудованих стилях: наприклад, у IE немає відступу від верхнього краю вікна, а Firefox є. Таких відмінностей є багато. Щоб вони не створювали перешкод для кроссбраузерності під час написання власного стилю CSS, можна скористатися методом скидання вбудованих стилів.

Інструмент для скидання стилів – це, по суті, та сама таблиця CSS, де описані правила, які скидають вбудовані стилі браузерів, встановлюючи базові значення властивостей. Називається така таблиця reset.css і служить для того, щоб ви могли почати створювати стиль з нуля. Ось приклад стандартної таблиці скидання:

html, body, div, span, applet, об'єкт, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, male, strike, strong, sub, sup, tt, var, b, u, i, центр, dl, dt, dd, ol, ul, li, fieldset, форму, мітку, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, фігура, fíгcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q <quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >table

Цей варіант таблиці Reset.css розробив відомий досвідчений фахівець із стандартів HTML та CSS Ерік Мейєр. Він працює в галузі веб-технологій з 1993 року і є автором багатьох книг CSS.

Звичайно ж, існують і інші варіації Reset CSS, наприклад, популярніший зараз Normalize.css, який, на відміну від Reset CSS, зберігає багато корисних стилів за замовчуванням, а не стирає їх повністю. Це зручно, оскільки позбавляє необхідності знову оголошувати стилі для багатьох стандартних елементів.
Якщо потрібно, ви і самі можете створити файл скидання стилів, виходячи з ваших потреб.

А зараз коротко про те, що робить наведена вище таблиця скидання стилів:

у першому селекторі зібрані найбільш популярні теги, для яких видаляються всі відступи, рамки та поля, а також призначається розмір шрифту 100%;
другий груповий селектор призначений для правильного відображення тегів HTML5 у старих браузерах;
за допомогою властивості line-height селектора body встановлюється однаковий інтерліньяж (міжрядковий інтервал) для тексту;
для списків ol, ul прибрано маркери;
скасовано лапки та інший контент перед та після вмісту тегів blockquote, q;
спрощено додавання рамок для осередків таблиць.

Файл скидання стилів потрібно підключати раніше, ніж власні стилі. Якщо ви уважно читали абзац про пріоритети, то вже зрозуміли, чому reset.css повинен перебувати перед іншими стилями: тому що правила, вказані нижче в коді, перезаписують правила, оголошені раніше.

Підсумки

Каскадність у CSS - це здатність стильових правил накладатися один на одного, перезаписувати та змішуватися. Підсумковий стиль елемента, який видно у браузері, – це комбінація кількох послідовно застосованих стилів.

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

Необхідно знати, як працюють правила розподілу пріоритетів між стилями, щоб створювати грамотні таблиці стилів.

Перша частина нашого підручника добігла кінця. Другий розділ книги ми почнемо з вивчення CSS шрифтів, веб-шрифтів та способів їх підключення.