CSS: відмінності між версіями

24 914 байтів додано ,  6 років тому
Скасовано останнє редагування (46.200.238.63) і відновлено версію 18262317 46.98.74.210
[неперевірена версія][перевірена версія]
(Скасовано останнє редагування (46.200.238.63) і відновлено версію 18262317 46.98.74.210)
{{infobox file format
| name = Каскадні таблиці стилів
| extension = .css
| mime = text/css
| owner = [http://www.w3.org/ World Wide Web Consortium]
| creatorcode =
| genre = [[Stylesheet 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}}
'''Каскадні таблиці стилів''' ({{lang-en|Cascading Style Sheets}} або скорочено '''CSS''')&nbsp;— спеціальна [[мова програмування|мова]], що використовується для опису сторінок, написаних [[Мова розмітки даних|мовами розмітки даних]].
 
Найчастіше CSS використовують для візуальної презентації сторінок, написаних [[HTML]] та [[XHTML]], але формат '''CSS''' може застосовуватися до інших видів [[XML]]-документів.
 
Специфікації CSS були створені та розвиваються [[W3C|Консорціумом Всесвітньої мережі]].
 
CSS має різні ''рівні'' та ''профілі''. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже наявні функції. Рівні позначаються як '''CSS1''', '''CSS2''' та '''CSS3'''. Профілі — сукупність правил CSS одного або більше рівнів, створені для окремих типів пристроїв або [[інтерфейс]]ів. Наприклад, існують профілі CSS для [[принтер]]ів, мобільних пристроїв тощо.
 
CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці [[веб-сторінка|веб-сторінок]]. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їхньої візуальної презентації.
 
== Огляд ==
'''CSS''' використовується авторами та відвідувачами [[Веб-сторінка|веб-сторінок]], щоб визначити кольори, [[шрифт|шрифти]], [[Верстка веб-сторінки|верстку]] та інші аспекти вигляду сторінки. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай [[HTML]], [[XML]] або подібна мова розмітки) від вигляду документу (що описується в CSS).
 
Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори тощо. CSS також дозволяє адаптувати контент до різних умов відображення (на екрані [[Монітор|монітора]], мобільного пристрою ([[Кишеньковий персональний комп'ютер|КПК]]), у роздрукованому вигляді, на екрані телевізора, пристроях з підтримкою [[Брайля шрифт|шрифту Брайля]] або голосових браузерах та ін.).
 
Один і той самий [[HTML]] або [[XML]] документ може бути відображений по-різному залежно від використаного '''CSS'''. Стилі для відображення сторінки можуть бути:
* Стилі автора (інформація надана автором сторінки):
** зовнішні таблиці стилів ({{lang-en|stylesheet}}), найчастіше окремий файл або файли '''.css'''
** внутрішні таблиці стилів, включені як частина документу або блоку
** стилі для окремого елементу
* Стилі користувача
** локальний .css-файл, вказаний користувачем для використання на сторінках і вказаний в налаштуваннях браузера (наприклад [[Opera]])
* Стилі переглядача ([[браузер]]а)
** стандартний стиль переглядача, наприклад стандартні стилі для елементів, визначені браузером, використовуються коли немає інформації про стиль елемента або вона неповна.
 
Стандарт CSS визначає порядок та діапазон застосування стилів, тобто, в якій послідовності і для яких елементів застосовуються стилі. Таким чином, використовується принцип ''каскадності'', коли для елементів вказується лише та інформація про стилі, що змінилася або не визначена загальнішими стилями.
 
=== Переваги ===
* Інформація про стиль для усього [[сайт|сайту]] або його частин може міститися в одному .css-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок;
* Різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки на [[принтер]], стиль для мобільних пристроїв;
* Сторінки зменшуються в об'ємі та стають більш структурованими, оскільки інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з урахуванням їх;
* Прискорення завантаження сторінок і зменшення обсягів інформації, що передається, навантаження на сервер та канал передачі. Досягається за рахунок того, що сучасні браузери здатні кешувати (запам'ятовувати) інформацію про стилі і використовувати для всіх сторінок, а не завантажувати для кожної.
 
=== Синтаксис ===
CSS має порівняно простий [[синтаксис]] і використовує небагато англійських слів для найменування різних складових стилю.
 
Стилі складаються зі списку правил. Кожне правило має один або більше селектор ({{lang-en|selector}}) та блок визначення ({{lang-en|declaration block}}). Блок визначення складається із оточеного фігурними дужками списку властивостей.
 
Властивості в списку оформлюються у вигляді '''назва властивості''', двокрапка (:), '''значення''', крапка з комою (;).
 
Приклад:
<source 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;
}
</source>
В прикладі використано 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 />
Щоб третє правило застосовувалося лише до абзаців, його слід переписати як:
<source lang="css">
p.note {
color: red;
background: yellow;
font-weight: bold;
}
</source>
Четверте правило стосується тих елементів рівня абзацу (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 з кирилічними коментарями]</ref>).
<source lang="css">
/* comment */
</source>
=== Селектори та Псевдо-класи ===
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]).
В наступному прикладі кілька селекторів об'єднуються через кому<ref>[http://www.w3.org/TR/CSS1#contextual-selectors contextual-selectors]</ref>. Правило встановлює шрифт для HTML-заголовків всіх рівнів.
<source lang="css">
h1, h2, h3, h4, h5, h6 {
font-family: "Arial", sans-serif;
}
</source>
 
=== Приєднання до сторінки ===
Щоб включити таблицю стилів CSS, потрібно зберегти код CSS у файл (це можна зробити будь-яким текстовим редактором), наприклад <var>example.css</var>, і потім включити або імпортувати його в HTML або XHTML-сторінку.
 
Включення CSS-файлу до сторінки ([[XHTML]]):
<source lang="xml">
<link rel="stylesheet" href="example.css" type="text/css" />
</source>
Включення CSS-файлу до сторінки ([[HTML]]):
<source lang="xml">
<link rel="stylesheet" href="example.css" type="text/css">
</source>
Імпорт CSS-файлів до HTML та XHTML-сторінок:
<source lang="xml">
<style type="text/css">
@import "example.css";
</style>
</source>
CSS може бути визначений в <code>&lt;head&gt;</code> частині сторінки або для елементу сторінки через <code>style</code>.
 
Включення CSS-файлу до [[XML]]-сторінки:
<source lang="xml">
<?xml-stylesheet type="text/css" href="example.css"?>
</source>
 
== Історія ==
Таблиці стилів в тому чи іншому вигляді існували з зародження [[SGML]] в [[1970-ті|1970-тих]]. Каскадні таблиці стилів розроблялися для спрощення процедури додавання інформації про стилі для веб-сторінок.
 
З розвитком [[HTML]] з’явилася можливість використовувати різні механізми для додавання стилів до елементів сторінки. Еволюція HTML дала веб-дизайнерам більше можливостей для створення вигляду сайту, але HTML-код ставав складнішим для написання та зміни. Через різницю у відображення сторінки в різних браузерах збереження стилю сторінки було складним, користувачі мали менше контролю над відображенням контенту.
 
На розгляд W3C було запропоновано дев’ять різних варіантів таблиць стилів. Після обговорення в спеціальному списку розсилки було обрано два, вони створили основу для того, що стало CSS: {{lang-en|Cascading HTML Style Sheets}} (CHSS) та {{lang-en|Stream-based Style Sheet Proposal}} (SSP). Спочатку в [[жовтень|жовтні]] [[1994]], [[Håkon Wium Lie]] (зараз [[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]], як провідні технічні спеціалісти до неї входили [[Håkon Wium Lie]] та [[Bert Bos]].
 
В [[грудень|грудні]] [[1996]] було опубліковано CSS рівня 1 — [http://www.w3.org/TR/CSS1 CSS level 1 Recommendation].
 
<!--
==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]]
 
== Посилання ==
<!--Україномовні-->
* [http://www.indeep76.com/Style/CSS/ Український переклад «Web Style Sheets home page».]
<!--Англомовні-->
* {{ref-en}} [http://cssbeauty.com/ CSSBeauty]&nbsp;— новини, робота, спільнота розробників. <small>[http://cssbeauty.com/gallery/ (Галерея стилів)]</small>
* {{ref-en}} [http://csszengarden.com/ CSS Zen garden]&nbsp;— приклади зміни вигляду HTML-документа в залежності від CSS.
* {{ref-en}} [http://www.stylishweb.org/ Stylish Web]&nbsp;— CSS для початківців
* {{ref-en}} [http://www.w3schools.com w3schools]&nbsp;— приклади та синтаксис каскадних таблиць стилів.
<!--Інші-->
* {{ref-ru}} [http://www.wisdomweb.ru/CSS/index.php Что такое CSS?] CSS підручник з прикладами і вправами.
*
 
 
51 593

редагування