CSS

Эта статья о языке стилизации разметки. Чтобы узнать о других значениях, см. CSS (значения) .

«Псевдоэлемент» перенаправляется сюда. Чтобы узнать о символах псевдоэлементов в химии, см. Скелетную формулу § Символы псевдоэлементов .

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

Официальный логотип последней версии CSS 3.
Пример исходного кода CSS
Расширение имени файла	.css
Тип интернет-СМИ	текст/css
Единый идентификатор типа (UTI)	public.css
Разработано	Консорциум Всемирной паутины (W3C)
Первоначальный выпуск	17 декабря 1996 г ( 17.12.1996 )
Последний выпуск	CSS 3 разрабатывается как несколько отдельных модулей. Регулярные снимки суммируют их состояние. 7 декабря 2023 г ( 07.12.2023 )
Тип формата	Язык таблицы стилей
Контейнер для	Правила стиля для HTML-элементов (тегов)
Содержится	HTML-документы
Открытый формат ?	Да
Веб-сайт	w3 .org /ТР /CSS / #css

Каскадные таблицы стилей ( CSS ) — это язык таблиц стилей, используемый для определения представления и стиля документа, написанного на языке разметки , таком как HTML или XML (включая диалекты XML, такие как SVG , MathML или XHTML ). CSS — это краеугольная технология Всемирной паутины , наряду с HTML и JavaScript .

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

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

имен Каскадирование происходит из указанной схемы приоритетов, чтобы определить, какое объявление применяется, если определенному элементу соответствует более одного объявления свойства. Эта каскадная схема приоритетов предсказуема.

Спецификации CSS поддерживаются Консорциумом World Wide Web (W3C). Тип интернет-носителя ( тип MIME ) text/css зарегистрирован для использования с CSS согласно RFC 2318 (март 1998 г.). W3C предоставляет бесплатную службу проверки CSS для документов CSS.

Помимо HTML, другие языки разметки поддерживают использование CSS, включая XHTML , обычный XML , SVG и XUL . CSS также используется в GTK наборе инструментов виджетов .

Синтаксис

CSS имеет простой синтаксис и использует ряд ключевых слов на английском языке для указания имен различных свойств стиля.

Таблица стилей

Основная статья: Таблица стилей (веб-разработка)

Таблица стилей состоит из списка правил . Каждое правило или набор правил состоит из одного или нескольких селекторов и блока объявлений .

Селектор

«Класс CSS» перенаправляется сюда. Информацию об использовании классов элементов в HTML без использования CSS см. в разделе атрибут класса (HTML) .

В CSS селекторы определяют, к какой части разметки применяется стиль, сопоставляя теги и атрибуты в самой разметке.

Типы селекторов

Селекторы могут применяться к следующему:

• все элементы определенного типа, например заголовки второго уровня h2
• элементы, указанные атрибутом , в частности:
  • id : идентификатор, уникальный в пределах документа, обозначаемый на языке селектора префиксом хеша , например #id
  • класс : идентификатор, который может аннотировать несколько элементов в документе, обозначается префиксом точки , например .classname (фраза «класс CSS», хотя иногда и используется, является неправильным употреблением, поскольку классы элементов, указанные с помощью атрибута класса HTML , представляют собой функцию разметки, которая отличается от подсистемы CSS браузеров, а соответствующие стандарты W3C/WHATWG работают со стилями документов. ; см. RDF и микроформаты о происхождении системы «классов» модели веб-контента)
• элементы в зависимости от того, как они расположены относительно других в дереве документа .

Классы и идентификаторы чувствительны к регистру, начинаются с букв и могут включать буквенно-цифровые символы, дефисы и символы подчеркивания. Класс может применяться к любому количеству экземпляров любого элемента. Идентификатор может быть применен только к одному элементу.

Псевдоклассы

Псевдоклассы используются в селекторах CSS для разрешения форматирования на основе информации, которая не содержится в дереве документа.

Одним из примеров широко используемого псевдокласса является :hover, который идентифицирует контент только тогда, когда пользователь «указывает» на видимый элемент, обычно удерживая над ним курсор мыши. Он добавляется к селектору, как в a:hover или #elementid:hover.

Псевдокласс классифицирует элементы документа, такие как :link или :visited, тогда как псевдоэлемент делает выборку, которая может состоять из частичных элементов, таких как ::first-line или ::first-letter. Обратите внимание на различие между обозначением с двойным двоеточием, используемым для псевдоэлементов, и обозначением с одним двоеточием, используемым для псевдоклассов.

Комбинаторы

Несколько простых селекторов можно объединить с помощью комбинаторов для указания элементов по местоположению, типу элемента, идентификатору, классу или любой их комбинации. Порядок селекторов важен. Например, div .myClass {color: red;} применяется ко всем элементам класса myClass, которые находятся внутри элементов div, тогда как .myClass div {color: red;} применяется ко всем элементам div, которые находятся внутри элементов класса myClass. Не следует путать его с составными идентификаторами, такими как div.myClass {color: red;} что применяется к элементам div класса myClass.

Краткое описание синтаксиса селектора

В следующей таблице представлена ​​сводка синтаксиса селектора с указанием его использования и версии CSS, в которой он представлен.

Шаблон	Матчи	Впервые определено на уровне CSS
E	элемент типа E	1
E:link	элемент E, который является исходной привязкой гиперссылки, цель которой либо еще не посещена (:link), либо уже посещена (:visited)	1
E:active	элемент E во время определенных действий пользователя	1
E::first-line	первая отформатированная строка элемента E	1
E::first-letter	первая отформатированная буква элемента E	1
.c	все элементы с классом = "c"	1
#myid	элемент с id="myid"	1
E.warning	элемент E, класс которого является «предупреждением» (язык документа определяет, как определяется класс)	1
E#myid	элемент E с идентификатором, равным «myid»	1
.c#myid	элемент с классом = "c" и идентификатором, равным "myid"	1
E F	потомок элемента F элемента E	1
*	любой элемент	2
E[foo]	элемент E с атрибутом «foo»	2
E[foo="bar"]	элемент E, значение атрибута "foo" которого точно равно "bar"	2
E[foo~="bar"]	элемент E, значение атрибута "foo" которого представляет собой список значений, разделенных пробелами, одно из которых в точности равно "bar"	2
E[foo|="en"]	элемент E, атрибут «foo» которого имеет список значений, разделенных дефисами, начинающийся (слева) с «en».	2
E:first-child	элемент E, первый дочерний элемент своего родителя	2
E:lang(fr)	элемент типа E на языке "fr" (язык документа определяет, как определяется язык)	2
E::before	сгенерированный контент перед содержимым элемента E	2
E::after	сгенерированный контент после содержимого элемента E	2
E > F	дочерний элемент F элемента E	2
E + F	элементу F, которому непосредственно предшествует элемент E	2
E[foo^="bar"]	элемент E, значение атрибута «foo» которого начинается точно со строки «bar».	3
E[foo$="bar"]	элемент E, значение атрибута "foo" которого заканчивается точно строкой "bar"	3
E[foo*="bar"]	элемент E, значение атрибута "foo" которого содержит подстроку "bar"	3
E:root	элемент E, корень документа	3
E:nth-child(n)	элемент E, n-й дочерний элемент своего родителя	3
E:nth-last-child(n)	элемент E, n-й дочерний элемент своего родителя, считая от последнего	3
E:nth-of-type(n)	элемент E, n-й брат своего типа	3
E:nth-last-of-type(n)	элемент E, n-й брат своего типа, считая от последнего	3
E:last-child	элемент E, последний дочерний элемент своего родителя	3
E:first-of-type	элемент E, первый брат своего типа	3
E:last-of-type	элемент E, последний брат своего типа	3
E:only-child	элемент E, единственный дочерний элемент своего родителя	3
E:only-of-type	элемент E, единственный брат своего типа	3
E:empty	элемент E, не имеющий дочерних элементов (включая текстовые узлы)	3
E:target	элемент E является целью ссылающегося URI	3
E:enabled	элемент пользовательского интерфейса E, который включен	3
E:disabled	элемент пользовательского интерфейса E, который отключен	3
E:checked	элемент пользовательского интерфейса E, который отмечен флажком (например, переключатель или флажок)	3
E:not(s)	элемент E, который не соответствует простому селектору	3
E ~ F	элементу F, которому предшествует элемент E	3

Блок объявлений

Блок объявлений состоит из пары фигурных скобок ( {}), заключающий список объявлений , разделенных точкой с запятой .

Декларация

Каждое объявление само по себе состоит из свойства , двоеточия ( :) и значение . Необязательные пробелы могут располагаться вокруг блока объявлений, объявлений, двоеточий и точек с запятой для удобства чтения.

Характеристики

Свойства указаны в стандарте CSS. Каждое свойство имеет набор возможных значений. Некоторые свойства могут влиять на любой тип элемента, а другие применяются только к определенным группам элементов.

Ценности

Значения могут быть ключевыми словами, например «центр» или «наследовать», или числовыми значениями, например 200px (200 пикселей), 50vw (50 процентов ширины области просмотра) или 80% (80 процентов ширины родительского элемента).

Значения цвета можно указать с помощью ключевых слов (например, « red"), шестнадцатеричные значения (например, #FF0000, также сокращенно #F00), значения RGB по шкале от 0 до 255 (например, rgb(255, 0, 0)), значения RGBA, которые определяют как цвет, так и альфа-прозрачность (например, rgba(255, 0, 0, 0.8)) или значения HSL или HSLA (например, hsl(0 100% 50%), hsl(0 100% 50% / 0.8)).

Ненулевые числовые значения, представляющие линейные меры, должны включать единицу длины, которая представляет собой буквенный код или аббревиатуру, как в 200px или 50vw; или знак процента, например 80%. Некоторые агрегаты – cm ( сантиметр ); in ( дюйм ); mm ( миллиметр ); pc ( пика ); и pt ( точка ) – являются абсолютными , что означает, что отображаемый размер не зависит от структуры страницы; другие – em ( в ); ex ( бывший ) и px ( пиксель ) – являются относительными , что означает, что такие факторы, как размер шрифта родительского элемента, могут повлиять на отображаемое измерение. Эти восемь единиц были особенностью CSS 1. и сохраняется во всех последующих редакциях. Предлагаемый модуль CSS «Значения и единицы измерения» уровня 3, если он будет принят в качестве рекомендации W3C, предоставит семь дополнительных единиц длины: ch; Q; rem; vh; vmax; vmin; и vw.

Использовать

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

Например, заголовки ( h1 элементы), подзаголовки ( h2), подзаголовки ( h3) и т. д. структурно определяются с помощью HTML. В печати и на экране выбор шрифта , размера , цвета и акцента для этих элементов является презентационным .

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

Например, в HTML до CSS элемент заголовка, определенный красным текстом, будет записан как:

<h1><font color="red">Chapter 1.</font></h1>

Используя CSS, один и тот же элемент можно закодировать с использованием свойств стиля вместо атрибутов представления HTML:

<h1 style="color: red;">Chapter 1.</h1>

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

<style>
    h1 {
        color: red;
    }
</style>

Все h1 элементы в документе автоматически станут красными без необходимости какого-либо явного кода. Если бы автор позже захотел сделать h1 вместо этого элементы синие, это можно сделать, изменив элемент стиля на:

<style>
    h1 {
        color: blue;
    }
</style>

вместо того, чтобы кропотливо просматривать документ и менять цвет для каждого отдельного h1 элемент.

Стили также можно поместить во внешний файл CSS, как описано ниже, и загрузить, используя синтаксис, аналогичный следующему:

<link href="path/to/file.css" rel="stylesheet" type="text/css">

Это дополнительно отделяет стиль от документа HTML и позволяет изменять стиль нескольких документов, просто редактируя общий внешний файл CSS.

Источники

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

Несколько таблиц стилей

Можно импортировать несколько таблиц стилей. В зависимости от используемого устройства вывода можно применять разные стили; например, экранная версия может сильно отличаться от печатной версии, поэтому авторы могут адаптировать презентацию соответствующим образом для каждого носителя.

Каскадный

Таблица стилей с наивысшим приоритетом управляет отображением контента. Объявления, не установленные в источнике с наивысшим приоритетом, передаются в источник с более низким приоритетом, например в стиль пользовательского агента. Этот процесс называется каскадированием .

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

Схема приоритетов CSS

Схема приоритетов CSS (от самого высокого к самому низкому)

Приоритет	Тип источника CSS	Описание
1	Важность	" !important" аннотация перезаписывает предыдущие типы приоритета
2	В соответствии	Стиль, применяемый к элементу HTML с помощью атрибута HTML «style».
3	Тип носителя	Определение свойства применяется ко всем типам мультимедиа, если не определен CSS для конкретного медиа.
4	Определяется пользователем	Большинство браузеров имеют функцию специальных возможностей: определяемый пользователем CSS.
5	Специфика селектора	Конкретный контекстный селектор ( #heading p) перезаписывает общее определение
6	Порядок правил	Последнее объявление правила имеет более высокий приоритет
7	Родительское наследование	Если свойство не указано, оно наследуется от родительского элемента.
8	Определение свойства CSS в HTML-документе	Правило CSS или встроенный стиль CSS перезаписывают значение браузера по умолчанию.
9	Браузер по умолчанию	Самый низкий приоритет: значение браузера по умолчанию определяется спецификациями начального значения W3C.

Специфика

Специфичность относится к относительному весу различных правил. Он определяет, какие стили применяются к элементу, когда может применяться более одного правила. Согласно спецификации, простой селектор (например, H1) имеет специфичность 1, селекторы классов имеют специфичность 1,0, а селекторы ID имеют специфичность 1,0,0. Поскольку значения специфичности не переносятся, как в десятичной системе, для разделения «цифр» используются запятые. (правило CSS, имеющее 11 элементов и 11 классов, будет иметь специфичность 11,11, а не 121).

Таким образом, селекторы следующего правила приводят к указанной специфичности:

Селекторы	Специфика
h1 {color: white;}	0, 0, 0, 1
p em {color: green;}	0, 0, 0, 2
.grape {color: red;}	0, 0, 1, 0
p.bright {color: blue;}	0, 0, 1, 1
p.bright em.dark {color: yellow;}	0, 0, 2, 2
#id218 {color: brown;}	0, 1, 0, 0
style=" "	1, 0, 0, 0

Примеры

Рассмотрим этот фрагмент HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #xyz { color: blue; }
        </style>
    </head>
    <body>
        <p id="xyz" style="color: green;">To demonstrate specificity</p>
    </body>
</html>

В приведенном выше примере объявление в style атрибут переопределяет атрибут в <style> элемент, поскольку он имеет более высокую специфичность, и поэтому абзац отображается зеленым:

Чтобы продемонстрировать специфичность

Наследование

Наследование — ключевая функция CSS; в своей работе он опирается на отношения предка и потомка. Наследование — это механизм, с помощью которого свойства применяются не только к указанному элементу, но и к его потомкам. Наследование основано на дереве документа, которое представляет собой иерархию элементов XHTML на странице, основанную на вложении. Элементы-потомки могут наследовать значения свойств CSS от любого элемента-предка, включающего их. Как правило, элементы-потомки наследуют свойства, связанные с текстом, но их свойства, связанные с блоком, не наследуются. Свойства, которые могут быть унаследованы, — это цвет, шрифт, межбуквенный интервал, высота строки, стиль списка, выравнивание текста, отступ текста, преобразование текста, видимость, пробелы и межсловный интервал. Свойства, которые не могут быть унаследованы: фон, граница, отображение, плавание и очистка, высота и ширина, поля, минимальная и максимальная высота и ширина, контур, переполнение, отступ, позиция, украшение текста, вертикальное выравнивание и z-индекс.

Наследование можно использовать, чтобы избежать повторного объявления определенных свойств в таблице стилей, что позволяет сократить CSS.

Наследование в CSS — это не то же самое, что наследование в языках программирования на основе классов , где можно определить класс B как «похожий на класс A, но с модификациями». С помощью CSS можно стилизовать элемент как «класс А, но с изменениями». Однако невозможно определить такой класс CSS B, который затем можно было бы использовать для стилизации нескольких элементов без повторения изменений.

Пример

Учитывая следующую таблицу стилей:

p {
   color: pink;
}

Предположим, есть элемент ap с подчеркивающим элементом (<em>) внутри:

<p>
   This is to <em>illustrate</em> inheritance
</p>

Если элементу em не назначен цвет, выделенное слово «иллюстрировать» наследует цвет родительского элемента, p. Таблица стилей p имеет розовый цвет, следовательно, элемент em также розового цвета:

Это для иллюстрации наследования

Пробелы

Пробел между свойствами и селекторами игнорируется. Этот фрагмент кода:

body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}

функционально эквивалентен этому:

body {
   overflow: hidden;
   background-color: #000000;
   background-image: url(images/bg.gif);
   background-repeat: no-repeat;
   background-position: left top;
}

Отступ

Основная статья: Стиль отступов

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

body {
   overflow: hidden;
   background: #000 url(images/bg.gif) no-repeat left top;
}

Иногда несколько значений свойств выделяются на отдельной строке:

@font-face {
   font-family: 'Comic Sans';
   font-size: 20px;
   src: url('first.example.com'),
        url('second.example.com'),
        url('third.example.com'),
        url('fourth.example.com');
}

Позиционирование

CSS 2.1 определяет три схемы позиционирования:

Нормальный поток

Строковые элементы раскладываются так же, как буквы в словах в тексте, одна за другой по доступному пространству, пока не останется места, а затем начинается новая строка ниже. Элементы блока располагаются вертикально, как абзацы и элементы маркированного списка. Обычный поток также включает относительное расположение блочных или строчных элементов и полей ввода.

Плавает

Плавающий элемент выводится из обычного потока и смещается влево или вправо, насколько это возможно в доступном пространстве. Другой контент затем перемещается рядом с плавающим элементом.

Абсолютное позиционирование

Абсолютно позиционированный элемент не имеет места и не влияет на нормальный поток других элементов. Он занимает назначенное место в контейнере независимо от других предметов.

Позиция свойства

Существует пять возможных значений position свойство. Если элемент расположен иначе, чем static, то дальнейшие свойства top, bottom, left, и right используются для указания смещений и позиций. На элемент, имеющий статическую позицию, не влияет top, bottom , left или right характеристики.

Статический

Значение по умолчанию помещает элемент в обычный поток .

Родственник

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

Абсолютный

Определяет абсолютное позиционирование . Элемент позиционируется относительно своего ближайшего нестатического предка.

Зафиксированный

Элемент абсолютно позиционируется в фиксированном положении на экране, даже когда остальная часть документа прокручивается.

Плавайте и очищайте

The float свойство может иметь одно из трех значений. Абсолютно позиционированные или фиксированные элементы не могут быть плавающими. Другие элементы обычно обтекают плавающие элементы, если только им не мешают это сделать их clear свойство.

левый

Элемент перемещается слева от строки, в которой он должен был появиться; другие предметы могут обтекать его правую сторону.

верно

Элемент перемещается справа от строки, в которой он должен был появиться; другие предметы могут обтекать его левую сторону.

прозрачный

Заставляет элемент появиться под («очистить») плавающими элементами слева ( clear:left), верно ( clear:right) или обе стороны ( clear:both).

История

Хокон Виум Ли , технический директор компании Opera Software и соавтор веб-стандартов CSS

CSS был впервые предложен Хоконом Виумом Ли 10 октября 1994 года. В то время Ли работал с Тимом Бернерсом-Ли в ЦЕРНе . Примерно в то же время было предложено несколько других языков таблиц стилей для Интернета, и дискуссии в публичных списках рассылки и внутри Консорциума World Wide Web привели к появлению первой Рекомендации W3C CSS (CSS1). предложение Берта Боса был выпущен в 1996 году. В частности, большое влияние оказало ; он стал соавтором CSS1 и считается соавтором CSS.

Таблицы стилей существовали в той или иной форме с момента появления стандартного обобщенного языка разметки ( SGML ) в 1980-х годах, а CSS был разработан для предоставления таблиц стилей для Интернета. Одним из требований к языку таблиц веб-стилей было наличие таблиц стилей из разных источников в сети. Поэтому существующие языки таблиц стилей, такие как DSSSL и FOSI, не подходили. CSS, с другой стороны, позволяет нескольким таблицам стилей влиять на стиль документа посредством «каскадных» стилей.

По мере развития HTML он стал охватывать более широкий спектр стилистических возможностей, отвечающих требованиям веб-разработчиков . Эта эволюция дала дизайнеру больше контроля над внешним видом сайта за счет более сложного HTML. Варианты реализации веб-браузера , такие как ViolaWWW и WorldWideWeb . затрудняло единообразный внешний вид сайта, и у пользователей было меньше контроля над отображением веб-контента. Браузер/редактор, разработанный Тимом Бернерсом-Ли, имел таблицы стилей, которые были жестко закодированы в программе. Поэтому таблицы стилей нельзя было связать с документами в Интернете. Роберт Кайо , также из ЦЕРН, хотел отделить структуру от презентации, чтобы разные таблицы стилей могли описывать разные презентации для печати, экранных презентаций и редакторов.

Улучшение возможностей веб-презентаций было темой, интересовавшей многих представителей веб-сообщества, и в списке рассылки www-style было предложено девять различных языков таблиц стилей. Из этих девяти предложений два особенно повлияли на то, что впоследствии стало CSS: каскадные таблицы стилей HTML. и предложение таблицы стилей на основе потока (SSP). Два браузера послужили испытательными стендами для первоначальных предложений; Ли работал с Ивом Лафоном над реализацией CSS в Дэйва Рэггетта браузере Arena . Берт Бос реализовал свое собственное предложение SSP в браузере Argo . После этого Ли и Бос вместе работали над разработкой стандарта CSS (буква «H» была удалена из названия, поскольку эти таблицы стилей можно было применять и к другим языкам разметки, помимо HTML).

Предложение Ли было представлено на конференции « Мозаика и Интернет » (позже названной WWW2) в Чикаго, штат Иллинойс, в 1994 году, а также снова с Бертом Босом в 1995 году. Примерно в это же время W3C уже создавался и проявил интерес к развитию CSS. С этой целью был организован семинар под председательством Стивена Пембертона . Это привело к тому, что W3C добавил работу над CSS к результатам редакционной комиссии HTML (ERB). Ли и Бос были основным техническим персоналом, работавшим над этим аспектом проекта, в нем дополнительные участники, в том числе Томас Рирдон также принимали участие из Microsoft. В августе 1996 года Netscape Communication Corporation представила альтернативный язык таблиц стилей под названием Таблицы стилей JavaScript (JSSS). Спецификация так и не была завершена и устарела. К концу 1996 года CSS был готов стать официальным, и в декабре были опубликованы Рекомендации CSS уровня 1.

Разработка HTML, CSS и DOM велась в одной группе — Редакционном совете HTML (ERB). В начале 1997 года ERB было разделено на три рабочие группы: Рабочая группа HTML под председательством Дэна Коннолли из W3C; Рабочая группа DOM под председательством Лорен Вуд из SoftQuad ; и Рабочая группа CSS под председательством Криса Лилли из W3C.

Рабочая группа CSS начала решать проблемы, которые не были решены с помощью CSS уровня 1, что привело к созданию CSS уровня 2 4 ноября 1997 года. Он был опубликован как Рекомендация W3C 12 мая 1998 года. CSS уровня 3, который был запущен в 1998 году, по состоянию на 2014 год все еще находится в разработке .

В 2005 году рабочие группы CSS решили более строго обеспечить соблюдение требований стандартов. Это означало, что уже опубликованные стандарты, такие как CSS 2.1, CSS 3 Selectors и CSS 3 Text, были перенесены с уровня «Кандидатная рекомендация» на уровень «Рабочий проект».

Трудности с усыновлением

Спецификация CSS 1 была завершена в 1996 году. Microsoft Internet Explorer 3 был выпущен в том же году и имел ограниченную поддержку CSS. В IE 4 и Netscape 4.x была добавлена ​​дополнительная поддержка, но она обычно была неполной и содержала множество ошибок , которые препятствовали эффективному внедрению CSS. Прошло более трех лет, прежде чем какой-либо веб-браузер достиг почти полной реализации спецификации. Internet Explorer 5.0 для Macintosh , выпущенный в марте 2000 года, был первым браузером, который имел полную (более 99 процентов) поддержку CSS 1. обогнав Opera , которая была лидером с момента введения поддержки CSS пятнадцатью месяцами ранее. Вскоре за ним последовали и другие браузеры, и многие из них дополнительно реализовали части CSS 2.

Однако даже когда более поздние веб-браузеры «версии 5» начали предлагать довольно полную реализацию CSS, они все равно были неправильными в определенных областях. Они были полны несоответствий, ошибок и других особенностей . Microsoft Internet Explorer 5.x для Windows , в отличие от совсем другого IE для Macintosh , имел ошибочную реализацию блочной модели CSS по сравнению со стандартами CSS. Такие несоответствия и различия в поддержке функций мешали дизайнерам добиться единообразного внешнего вида в браузерах и на платформах без использования обходных путей, называемых CSS-хаками и фильтрами . Ошибки коробочной модели IE Windows были настолько серьезными, что с выпуском Internet Explorer 6 Microsoft представила обратно совместимый режим интерпретации CSS (« режим причуд ») наряду с альтернативным исправленным «режимом стандартов». Другие браузеры сторонних производителей также предоставляют возможность переключения режимов. Поэтому авторам HTML- файлов стало необходимо обеспечить, чтобы они содержали особые отличительные черты. Маркер «совместимый со стандартами CSS предназначен», чтобы показать, что авторы намеревались правильно интерпретировать CSS в соответствии со стандартами, а не для уже давно устаревшего браузера IE5/Windows . Без этого маркера веб-браузеры с возможностью переключения «режимов совместимости» будут определять размеры объектов на веб-страницах так же, как IE 5 в Windows, а не следовать стандартам CSS.

Проблемы с неоднородным внедрением CSS и ошибки в исходной спецификации заставили W3C пересмотреть стандарты CSS 2 в CSS 2.1, что приблизилось к рабочему снимку текущей поддержки CSS в HTML-браузерах. Некоторые свойства CSS 2, которые не были успешно реализованы ни одним браузером, были удалены, а в некоторых случаях определенное поведение было изменено, чтобы привести стандарт в соответствие с преобладающими существующими реализациями. CSS 2.1 стал кандидатом на рекомендацию 25 февраля 2004 г., но CSS 2.1 был возвращен в статус рабочего проекта 13 июня 2005 г. и вернулся в статус кандидата в рекомендации только 19 июля 2007 г.

Помимо этих проблем, .css расширение использовалось программным продуктом для преобразования файлов PowerPoint в файлы компактного слайд-шоу, поэтому некоторые веб-серверы обслуживают все .css как тип MIME application/x-pointplus скорее, чем text/css.

Префиксы поставщиков

Отдельные поставщики браузеров иногда вводили новые параметры перед стандартизацией и универсализацией. Чтобы предотвратить вмешательство в будущие реализации, поставщики добавляли к параметрам уникальные имена, например: -moz- для Мозилла Фаерфокс , -webkit- назван в честь браузерного механизма Apple Safari , -o- для браузера Opera и -ms- для Microsoft Internet Explorer и ранних версий Microsoft Edge , использующих EdgeHTML.

Иногда параметры с префиксами поставщиков, например -moz-radial-gradient и -webkit-linear-gradient имеют немного другой синтаксис по сравнению с их аналогами без префикса поставщика.

Свойства с префиксами устаревают ко времени стандартизации. Доступны программы для автоматического добавления префиксов для старых браузеров и указания стандартизированных версий параметров с префиксами. Поскольку префиксы доступны только небольшому подмножеству браузеров, удаление префикса позволяет другим браузерам увидеть эту функциональность. Исключением является устаревшее -webkit- префиксные свойства, которые настолько распространены и устойчивы в сети, что другие семейства браузеров решили поддерживать их для совместимости.

Снимок CSS 2021

CSS имеет различные уровни и профили. Каждый уровень CSS основывается на предыдущем, обычно добавляя новые функции и обычно обозначаемые как как CSS 1, CSS 2, CSS 3 и CSS 4. Профили обычно представляют собой подмножество одного или нескольких уровней CSS, созданных для конкретного устройства или пользовательского интерфейса. В настоящее время существуют профили для мобильных устройств, принтеров и телевизоров. Профили не следует путать с типами мультимедиа, которые были добавлены в CSS 2.

CSS 1

Первой спецификацией CSS, которая стала официальной рекомендацией W3C, является CSS уровня 1, опубликованный 17 декабря 1996 года. Хокон Виум Ли и Берт Бос считаются первоначальными разработчиками. Среди его возможностей — поддержка

• Свойства шрифта , такие как гарнитура и выделение.
• Цвет текста, фона и других элементов
• Атрибуты текста, такие как расстояние между словами, буквами и строками текста.
• Выравнивание текста, изображений, таблиц и других элементов
• Поля, граница, отступы и позиционирование для большинства элементов.
• Уникальная идентификация и общая классификация групп атрибутов

W3C больше не поддерживает Рекомендацию CSS 1.

CSS 2

Спецификация CSS уровня 2 была разработана W3C и опубликована в качестве рекомендации в мае 1998 года. Расширенный набор CSS 1, CSS 2 включает ряд новых возможностей, таких как абсолютное, относительное и фиксированное позиционирование элементов и z-index , концепция типы мультимедиа, поддержка звуковых таблиц стилей (которые позже были заменены речевыми модулями CSS 3) и двунаправленный текст, а также новые свойства шрифта, такие как тени.

W3C больше не поддерживает рекомендации CSS 2.

CSS 2.1

Версия 1 CSS уровня 2, часто называемая «CSS 2.1», исправляет ошибки в CSS 2, удаляет плохо поддерживаемые или не полностью совместимые функции и добавляет в спецификацию уже реализованные расширения браузера. Чтобы соответствовать процессу W3C по стандартизации технических спецификаций, CSS 2.1 в течение многих лет переходил от статуса рабочего проекта к статусу кандидата в рекомендации. CSS 2.1 впервые стал кандидатом в рекомендации 25 февраля 2004 г., но 13 июня 2005 г. он был возвращен в рабочий проект для дальнейшего рассмотрения. Он вернулся к кандидатской рекомендации 19 июля 2007 года, а затем дважды обновлялся в 2009 году. Однако, поскольку были внесены изменения и разъяснения, 7 декабря 2010 года он снова вернулся к рабочему проекту «Последний звонок».

CSS 2.1 перешел в Предлагаемую рекомендацию 12 апреля 2011 г. После рассмотрения Консультативным комитетом W3C он был наконец опубликован в качестве Рекомендации W3C 7 июня 2011 года.

CSS 2.1 планировался как первая и последняя версия уровня 2, но низкоприоритетная работа над CSS 2.2 началась в 2015 году.

CSS 3

«CSS3» перенаправляется сюда. Чтобы узнать о других значениях, см. CSS3 (значения) .

В отличие от CSS 2, который представляет собой большую единую спецификацию, определяющую различные функции, CSS 3 разделен на несколько отдельных документов, называемых «модулями». Каждый модуль добавляет новые возможности или расширяет функции, определенные в CSS 2, сохраняя обратную совместимость. Работа над CSS уровня 3 началась примерно во время публикации исходной рекомендации CSS 2. Самые ранние черновики CSS 3 были опубликованы в июне 1999 года.

Из-за модульности разные модули имеют разную стабильность и статусы.

Некоторые модули имеют статус кандидата в рекомендации ( CR ) и считаются умеренно стабильными. На этапе CR реализациям рекомендуется отказаться от префиксов поставщиков.

Краткое изложение основных характеристик модуля

Модуль	Название спецификации	Статус	Дата
css3-фон	Модуль CSS «Фоны и границы», уровень 3	Кандидат Рек.	февраль 2023 г.
css-box-3	Модуль CSS Box Model, уровень 3	Рекомендация	апрель 2023 г.
CSS-каскад-3	CSS-каскадирование и наследование уровня 3	Рекомендация	февраль 2021 г.
CSS-цвет-3	Модуль цвета CSS, уровень 3	Рекомендация	январь 2022 г.
css3-контент	Модуль контента, сгенерированный CSS, уровень 3	Рабочий проект	август 2019 г.
CSS-шрифты-3	Модуль CSS-шрифтов, уровень 3	Рекомендация	Сентябрь 2018 г.
css3-gcpm	CSS-сгенерированный контент для модуля Paged Media	Рабочий проект	май 2014 г.
css3-макет	Модуль макета шаблона CSS	Примечание	март 2015 г.
css3-медиазапросы	Медиа-запросы	Рекомендация	июнь 2012 г.
медиазапросы-4	Медиа-запросы уровня 4	Кандидат Рек.	декабрь 2021 г.
css3-мультикол	Модуль многоколоночного макета, уровень 1	Кандидат Рек.	октябрь 2021 г.
css3-страница	CSS-модуль мультимедиа, уровень 3	Рабочий проект , часть перенесена на css3-break.	октябрь 2018 г.
css3-перерыв	Модуль фрагментации CSS, уровень 3	Кандидат Рек.	декабрь 2018 г.
селекторы-3	Селекторы Уровень 3	Рекомендация	ноябрь 2018 г.
селекторы-4	Селекторы уровня 4	Рабочий проект	ноябрь 2022 г.
css3-ui	Модуль базового пользовательского интерфейса CSS уровня 3 (CSS3 UI)	Рекомендация	июнь 2018 г.

CSS 4

«CSS4» перенаправляется сюда. Чтобы узнать о других значениях, см. CSS4 (значения) .

Джен Симмонс обсуждает состояние CSS в 2019 году, когда   развивались несколько модулей CSS 4.

Не существует единой интегрированной спецификации CSS4. потому что спецификация разделена на множество отдельных модулей, уровни которых независимы.

Модули, основанные на CSS уровня 2, начинались с уровня 3. Некоторые из них уже достигли уровня 4 или уже приближаются к уровню 5. Другие модули, определяющие совершенно новые функциональные возможности, такие как Flexbox , были обозначены как уровень 1, а некоторые из них приближаются к уровню 2.

Рабочая группа CSS иногда публикует «Снимки» — коллекцию целых модулей и частей других проектов, которые считаются достаточно стабильными, чтобы быть реализованными разработчиками браузеров. На данный момент в 2007 году в виде примечаний было опубликовано пять таких документов о «лучших современных практиках». 2010, 2015, 2017, и 2018.

Поскольку эти снимки спецификаций в первую очередь предназначены для разработчиков, растет спрос на аналогичный справочный документ с указанием версий, предназначенный для авторов, который будет представлять состояние совместимых реализаций, как это в настоящее время документировано на таких сайтах, как Can I Use... и веб-документы MDN. Группа сообщества W3C была создана в начале 2020 года для обсуждения и определения такого ресурса. Фактический тип управления версиями также является предметом обсуждения, а это означает, что документ, когда он будет создан, не может называться «CSS4».

Поддержка браузера

Каждый веб-браузер использует механизм компоновки для отображения веб-страниц, и поддержка функциональности CSS в них неодинакова. Поскольку браузеры не полностью анализируют CSS, было разработано несколько методов кодирования, предназначенных для конкретных браузеров, с обходными путями (широко известными как CSS-хаки или CSS-фильтры). Внедрению новых функций CSS может препятствовать отсутствие поддержки в основных браузерах. Например, Internet Explorer не спешил с добавлением поддержки многих функций CSS 3, что замедлило внедрение этих функций и нанесло ущерб репутации браузера среди разработчиков. Кроме того, используется собственный синтаксис для префиксов без префикса поставщика. filter свойство использовалось в некоторых версиях. Чтобы обеспечить единообразие работы своих пользователей, веб-разработчики часто тестируют свои сайты в нескольких операционных системах, браузерах и версиях браузеров, что увеличивает время и сложность разработки. Такие инструменты, как BrowserStack, были созданы для упрощения обслуживания этих сред.

В дополнение к этим инструментам тестирования многие сайты поддерживают списки браузеров, поддерживающих определенные свойства CSS, включая CanIUse и MDN Web Docs . Кроме того, CSS 3 определяет запросы функций, которые предоставляют @supports директива, которая позволит разработчикам ориентироваться на браузеры с поддержкой определенных функций непосредственно в их CSS. CSS, который не поддерживается старыми браузерами, также иногда можно исправить с помощью полифилов JavaScript , которые представляют собой фрагменты кода JavaScript, предназначенные для обеспечения единообразного поведения браузеров. Эти обходные пути — а также необходимость поддержки резервных функций — могут усложнить проекты разработки, и, следовательно, компании часто определяют список версий браузеров, которые они будут поддерживать, а которые — нет.

Поскольку веб-сайты принимают новые стандарты кода, несовместимые со старыми браузерами, эти браузеры могут быть лишены доступа ко многим ресурсам в сети (иногда намеренно). Многие из самых популярных сайтов в Интернете не только визуально ухудшаются в старых браузерах из-за плохой поддержки CSS, но и вообще не работают, во многом из-за развития JavaScript и других веб-технологий.

Ограничения

Некоторые отмеченные ограничения текущих возможностей CSS включают:

Невозможно явно объявить новую область независимо от позиции.

Правила области действия для таких свойств, как z-index, ищут ближайший родительский элемент с атрибутом Position: Absolute или Position: относительным. Эта странная связь имеет нежелательные последствия. Например, невозможно избежать объявления новой области видимости, когда приходится корректировать положение элемента, что не позволяет использовать желаемую область действия родительского элемента.

Динамическое поведение псевдокласса неконтролируемо.

CSS реализует псевдоклассы, которые обеспечивают определенную обратную связь с пользователем путем условного применения альтернативных стилей. Один псевдокласс CSS, " :hover", является динамическим (эквивалент JavaScript "onmouseover") и может использоваться неправильно (например, реализация всплывающих окон при приближении курсора), но CSS не имеет возможности для клиента отключить его (нет свойства типа «disable») или ограничить его эффекты (нет значений типа «nochange» для каждого свойства).

Не могу назвать правила

Невозможно назвать правило CSS, которое позволило бы (например) клиентским сценариям ссылаться на правило, даже если его селектор изменится.

Невозможно включить стили из правила в другое правило.

Стили CSS часто приходится дублировать в нескольких правилах для достижения желаемого эффекта, что требует дополнительного обслуживания и более тщательного тестирования. Для решения этой проблемы были предложены некоторые новые функции CSS, но впоследствии от них отказались. Вместо этого авторы могут получить эту возможность, используя более сложные языки таблиц стилей, которые компилируются в CSS, такие как Sass , Less или Stylus .

Невозможно настроить таргетинг на конкретный текст без изменения разметки.

Помимо :first-letter псевдоэлемент, нельзя ориентироваться на определенные диапазоны текста без использования элементов-заполнителей.

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

Отделение контента от презентации

Основная статья: Разделение содержания и представления

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

Согласованность на уровне всего сайта

Основная статья: Таблица стилей (веб-разработка)

При эффективном использовании CSS с точки зрения наследования и «каскадирования» можно использовать глобальную таблицу стилей для воздействия на элементы и стилизации их по всему сайту. Если возникает ситуация, когда стиль элементов необходимо изменить или скорректировать, эти изменения можно внести путем редактирования правил в глобальной таблице стилей. До появления CSS такое обслуживание было более сложным, дорогим и трудоемким.

Пропускная способность

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

Переформатирование страницы

Основная статья: Прогрессивное улучшение

Простым изменением одной строки можно использовать другую таблицу стилей для той же страницы. Это имеет преимущества в плане доступности, а также дает возможность адаптировать страницу или сайт к различным целевым устройствам. Более того, устройства, неспособные понять стиль, по-прежнему отображают контент.

Доступность

Основная статья: Веб-дизайн без таблиц § Доступность

Без CSS веб-дизайнерам обычно приходится оформлять свои страницы с использованием таких методов, как таблицы HTML, которые затрудняют доступность для пользователей с нарушениями зрения (см. Веб-дизайн без таблиц#Доступность ).

Стандартизация

Рамки

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

Фреймворки CSS — это подготовленные библиотеки , которые предназначены для упрощения и более соответствующего стандартам оформления веб-страниц с использованием языка каскадных таблиц стилей. Фреймворки CSS включают Blueprint , Bootstrap , Foundation и Materialize. Подобно библиотекам языков программирования и сценариев, платформы CSS обычно включаются в виде внешних листов .css, на которые есть ссылки в HTML. <head>. Они предоставляют ряд готовых вариантов дизайна и верстки веб-страницы. Хотя многие из этих фреймворков были опубликованы, некоторые авторы используют их в основном для быстрого прототипирования или для обучения и предпочитают «создавать» CSS вручную, подходящий для каждого опубликованного сайта, без затрат на проектирование, обслуживание и загрузку, связанных с наличием множества неиспользуемых функций. в стиле сайта.

План

Этот абзац представляет собой отрывок из Blueprint (CSS framework) . [ редактировать ]

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

Бутстрап

Этот абзац представляет собой отрывок из Bootstrap (фронтенд-фреймворка) . [ редактировать ]

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

Фундамент

Этот абзац представляет собой отрывок из Foundation (framework) . [ редактировать ]

Foundation — это бесплатная адаптивная интерфейсная платформа, предоставляющая адаптивную сетку и HTML и CSS компоненты пользовательского интерфейса , шаблоны и фрагменты кода, включая типографику, формы, кнопки, навигацию и другие элементы интерфейса, а также дополнительные функции, предоставляемые расширениями JavaScript . Foundation — это проект с открытым исходным кодом , который ранее поддерживался ZURB. С 2019 года фонд поддерживают волонтеры.

Методологии проектирования

По мере увеличения размера ресурсов CSS, используемых в проекте, команде разработчиков часто приходится выбирать общую методологию проектирования, чтобы поддерживать их организованность. Целью является простота разработки, простота совместной работы во время разработки и производительность развернутых таблиц стилей в браузере. Популярные методологии включают OOCSS (объектно-ориентированный CSS), ACSS (атомарный CSS), CSS (органическая таблица каскадных стилей), SMACSS (масштабируемая и модульная архитектура CSS) и BEM (блок, элемент, модификатор).

См. также

• Flash нестилизованного контента

Дальнейшее чтение

• Мейер, Эрик А .; Вейль, Эстель (2023). Каскадные таблицы стилей: полное руководство, пятое издание . O'Reilly Media, Inc. ISBN  9781098117610 .
• Грант, Кейт Дж. (2018). CSS в глубине . компании Manning Publications Co. ISBN  9781617293450 .
• Справочник CSS MDN
• MDN Начало работы с CSS

Внешние ссылки

• Официальный сайт