CSS

У этого термина существуют и другие значения, см. CSS (значения).

CSS

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

* HTML
* HTML5
* Динамический HTML
* XHTML
* XHTML Mobile Profile[англ.]
* CHTML
* Document Object Model
* Кодировки символов
* Мнемоники в HTML
* Редактор HTML
* Элементы HTML
* Семантическая вёрстка
* Карта изображений
* Цвета HTML
* Формы HTML
* Фреймы HTML
* HTML5 audio
* HTML5 video
* Canvas
* Скрипты в HTML
* Unicode и HTML[англ.]
* Браузерный движок
* Quirks mode
* Каскадные таблицы стилей
* W3C
* WHATWG
* Web Storage
* WebGL
* Сравнение:
* языков разметки документов
* браузерных движков

* п
* о
* р

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

## Содержание

* 1 Обзор
* 1.1 Использование CSS
* 1.2 Способы подключения CSS к документу
* 1.3 Правила построения CSS
* 1.3.1 Виды селекторов
* 1.3.1.1 Универсальный селектор
* 1.3.1.2 Селектор тегов
* 1.3.1.3 Селектор классов
* 1.3.1.4 Селектор идентификаторов
* 1.3.1.5 Селектор атрибутов
* 1.3.1.6 Селектор потомков (контекстный селектор)
* 1.3.1.7 Селектор дочерних элементов
* 1.3.1.8 Селектор элементов одного уровня
* 1.3.1.9 Селектор псевдоклассов
* 1.3.1.10 Селектор псевдоэлементов
* 1.4 Классы и идентификаторы элементов
* 1.5 Наследование. Каскадирование. Приоритеты стилей CSS.
* 1.6 Пример таблицы стилей
* 2 CSS-вёрстка
* 3 История создания и развития CSS
* 3.1 Уровень 1 (CSS1)
* 3.2 Уровень 2 (CSS2)
* 3.2.1 Уровень 2, ревизия 1 (CSS2.1)
* 3.3 Уровень 3 (CSS3)
* 3.4 Уровень 4 (CSS4)
* 4 Поддержка CSS браузерами
* 4.1 Различные блоковые модели
* 4.2 CSS-фильтры
* 4.3 Безопасность
* 5 CSS Framework
* 6 Расширения CSS
* 7 См. также
* 8 Примечания
* 9 Литература
* 10 Ссылки
* 10.1 Англоязычные ресурсы
* 10.2 Русскоязычные ресурсы

## Обзор

[править | править код]

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

[править | править код]

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

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

### Способы подключения 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: 1;
padding: 1;

##### Селектор тегов

[править | править код]

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; }`). После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.
* Таблица расчёта специфичности[3]:

Селектор  | 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»[4]. В 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 года[5]. Среди возможностей, предоставляемых этой рекомендацией:

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

### Уровень 2 (CSS2)

[править | править код]

Рекомендация W3C, принята 12 мая 1998 года[6]. Основана на 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[7], поддержка линейных и радиальных градиентов, теней, сглаживания и прочее.

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

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

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

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

### Уровень 4 (CSS4)

[править | править код]

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

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

Например:

* CSS Cascading and Inheritance Level 4
* Selectors Level 4
* CSS Image Values and Replaced Content Module Level 4
* CSS Backgrounds and Borders Module Level 4
* CSS Color Module Level 4
* Media Queries Level 4
* CSS Pseudo-Elements Module Level 4
* CSS Text Module Level 4

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

[править | править код]

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

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

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

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

Для проверки поддержки браузером веб-стандартов, в том числе и различных частей стандарта 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) может возникнуть неинициализированная память, впоследствии используемая для удалённого запуска вредоносного кода на компьютере пользователя[20].

## CSS Framework

[править | править код]

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

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

## Расширения CSS

[править | править код]

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

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

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

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

* Sass
* LESS
* Stylus
* Языки некоторых расширений PostCSS

## См. также

[править | править код]

| Имеется викиучебник по теме «CSS»

|

* HTML5
* SGML
* JavaScript
* CSS Framework
* CSSTidy

## Примечания

[править | править код]

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

## Ссылки

[править | править код]

### Англоязычные ресурсы

[править | править код]

* Cascading Style Sheets Home page (англ.)
* Web Style Sheets Home page (англ.)
* Различные блоковые модели CSS (англ.)
* CSS3-тест браузера (англ.)
* Таблицы поддерживаемых браузерами возможностей CSS (англ.)
* Валидатор CSS (англ.)
* Демонстрация возможностей CSS-вёрстки (англ.)
* CSS3 Preview — Демонстрация новых возможностей CSS3 (англ.)
* Демонстрация возможностей (англ.)
* Оптимизатор CSS кода (англ.)

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

[править | править код]

* Каскадные Таблицы Стилей Домашняя страница (рус.)
* Веб таблицы стилей Домашняя страница (рус.)
* Сервис проверки CSS от W3C
* Учебник CSS (рекомендован w3.org)
* Справочник CSS

Языки таблиц стилей (сравнение[англ.], список[англ.])

Режимы|

* Настольная издательская система[англ.]
* Веб-разработка
* Пользовательский интерфейс[англ.]

Стандартные|

* CSS
* DSSSL
* XSL

Нестандартные|

* JSSS
* FOSI[англ.]
* Qt Style Sheets
* Sass
* LESS
* Stylus[англ.]
* SMIL Timesheets[англ.]

Консорциум Всемирной паутины (W3C)

Продукты
и стандарты|

| Рекомендации|

* ActivityPub
* Activity Streams[англ.]
* ARIA
* Canonical XML[англ.]
* CDF[англ.]
* CSS
* DOM
* Geolocation API[англ.]
* HTML
* HTML5
* ITS[англ.]
* JSON-LD
* Linked Data Notifications[англ.]
* MathML
* Micropub[англ.]
* OWL
* PLS
* RDF
* RDFS
* SISR
* SKOS
* SMIL
* SOAP
* SRGS
* SRI
* SSML
* SVG
* Filter Effects
* SCXML[англ.]
* SHACL[англ.]
* SPARQL
* Timed text
* VoiceXML
* Web Storage
* WSDL
* Webmention
* WebSub
* XHTML
* +RDFa
* XML
* XML Base
* XML Encryption
* XML Events
* XML Information Set
* XML namespace
* XML Schema
* XML Signature
* XForms
* XInclude
* XLink
* XOP
* XPath
* 1.0
* 2.0
* XPointer
* XProc
* XQuery
* XSL
* XSL-FO
* XSLT
* элементы

|

ООСО|

* IndieAuth[англ.]
* XAdES[англ.]
* XBL[англ.]
* XHTML+SMIL[англ.]
* XUP[англ.]

Рабочие проекты|

* CCXML[англ.]
* CURIE[англ.]
* EME[англ.]
* InkML
* MSE[англ.]
* RIF
* SMIL Timesheets[англ.]
* sXBL[англ.]
* WebGPU
* WebXR
* WICD[англ.]
* XFDL[англ.]
* XFrames
* XMLHttpRequest

Руководства|

* Руководящие принципы доступности веб-контента[англ.]

Инициативы|

* Markup Validation Service[англ.]
* Web Accessibility Initiative[англ.]
* WebPlatform[англ.]

Выведенные
из использования|

* CHTML
* HDML[англ.]
* JSSS
* PGML
* VML
* XHTML+MathML+SVG[англ.]

Устаревшие|

* P3P

Организации|

* World Wide Web Foundation
* WHATWG

Рабочие группы|

* TAG[англ.]
* CSS
* SVG[англ.]
* WebAuthn[англ.]

Группы сообщества и бизнеса|

* Web Advertising BG[англ.]

Закрывшиеся группы|

* Device Description (DDWG)[англ.]
* HTML[англ.]
* Multimodal Interaction Activity (MMI)[англ.]

ПО|

* CERN httpd
* Libwww[англ.]

Браузеры|

* Line Mode (1991–)
* Arena (1993–98)
* Agora (1994–97)[англ.]
* Argo (1994–97)[англ.]
* Amaya (браузер/редактор, 1996–2012)

Конференции|

* International World Wide Web Conference (IW3C)
* Steering Committee (IW3C2)[англ.]
* First conference ("WWW1", 1994)[англ.]

Каскадные таблицы стилей

CSS|

* Таблица стилей[англ.]
* CSS Zen Garden[англ.]
* The Zen of CSS Design[англ.]
* CSSTidy
* Блочная модель[англ.]

Сравнение|

* Поддержки CSS браузерными движками[англ.]
* Языков таблиц стилей[англ.]

Веб-дизайн|

* Бестабличный[англ.]
* «Holy Grail»[англ.]
* Адаптивный

Каскадные таблицы стилей
*[п]: Просмотр этого шаблона
*[о]: Обсуждение этого шаблона
*[р]: Править этот шаблон
*[М.]: Москва
*[ООСО]: Оконечное оборудование сетевого офиса (Network Office Terminating Equipment)
*[ПО]: Программное_обеспечение