✖


Jump to content

CSS

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

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

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

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

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

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

Помимо 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. [6] Обратите внимание на различие между обозначением с двойным двоеточием, используемым для псевдоэлементов, и обозначением с одним двоеточием, используемым для псевдоклассов.

Комбинаторы

[ редактировать ]

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

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

[ редактировать ]

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

Шаблон Матчи Впервые определено
на уровне 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

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

[ редактировать ]

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

Декларация

[ редактировать ]

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

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

[ редактировать ]

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

Ценности

[ редактировать ]

Значения могут быть ключевыми словами, например «центр» или «наследовать», или числовыми значениями, например 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)). [13]

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

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

[ редактировать ]

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

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

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

Например, в 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.

Специфика

[ редактировать ]

Специфичность относится к относительному весу различных правил. [17] Он определяет, какие стили применяются к элементу, когда может применяться более одного правила. Согласно спецификации, простой селектор (например, H1) имеет специфичность 1, селекторы классов имеют специфичность 1,0, а селекторы ID имеют специфичность 1,0,0. Поскольку значения специфичности не переносятся, как в десятичной системе, для разделения «цифр» используются запятые. [18] (правило 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; в своей работе он опирается на отношения предка и потомка. Наследование — это механизм, с помощью которого свойства применяются не только к указанному элементу, но и к его потомкам. [17] Наследование основано на дереве документа, которое представляет собой иерархию элементов XHTML на странице, основанную на вложении. Элементы-потомки могут наследовать значения свойств CSS от любого элемента-предка, включающего их. Как правило, элементы-потомки наследуют свойства, связанные с текстом, но их свойства, связанные с блоком, не наследуются. Свойства, которые могут быть унаследованы, — это цвет, шрифт, межбуквенный интервал, высота строки, стиль списка, выравнивание текста, отступ текста, преобразование текста, видимость, пробелы и межсловный интервал. Свойства, которые не могут быть унаследованы: фон, граница, отображение, плавание и очистка, высота и ширина, поля, минимальная и максимальная высота и ширина, контур, переполнение, отступ, позиция, украшение текста, вертикальное выравнивание и z-индекс.

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

Наследование в CSS — это не то же самое, что наследование в языках программирования на основе классов , где можно определить класс B как «похожий на класс A, но с модификациями». [19] С помощью 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 для удобства чтения, можно использовать сокращенные свойства для более быстрой записи кода, который также быстрее обрабатывается при рендеринге: [20] 

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 определяет три схемы позиционирования:

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

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

[ редактировать ]

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

Статический
[ редактировать ]

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

Родственник
[ редактировать ]

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

Абсолютный
[ редактировать ]

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

Зафиксированный
[ редактировать ]

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

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

[ редактировать ]

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

левый
Элемент перемещается слева от строки, в которой он должен был появиться; другие предметы могут обтекать его правую сторону.
верно
Элемент перемещается справа от строки, в которой он должен был появиться; другие предметы могут обтекать его левую сторону.
прозрачный
Заставляет элемент появиться под («очистить») плавающими элементами слева ( clear:left), верно ( clear:right) или обе стороны ( clear:both). [21] [22]

История

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

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

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

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

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

Предложение Ли было представлено на конференции « Мозаика и Интернет » (позже названной WWW2) в Чикаго, штат Иллинойс, в 1994 году, а также снова с Бертом Босом в 1995 году. [24] Примерно в это же время W3C уже создавался и проявил интерес к развитию CSS. С этой целью был организован семинар под председательством Стивена Пембертона . Это привело к тому, что W3C добавил работу над CSS к результатам редакционной комиссии HTML (ERB). Ли и Бос были основным техническим персоналом, работавшим над этим аспектом проекта, в нем дополнительные участники, в том числе Томас Рирдон также принимали участие из Microsoft. В августе 1996 года Netscape Communication Corporation представила альтернативный язык таблиц стилей под названием Таблицы стилей JavaScript (JSSS). [24] Спецификация так и не была завершена и устарела. [33] К концу 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 [24] был выпущен в том же году и имел ограниченную поддержку CSS. В IE 4 и Netscape 4.x была добавлена ​​дополнительная поддержка, но она обычно была неполной и содержала множество ошибок , которые препятствовали эффективному внедрению CSS. Прошло более трех лет, прежде чем какой-либо веб-браузер достиг почти полной реализации спецификации. Internet Explorer 5.0 для Macintosh , выпущенный в марте 2000 года, был первым браузером, который имел полную (более 99 процентов) поддержку CSS 1. [34] обогнав 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 г. [35] и вернулся в статус кандидата в рекомендации только 19 июля 2007 г. [36]

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

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

[ редактировать ]

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

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

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


Снимок CSS 2021

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

CSS 1

[ редактировать ]

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

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

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

CSS 2

[ редактировать ]

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

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

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 г. [48] После рассмотрения Консультативным комитетом W3C он был наконец опубликован в качестве Рекомендации W3C 7 июня 2011 года. [49]

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 года. [50]

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

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

Краткое изложение основных характеристик модуля [53]
Модуль Название спецификации Статус Дата
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. [54] потому что спецификация разделена на множество отдельных модулей, уровни которых независимы.

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

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

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

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

[ редактировать ]

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

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

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

Ограничения

[ редактировать ]

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

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

[ редактировать ]

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

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

[ редактировать ]

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

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

[ редактировать ]

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

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

[ редактировать ]

Стили CSS часто приходится дублировать в нескольких правилах для достижения желаемого эффекта, что требует дополнительного обслуживания и более тщательного тестирования. Для решения этой проблемы были предложены некоторые новые функции CSS, но впоследствии от них отказались. [68] [69] Вместо этого авторы могут получить эту возможность, используя более сложные языки таблиц стилей, которые компилируются в 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 вручную, подходящий для каждого опубликованного сайта, без затрат на проектирование, обслуживание и загрузку, связанных с наличием множества неиспользуемых функций. в стиле сайта. [70]

План

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

Бутстрап

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

Фундамент

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

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

[ редактировать ]

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

См. также

[ редактировать ]

Ссылки

[ редактировать ]
  1. ^ «Руководство разработчика CSS» . Веб-документы MDN . Архивировано из оригинала 25 сентября 2015 г. Проверено 24 сентября 2015 г.
  2. ^ Фланаган, Дэвид (18 апреля 2011 г.). JavaScript: полное руководство . Пекин; Фарнем: О'Рейли. п. 1. ISBN  978-1-4493-9385-4 . OCLC   686709345 . JavaScript является частью триады технологий, которые должны изучить все веб-разработчики: HTML для определения содержимого веб-страниц, CSS для определения представления веб-страниц и JavaScript для определения поведения веб-страниц.
  3. ^ «Что такое CSS?» . Консорциум Всемирной паутины. Архивировано из оригинала 29 ноября 2010 г. Проверено 1 декабря 2010 г.
  4. ^ Кларк, Скотт (23 июля 2010 г.). «Веб-мобильные приложения будущего с использованием HTML 5, CSS и JavaScript» . HTML-плюшки . HTMLПолезности. Архивировано из оригинала 20 октября 2014 г. Проверено 16 октября 2014 г.
  5. ^ «Служба проверки CSS W3C» . Архивировано из оригинала 14 февраля 2011 г. Проверено 30 июня 2012 г.
  6. ^ «Спецификация W3C CSS2.1 для псевдоэлементов и псевдоклассов» . Консорциум Всемирной паутины. 7 июня 2011 года. Архивировано из оригинала 30 апреля 2012 года . Проверено 30 апреля 2012 г.
  7. ^ «Селекторы» . Спецификация каскадных таблиц стилей уровня 2, редакция 1 (CSS 2.1) . W3C. Архивировано из оригинала 23 апреля 2006 г.
  8. ^ «Селекторы 3-го уровня» . W3C. Архивировано из оригинала 3 июня 2014 г. Проверено 30 мая 2014 г.
  9. ^ «Модуль синтаксиса CSS, уровень 3» . W3C . Архивировано из оригинала 1 октября 2023 года . Проверено 1 октября 2023 г.
  10. ^ «Спецификация W3C CSS2.1 для наборов правил, блоков объявлений и селекторов» . Консорциум Всемирной паутины. 7 июня 2011 г. Архивировано из оригинала 28 марта 2008 г. Проверено 20 июня 2009 г.
  11. ^ «Полная таблица свойств» . W3C. Архивировано из оригинала 30 мая 2014 г. Проверено 30 мая 2014 г.
  12. ^ «Указатель свойств CSS» . W3C . Проверено 9 августа 2020 г.
  13. ^ «Цвет CSS» . Веб-документы MDN. 05.04.2024. Архивировано из оригинала 27 марта 2024 г. Проверено 5 апреля 2024 г.
  14. ^ «6.1 Единицы длины» . Каскадные таблицы стилей, уровень 1 . 17 декабря 1996 года. Архивировано из оригинала 14 июня 2019 года . Проверено 20 июня 2019 г.
  15. ^ «5. Единицы расстояния: тип <длина>» . Модуль CSS «Значения и единицы измерения», уровень 3 . 6 июня 2019 года. Архивировано из оригинала 7 июня 2019 года . Проверено 20 июня 2019 г.
  16. ^ Рабочая группа W3C по HTML. «HTML 5. Словарь и связанные с ним API для HTML и XHTML» . Консорциум Всемирной паутины . Архивировано из оригинала 15 июля 2014 года . Проверено 28 июня 2014 г.
  17. ^ Перейти обратно: а б Мейер, Эрик А. (2006). Каскадные таблицы стилей: полное руководство (3-е изд.). O'Reilly Media, Inc. ISBN  0-596-52733-0 . Архивировано из оригинала 15 февраля 2014 г. Проверено 16 февраля 2014 г.
  18. ^ «Присвоение значений свойств, каскадирование и наследование» . Архивировано из оригинала 11 июня 2014 г. Проверено 10 июня 2014 г.
  19. ^ «Может ли класс CSS наследовать один или несколько других классов?» . StackOverflow . Архивировано из оригинала 14 октября 2017 г. Проверено 10 сентября 2017 г.
  20. ^ «Сокращенные свойства» . Учебник . Разработчики Мозиллы. 07.12.2017. Архивировано из оригинала 30 января 2018 г. Проверено 30 января 2018 г.
  21. ^ Перейти обратно: а б с Бос, Берт; и др. (7 декабря 2010 г.). «9.3 Схемы позиционирования» . Спецификация каскадных таблиц стилей уровня 2, редакция 1 (CSS 2.1) . W3C. Архивировано из оригинала 18 февраля 2011 года . Проверено 16 февраля 2011 г.
  22. ^ Хольцшлаг, Молли Э (2005). Переходите к HTML и CSS . Pearson Education, Inc. ISBN  0-13-185586-7 .
  23. ^ Перейти обратно: а б Ли, Хакон В. (10 октября 1994 г.). «Каскадные таблицы стилей HTML – предложение» (Предложение) . ЦЕРН. Архивировано из оригинала 4 июня 2014 года . Проверено 25 мая 2014 г.
  24. ^ Перейти обратно: а б с д и ж Ложь, Хокон Виум ; Бос, Берт (1999). Каскадные таблицы стилей, проектирование для Интернета . Эддисон Уэсли. ISBN  0-201-59625-3 . Проверено 23 июня 2010 г.
  25. ^ «Каскадные таблицы стилей, уровень 1» . Консорциум Всемирной паутины. Архивировано из оригинала 9 апреля 2014 г. Проверено 7 марта 2014 г.
  26. ^ Перейти обратно: а б с Бос, Берт (14 апреля 1995 г.). «Простые таблицы стилей для SGML и HTML в Интернете» . Консорциум Всемирной паутины. Архивировано из оригинала 23 сентября 2009 года . Проверено 20 июня 2010 г.
  27. ^ Перейти обратно: а б с «Каскадные таблицы стилей» . Университет Осло. Архивировано из оригинала 6 сентября 2006 г. Проверено 3 сентября 2014 г.
  28. ^ Перейти обратно: а б Петри, Чарльз; Кайо, Роберт (ноябрь 1997 г.). «Интервью Роберта Кайо о предложении WWW: «Как это произошло на самом деле». » . Институт инженеров электротехники и электроники . Архивировано из оригинала 6 января 2011 года . Проверено 18 августа 2010 г.
  29. ^ Бос, Берт (31 марта 1995 г.). «Предложение таблицы стилей на основе потока» . Архивировано из оригинала 12 октября 2014 года . Проверено 3 сентября 2014 г.
  30. ^ Нильсен, Хенрик Фристик (7 июня 2002 г.). «Libwww Хакеры» . Консорциум Всемирной паутины. Архивировано из оригинала 2 декабря 2009 года . Проверено 6 июня 2010 г.
  31. ^ «Ив Лафон» . Консорциум Всемирной паутины. Архивировано из оригинала 24 июня 2010 года . Проверено 17 июня 2010 г.
  32. ^ «Команда W3C: технологии и общество» . Консорциум Всемирной паутины. 18 июля 2008 г. Архивировано из оригинала 28 мая 2010 г. Проверено 22 января 2011 г.
  33. ^ Лу Монтулли ; Брендан Эйх ; Скотт Фурман ; Донна Конверс ; Трой Шевалье (22 августа 1996 г.). «Таблицы стилей на основе JavaScript» . W3C. Архивировано из оригинала 27 мая 2010 года . Проверено 23 июня 2010 г.
  34. ^ «Программное обеспечение CSS» . W3C. Архивировано из оригинала 25 ноября 2010 г. Проверено 15 января 2011 г.
  35. ^ Энн ван Кестерен . «CSS 2.1 — Блог Анны» . Архивировано из оригинала 10 декабря 2005 г. Проверено 16 февраля 2011 г.
  36. ^ «Архив новостей W3C за 2007 год» . Консорциум Всемирной паутины . Архивировано из оригинала 28 июня 2011 г. Проверено 16 февраля 2011 г.
  37. ^ Нито, Тристан (18 марта 2002 г.). «Неверный тип MIME для файлов CSS» . Центр разработчиков Mozilla . Мозилла . Архивировано из оригинала 20 мая 2011 г. Проверено 20 июня 2010 г.
  38. ^ Макбрайд, Дон (27 ноября 2009 г.). «Типы файлов» . Архивировано из оригинала 29 октября 2010 года . Проверено 20 июня 2010 г.
  39. ^ «Сведения о расширении файла CSS» . База данных расширений файлов. 12 марта 2010 г. Архивировано из оригинала 18 июля 2011 г. Проверено 20 июня 2010 г.
  40. ^ Кирнин, Дженнифер (12 ноября 2019 г.). «Что такое префиксы поставщика CSS или префиксы браузера?» . Жизненный провод . Архивировано из оригинала 30 ноября 2020 г.
  41. ^ «Стандарт совместимости» . ЧТОРГ . 24 января 2024 г. Архивировано из оригинала 4 февраля 2024 г.
  42. ^ «Снимок CSS 2023 — 2.4. Уровни CSS» . W3C . 7 декабря 2023 г. Архивировано из оригинала 8 февраля 2024 г.
  43. ^ Бос, Берт; Виум Ли, Хокон (1997). Каскадные таблицы стилей: проектирование для Интернета (1-е издание). Харлоу, Англия; Ридинг, Массачусетс: Эддисон Уэсли Лонгман. ISBN  0-201-41998-Х .
  44. ^ W3C : Каскадные таблицы стилей, уровень 1. Архивировано 9 февраля 2011 г. в спецификации Wayback Machine CSS 1.
  45. ^ W3C : Спецификация каскадных таблиц стилей уровня 1. Архивировано 11 февраля 2011 г. в спецификации Wayback Machine CSS уровня 1.
  46. ^ «Слуховые таблицы стилей» . W3C. Архивировано из оригинала 26 октября 2014 г. Проверено 26 октября 2014 г.
  47. ^ W3C : Каскадные таблицы стилей, уровень 2. Архивировано 16 января 2011 г. в спецификации Wayback Machine CSS 2 (рекомендация 1998 г.).
  48. ^ W3C : Каскадные таблицы стилей, уровень 2, редакция 1. Архивировано 9 ноября 2011 г. в спецификации Wayback Machine CSS 2.1 (Предлагаемая рекомендация W3C).
  49. ^ W3C: Стандарт каскадных таблиц стилей может похвастаться беспрецедентной функциональной совместимостью. Архивировано 10 июня 2011 г. на Wayback Machine.
  50. ^ Бос, Берт (18 февраля 2011 г.). «Описания всех спецификаций CSS» . Консорциум Всемирной паутины . Архивировано из оригинала 31 марта 2011 года . Проверено 3 марта 2011 г.
  51. ^ Бос, Берт (26 февраля 2011 г.). «Текущая работа CSS» . Консорциум Всемирной паутины . Архивировано из оригинала 3 марта 2011 года . Проверено 3 марта 2011 г.
  52. ^ Этемад, Элика Дж. (12 декабря 2010 г.). «Снимок каскадных таблиц стилей (CSS) 2010» . Консорциум Всемирной паутины . Архивировано из оригинала 16 марта 2011 года . Проверено 3 марта 2011 г.
  53. ^ «Все спецификации CSS» . W3C. 22 мая 2014 г. Архивировано из оригинала 30 мая 2014 г. Проверено 30 мая 2014 г.
  54. ^ Аткинс, Таб младший. «Слово о CSS4» . Архивировано из оригинала 31 октября 2012 года . Проверено 18 октября 2012 г.
  55. ^ «Модуль гибкого макета CSS, уровень 1» . W3C. 19 ноября 2018 года. Архивировано из оригинала 19 октября 2012 года . Проверено 18 октября 2012 г.
  56. ^ «Снимок каскадных таблиц стилей (CSS) 2007» . 12 мая 2011 года. Архивировано из оригинала 8 августа 2016 года . Проверено 18 июля 2016 г.
  57. ^ «Снимок каскадных таблиц стилей (CSS) 2010» . 12 мая 2011 года. Архивировано из оригинала 16 марта 2011 года . Проверено 3 марта 2011 г.
  58. ^ «Снимок CSS 2015» . W3C . 13 октября 2015 г. Архивировано из оригинала 27 января 2017 г. Проверено 13 февраля 2017 г.
  59. ^ «Снимок CSS 2017» . W3C . 31 января 2017 года. Архивировано из оригинала 13 февраля 2017 года . Проверено 13 февраля 2017 г.
  60. ^ «Снимок CSS 2018» . W3C . 22 января 2019 года. Архивировано из оригинала 1 февраля 2019 года . Проверено 2 января 2019 г.
  61. ^ «ССС» . Могу ли я использовать… Таблицы поддержки HTML5, CSS3 и т. д . Архивировано из оригинала 19 февраля 2018 г. Проверено 26 января 2019 г.
  62. ^ «ССС» . Веб-документы MDN . 21 июля 2023 г. Архивировано из оригинала 26 ноября 2023 г.
  63. ^ «Призыв к участию в группе сообщества CSS4» . W3C . 24 февраля 2020 г. Архивировано из оригинала 10 февраля 2023 г. Проверено 27 февраля 2020 г.
  64. ^ Лазарис, Луи (28 апреля 2010 г.). «Решения CSS3 для Internet Explorer» . Разрушительный журнал . Архивировано из оригинала 12 октября 2016 г. Проверено 12 октября 2016 г.
  65. ^ Симмонс, Джен (17 августа 2016 г.). «Использование функциональных запросов в CSS» . Хаки Мозиллы . Архивировано из оригинала 11 октября 2016 г. Проверено 12 октября 2016 г.
  66. ^ Хатчинсон, Ли (2019). «Последний раз заглянуть в Интернет с помощью Internet Explorer 6» . Арс Техника . Архивировано из оригинала 12 октября 2016 г. Проверено 12 октября 2016 г.
  67. ^ «Всплывающие окна на чистом CSS» . meyerweb.com. Архивировано из оригинала 9 декабря 2009 г. Проверено 19 ноября 2009 г.
  68. ^ Таб Аткинс-младший «Правило применения CSS» . Гитхаб. Архивировано из оригинала 22 февраля 2016 г. Проверено 27 февраля 2016 г.
  69. ^ «Почему я отказался от @apply — завершение вкладки» .
  70. ^ Седерхольм, Дэн; Итан Маркотт (2009). CSS, созданный вручную: более надежный веб-дизайн . Новые гонщики. п. 114. ИСБН  978-0-321-64338-4 . Архивировано из оригинала 20 декабря 2012 года . Проверено 19 июня 2010 г.
  71. ^ «Фонд Зурб находится в активной разработке?» . Гитхаб . Проверено 21 ноября 2019 г.
  72. ^ Антти, Хилья. «OOCSS, ACSS, BEM, SMACSS: что это такое? Что мне следует использовать?» . clubmate.fi . Хилья. Архивировано из оригинала 2 июня 2015 года . Проверено 2 июня 2015 г.

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

[ редактировать ]
[ редактировать ]
Retrieved from "https://en.wikipedia.org/w/index.php?title=CSS&oldid=1238264668"
Arc.Ask3.Ru: конец переведенного документа.
Arc.Ask3.Ru
Номер скриншота №: 5b0c81ff98687bb241b8094d6296c371__1722634620
URL1:https://arc.ask3.ru/arc/aa/5b/71/5b0c81ff98687bb241b8094d6296c371.html
Заголовок, (Title) документа по адресу, URL1:
CSS - Wikipedia
Данный printscreen веб страницы (снимок веб страницы, скриншот веб страницы), визуально-программная копия документа расположенного по адресу URL1 и сохраненная в файл, имеет: квалифицированную, усовершенствованную (подтверждены: метки времени, валидность сертификата), открепленную ЭЦП (приложена к данному файлу), что может быть использовано для подтверждения содержания и факта существования документа в этот момент времени. Права на данный скриншот принадлежат администрации Ask3.ru, использование в качестве доказательства только с письменного разрешения правообладателя скриншота. Администрация Ask3.ru не несет ответственности за информацию размещенную на данном скриншоте. Права на прочие зарегистрированные элементы любого права, изображенные на снимках принадлежат их владельцам. Качество перевода предоставляется как есть. Любые претензии, иски не могут быть предъявлены. Если вы не согласны с любым пунктом перечисленным выше, вы не можете использовать данный сайт и информация размещенную на нем (сайте/странице), немедленно покиньте данный сайт. В случае нарушения любого пункта перечисленного выше, штраф 55! (Пятьдесят пять факториал, Денежную единицу (имеющую самостоятельную стоимость) можете выбрать самостоятельно, выплаичвается товарами в течение 7 дней с момента нарушения.)