Перегляд вихідного коду сторінки CSS

{{infobox file format
| name = CSS
| extension = .css
| mime = text/css
| owner = [http://w3.org World Wide Web Consortium]
| creatorcode = 
| genre = {{нп|Мова стилю сторінок|Мова стилю сторінок|en|style sheet language}}
| containerfor =
| containedby =
| extendedfrom =
| extendedto =
| standard = [http://www.w3.org/TR/CSS1 Level 1 (Recommendation)], <br/>
[http://www.w3.org/TR/CSS2/ Level 2 (Recommendation)], <br/>
[http://www.w3.org/TR/CSS21/ Level 2 Revision 1 (Working Draft)]
}}
{{HTML}}
'''CSS''' ({{lang-en|Cascading Style Sheets}}, {{lang-uk|Каскадні таблиці стилів}})&nbsp;— це спеціальна {{нп|Мова стилю сторінок|мова стилю сторінок|en|style sheet language}}, що використовується для опису їхнього зовнішнього вигляду. Самі ж сторінки написані [[Мова розмітки даних|мовами розмітки даних]].

CSS є основною технологією всесвітньої павутини, поряд із HTML та [[JavaScript]]<ref>{{cite book|last1=Flanagan|first1=David|title=JavaScript - The definitive guide|page=1|edition=6|quote=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.}}</ref>.

Найчастіше CSS використовують для візуальної презентації сторінок, написаних [[HTML]] та [[XHTML]], але формат '''CSS''' може застосовуватися до інших видів [[XML]]-документів.

Специфікації CSS були створені та розвиваються [[W3C|Консорціумом Всесвітньої мережі]].

CSS має різні ''рівні'' та ''профілі''. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже наявні функції. Рівні позначаються як '''CSS1''', '''CSS2''' та '''CSS3'''. Профілі&nbsp;— сукупність правил CSS одного або більше рівнів, створені для окремих типів пристроїв або [[інтерфейс]]ів. Наприклад, існують профілі CSS для [[принтер]]ів, мобільних пристроїв тощо.

CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці [[вебсторінка|вебсторінок]]. Головна перевага блочної верстки&nbsp;— розділення змісту сторінки (даних) та їхньої візуальної презентації.

== Огляд ==
'''CSS''' використовується авторами та відвідувачами [[Вебсторінка|вебсторінок]], щоб визначити кольори, [[шрифт]]и, [[Верстка вебсторінки|верстку]] та інші аспекти вигляду сторінки. Одна з головних переваг&nbsp;— можливість розділити зміст сторінки (або контент, наповнення, зазвичай [[HTML]], [[XML]] або подібна мова розмітки) від вигляду документу (що описується в CSS).

Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори тощо. CSS також дозволяє адаптувати контент до різних умов відображення (на екрані [[Монітор|монітора]], мобільного пристрою ([[Кишеньковий персональний комп'ютер|КПК]]), у роздрукованому вигляді, на екрані телевізора, пристроях з підтримкою [[Брайля шрифт|шрифту Брайля]] або голосових браузерах та ін.).

Один і той самий [[HTML]] або [[XML]] документ може бути відображений по-різному залежно від використаного '''CSS'''. Стилі для відображення сторінки можуть бути:
* Стилі автора (інформація надана автором сторінки):
** зовнішні таблиці стилів ({{lang-en|stylesheet}}), найчастіше окремий файл або файли '''.css'''
** внутрішні таблиці стилів, включені як частина документу або блоку
** стилі для окремого елементу
* Стилі користувача
** локальний .css-файл, вказаний користувачем для використання на сторінках і вказаний в налаштуваннях браузера (наприклад [[Opera]])
* Стилі переглядача ([[браузер]]а)
** стандартний стиль переглядача, наприклад стандартні стилі для елементів, визначені браузером, використовуються коли немає інформації про стиль елемента або вона неповна.

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

=== Переваги ===
* Інформація про стиль для усього [[сайт]]у або його частин може міститися в одному .css-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок;
* Різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки на [[принтер]], стиль для мобільних пристроїв;
* Сторінки зменшуються в об'ємі та стають більш структурованими, оскільки інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з урахуванням їх;
* Прискорення завантаження сторінок і зменшення обсягів інформації, що передається, навантаження на сервер та канал передачі. Досягається за рахунок того, що сучасні браузери здатні кешувати (запам'ятовувати) інформацію про стилі і використовувати для всіх сторінок, а не завантажувати для кожної.

=== Синтаксис ===
CSS має порівняно простий [[синтаксис]] і використовує небагато англійських слів для найменування різних складових стилю.

Стилі складаються зі списку правил. Кожне правило має один або більше селектор ({{lang-en|selector}}) та блок визначення ({{lang-en|declaration block}}). Блок визначення складається з оточеного фігурними дужками списку властивостей.

Властивості в списку оформлюються у вигляді '''назва властивості''', двокрапка (:), '''значення''', крапка з комою (;).

Приклад:
<syntaxhighlight lang="css">
 p {
   font-family: Verdana, sans-serif;
 }
 h2 {
   font-size: 110%;
   color: red;
   background: white;
 }
 .note {
   color: red;
   background: yellow;
   font-weight: bold;
 }
 p.warning {
   background: url(warning.png) no-repeat fixed top;
 }
 #paragraph1 {
   margin: 0;
 }
 a:hover {
   text-decoration: none;
 }
 #news p {
   color: red;
 }
</syntaxhighlight>
В прикладі використано 7 правил, селектори <code>p</code>, <code>h2</code>, <code>.note</code>, <code>p.warning</code>, <code>#paragraph1</code>, <code>a:hover</code> та <code>#news p</code>.
Приклад властивості: <code>color: red</code>, де властивості з назвою <code>color</code> присвоєно значення <code>red</code>.

В перших двох правилах визначаються властивості [[HTML]]-елементів <code>p</code> (абзац, скорочення від {{lang-en|paragraph}}) та <code>h2</code> (Заголовок другого рівня, скорочення від {{lang-en|header}}). Абзац буде відображено [[шрифт]]ом [[Verdana]] або, у разі відсутності Verdana, іншим шрифтом [[sans-serif]]. Заголовок другого рівня буде відображено червоним кольором на білому тлі.

Третє правило буде застосовано до всіх елементів, властивість <code>class</code> визначена як 'note'. Наприклад:

<code><nowiki><p class="note">Абзац буде відображено червоним жирним шрифтом на жовтому тлі.</p></nowiki></code>

Третє правило також можна записати як <code>*.note</code>.<br/>
Щоб третє правило застосовувалося лише до абзаців, його слід переписати як:
<syntaxhighlight lang="css">
 p.note {
   color: red;
   background: yellow;
   font-weight: bold;
 }
</syntaxhighlight>
Четверте правило стосується тих елементів рівня абзацу (p), що мають властивість <code>class</code> рівну 'warning'. Такі абзаци матимуть фонове зображення warning.png згори.

Властивість <code>.class</code> може мати не лише порівняння, але й перелік. Коли властивість <code>class</code> містить перелік значень, розділених пробілом, то до цього елементу застосовуються правила усіх перелічених класів. Наприклад, до <code>&lt;p class="note warning"&gt;</code> будуть застосовані правила <code>note</code> та <code>warning</code>.

П'яте правило застосовується лише до одного елементу в документі HTML, що має ідентифікатор <code>id</code> рівний <code>paragraph1</code>. Цей елемент не буде мати межі навколо, тому що властивість <code>margin</code> дорівнює 0. Наприклад:
 <code><nowiki><p id="paragraph1">Цей абзац не має межі тому що межа 
 дорівнює 0. На сторінці може бути лише один такий елемент.
 </p></nowiki></code>  

Шосте правило визначає стиль наведення мишкою (''hover'') для <code>a</code> (<code>anchor</code>) елементів. Стандартно більшість [[браузер]]ів підкреслюють елементи <code>a</code> (посилання в межах одного документа або на інші HTML-документи). Це правило прибирає підкреслювання з посилань, коли користувач наводить на них мишкою.

Останнє правило застосовується до тих абзаців, що знаходяться всередині (мають батьківський елемент) з ідентифікатором <code>news</code>. Це приклад наслідування властивостей.

Завдяки каскадній структурі CSS, ці абзаци (<code>p</code>) будуть наслідувати <code>font-family: Verdana, sans-serif;</code> як і всі елементи <code>p</code> (абзаци). Ті з них, що мають <code>class</code> рівний <code>warning</code> будуть мати також і фонове зображення.

CSS може також містити коментарі. Синтаксис коментарів подібний до синтаксису, що використовується в багатьох [[мова програмування|мовах програмування]] (наприклад [[C (мова програмування)|C]], [[PHP]]). Слід звернути увагу на те, щоб в коментарях CSS-файлів не використовувалися [[Кирилиця|кириличні]] літери (деякі браузери некоректно обробляють CSS-файли з українськими літерами<ref>[http://cssing.org.ua/2006/12/23/ie-css-russian-comments-bug/ CSS, UTF и Интернет эксплорер] {{Webarchive|url=https://web.archive.org/web/20070429215056/http://cssing.org.ua/2006/12/23/ie-css-russian-comments-bug/ |date=29 квітня 2007 }}, 2006{{ref-ru}}</ref>).
<syntaxhighlight lang="css">
/* comment */
</syntaxhighlight>

=== Селектори та Псевдо-класи ===
CSS має спеціальні позначення (селектори, від {{lang-en|selector}}) для визначення діапазону застосування правила.
; Всі елементи: використовується селектор <code>*</code> (часто не пишеться, наприклад <code>* p</code> та <code>p</code>&nbsp;— рівнозначні)
; За назвою елементу: наприклад для всіх <code>p</code> або <code>h2</code>
; Наслідування: наприклад для всіх <code>a</code> елементів які містяться в <code>li</code> елементах (посилання всередині списків), селектор матиме вигляд <code>li a</code>
; Властивості ''class'' та ''id'': наприклад <code>.<var>class</var></code> або <code>#<var>id</var></code> для елементів <code>class="<var>class</var>"</code> або <code>id="<var>id</var>"</code>
; Суміжні елементи: наприклад для всіх елементів <code>p</code>, попереднім до яких є елемент <code>h2</code> (перший абзац після заголовка), селектор буде <code>h2 + p</code>
; Пряме наслідування: наприклад для всіх <code>span</code> елементів всередині <code>p</code>, але не глибших за перший рівень наслідування <code>span</code>, селектор буде <code>p &gt; span</code>
; За атрибутами: наприклад для всіх <code>&lt;input type="text"&gt;</code> селектор буде <code>input[type="text"]</code>

Для точнішого визначення стилю можуть використовуватися ''псевдо-класи'' ({{lang-en|pseudo-classes}}). Мабуть найвідомішим є псевдо-клас <code>:hover</code>, що застосовується коли користувач вкаже на елемент, зазвичай наведенням курсору. Стиль визначається для <code>a:hover</code> або <code>#elementid:hover</code>. Інші псевдо-класи, наприклад, <code>:first-line</code> (перший рядок тексту), <code>:first-letter</code> (перша літера) <code>:visited</code> (посилання, що вже відкривалось) або <code>:before</code> (визначає стиль перед елементом). Спеціальний псевдо-клас <code>:lang(c)</code> буде застосовано до елементів якщо їхня мова ({{lang-en|language}}) «c».

Підтримка псевдо-класів залежить від браузеру, наприклад Internet Explorer 6 підтримує псевдо-клас <code>:hover</code> лише для посилань.

Селектори можуть поєднуватися й іншим чином для досягнення більшої гнучкості (див. [http://www.w3.org/TR/CSS21/selector.html визначення селекторів на сайті W3C] {{Webarchive|url=https://web.archive.org/web/20060423174213/http://www.w3.org/TR/CSS21/selector.html |date=23 квітня 2006 }}).
В наступному прикладі кілька селекторів об'єднуються через кому<ref>{{Cite web |url=http://www.w3.org/TR/CSS1#contextual-selectors |title=contextual-selectors |accessdate=16 лютого 2007 |archive-date=9 лютого 2011 |archive-url=https://web.archive.org/web/20110209205309/http://www.w3.org/TR/CSS1/#contextual-selectors }}</ref>. Правило встановлює шрифт для HTML-заголовків всіх рівнів.
<syntaxhighlight lang="css">
 h1, h2, h3, h4, h5, h6 {
   font-family: "Arial", sans-serif;
 }
</syntaxhighlight>

=== Приєднання до сторінки ===
Щоб включити таблицю стилів CSS, потрібно зберегти код CSS у файл (це можна зробити будь-яким текстовим редактором), наприклад <var>example.css</var>, і потім включити або імпортувати його в HTML або XHTML-сторінку.

Включення CSS-файлу до сторінки ([[XHTML]]):
<syntaxhighlight lang="xml">
 <link rel="stylesheet" href="example.css" type="text/css" />
</syntaxhighlight>
Включення CSS-файлу до сторінки ([[HTML]]):
<syntaxhighlight lang="xml">
 <link rel="stylesheet" href="example.css" type="text/css">
</syntaxhighlight>
Імпорт CSS-файлів до HTML та XHTML-сторінок:
<syntaxhighlight lang="xml">
 <style type="text/css">
 @import "example.css";
 </style>
</syntaxhighlight>
CSS може бути визначений в <code>&lt;head&gt;</code> частині сторінки або для елементу сторінки через <code>style</code>.

Включення CSS-файлу до [[XML]]-сторінки:
<syntaxhighlight lang="xml">
 <?xml-stylesheet type="text/css" href="example.css"?>
</syntaxhighlight>

== Історія ==
Таблиці стилів в тому чи іншому вигляді існували з зародження [[SGML]] в [[1970-ті|1970-тих]]. Каскадні таблиці стилів розроблялися для спрощення процедури додавання інформації про стилі для вебсторінок.

З розвитком [[HTML]] з'явилася можливість використовувати різні механізми для додавання стилів до елементів сторінки. Еволюція HTML дала вебдизайнерам більше можливостей для створення вигляду сайту, але HTML-код ставав складнішим для написання та зміни. Через різницю у відображення сторінки в різних браузерах збереження стилю сторінки було складним, користувачі мали менше контролю над відображенням контенту.

На розгляд W3C було запропоновано дев'ять різних варіантів таблиць стилів. Після обговорення в спеціальному списку розсилки було обрано два, вони створили основу для того, що стало CSS: {{lang-en|Cascading HTML Style Sheets}} (CHSS) та {{lang-en|Stream-based Style Sheet Proposal}} (SSP). Спочатку в [[жовтень|жовтні]] [[1994]], [[Хокон Віум Лі]] (зараз [[CTO|генеральний технічний директор]] [[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 Consortium [[W3C]], серед інших питань W3C займався також і CSS. Робочу групу очолив [[Steven Pemberton]], як провідні технічні спеціалісти до неї входили [[Хокон Віум Лі]] та [[Bert Bos]].

В [[грудень|грудні]] [[1996]] було опубліковано CSS рівня 1&nbsp;— [http://www.w3.org/TR/CSS1 CSS level 1 Recommendation] {{Webarchive|url=https://web.archive.org/web/20110209205309/http://www.w3.org/TR/CSS1/ |date=9 лютого 2011 }}.
В квітні 2016, опубліковано CSS рівня 2&nbsp;— [https://www.w3.org/TR/CSS22/ Cascading Style Sheets Level 2 Revision 2 (CSS 2.2)] {{Webarchive|url=https://web.archive.org/web/20180218050730/http://www.w3.org/TR/CSS22/ |date=18 лютого 2018 }}, робота над яким ще продовжується.
<!--

== History ==
Development of HTML, CSS, and the [[Document Object Model|DOM]] had all been taking place in one group, the HTML Editorial Review Board (ERB). Early in [[1997]], the ERB was split into three [[working group]]s: [[HTML Working group]], chaired by [[Dan Connolly]] of W3C, [[DOM Working group]], chaired by [[Lauren Wood]] of [[SoftQuad]], and [[CSS Working group]], chaired by [[Chris Lilley (W3C)|Chris Lilley]] of W3C.

The CSS Working Group began tackling issues that had not been addressed with CSS level 1, resulting in the creation of CSS level 2 on [[November 4]] [[1997]]. It was published as a W3C Recommendation on [[May 12]] [[1998]]. CSS level 3, which was started in [[1998]], is still under development [[as of 2006]].

In [[2005]] the CSS Working Groups decided to enforce the requirements for standards more strictly. This meant that already published standards like CSS 2.1, CSS 3 Selectors and CSS 3 Text were pulled back from Candidate Recommendation to Working Draft level.
-->

== Примітки ==
{{reflist}}

== Див. також ==
* [[Мова розмітки даних]]
* [[XML]]
* [[Lorem Ipsum]]
* [[CSS-фільтр]]
* [[Фреймворки каскадних таблиць стилів]]
* [[Acid3]]

== Посилання ==
<!--Україномовні-->
* [https://css.in.ua/css/properties Український вебдовідник CSS] {{Webarchive|url=https://web.archive.org/web/20180327023837/https://css.in.ua/css/properties |date=27 березня 2018 }}
*[https://html-css.co.ua/dovidnuk-css-atrubytiv/ Довідник CSS атрибутів] {{Webarchive|url=https://web.archive.org/web/20210115172956/https://html-css.co.ua/dovidnuk-css-atrubytiv/ |date=15 січня 2021 }} {{Ref-uk}}
* [https://uk.wikibooks.org/wiki/CSS CSS (вікіпідручник)] {{Webarchive|url=https://web.archive.org/web/20180327084126/https://uk.wikibooks.org/wiki/CSS |date=27 березня 2018 }}
* [https://www.w3.org/Style/CSS/specs.uk.html Описи всіх специфікацій CSS] {{Webarchive|url=https://web.archive.org/web/20180306062155/https://www.w3.org/Style/CSS/specs.uk.html |date=6 березня 2018 }}
* [https://web.archive.org/web/20110704135154/http://www.indeep76.com/Style/CSS/ Український переклад «Web Style Sheets home page».]{{недоступне посилання|date=2018-03-26}}
<!--Англомовні-->
* {{ref-en}} [http://csszengarden.com/ CSS Zen garden] {{Webarchive|url=https://web.archive.org/web/20080702091916/http://www.csszengarden.com/ |date=2 липня 2008 }}&nbsp;— приклади зміни вигляду HTML-документа в залежності від CSS.
* {{ref-en}} [https://www.w3schools.com/css/default.asp w3schools CSS] {{Webarchive|url=https://web.archive.org/web/20180323203541/https://www.w3schools.com/css/default.asp |date=23 березня 2018 }}&nbsp;— приклади та синтаксис каскадних таблиць стилів.
<!--Інші-->
* {{ref-en}} [https://cssreference.io/ A free visual guide to CSS] {{Webarchive|url=https://web.archive.org/web/20180327023714/https://cssreference.io/ |date=27 березня 2018 }}
* {{ref-ru}} [http://www.wisdomweb.ru/CSS/index.php Что такое CSS?] {{Webarchive|url=https://web.archive.org/web/20111015183737/http://www.wisdomweb.ru/CSS/index.php |date=15 жовтня 2011 }} CSS підручник з прикладами і вправами.
{{перекласти}}

{{Мови таблиць стилей}}
{{JavaScript}}
{{Вебоглядачі|fsp}}

[[Категорія:Мови стилів]]
[[Категорія:Стандарти W3C]]
[[Категорія:Акроніми]]
[[Категорія:Каскадні таблиці стилів]]
[[Категорія:Статті з прикладами коду мовою CSS]]
[[Категорія:Статті з прикладами коду мовою XML]]