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

34 байти вилучено ,  5 років тому
м
нема опису редагування
[перевірена версія][перевірена версія]
(Скасовано останнє редагування (46.200.238.63) і відновлено версію 18262317 46.98.74.210)
мНемає опису редагування
| extension = .css
| mime = text/css
| owner = [http://www.w3.org/ World Wide Web Consortium]
| creatorcode =
| genre = [[Stylesheet language]]
Специфікації CSS були створені та розвиваються [[W3C|Консорціумом Всесвітньої мережі]].
 
CSS має різні ''рівні'' та ''профілі''. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже наявні функції. Рівні позначаються як '''CSS1''', '''CSS2''' та '''CSS3'''. Профілі  — сукупність правил CSS одного або більше рівнів, створені для окремих типів пристроїв або [[інтерфейс]]ів. Наприклад, існують профілі CSS для [[принтер]]ів, мобільних пристроїв тощо.
 
CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці [[веб-сторінка|веб-сторінок]]. Головна перевага блочної верстки  — розділення змісту сторінки (даних) та їхньої візуальної презентації.
 
== Огляд ==
'''CSS''' використовується авторами та відвідувачами [[Веб-сторінка|веб-сторінок]], щоб визначити кольори, [[шрифт|шрифти]]и, [[Верстка веб-сторінки|верстку]] та інші аспекти вигляду сторінки. Одна з головних переваг  — можливість розділити зміст сторінки (або контент, наповнення, зазвичай [[HTML]], [[XML]] або подібна мова розмітки) від вигляду документу (що описується в CSS).
 
Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори тощо. CSS також дозволяє адаптувати контент до різних умов відображення (на екрані [[Монітор|монітора]], мобільного пристрою ([[Кишеньковий персональний комп'ютер|КПК]]), у роздрукованому вигляді, на екрані телевізора, пристроях з підтримкою [[Брайля шрифт|шрифту Брайля]] або голосових браузерах та ін.).
 
=== Переваги ===
* Інформація про стиль для усього [[сайт|сайту]]у або його частин може міститися в одному .css-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок;
* Різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки на [[принтер]], стиль для мобільних пристроїв;
* Сторінки зменшуються в об'ємі та стають більш структурованими, оскільки інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з урахуванням їх;
Приклад властивості: <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">
Завдяки каскадній структурі 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}}) для визначення діапазону застосування правила.
Таблиці стилів в тому чи іншому вигляді існували з зародження [[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]]).
В 1994 році було створено World Wide Web Consortium [[W3C]], серед інших питань W3C займався також і CSS. Робочу групу очолив [[Steven Pemberton]], як провідні технічні спеціалісти до неї входили [[Håkon Wium Lie]] та [[Bert Bos]].
 
В [[грудень|грудні]] [[1996]] було опубліковано CSS рівня 1 &nbsp;— [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.
 
* {{ref-ru}} [http://www.wisdomweb.ru/CSS/index.php Что такое CSS?] CSS підручник з прикладами і вправами.
 
 
{{Web-stub}}
{{refimprove}}
[[Категорія:Мови стилів]]
[[Категорія:Стандарти W3C]]
 
{{Мови таблиць стилей}}
{{JavaScript}}