CSS є основною технологією всесвітньої павутини, поряд ізHTML таJavaScript[1].
Найчастіше CSS використовують для візуальної презентації сторінок, написанихHTML таXHTML, але форматCSS може застосовуватися до інших видівXML-документів.
CSS має різнірівні тапрофілі. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже наявні функції. Рівні позначаються якCSS1,CSS2 таCSS3. Профілі — сукупність правил CSS одного або більше рівнів, створені для окремих типів пристроїв абоінтерфейсів. Наприклад, існують профілі CSS дляпринтерів, мобільних пристроїв тощо.
CSS використовується авторами та відвідувачамивебсторінок, щоб визначити кольори,шрифти,верстання та інші аспекти вигляду сторінки. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичайHTML,XML або подібна мова розмітки) від вигляду документу (що описується в CSS).
Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори тощо. CSS також дозволяє адаптувати контент до різних умов відображення (на екранімонітора, мобільного пристрою (КПК), у роздрукованому вигляді, на екрані телевізора, пристроях з підтримкоюшрифту Брайля або голосових браузерах та ін.).
Один і той самийHTML абоXML документ може бути відображений по-різному залежно від використаногоCSS. Стилі для відображення сторінки можуть бути:
Стилі автора (інформація надана автором сторінки):
зовнішні таблиці стилів (англ.stylesheet), найчастіше окремий файл або файли.css
внутрішні таблиці стилів, включені як частина документу або блоку
стилі для окремого елементу
Стилі користувача
локальний .css-файл, вказаний користувачем для використання на сторінках і вказаний в налаштуваннях браузера (наприкладOpera)
стандартний стиль переглядача, наприклад стандартні стилі для елементів, визначені браузером, використовуються коли немає інформації про стиль елемента або вона неповна.
Стандарт CSS визначає порядок та діапазон застосування стилів, тобто, в якій послідовності і для яких елементів застосовуються стилі. Таким чином, використовується принципкаскадності, коли для елементів вказується лише та інформація про стилі, що змінилася або не визначена загальнішими стилями.
Інформація про стиль для усьогосайту або його частин може міститися в одному .css-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок;
Різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки напринтер, стиль для мобільних пристроїв;
Сторінки зменшуються в об'ємі та стають більш структурованими, оскільки інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з урахуванням їх;
Прискорення завантаження сторінок і зменшення обсягів інформації, що передається, навантаження на сервер та канал передачі. Досягається за рахунок того, що сучасні браузери здатні кешувати (запам'ятовувати) інформацію про стилі і використовувати для всіх сторінок, а не завантажувати для кожної.
CSS має порівняно простийсинтаксис і використовує небагато англійських слів для найменування різних складових стилю.
Стилі складаються зі списку правил. Кожне правило має один або більше селектор (англ.selector) та блок визначення (англ.declaration block). Блок визначення складається з оточеного фігурними дужками списку властивостей.
Властивості в списку оформлюються у виглядіназва властивості, двокрапка (:),значення, крапка з комою (;).
В прикладі використано 7 правил, селекториp,h2,.note,p.warning,#paragraph1,a:hover та#news p.Приклад властивості:color: red, де властивості з назвоюcolor присвоєно значенняred.
В перших двох правилах визначаються властивостіHTML-елементівp (абзац, скорочення відангл.paragraph) таh2 (Заголовок другого рівня, скорочення відангл.header). Абзац буде відображеношрифтомVerdana або, у разі відсутності Verdana, іншим шрифтомsans-serif. Заголовок другого рівня буде відображено червоним кольором на білому тлі.
Третє правило буде застосовано до всіх елементів, властивість якихclass визначена як "note". Наприклад:
<p>Абзац буде відображено червоним жирним шрифтом на жовтому тлі.</p>
Третє правило також можна записати як*.note. Щоб третє правило застосовувалося лише до абзаців, його слід переписати як:
Четверте правило стосується тих елементів рівня абзацу (p), що мають властивістьclass рівну "warning". Такі абзаци матимуть фонове зображення warning.png згори.
Властивість.class може мати не лише порівняння, але й перелік. Коли властивістьclass містить перелік значень, розділених пробілом, то до цього елементу застосовуються правила усіх перелічених класів. Наприклад, до<p> будуть застосовані правилаnote таwarning.
П'яте правило застосовується лише до одного елементу в документі HTML, що має ідентифікаторid рівнийparagraph1. Цей елемент не буде мати межі навколо, тому що властивістьmargin дорівнює 0. Наприклад:
<p>Цей абзац не має межі тому що межа дорівнює 0. На сторінці може бути лише один такий елемент. </p>
Шосте правило визначає стиль наведення мишкою (hover) дляa (anchor) елементів. Стандартно більшістьбраузерів підкреслюють елементиa (посилання в межах одного документа або на інші HTML-документи). Це правило прибирає підкреслювання з посилань, коли користувач наводить на них мишкою.
Останнє правило застосовується до тих абзаців, що знаходяться всередині (мають батьківський елемент) з ідентифікаторомnews. Це приклад наслідування властивостей.
Завдяки каскадній структурі CSS, ці абзаци (p) будуть наслідуватиfont-family: Verdana, sans-serif; як і всі елементиp (абзаци). Ті з них, що маютьclass рівнийwarning будуть мати також і фонове зображення.
CSS може також містити коментарі. Синтаксис коментарів подібний до синтаксису, що використовується в багатьохмовах програмування (наприкладC,PHP). Слід звернути увагу на те, щоб в коментарях CSS-файлів не використовувалисякириличні літери (деякі браузери некоректно обробляють CSS-файли з українськими літерами[2]).
CSS має спеціальні позначення (селектори, відангл.selector) для визначення діапазону застосування правила.
Всі елементи
використовується селектор* (часто не пишеться, наприклад* p таp — рівнозначні)
За назвою елементу
наприклад для всіхp абоh2
Наслідування
наприклад для всіхa елементів які містяться вli елементах (посилання всередині списків), селектор матиме виглядli a
Властивостіclass таid
наприклад.class або#id для елементівclass="class" абоid="id"
Суміжні елементи
наприклад для всіх елементівp, попереднім до яких є елементh2 (перший абзац після заголовка), селектор будеh2 + p
Пряме наслідування
наприклад для всіхspan елементів всерединіp, але не глибших за перший рівень наслідуванняspan, селектор будеp > span
За атрибутами
наприклад для всіх<input type="text"> селектор будеinput[type="text"]
Для точнішого визначення стилю можуть використовуватисяпсевдо-класи (англ.pseudo-classes). Мабуть найвідомішим є псевдо-клас:hover, що застосовується коли користувач вкаже на елемент, зазвичай наведенням курсору. Стиль визначається дляa:hover або#elementid:hover. Інші псевдо-класи, наприклад,:first-line (перший рядок тексту),:first-letter (перша літера):visited (посилання, що вже відкривалось) або:before (визначає стиль перед елементом). Спеціальний псевдо-клас:lang(c) буде застосовано до елементів якщо їхня мова (англ.language) «c».
Підтримка псевдо-класів залежить від браузеру, наприкладInternet Explorer 6 підтримує псевдо-клас:hover лише для посилань.
Селектори можуть поєднуватися й іншим чином для досягнення більшої гнучкості (див.визначення селекторів на сайті W3C[Архівовано 23 квітня 2006 уWayback Machine.]).В наступному прикладі кілька селекторів об'єднуються через кому[3]. Правило встановлює шрифт для HTML-заголовків всіх рівнів.
Щоб включити таблицю стилів CSS, потрібно зберегти код CSS у файл (це можна зробити будь-яким текстовим редактором), наприкладexample.css, і потім включити або імпортувати його в HTML або XHTML-сторінку.
Таблиці стилів в тому чи іншому вигляді існували з зародженняSGML в1970-тих. Каскадні таблиці стилів розроблялися для спрощення процедури додавання інформації про стилі для вебсторінок.
З розвиткомHTML з'явилася можливість використовувати різні механізми для додавання стилів до елементів сторінки. Еволюція HTML дала вебдизайнерам більше можливостей для створення вигляду сайту, але HTML-код ставав складнішим для написання та зміни. Через різницю у відображення сторінки в різних браузерах збереження стилю сторінки було складним, користувачі мали менше контролю над відображенням контенту.
На розгляд W3C було запропоновано дев'ять різних варіантів таблиць стилів. Після обговорення в спеціальному списку розсилки було обрано два, вони створили основу для того, що стало CSS:англ.Cascading HTML Style Sheets (CHSS) таангл.Stream-based Style Sheet Proposal (SSP). Спочатку вжовтні1994,Хокон Віум Лі (заразгенеральний технічний директорOpera Software) запропонував Cascading HTML Style Sheets (CHSS), що дещо подібний до сучасного CSS.Bert Bos працював над браузеромArgo, що використовував власний варіант таблиць стилів, Stream-based Style Sheet Proposal (SSP). Lie і Bos почали співпрацювати для вироблення стандарту CSS (літера 'H' була виключена з назви, оскільки таблиці стилів могли застосовуватися до інших мов розмітки, не лише HTML).
На відміну від наявних тоді таблиць стилів, таких якDSSSL таFOSI, CSS дозволяв застосування різних таблиць стилів до документу (сторінки). Таблиці стилів могли наслідувати правила з інших (тобто створювати каскади), що дозволило контролювати використання стилів як дизайнером сайту так і користувачем (наприклад в браузеріOpera).
Пропозиції до стандарту CSS обговорювалися на конференціях в1994 та1995 роках.
В 1994 році було створено World Wide Web ConsortiumW3C, серед інших питань W3C займався також і CSS. Робочу групу очоливSteven Pemberton, як провідні технічні спеціалісти до неї входилиХокон Віум Лі таBert Bos.
↑Flanagan, David.JavaScript - The definitive guide (вид. 6). с. 1.JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages.
