CSS: различия между версиями

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску
Интерактивная навигация по истории
[непроверенная версия][непроверенная версия]
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
Нет описания правки
Метки: отменено с мобильного устройства из мобильной версии
(не показаны 994 промежуточные версии, сделанные более чем 100 участниками)
Строка 1: Строка 1:
{{Другие значения}}
{{К переименованию|2024-10-14|CSS (язык) |oldtitle=CSS}}
{{Файловый формат
| название = CSS
| логотип =
| genre = [[Язык таблиц стилей]]
| 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 (Recommendation)]
}}
{{HTML}}
{{HTML}}
'''CSS''' ({{lang-en|Cascading Style Sheets}} «каскадные таблицы стилей») — [[формальный язык]] декодирования и описания внешнего вида документа ([[веб-страница|веб-страницы]]), написанного с использованием [[Язык разметки|языка разметки]] (чаще всего [[HTML]] или [[XHTML]]). Также может применяться к любым [[XML|XML-документам]], например, к [[SVG]] или [[XUL]].
'''CSS''' ({{lang-en|Cascading Style Sheets}} — каскадные таблицы стилей) — технология оформления веб-страниц, элемент [[концепция|концепции]] [[DHTML]]. Таблицы (точнее — списки) CSS cлужат для оформления преимущественно [[HTML]]- и [[XHTML]]-документов, но иногда используются и для других [[документ]]ов, структурированных с помощью [[XML]] (например, в [[браузер|браузере]] [[Mozilla|«Mozilla»]] для оформления элементов графического [[интерфейс]]а, [[XUL]]).


== Обзор ==
До появления CSS оформление веб-страниц размечалось внутри самого содержимого веб-страниц. С появлением CSS стало возможным принципиальное отделение [[информация|информации]] документа от его оформления. За счёт этого нововведения стало возможно лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.


=== Использование CSS ===
== История ==
CSS используется создателями [[веб-страница|веб-страниц]] для задания [[цвет]]ов, [[шрифт]]ов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы (которое производится с помощью [[HTML]] или других [[язык разметки|языков разметки]]) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью [[формальный язык|формального языка]] CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
=== Уровень 1 (CSS1) ===
Рекомендация [[W3C|Консорциума Всемирной паутины (W3C)]] принята [[17 декабря]] [[1996]], пересмотрена [[11 января]] [[1999]].


Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или [[метод]]ах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими [[шрифт Брайля]]{{Нет АИ|14|11|2019}}.
=== Уровень 2 (CSS2)===
Рекомендация W3C принята [[12 мая]] [[1998]]. Построена на CSS1 с сохранением обратной совместимости.


=== Способы подключения CSS к документу ===
==== Уровень 2.1 (CSS2.1)====
Правила CSS могут располагаться как в самом [[веб-документ]]е, внешний вид которого они описывают, так и во внешних [[файл]]ах, имеющих [[формат файла|расширение]] <code>.css</code>. Формат CSS — это [[текстовый файл]], в котором содержится перечень правил CSS и комментариев к ним.<br>Стили CSS могут быть подключены или внедрены в описываемый ими [[веб-документ]] четырьмя способами:
Возможная рекомендации W3C от [[25 февраля]] [[2004]]. Построена на CSS2, содержит исправления ошибок.
* когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента {{tago|link}}, включённого в элемент {{tago|head}}:
<source lang="html">
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
.....
</body>
</html>
</source>
* когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе{{tago|style}}:
<source lang="html">
<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
</style>
</head>
</html>
</source>
* когда стили описаны внутри документа, они могут быть включены в элемент {{tago|style}}, который, включается в элемент {{tago|head}}:
<source lang="html">
<!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
</style>
</head>
<body>
.....
</body>
</html>
</source>
* когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента
<source lang="html">
<!DOCTYPE>
<html>
<head>
.....
</head>
<body>
<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
.....
</p>
</body>
</html>
</source>


В первых двух случаях к документу применены ''внешние стили'', а во вторых — ''внутренние стили''.
=== Уровень 3 (CSS3)===
Рабочая версия.


Для добавления CSS к [[XML|XML-документу]] последний должен содержать специальную ссылку на файл стилей:
== Включение в HTML ==
<source lang="xml">
CSS можно включать в HTML двумя способами:
<?xml-stylesheet type="text/css" href="style.css"?>
*Непосредственно в HTML документе:
</source>
<nowiki>

<style type="text/css">
=== Правила построения CSS ===
body {
В первых трёх случаях подключения стилей CSS к документу (см. выше) каждое правило CSS из файла имеет две основные части — ''селектор'' и ''блок объявлений''. ''Селектор'', расположенный в левой части правила до знака «{», определяет, на какие части документа (возможно, специально обозначенные) распространяется правило. ''Блок объявлений'' располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более ''объявлений'', разделённых знаком «;». Каждое ''объявление'' представляет собой сочетание ''свойства CSS'' и ''значения'', разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
color: red;
<source lang="css">
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
</source>
В четвёртом случае подключения CSS к документу (см. список) правило CSS, являющееся значением атрибута style элемента, к которому он применяется, представляет собой перечень ''объявлений'' («''свойство CSS'' : ''значение''»), разделённых знаком «;».

==== Виды селекторов ====

===== Универсальный селектор =====
<source lang="css">
* {
margin: 0;
padding: 0;
}
</source>

===== Селектор тегов =====
<source lang="css">
p {
font-family: arial, helvetica, sans-serif;
}
</source>

===== Селектор классов =====
<source lang="css">
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
</source>

===== Селектор идентификаторов =====
<source lang="css">
#paragraph1 {
margin: 0;
}
</source>

===== Селектор атрибутов =====
<source lang="css">
a[href="http://www.somesite.com"] {
font-weight: bold;
}
</source>

===== Селектор потомков (контекстный селектор) =====
<source lang="css">
div#paragraph1 p.note {
color: blue;
}
</source>

===== Селектор дочерних элементов =====
<source lang="css">
p.note > b {
color:green;
}
.div {
border: 1px solid red;
padding-left: 20px;
}
.title {
font-size: 20px;
background-color: red;
}
</source>

===== Селектор элементов одного уровня =====
<source lang="css">
h1 + p {
font-size: 24px;
}
</source>

===== Селектор псевдоклассов =====
<source lang="css">
a:active {
color: blue;
}

</source>

===== Селектор псевдоэлементов =====
<source lang="css">
p::first-letter {
font-size: 32px;
}
</source>

=== Классы и идентификаторы элементов ===
Класс или идентификатор может быть присвоен какому-нибудь элементу HTML посредством атрибутов class или id этого элемента:

<source lang="html">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Селекторы классов и идентификаторов
</title>
<style>
p.big {
font-family: arial, helvetica, sans-serif;
color: red;
}
div#first {
background-color: silver;
}
}
</style>
</style>
</nowiki>
</head>
<body>
*Лишь ссылка в HTML, а сами CSS в отдельном файле:
<div id="first">
<nowiki><link href="style.css" rel="stylesheet" type="text/css"></nowiki>
<!-- Это div c серым фоном, стилизованный по id -->
</div>
<p class="big">
<!-- Это текст красного цвета -->
</p>
</body>
</html>
</source>Основное различие между классами элементов и идентификаторами элементов в том, что идентификатор предназначен для одного элемента, тогда как класс обычно присваивают сразу нескольким. Тем не менее, современные браузеры, как правило, корректно отображают множественные элементы с одинаковым идентификатором. Также различие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.


Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в [[JavaScript]] для нахождения уникального элемента в документе.
=== XHTML ===

Для включения CSS в [[XHTML]] существует ещё один способ:
Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.
<nowiki><?xml-stylesheet href="style.css" type="text/css"?></nowiki>

Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с „.“, например, „.big“) или свойство идентификатора самого по себе (в таком случае селектор начинается с „#“, например, „#first“), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.

В CSS, помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых [https://webref.ru/css#pseudo-class ''псевдоклассов'',] описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых ''[https://webref.ru/css#pseudo-elements псевдоэлемента]'': первая буква, первая строка, применение специальных стилей до и после элемента.

=== Наследование. Каскадирование. Приоритеты стилей CSS. ===
Применение CSS к документам HTML основано на принципах ''наследования'' и ''каскадирования''. Принцип ''наследования'' заключается в том, что свойства CSS, объявленные для элементов-предков, почти всегда наследуются элементами-потомками.

Принцип ''каскадирования'' применяется в случае, когда какому-то элементу [[HTML]] одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.
* Наиболее низким приоритетом обладает стиль браузера;
* Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
* И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
** Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
** Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
** Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел "виды селекторов"), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. Расчёт специфичности будет описан ниже.
*** Специфичность селекторов делится на 4 группы — <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>:
**** если стиль встроенный (определён как <code>style="..."</code>, то <code>а=1</code>, иначе <code>a=0</code>) ;
**** значение <code>b</code> равно количеству идентификаторов (иначе — id=" ", они начинаются с <code>#</code>) в селекторе;
**** значение <code>c</code> равно количеству классов (class=" ", они начинаются с <code>.</code>), псевдоклассов (они начинаются с <code>:</code>, например <code>a:hover</code>) и селекторов атрибутов (<code>input[type="text"</code>);
**** значение <code>d</code> равно количеству селекторов типов элементов (<code>h1 { color: blue; }</code>) и псевдокод-элементов (<code>p::first-line { color: blue; }</code>). После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.
*** Таблица расчёта специфичности{{sfn|Макфарланд|2017|c=126}}:

{| class="wikitable"
!Селектор
!a, b, c, d
!Число
|-
|span
|0, 0, 0, 1
|1
|-
|div .class
|0, 0, 1, 1
|11
|-
|#id .class
|0, 1, 1, 0
|110
|-
|div span
|0, 0, 0, 2
|2
|-
|.class
|0, 0, 1, 0
|10
|-
|#id span
|0, 1, 0, 1
|101
|}

* Но, самым высоким приоритетом обладают стили, объявленные автором страницы ''или пользователем'', с помощью сопроводительного правила<code>!important</code>. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, ''заданным автором или пользователем'', а для остальных свойств, которые будут являться задаваемыми автором страницы, потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих специфичностей.

=== Пример таблицы стилей ===
Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css либо же обрамлена тегами {{tago|style}} и размещена в «шапке» той самой веб-страницы, на которую она действует):
<source lang="css">
p {
font-family: arial, helvetica, sans-serif;
}
h2 {
font-size: 20pt;
color: red;
background: white;
}
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
p#paragraph1 {
padding-left: 10px;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
}
[type="button"] {
background-color: green;
}
</source>
Здесь приведено семь правил CSS с селекторами <code>p</code>, <code>h2</code>, <code>.note</code>, <code>p#paragraph1</code>, <code>a:hover</code>, <code>#news p</code> и <code>[type="button"]</code>.

# Первое правило присвоено HTML-элементу <code>'''p'''</code> ([[абзац]]у) — назначен стиль. Абзацы будут отображаться шрифтом Arial или, если такой шрифт недоступен, тогда Helvetica или Sans-serif, иначе, другим шрифтом этого семейства.
# Второе правило присвоено HTML-элементу <code>'''h2'''</code> (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным [[Кегль|размером]].
# Третье правило будет применено к ''любому'' элементу, атрибут <code>'''class'''</code> которого равен «note». Например, к параграфу: <code><nowiki><p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на жёлтом фоне. </p></nowiki></code>
# Четвёртое правило будет применяться только к элементу <code>p</code>, атрибут <code>id</code> которого равен <code>paragraph1</code>. Такой элемент будет иметь внутренний отступ в 10 пикселей (padding).
# Пятое правило определяет стиль ''hover'' для элементов <code>'''a'''</code> — [[Гиперссылка|гиперссылок]]. [[По умолчанию]], в большинстве браузеров текст элементов <code>'''a'''</code> подчёркивается. Это правило уберёт подчёркивание, когда указатель мыши находится над этими элементами.
# Шестое правило, применяется для элементов <code>'''p'''</code>, которые находятся внутри ''какого-либо'' элемента с атрибутом <code>id</code>, равным «<code>news</code>» (#news p — это типичный случай селектора потомков, см. [[CSS#Виды селекторов|5-й пункт списка выше]]).
# Седьмое правило применяется для всех элементов, у которых атрибут <code>type</code> равен <code>'''button'''</code>. Например, это правило будет применено к элементу <code>&lt;input type="button"&gt;</code>или <code>&lt;button type="button">Кнопка</button></code> (обычная кнопка), изменив его цвет фона на зелёный.

== CSS-вёрстка ==
До появления CSS оформление веб-страниц осуществлялось исключительно средствами [[HTML]], непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Преимущества:
* Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на [[Карманный персональный компьютер|КПК]] и сотовом телефоне меню будет следовать за содержимым.
* Уменьшение времени загрузки страниц сайта за счёт переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть [[кэш|закэшировано]].
* Простота последующего изменения дизайна. Не нужно править каждую страницу, а достаточно лишь изменить CSS-файл.
* Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Недостатки:
* Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.
* Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно увеличивает время редактирования и тестирования.

== История создания и развития CSS ==
[[File:W3C CSS Snapshot.png|thumb|CSS Snapshot 2021]]
CSS — одна из широкого спектра технологий, одобренных консорциумом [[W3C]] и получивших общее название «стандарты Web»<ref name="shea">Дэйв Ши, Молли Е. Хольцшлаг. Философия CSS-дизайна. / Пер. с англ. А. Слинкина. — М.: НТ Пресс, 2005. — 312 с.: ил.</ref>. В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и [[веб-дизайнер]]ы проектировали бы сайты. Так появились языки [[HTML]] 4.01 и [[XHTML]], и стандарт CSS.

В начале 1990-х различные браузеры имели свои стили для отображения веб-страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.

Термин «каскадные таблицы стилей» был предложен [[Хокон Виум Ли|Хоконом Ли]] в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определённых ранее стилях.

В середине 1990-х Консорциум Всемирной паутины ([[W3C]]) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

=== Уровень 1 (CSS1) ===
Рекомендация W3C, принята [[17 декабря]] [[1996 год]]а, откорректирована [[11 января]] [[1999 год]]а<ref>{{Cite web |url=http://www.w3.org/TR/CSS1 |title=Cascading Style Sheets, level 1<!-- Заголовок добавлен ботом --> |access-date=2006-06-16 |archive-date=2011-02-09 |archive-url=https://web.archive.org/web/20110209205309/http://www.w3.org/TR/CSS1/ |deadlink=no }}</ref>. Среди возможностей, предоставляемых этой рекомендацией:

* Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
* Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
* Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
* Выравнивание для текста, изображений, таблиц и других элементов.
* Свойства блоков, такие как высота, ширина, внутренние ({{code|padding}}) и внешние ({{code|margin}}) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие как {{code|float}} и {{code|clear}}.

=== Уровень 2 (CSS2) ===
Рекомендация W3C, принята [[12 мая]] [[1998 год]]а<ref>{{Cite web |url=http://www.w3.org/TR/2008/REC-CSS2-20080411/ |title=Cascading Style Sheets, level 2 CSS2 Specification |access-date=2011-03-09 |archive-date=2011-01-16 |archive-url=https://web.archive.org/web/20110116000124/http://www.w3.org/TR/2008/REC-CSS2-20080411/ |deadlink=no }}</ref>. Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:

* Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без [[табличная вёрстка|табличной вёрстки]].
* Типы носителей. Позволяет устанавливать разные стили для разных носителей (например [[Монитор (устройство)|монитор]], [[принтер]], [[Карманный персональный компьютер|КПК]]).
* Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
* Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
* Расширенный механизм селекторов.
* Указатели.
* Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.

В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1

==== Уровень 2, ревизия 1 (CSS2.1) ====
Рекомендация W3C, принята [[7 июня]] [[2011 год]]а.

CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые{{какие}} и вовсе удалены. Удалённые части могут быть в будущем добавлены в CSS3.

=== Уровень 3 (CSS3) ===
[[Файл:CSS3_taxonomy_and_status-v2.png|360px|thumb|CSS3 таксономия и статус:<br>
<span style="color:#83af40; font-size:180%;">●</span> Рекомендация<br>
<span style="color:#8a8a3c; font-size:180%;">●</span> Кандидат в рекомендации<br>
<span style="color:#c3642f; font-size:180%;">●</span> Последнее требование<br>
<span style="color:#ed1e24; font-size:180%;">●</span> Рабочий проект]]

'''CSS3''' ({{lang-en|Cascading Style Sheets 3}} — '''каскадные таблицы стилей третьего поколения''') — активно разрабатываемая спецификация [[Каскадные таблицы стилей|CSS]]. Представляет собой [[формальный язык]], реализованный с помощью [[Язык разметки|языка разметки]]. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования [[JavaScript|JS]]<ref>{{Cite web |url=http://htmlbook.ru/blog/prostaya-css3-animaciya-s-animatecss |title=Простая CSS3 анимация с Animate.css |access-date=2018-09-18 |archive-date=2018-09-18 |archive-url=https://web.archive.org/web/20180918123609/http://htmlbook.ru/blog/prostaya-css3-animaciya-s-animatecss |deadlink=no }}</ref>, поддержка линейных и радиальных градиентов, теней, сглаживания и прочее.

Преимущественно используется как средство описания и оформления внешнего вида [[веб-страница|веб-страниц]], написанных с помощью [[язык разметки|языков разметки]] [[HTML]] и [[XHTML]], но может также применяться к любым [[XML|XML-документам]], например, к [[SVG]] или [[XUL]].

Разрабатываемая версия (список всех модулей)<ref>[[W3C]]: ''[http://www.w3.org/Style/CSS/current-work CSS: current work] {{Wayback|url=http://www.w3.org/Style/CSS/current-work |date=20110303230112 }}'', CSS 3, etc.</ref>.

В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо. CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.

Нововведения, начиная с малых, вроде закруглённых углов блоков, заканчивая трансформацией ([[Мультипликация (технология)|анимацией]]) и, возможно, введением [[Переменная (программирование)|переменных]]<ref>[http://rip747.wordpress.com/2008/04/10/css3-css-variables-are-a-bad-idea-just-allow-us-to-call-other-selectors/ CSS3: css variables are a bad idea. Just allow us to call other selectors.] {{Wayback|url=http://rip747.wordpress.com/2008/04/10/css3-css-variables-are-a-bad-idea-just-allow-us-to-call-other-selectors/ |date=20100102114121 }} // Rip’s Domain</ref><ref>[http://www.dave-woods.co.uk/index.php/css-variables/ CSS Variables] {{Wayback|url=http://www.dave-woods.co.uk/index.php/css-variables/ |date=20100405084114 }} // dave-woods.co.uk</ref>.

=== Уровень 4 (CSS4) ===
Разрабатывается [[W3C]] с 29 сентября 2011 года<ref>{{cite web |url=http://www.w3.org/TR/2011/WD-selectors4-20110929/ |title=Selectors Level 4 |publisher=W3.org |date=2011-09-29 |archiveurl=https://www.webcitation.org/682WaRboP?url=http://www.w3.org/TR/2011/WD-selectors4-20110929/ |archivedate=2012-05-30 |deadurl=yes }}</ref><ref>{{cite web |url=http://www.webmonkey.com/2011/10/discover-whats-new-in-css-4/ |title=Discover What's New in CSS 4 &#124; Webmonkey &#124; Wired.com |publisher=Webmonkey |date=2011-10-26 |archiveurl=https://www.webcitation.org/682WbfhI6?url=http://www.webmonkey.com/2011/10/discover-whats-new-in-css-4/ |archivedate=2012-05-30 |deadurl=yes }}</ref>.

Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).

Например:

* [http://dev.w3.org/csswg/css-cascade/ CSS Cascading and Inheritance Level 4]
* [http://dev.w3.org/csswg/selectors-4/ Selectors Level 4]
* [http://dev.w3.org/csswg/css-images-4/ CSS Image Values and Replaced Content Module Level 4]
* [http://dev.w3.org/csswg/css-backgrounds-4/ CSS Backgrounds and Borders Module Level 4]
* [http://dev.w3.org/csswg/css-color/ CSS Color Module Level 4]
* [http://dev.w3.org/csswg/mediaqueries-4/ Media Queries Level 4]
* [http://dev.w3.org/csswg/css-pseudo-4/ CSS Pseudo-Elements Module Level 4]
* [http://dev.w3.org/csswg/css-text-4/ CSS Text Module Level 4]

== Поддержка CSS браузерами ==
Наиболее полно поддерживающими стандарт CSS являются работающие на [[Браузерный движок|движках]] [[Gecko]] ([[Mozilla Firefox]] и др.), [[WebKit]] ([[Safari]], [[Arora]], [[Google Chrome]]) и [[Presto (Opera)]]<ref>{{Cite web |url=http://www.webdevout.net/browser-support-summary |title=Web browser standards support |access-date=2008-01-11 |archive-date=2020-04-14 |archive-url=https://web.archive.org/web/20200414175623/http://www.webdevout.net/browser-support-summary |deadlink=no }}</ref> браузеры.

Бывший самый распространённый браузер<ref>{{Cite web |url=http://www.onestat.com/html/aboutus_pressbox53-firefox-mozilla-browser-market-share.html |title=Mozilla’s Firefox global usage share is still growing according to OneStat.com |access-date=2008-01-11 |archive-date=2021-02-26 |archive-url=https://web.archive.org/web/20210226040826/http://www.onestat.com/html/aboutus_pressbox53-firefox-mozilla-browser-market-share.html |deadlink=no }}</ref> [[Internet Explorer]] 6 поддерживает CSS не полностью<ref>{{Cite web |url=http://www.quirksmode.org/css/contents.html |title=Contents and browser compatibility |access-date=2008-01-11 |archive-date=2008-01-11 |archive-url=https://web.archive.org/web/20080111131932/http://www.quirksmode.org/css/contents.html |deadlink=no }}</ref>.

Вышедший спустя семь лет Internet Explorer 7 значительно улучшил уровень поддержки CSS<ref>[http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx Details on our CSS changes for IE7] {{Wayback|url=http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx |date=20080730034543 }} IEBlog</ref><ref>[http://msdn2.microsoft.com/en-us/library/bb250496(VS.85).aspx Cascading Style Sheet Compatibility in Internet Explorer 7] {{Wayback|url=http://msdn2.microsoft.com/en-us/library/bb250496(VS.85).aspx |date=20080201060544 }} MSDN</ref>, но всё ещё содержал значительное количество ошибок<ref>{{Cite web |url=http://www.positioniseverything.net/explorer.html |title=The weird and wonderful world of Internet Explorer |accessdate=2008-01-11 |archiveurl=https://web.archive.org/web/20080113140509/http://www.positioniseverything.net/explorer.html |archivedate=2008-01-13 |deadlink=yes }}</ref>.

В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3<ref>[http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx CSS Compatibility and Internet Explorer] {{Wayback|url=http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx |date=20101229183655 }} MSDN</ref>.

Для проверки поддержки браузером веб-стандартов, в том числе и различных частей стандарта CSS, был разработан тест [[Acid3|Acid]].

=== Различные блоковые модели ===
В стандартах CSS от Консорциума [[W3C]] используется модель, в которой свойство {{code|width}} определяет ширину содержимого блока, не включая в неё отступы и рамки. Ранние версии [[Internet Explorer]] (4 и 5) реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы ({{code|padding}}) и рамки ({{code|border}}). Кроме Internet Explorer 5, эту модель также понимают браузеры [[Netscape Navigator|Netscape]] 4 и [[Opera]] 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.

В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство {{code|box-sizing}} со значениями {{code|content-box}} для указания на использование стандартной модели W3C и {{code|border-box}} для использования модели IE 5.

В браузере [[Mozilla]] при поддержке этого свойства под собственным «рабочим» названием {{code|-moz-box-sizing}} ввели ещё одно значение — {{code|padding-box}}, таким образом создав третью блочную модель, в которой {{code|width}} — это размер содержимого и отступов блока, не включая рамки.

=== CSS-фильтры ===
Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять стили к различным элементам. Например, известно, что [[Internet Explorer]] 6 применяет правила, использующие селекторы вида <code>* html ''селектор''</code> (фильтр, известный как «[[star html bug]]»). Чтобы блоковая модель W3C и IE, работающая в [[Quirks mode]], отображала блок {{code|#someblock}} шириной в 100 пикселей и внутренними отступами в 10 пикселей, можно написать такой код:

<source lang="css">
/* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */
#someblock { width: 80px; padding: 10px; }
</source>

<source lang="css">
/* Следующее правило применит только IE6. */
* html #someblock { width: 100px; padding: 10px; }
</source>

Ещё одним способом выборочного применения правил для Internet Explorer являются [[условные комментарии]].

=== Безопасность ===
Все поддерживаемые в 2010 году версии Internet Explorer были уязвимы: при обработке браузером каскадных стилей (CSS) может возникнуть неинициализированная память, впоследствии используемая для удалённого запуска вредоносного кода на компьютере пользователя<ref>{{Cite web |url=http://www.interfax.by/article/74491 |title=Microsoft: все версии Internet Explorer уязвимы для хакеров |access-date=2011-01-02 |archive-date=2011-01-03 |archive-url=https://web.archive.org/web/20110103130237/http://www.interfax.by/article/74491 |deadlink=no }}</ref>.

== CSS Framework ==
{{main|CSS-фреймворк}}

'''CSS Framework''' (также '''Web design framework''') — это заранее подготовленная CSS-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же, как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушённому в тонкостях вёрстки программисту или дизайнеру правильно создать html-макет.

== Расширения CSS ==
Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах.

Для решения этих вопросов и ускорения разработки существует несколько расширений (препроцессоров) языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:
* во время запуска страницы на стороне клиента (средствами [[JavaScript]])
* во время запуска страницы на стороне сервера
* во время вёрстки сайта средствами специального компилятора

Примеры расширений (препроцессоров) CSS:
* [[Sass]]
* [[LESS (язык стилей)|LESS]]
* [[Stylus (язык таблиц стилей)|Stylus]]
* Языки некоторых расширений [[PostCSS]]


== См. также ==
== См. также ==
{{Викиучебник|CSS}}
* [[HTML]]
* [[XHTML]]
* [[HTML5]]
* [[XML]]
* [[XSLT]]
* [[SGML]]
* [[SGML]]
* [[DOM]]
* [[JavaScript]]
* [[JavaScript]]
* [[CSS Framework]]
* [[CSSTidy]]

== Примечания ==
{{примечания|2}}

== Литература ==
* {{книга
|заглавие = Новая большая книга CSS
|оригинал = CSS: The Missing Manual
|автор = Дэвид Сойер Макфарланд
|страниц = 720
|isbn = 978-5-496-02080-0
|год = 2017
|тираж = 1000
|место = Санкт-Петербург
|издательство = [[Питер (издательство)|Питер]]
|ref=Макфарланд
}}
* {{книга
|заглавие = HTML, XHTML и CSS для чайников, 7-е издание
|оригинал = HTML, XHTML & CSS For Dummies, 7th Edition
|автор = Эд Титтел, Джефф Ноубл
|страниц = 400
|isbn = 978-5-8459-1752-2
|год = 2011
|место = М.
|издательство = [[Диалектика (издательство)|«Диалектика»]]
}}
* {{книга
|заглавие = HTML, XHTML и CSS. Библия пользователя, 5-е издание
|оригинал = HTML, XHTML, and CSS Bible, 5th Edition
|автор = Стивен Шафер
|страниц = 656
|isbn = 978-5-8459-1676-1
|год = 2011
|место = М.
|издательство = [[Диалектика (издательство)|«Диалектика»]]
}}


== Ссылки ==
== Ссылки ==
wwwazizbe_811.com
* [http://www.w3.org/Style/CSS/ Описание CSS на официальном сайте W3C]
=== Англоязычные ресурсы ===relax
* [http://jigsaw.w3.org/css-validator/ Валидатор CSS]
*d[http://www.w3.org/Style/CSS/Overview.en.html Cascading Style Sheets Home page]{{ref-en}}
* [http://www.w3.org/Style/Overview.en.html Web Style Sheets Home page]{{ref-en}}
* [http://www.quirksmode.org/css/box.html Различные блоковые модели CSS]{{ref-en}}
* [http://css3test.com/ CSS3-тест браузера]{{ref-en}}
* [http://www.webdevout.net/browser_support_css.php Таблицы поддерживаемых браузерами возможностей CSS]{{ref-en}}
* [http://jigsaw.w3.org/css-validator/ Валидатор CSS]{{ref-en}}
* [http://www.csszengarden.com/ Демонстрация возможностей CSS-вёрстки]{{ref-en}}
* [http://www.css3.info/preview/ CSS3 Preview — Демонстрация новых возможностей CSS3]{{ref-en}}
* [http://www.romancortes.com/blog/pure-css-coke-can/ Демонстрация возможностей]{{ref-en}}
* [http://cssresizer.com Оптимизатор CSS кода]{{ref-en}}


=== Русскоязычные ресурсы ===
* [http://www.w3.org/Style/CSS/Overview.ru.html Каскадные Таблицы Стилей Домашняя страница]{{ref-ru}}
* [http://www.w3.org/Style/Overview.ru.html Веб таблицы стилей Домашняя страница]{{ref-ru}}
* [http://jigsaw.w3.org/css-validator/validator.html.ru Сервис проверки CSS от W3C]
* [http://ru.html.net/tutorials/css/ Учебник CSS] (рекомендован [http://www.w3.org/Style/CSS/learning w3.org])
* [http://htmlbook.ru/css Справочник CSS]

{{Языки таблиц стилей}}
{{Стандарты W3C}}
{{CSS}}


[[Категория:Языки разметки]]
[[Категория:Языки разметки]]
[[Категория:Языки стилей]]
[[Категория:Стандарты Интернета]]
[[Категория:Стандарты Интернета]]
[[Категория:Стандарты W3C]]

[[Категория:Каскадные таблицы стилей]]
[[ar:صفحات الطرز المتراصة]]
[[cs:CSS]]
[[de:Cascading Style Sheets]]
[[en:Cascading Style Sheets]]
[[eo:CSS]]
[[es:Hojas de estilo en cascada]]
[[et:CSS]]
[[fi:CSS]]
[[fr:Feuilles de style en cascade]]
[[he:CSS]]
[[hu:CSS]]
[[it:Foglio di stile]]
[[ja:Cascading Style Sheets]]
[[ko:CSS]]
[[nl:Cascading Style Sheets]]
[[nn:Stilark]]
[[no:Cascading Style Sheets]]
[[pl:Kaskadowe arkusze stylów]]
[[pt:Cascading Style Sheets]]
[[sv:CSS]]
[[vi:CSS]]
[[zh:CSS]]

Версия от 00:10, 1 декабря 2024

У этого термина существуют и другие значения, см. CSS (значения).
CSS
Изображение логотипа
Расширение .css
MIME-тип text/css
Разработчик CSS Working Group
Опубликован 17 декабря 1996
Тип формата Язык таблиц стилей
Стандарт(ы) Level 1 (Recommendation)
Level 2 (Recommendation)
Level 2 Revision 1 (Recommendation)
Сайт w3.org/Style/CSS/
drafts.csswg.org
Логотип Викисклада Медиафайлы на Викискладе
HTML

CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык декодирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.

Обзор

Использование CSS

CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими шрифт Брайля[источник не указан 1873 дня].

Способы подключения CSS к документу

Правила CSS могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних файлах, имеющих расширение .css. Формат CSS — это текстовый файл, в котором содержится перечень правил CSS и комментариев к ним.
Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:

  • когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента <link>, включённого в элемент <head>:
<!DOCTYPE html>
<html>
   <head>
      .....
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      .....
   </body>
</html>
  • когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе<style>:
<!DOCTYPE html>
<html>
   <head>
      .....
      <style media="all">
         @import url(style.css);
      </style>
   </head>
</html>
  • когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в элемент <head>:
<!DOCTYPE html>
<html>
   <head>
      .....
      <style>
         body { 
            color: red;
         }
      </style>
   </head>
   <body>
      .....
   </body>
</html>
  • когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента
<!DOCTYPE>
<html>
   <head>
      .....
   </head>
   <body>
      <p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
         .....
      </p>
   </body>
</html>

В первых двух случаях к документу применены внешние стили, а во вторых — внутренние стили.

Для добавления CSS к XML-документу последний должен содержать специальную ссылку на файл стилей: 

  <?xml-stylesheet type="text/css" href="style.css"?>

Правила построения CSS

В первых трёх случаях подключения стилей CSS к документу (см. выше) каждое правило CSS из файла имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила до знака «{», определяет, на какие части документа (возможно, специально обозначенные) распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них. 

селектор, селектор {
  свойство: значение;
  свойство: значение;
  свойство: значение;
}

В четвёртом случае подключения CSS к документу (см. список) правило CSS, являющееся значением атрибута style элемента, к которому он применяется, представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».

Виды селекторов

Универсальный селектор
* {
   margin: 0; 
   padding: 0; 
}
Селектор тегов
p {
   font-family: arial, helvetica, sans-serif; 
}
Селектор классов
.note {
   color: red; 
   background-color: yellow; 
   font-weight: bold; 
}
Селектор идентификаторов
#paragraph1 {
    margin: 0; 
}
Селектор атрибутов
 
a[href="http://www.somesite.com"] {
   font-weight: bold; 
}
Селектор потомков (контекстный селектор)
div#paragraph1 p.note {
   color: blue; 
}
Селектор дочерних элементов
p.note > b {
    color:green; 
}
.div {
    border: 1px solid red;
    padding-left: 20px;
}
.title {
    font-size: 20px;
    background-color: red;
}
Селектор элементов одного уровня
h1 + p {
   font-size: 24px; 
}
Селектор псевдоклассов
a:active {
   color: blue;
}
Селектор псевдоэлементов
p::first-letter {
   font-size: 32px;
}

Классы и идентификаторы элементов

Класс или идентификатор может быть присвоен какому-нибудь элементу HTML посредством атрибутов class или id этого элемента: 

<!DOCTYPE html>
<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>
        Селекторы классов и идентификаторов
    </title>
    <style>
        p.big {
            font-family: arial, helvetica, sans-serif;
            color: red; 
        }
        
        div#first {
            background-color: silver; 
        }
    </style>
   </head>
   <body>
       <div id="first">
          <!-- Это div c серым фоном, стилизованный по id -->
       </div>
       <p class="big">
          <!-- Это текст красного цвета -->
       </p>
   </body>
</html>

Основное различие между классами элементов и идентификаторами элементов в том, что идентификатор предназначен для одного элемента, тогда как класс обычно присваивают сразу нескольким. Тем не менее, современные браузеры, как правило, корректно отображают множественные элементы с одинаковым идентификатором. Также различие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.

Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе.

Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.

Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с „.“, например, „.big“) или свойство идентификатора самого по себе (в таком случае селектор начинается с „#“, например, „#first“), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.

В CSS, помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых псевдоэлемента: первая буква, первая строка, применение специальных стилей до и после элемента.

Наследование. Каскадирование. Приоритеты стилей CSS.

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, почти всегда наследуются элементами-потомками.

Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.

  • Наиболее низким приоритетом обладает стиль браузера;
  • Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
  • И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
    • Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
    • Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
    • Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел "виды селекторов"), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. Расчёт специфичности будет описан ниже.
      • Специфичность селекторов делится на 4 группы — a, b, c, d:
        • если стиль встроенный (определён как style="...", то а=1, иначе a=0) ;
        • значение b равно количеству идентификаторов (иначе — id=" ", они начинаются с #) в селекторе;
        • значение c равно количеству классов (class=" ", они начинаются с .), псевдоклассов (они начинаются с :, например a:hover) и селекторов атрибутов (input[type="text");
        • значение d равно количеству селекторов типов элементов (h1 { color: blue; }) и псевдокод-элементов (p::first-line { color: blue; }). После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.
      • Таблица расчёта специфичности[1]:
Селектор a, b, c, d Число
span 0, 0, 0, 1 1
div .class 0, 0, 1, 1 11
#id .class 0, 1, 1, 0 110
div span 0, 0, 0, 2 2
.class 0, 0, 1, 0 10
#id span 0, 1, 0, 1 101
  • Но, самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного правила!important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным автором или пользователем, а для остальных свойств, которые будут являться задаваемыми автором страницы, потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих специфичностей.

Пример таблицы стилей

Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css либо же обрамлена тегами <style> и размещена в «шапке» той самой веб-страницы, на которую она действует): 

p {
   font-family: arial, helvetica, sans-serif; 
}
h2 {
   font-size: 20pt; 
   color: red; 
   background: white; 
}
.note {
   color: red; 
   background-color: yellow; 
   font-weight: bold; 
}
p#paragraph1 {
   padding-left: 10px;
}
a:hover {
   text-decoration: none;
}
#news p {
   color: blue;
}
[type="button"] {
   background-color: green;
}

Здесь приведено семь правил CSS с селекторами p, h2, .note, p#paragraph1, a:hover, #news p и [type="button"].

  1. Первое правило присвоено HTML-элементу p (абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Arial или, если такой шрифт недоступен, тогда Helvetica или Sans-serif, иначе, другим шрифтом этого семейства.
  2. Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным размером.
  3. Третье правило будет применено к любому элементу, атрибут class которого равен «note». Например, к параграфу: <p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на жёлтом фоне. </p>
  4. Четвёртое правило будет применяться только к элементу p, атрибут id которого равен paragraph1. Такой элемент будет иметь внутренний отступ в 10 пикселей (padding).
  5. Пятое правило определяет стиль hover для элементов a — гиперссылок. По умолчанию, в большинстве браузеров текст элементов a подчёркивается. Это правило уберёт подчёркивание, когда указатель мыши находится над этими элементами.
  6. Шестое правило, применяется для элементов p, которые находятся внутри какого-либо элемента с атрибутом id, равным «news» (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше).
  7. Седьмое правило применяется для всех элементов, у которых атрибут type равен button. Например, это правило будет применено к элементу <input type="button">или <button type="button">Кнопка</button> (обычная кнопка), изменив его цвет фона на зелёный.

CSS-вёрстка

До появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Преимущества:

  • Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
  • Уменьшение времени загрузки страниц сайта за счёт переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть закэшировано.
  • Простота последующего изменения дизайна. Не нужно править каждую страницу, а достаточно лишь изменить CSS-файл.
  • Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Недостатки:

  • Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.
  • Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно увеличивает время редактирования и тестирования.

История создания и развития CSS

CSS Snapshot 2021

CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web»[2]. В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML, и стандарт CSS.

В начале 1990-х различные браузеры имели свои стили для отображения веб-страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.

Термин «каскадные таблицы стилей» был предложен Хоконом Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определённых ранее стилях.

В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Уровень 1 (CSS1)

Рекомендация W3C, принята 17 декабря 1996 года, откорректирована 11 января 1999 года[3]. Среди возможностей, предоставляемых этой рекомендацией:

  • Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
  • Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
  • Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
  • Выравнивание для текста, изображений, таблиц и других элементов.
  • Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

Уровень 2 (CSS2)

Рекомендация W3C, принята 12 мая 1998 года[4]. Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:

  • Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
  • Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
  • Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
  • Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
  • Расширенный механизм селекторов.
  • Указатели.
  • Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.

В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1

Уровень 2, ревизия 1 (CSS2.1)

Рекомендация W3C, принята 7 июня 2011 года.

CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые[какие?] и вовсе удалены. Удалённые части могут быть в будущем добавлены в CSS3.

Уровень 3 (CSS3)

CSS3 таксономия и статус:
● Рекомендация
● Кандидат в рекомендации
● Последнее требование
● Рабочий проект

CSS3 (англ. Cascading Style Sheets 3 — каскадные таблицы стилей третьего поколения) — активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS[5], поддержка линейных и радиальных градиентов, теней, сглаживания и прочее.

Преимущественно используется как средство описания и оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Разрабатываемая версия (список всех модулей)[6].

В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо. CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.

Нововведения, начиная с малых, вроде закруглённых углов блоков, заканчивая трансформацией (анимацией) и, возможно, введением переменных[7][8].

Уровень 4 (CSS4)

Разрабатывается W3C с 29 сентября 2011 года[9][10].

Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).

Например:

Поддержка CSS браузерами

Наиболее полно поддерживающими стандарт CSS являются работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera)[11] браузеры.

Бывший самый распространённый браузер[12] Internet Explorer 6 поддерживает CSS не полностью[13].

Вышедший спустя семь лет Internet Explorer 7 значительно улучшил уровень поддержки CSS[14][15], но всё ещё содержал значительное количество ошибок[16].

В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3[17].

Для проверки поддержки браузером веб-стандартов, в том числе и различных частей стандарта CSS, был разработан тест Acid.

Различные блоковые модели

В стандартах CSS от Консорциума W3C используется модель, в которой свойство width определяет ширину содержимого блока, не включая в неё отступы и рамки. Ранние версии Internet Explorer (4 и 5) реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding) и рамки (border). Кроме Internet Explorer 5, эту модель также понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.

В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing со значениями content-box для указания на использование стандартной модели W3C и border-box для использования модели IE 5.

В браузере Mozilla при поддержке этого свойства под собственным «рабочим» названием -moz-box-sizing ввели ещё одно значение — padding-box, таким образом создав третью блочную модель, в которой width — это размер содержимого и отступов блока, не включая рамки.

CSS-фильтры

Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида * html селектор (фильтр, известный как «star html bug»). Чтобы блоковая модель W3C и IE, работающая в Quirks mode, отображала блок #someblock шириной в 100 пикселей и внутренними отступами в 10 пикселей, можно написать такой код: 

/* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */
#someblock { width: 80px; padding: 10px; }

/* Следующее правило применит только IE6. */
* html #someblock { width: 100px; padding: 10px; }

Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии.

Безопасность

Все поддерживаемые в 2010 году версии Internet Explorer были уязвимы: при обработке браузером каскадных стилей (CSS) может возникнуть неинициализированная память, впоследствии используемая для удалённого запуска вредоносного кода на компьютере пользователя[18].

CSS Framework

Основная статья: CSS-фреймворк

CSS Framework (также Web design framework) — это заранее подготовленная CSS-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же, как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушённому в тонкостях вёрстки программисту или дизайнеру правильно создать html-макет.

Расширения CSS

Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах.

Для решения этих вопросов и ускорения разработки существует несколько расширений (препроцессоров) языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:

  • во время запуска страницы на стороне клиента (средствами JavaScript)
  • во время запуска страницы на стороне сервера
  • во время вёрстки сайта средствами специального компилятора

Примеры расширений (препроцессоров) CSS:

См. также

Примечания

  1. ↑ Макфарланд, 2017, с. 126.
  2. ↑ Дэйв Ши, Молли Е. Хольцшлаг. Философия CSS-дизайна. / Пер. с англ. А. Слинкина. — М.: НТ Пресс, 2005. — 312 с.: ил.
  3. ↑ Cascading Style Sheets, level 1. Дата обращения: 16 июня 2006. Архивировано 9 февраля 2011 года.
  4. ↑ Cascading Style Sheets, level 2 CSS2 Specification. Дата обращения: 9 марта 2011. Архивировано 16 января 2011 года.
  5. ↑ Простая CSS3 анимация с Animate.css. Дата обращения: 18 сентября 2018. Архивировано 18 сентября 2018 года.
  6. ↑ W3C: CSS: current work Архивная копия от 3 марта 2011 на Wayback Machine, CSS 3, etc.
  7. ↑ CSS3: css variables are a bad idea. Just allow us to call other selectors. Архивная копия от 2 января 2010 на Wayback Machine // Rip’s Domain
  8. ↑ CSS Variables Архивная копия от 5 апреля 2010 на Wayback Machine // dave-woods.co.uk
  9. ↑ Selectors Level 4. W3.org (29 сентября 2011). Архивировано из оригинала 30 мая 2012 года.
  10. ↑ Discover What's New in CSS 4 | Webmonkey | Wired.com. Webmonkey (26 октября 2011). Архивировано из оригинала 30 мая 2012 года.
  11. ↑ Web browser standards support. Дата обращения: 11 января 2008. Архивировано 14 апреля 2020 года.
  12. ↑ Mozilla’s Firefox global usage share is still growing according to OneStat.com. Дата обращения: 11 января 2008. Архивировано 26 февраля 2021 года.
  13. ↑ Contents and browser compatibility. Дата обращения: 11 января 2008. Архивировано 11 января 2008 года.
  14. ↑ Details on our CSS changes for IE7 Архивная копия от 30 июля 2008 на Wayback Machine IEBlog
  15. ↑ Cascading Style Sheet Compatibility in Internet Explorer 7 Архивная копия от 1 февраля 2008 на Wayback Machine MSDN
  16. ↑ The weird and wonderful world of Internet Explorer. Дата обращения: 11 января 2008. Архивировано из оригинала 13 января 2008 года.
  17. ↑ CSS Compatibility and Internet Explorer Архивная копия от 29 декабря 2010 на Wayback Machine MSDN
  18. ↑ Microsoft: все версии Internet Explorer уязвимы для хакеров. Дата обращения: 2 января 2011. Архивировано 3 января 2011 года.

Литература

  • Дэвид Сойер Макфарланд. Новая большая книга CSS = CSS: The Missing Manual. — Санкт-Петербург: Питер, 2017. — 720 с. — 1000 экз. — ISBN 978-5-496-02080-0.
  • Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. — М.: «Диалектика», 2011. — 400 с. — ISBN 978-5-8459-1752-2.
  • Стивен Шафер. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition. — М.: «Диалектика», 2011. — 656 с. — ISBN 978-5-8459-1676-1.

Ссылки

wwwazizbe_811.com === Англоязычные ресурсы ===relax

Русскоязычные ресурсы

Источник — https://ru.wikipedia.org/ruwiki/w/index.php?title=CSS&oldid=141816417