CSS

Из Википедии, бесплатной энциклопедии
  (Перенаправлено из каскадных таблиц стилей )
Перейти к навигации Перейти к поиску
Каскадные таблицы стилей (CSS)
Логотип CSS3 и wordmark.svg
Расширение имени файла
.css
Тип интернет-СМИ
текст / css
Единый идентификатор типа (UTI)public.css
РазработаноКонсорциум World Wide Web (W3C)
Первый выпуск17 декабря 1996 г . ; 24 года назад ( 1996-12-17 )
Последний релиз
CSS 2.1: уровень 2, версия 1
(12 апреля 2016 г . ; 5 лет назад ) ( 2016-04-12 )
Тип форматаЯзык таблиц стилей
Контейнер дляПравила стиля для HTML-элементов (тегов)
СодержитсяHTML-документы
Открытый формат ?да
Веб-сайтwww .w3 .org / TR / CSS / #css

Каскадные таблицы стилей ( CSS ) - это язык таблиц стилей, используемый для описания представления документа, написанного на языке разметки, таком как HTML . [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 имеет простой синтаксис и использует несколько английских ключевых слов для определения имен различных свойств стиля.

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

Селектор [ править ]

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

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

  • все элементы определенного типа, например, заголовки второго уровня h2
  • элементы, указанные атрибутом , в частности:
    • id : уникальный в документе идентификатор, идентифицируемый с помощью хеш-префикса, например#id
    • класс : идентификатор, который может аннотировать несколько элементов в документе, идентифицированный префиксом точки, например.classname
  • элементы в зависимости от того, как они размещены относительно других в дереве документа .

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

Псевдоклассы используются в селекторах CSS, чтобы разрешить форматирование на основе информации, которая не содержится в дереве документа. Одним из примеров широко используемого псевдокласса является определение содержимого только тогда, когда пользователь «указывает» на видимый элемент, обычно удерживая курсор мыши над ним. Он добавляется к селектору, как в или . Псевдокласс классифицирует элементы документа, такие как или , тогда как псевдоэлемент делает выбор, который может состоять из частичных элементов, таких как или . [6]:hovera:hover#elementid:hover:link:visited::first-line::first-letter

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

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

ШаблонСпичкиВпервые определено
на уровне CSS
Eэлемент типа E1
E:linkэлемент E - это исходный якорь гиперссылки, цель которой еще не посещена (: ссылка) или уже посещена (: посещена)1
E:activeэлемент E во время определенных действий пользователя1
E::first-lineпервая отформатированная строка элемента E1
E::first-letterпервая отформатированная буква элемента E1
.cвсе элементы с class = "c"1
#myidэлемент с id = "myid"1
E.warningэлемент E, класс которого - "предупреждение" (язык документа определяет, как класс определяется)1
E#myidэлемент E с идентификатором, равным "myid"1
.c#myidэлемент с class = "c" и идентификатором, равным "myid"1
E Fэлемент F, потомок элемента E1
*любой элемент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сгенерированное содержимое перед содержимым элемента E2
E::afterсгенерированный контент после содержимого элемента E2
E > Fдочерний элемент F элемента E2
E + Fэлемент F, которому непосредственно предшествует элемент E2
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, являющийся целью ссылающегося URI3
E:enabledэлемент пользовательского интерфейса E, который включен3
E:disabledэлемент пользовательского интерфейса E, который отключен3
E:checkedотмеченный элемент пользовательского интерфейса E (например, радио-кнопка или флажок)3
E:not(s)элемент E, который не соответствует простому селектору s3
E ~ Fэлемент F, которому предшествует элемент E3

Блок объявления [ править ]

Блок объявлений состоит из списка объявлений в фигурных скобках. Каждое объявление само по себе состоит из свойства , двоеточия ( :) и значения . Если в блоке несколько объявлений, ;необходимо вставить точку с запятой ( ), чтобы отделить каждое объявление. По желанию может быть использована с запятой после последней (или единственной) декларации. [9]

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

Значения могут быть ключевыми словами, такими как «центр» или «наследование», или числовыми значениями, например 200px(200 пикселей), 50vw(50 процентов ширины области просмотра) или 80% (80 процентов ширины родительского элемента). Значения цвета могут быть указаны с ключевыми словами (например, " "), шестнадцатеричными значениями (например , также сокращенными как ), значениями RGB по шкале от 0 до 255 (например ), значениями RGBA, которые определяют как цвет, так и альфа-прозрачность (например ), или HSL или значения HSLA (например , ). [12]red#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)

Единицы длины [ править ]

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

Используйте [ редактировать ]

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

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

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

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

< h1 > < font  color = "red" > Глава 1. </ font > </ h1 >

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

< h1  style = "цвет: красный;" > Глава 1. </ h1 >

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

< стиль >  h1  {  цвет :  красный ;  } </ style >

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

< стиль >  h1  {  цвет :  синий ;  } </ style >

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

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

< link  href = "путь / к / file.css"  rel = "stylesheet"  type = "text / css" >

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

Источники [ править ]

Информация CSS может быть предоставлена ​​из различных источников. Этими источниками могут быть веб-браузер, пользователь и автор. Информация от автора может быть дополнительно классифицирована по встроенным, типам мультимедиа, важности, специфичности селектора, порядку правил, наследованию и определению свойств. Информация о стиле CSS может быть в отдельном документе или может быть встроена в документ HTML. Можно импортировать несколько таблиц стилей. В зависимости от используемого устройства вывода могут применяться разные стили; например, экранная версия может сильно отличаться от печатной, так что авторы могут адаптировать презентацию для каждого носителя.

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

Одна из целей 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.

Специфика [ править ]

Специфика относится к относительному весу различных правил. [16] Он определяет, какие стили применяются к элементу, если может применяться более одного правила. В зависимости от спецификации простой селектор (например, H1) имеет специфичность 1, селекторы классов имеют специфичность 1,0, а селекторы ID имеют специфичность 1,0,0. Поскольку значения специфичности не переносятся, как в десятичной системе, запятые используются для разделения «цифр» [17] (правило 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;" > Для демонстрации специфичности </ p >  </ body > </ html >

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

Наследование [ править ]

Наследование - ключевая особенность CSS; он полагается на отношения «предок-потомок». Наследование - это механизм, с помощью которого свойства применяются не только к указанному элементу, но и к его потомкам. [16] Наследование основывается на дереве документа, которое представляет собой иерархию XHTML.элементы на странице на основе вложенности. Дочерние элементы могут наследовать значения свойств CSS от любого элемента-предка, в который они входят. Как правило, дочерние элементы наследуют свойства, связанные с текстом, но их свойства, связанные с блоком, не наследуются. Свойства, которые могут быть унаследованы: цвет, шрифт, межбуквенный интервал, высота строки, стиль списка, выравнивание текста, отступ текста, преобразование текста, видимость, пробелы и интервалы между словами. Свойства, которые не могут быть унаследованы: background, border, display, float and clear, height и width, margin, min- и max-height и -width, outline, overflow, padding, position, text-decoration, vertical-align и z. -индекс.

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

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

Пример [ править ]

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

h1  {  цвет :  розовый ; }

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

< h1 > Это < em > для иллюстрации </ em > наследования </ h1 >

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

Пробел [ править ]

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

тело { переполнение : скрыто ; фон : # 000000 ; фоновое изображение : URL ( изображения / bg.gif ); фон-повтор : без повторения ; background-position : left  top ;}

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

тело  {  переполнение :  скрыто ;  цвет фона :  # 000000 ;  фоновое изображение :  URL ( изображения / bg.gif );  фон-повтор :  без повторения ;  положение фона :  слева  вверху ; }

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

тело  {  переполнение :  скрыто ;  фон :  # 000  url ( images / bg.gif )  без повтора  слева  вверху ; }

Позиционирование [ править ]

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

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

Свойство позиции [ править ]

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

Статический
Значение по умолчанию помещает элемент в нормальный поток
Родственник
Элемент помещается в обычный поток , а затем смещается или смещается от этой позиции. Последующие элементы потока располагаются так, как если бы элемент не был перемещен.
Абсолютный
Задает абсолютное позиционирование . Элемент позиционируется относительно своего ближайшего нестатического предка.
Фиксированный
Элемент абсолютно позиционируется в фиксированном положении на экране, даже когда остальная часть документа прокручивается [20]

Плавать и очищать [ править ]

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

оставил
Элемент плавает слева от строки, в которой он должен был появиться; другие предметы могут обтекать его правую сторону.
верно
Элемент плавает справа от строки, в которой он должен был появиться; другие предметы могут обтекать его левую сторону.
Чисто
Заставляет элемент появляться под ('clear') плавающими элементами слева ( ), справа ( ) или с обеих сторон ( ). [20] [21]clear:leftclear:rightclear:both

История [ править ]

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

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

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

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

Улучшение возможностей веб-презентаций было темой, интересовавшей многих в веб-сообществе, и девять различных языков таблиц стилей были предложены в списке рассылки в стиле www. [26] Из этих девяти предложений два особенно повлияли на то, что стало CSS: Cascading HTML Style Sheets [22] и Stream-based Style Sheet Proposal (SSP). [25] [28] Два браузера служили тестовыми площадками для первоначальных предложений; Ли работал с Ив Лафон для реализации CSS в Dave Раггетт «s Арена браузера. [29] [30] [31] Берт Бос реализовал собственное предложение SSP в браузере Argo . [25]После этого Ли и Бос работали вместе над разработкой стандарта CSS (буква «H» была удалена из названия, поскольку эти таблицы стилей также можно было применять к другим языкам разметки, помимо HTML). [23]

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

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

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

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

Трудности с усыновлением [ править ]

Спецификация CSS 1 была завершена в 1996 году. В том же году был выпущен Microsoft Internet Explorer 3 [23] с некоторой ограниченной поддержкой CSS. IE 4 и Netscape 4.x добавили дополнительную поддержку, но, как правило, она была неполной и содержала множество ошибок , мешавших полноценному применению CSS. Прошло более трех лет, прежде чем какой-либо веб-браузер достиг почти полной реализации спецификации. Internet Explorer 5.0 для Macintosh , выпущенный в марте 2000 г., был первым браузером, который имел полную (более 99%) поддержку CSS 1 [33], превосходя 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. Без этого маркера веб-браузеры, у которых есть возможность переключения «режимов причуд», будут изменять размеры объектов на веб-страницах, как IE5 / Windows, а не следуя стандартам CSS. [ необходима цитата ]

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

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

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

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

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

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

Варианты [ править ]

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

CSS 1 [ править ]

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

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

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

CSS 2 [ править ]

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

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

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

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

CSS 3 [ править ]

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

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

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

Краткое изложение основных характеристик модуля [51]
МодульНазвание спецификацииСтатусДата
css3-фонМодуль CSS Backgrounds and Borders, уровень 3 Кандидат Рек.Декабрь 2020
css3-коробкаБазовая блочная модель CSSКандидат Рек.Декабрь 2020
css-каскад-3Каскадирование и наследование CSS, уровень 3 РекомендацияФевраль 2021 г.
css3-цветЦветовой модуль CSS, уровень 3РекомендацияИюн 2018
css3-контентМодуль сгенерированного и замененного содержимого CSS3 Рабочий проект 2Август 2019 г.
css-шрифты-3Модуль CSS Fonts Уровень 3РекомендацияСен 2018
css3-gcpmСгенерированный CSS контент для страничного медиа-модуляРабочий проектМай 2014 г.
css3-макетМодуль макета шаблона CSSПримечаниеМарт 2015 г.
css3-mediaqueries Медиа-запросыРекомендацияИюнь 2012 г.
mediaqueries-4 Медиа-запросы, уровень 4Кандидат Рек.Июл 2020
css3-мультикол Модуль макета с несколькими столбцами, уровень 1Рабочий проектФевраль 2021 г.
css3-страницаCSS Страничный медиа-модуль, уровень 3Рабочий проектОктябрь 2018
селекторы-3Селекторы уровня 3РекомендацияНоя 2018
селекторы-4Селекторы уровня 4Рабочий проектНоя 2018
css3-uiМодуль базового пользовательского интерфейса CSS, уровень 3 (CSS3 UI)РекомендацияИюн 2018

CSS 4 [ править ]

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

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

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

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

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

Поддержка браузера [ править ]

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

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

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

Ограничения [ править ]

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

Селекторы не могут подняться
В настоящее время CSS не предлагает способа выбрать родителя или предка элемента, удовлетворяющего определенным критериям. [65] Селекторы CSS уровня 4, который все еще находится в статусе рабочего проекта, предлагает такой селектор, [66] но только как часть полного профиля селектора «моментального снимка», а не быстрого «живого» профиля, используемого в динамических стилях CSS. [67] Более продвинутая схема выбора (такая как XPath ) позволит использовать более сложные таблицы стилей. Основные причины, по которым рабочая группа CSS ранее отклоняла предложения по родительским селекторам, связаны с производительностью браузера и проблемами инкрементного рендеринга . [68]
Невозможно явно объявить новую область видимости независимо от позиции
Правила области действия для таких свойств, как z-index, ищут ближайший родительский элемент с атрибутом position: absolute или position: relative. Эта странная связь имеет нежелательные эффекты. Например, невозможно избежать объявления новой области видимости, когда кто-то вынужден корректировать положение элемента, не позволяя использовать желаемую область видимости родительского элемента.
Неуправляемое динамическое поведение псевдокласса
CSS реализует псевдоклассы, которые позволяют получить обратную связь с пользователем путем условного применения альтернативных стилей. Один псевдокласс CSS, " ", является динамическим (эквивалент JavaScript "onmouseover") и имеет потенциал для неправильного использования (например, реализация всплывающих окон приближения курсора) [69], но CSS не имеет возможности для клиента отключить его (нет «отключить» -подобное свойство) или ограничить его эффекты (нет «без изменения» значений для каждого свойства).:hover
Не могу назвать правила
Невозможно назвать правило CSS, которое позволило бы (например) клиентским скриптам ссылаться на правило, даже если его селектор изменится.
Невозможно включить стили из правила в другое правило
Стили CSS часто должны дублироваться в нескольких правилах для достижения желаемого эффекта, что вызывает дополнительное обслуживание и требует более тщательного тестирования. Для решения этой проблемы были предложены некоторые новые функции CSS, но впоследствии от них отказались. [70] [71]
Невозможно настроить таргетинг на конкретный текст без изменения разметки
Помимо псевдоэлемента, невозможно настроить таргетинг на определенные диапазоны текста без использования элементов-заполнителей.:first-letter

Бывшие проблемы [ править ]

Кроме того, в предыдущих версиях стандарта CSS присутствовало еще несколько проблем, но они были устранены:

Ограничения вертикального контроля
Хотя горизонтальное размещение элементов всегда было легко контролировать, вертикальное размещение часто было не интуитивно понятным, запутанным или совершенно невозможным. Простые задачи, такие как центрирование элемента по вертикали или размещение нижнего колонтитула не выше нижней части области просмотра, требовали либо сложных и неинтуитивных правил стиля, либо простых, но широко не поддерживаемых правил. [65] Модуль Flexible Box значительно улучшил ситуацию, а вертикальное управление стало намного проще и поддерживается во всех современных браузерах. [72] У старых браузеров все еще есть эти проблемы, но большинство из них (в основном Internet Explorer 9 и ниже) больше не поддерживаются их поставщиками. [73]
Отсутствие выражений
Не было стандартной возможности задавать значения свойств в виде простых выражений (например, ). Это было бы полезно во множестве случаев, например, при вычислении размера столбцов с учетом ограничения на сумму всех столбцов. Internet Explorer версий с 5 по 7 поддерживает собственный оператор выражения (), [74] с аналогичной функциональностью. Этот проприетарный оператор expression () больше не поддерживается начиная с Internet Explorer 8, за исключением режимов совместимости. Это решение было принято из соображений "соответствия стандартам, производительности браузера и безопасности". [74] Тем не менее, рабочая группа CSS опубликовала кандидатскую рекомендацию со значением calc () для устранения этого ограничения [75].margin-left: 10% 3em + 4px;и с тех пор поддерживается во всех современных браузерах. [76]
Отсутствие объявления столбца
Хотя это возможно в текущем CSS 3 (с использованием column-countмодуля), [77] макеты с несколькими столбцами могут быть сложными для реализации в CSS 2.1. В CSS 2.1 процесс часто выполняется с использованием плавающих элементов, которые часто по-разному отображаются в разных браузерах, разных формах экрана компьютеров и разных соотношениях экрана, установленных на стандартных мониторах. Все современные браузеры в той или иной форме поддерживают эту функцию CSS 3. [78]

Преимущества [ править ]

Отделение контента от презентации
CSS облегчает публикацию контента в нескольких форматах представления на основе номинальных параметров. Номинальные параметры включают явные предпочтения пользователя, различные веб-браузеры, тип устройства, используемого для просмотра контента (настольный компьютер или мобильное устройство), географическое местоположение пользователя и многие другие переменные.
Согласованность по всему сайту
Когда CSS используется эффективно, с точки зрения наследования и «каскадирования», можно использовать глобальную таблицу стилей, чтобы влиять на элементы и стилизовать их по всему сайту. Если возникает ситуация, когда стиль элементов должен быть изменен или скорректирован, эти изменения могут быть внесены путем редактирования правил в глобальной таблице стилей. До появления CSS такое обслуживание было более сложным, дорогим и трудоемким.
Пропускная способность
Таблица стилей, внутренняя или внешняя, определяет стиль один раз для диапазона элементов HTML, выбранных по classтипу или по отношению к другим. Это намного эффективнее, чем повторение информации о стиле в строке для каждого вхождения элемента. Внешняя таблица стилей обычно хранится в кеше браузера и поэтому может использоваться на нескольких страницах без перезагрузки, что еще больше снижает передачу данных по сети.
Переформатирование страницы
Простым изменением одной строки можно использовать другую таблицу стилей для той же страницы. Это дает преимущества с точки зрения доступности, а также дает возможность адаптировать страницу или сайт к различным целевым устройствам. Более того, устройства, не способные понять стиль, по-прежнему отображают контент.
Доступность
Без CSS веб-дизайнеры обычно должны размещать свои страницы с помощью таких методов, как таблицы HTML, которые затрудняют доступность для пользователей с ослабленным зрением (см. Веб-дизайн без таблиц # Доступность ).

Стандартизация [ править ]

Фреймворки [ править ]

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

Методики проектирования [ править ]

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

Ссылки [ править ]

  1. ^ «Руководство разработчика CSS» . Сеть разработчиков Mozilla . Архивировано 25 сентября 2015 года . Проверено 24 сентября 2015 .
  2. ^ Фланаган, Дэвид. JavaScript - Полное руководство (6 изд.). п. 1. JavaScript является частью триады технологий, которую должны изучить все веб-разработчики: HTML для определения содержимого веб-страниц, CSS для определения представления веб-страниц и JavaScript для определения поведения веб-страниц.
  3. ^ "Что такое CSS?" . Консорциум World Wide Web. Архивировано 29 ноября 2010 года . Проверено 1 декабря 2010 .
  4. ^ «Мобильные веб-приложения будущего с использованием HTML 5, CSS и JavaScript» . HTMLGoodies. Архивировано 20 октября 2014 года . Проверено 16 октября 2014 .
  5. ^ "Служба проверки CSS W3C" . Архивировано 14 февраля 2011 года . Проверено 30 июня 2012 .
  6. ^ "Спецификация W3C CSS2.1 для псевдоэлементов и псевдоклассов" . Консорциум World Wide Web. 7 июня 2011. Архивировано 30 апреля 2012 года . Проверено 30 апреля 2012 года .
  7. ^ см. полное определение селекторов на веб-сайте W3C. Архивировано 23 апреля 2006 г. на Wayback Machine .
  8. ^ "Селекторы уровня 3" . W3.org. Архивировано 3 июня 2014 года . Проверено 30 мая 2014 .
  9. ^ "Спецификация W3C CSS2.1 для наборов правил, блоков объявлений и селекторов" . Консорциум World Wide Web. 7 июня 2011. Архивировано 28 марта 2008 года . Проверено 20 июня 2009 .
  10. ^ "Полная таблица свойств" . W3.org. Архивировано 30 мая 2014 года . Проверено 30 мая 2014 .
  11. ^ «Указатель свойств CSS» . www.w3.org . Проверено 9 августа 2020 .
  12. ^ "Цвет CSS" . Сеть разработчиков Mozilla. 2016-06-28. Архивировано 21 сентября 2016 года . Проверено 23 августа 2016 .
  13. ^ «6.1 Единицы длины» . Каскадные таблицы стилей, уровень 1 . 17 декабря 1996 года. Архивировано 14 июня 2019 года . Проверено 20 июня 2019 .
  14. ^ "5. Единицы расстояния: тип <длина>" . Модуль «Значения и единицы измерения CSS», уровень 3 . 6 июня 2019 года. Архивировано 7 июня 2019 года . Проверено 20 июня 2019 .
  15. ^ Рабочая группа W3C HTML. «HTML 5. Словарь и связанные API для HTML и XHTML» . Консорциум World Wide Web . Архивировано 15 июля 2014 года . Проверено 28 июня 2014 .
  16. ^ a b Мейер, Эрик А. (2006). Каскадные таблицы стилей: полное руководство (3-е изд.). ISBN O'Reilly Media, Inc. 0-596-52733-0. Архивировано 15 февраля 2014 года . Проверено 16 февраля 2014 .
  17. ^ «Присвоение значений свойств, каскадирование и наследование» . Архивировано 11 июня 2014 года . Проверено 10 июня 2014 .
  18. ^ "Может ли класс CSS наследовать один или несколько других классов?" . StackOverflow . Архивировано 14 октября 2017 года . Проверено 10 сентября 2017 .
  19. ^ "Сокращенные свойства" . Учебник . Разработчики Mozilla. 2017-12-07. Архивировано из оригинала на 2018-01-30 . Проверено 30 января 2018 .
  20. ^ a b c Бос, Берт; и другие. (7 декабря 2010 г.). «9.3 Схемы позиционирования» . Спецификация каскадных таблиц стилей, уровень 2, редакция 1 (CSS 2.1) . W3C. Архивировано 18 февраля 2011 года . Проверено 16 февраля 2011 года .
  21. ^ Holzschlag, Molly E (2005). Погрузитесь в HTML и CSS . ISBN Pearson Education, Inc. 0-13-185586-7.
  22. ^ a b Ли, Хакон В. (10 октября 1994 г.). «Каскадные таблицы стилей HTML - предложение» (Предложение) (92). ЦЕРН. Архивировано 4 июня 2014 года . Проверено 25 мая 2014 . Цитировать журнал требует |journal=( помощь )
  23. ^ a b c d e f Ли, Хокон Виум ; Бос, Берт (1999). Каскадные таблицы стилей, разработка для Интернета . Эддисон Уэсли. ISBN 0-201-59625-3. Проверено 23 июня 2010 года .
  24. ^ «Каскадные таблицы стилей, уровень 1» . Консорциум World Wide Web. Архивировано 9 апреля 2014 года . Проверено 7 марта 2014 .
  25. ^ a b c Бос, Берт (14 апреля 1995 г.). «Простые таблицы стилей для SGML и HTML в Интернете» . Консорциум World Wide Web. Архивировано 23 сентября 2009 года . Проверено 20 июня 2010 года .
  26. ^ a b c «Каскадные таблицы стилей» . Университет Осло. Архивировано из оригинала на 2006-09-06 . Проверено 3 сентября 2014 года .
  27. ^ a b Петри, Чарльз; Кайо, Роберт (ноябрь 1997 г.). «Интервью Роберта Кайо о предложении WWW:« Как это на самом деле произошло ». " " . Институт инженеров по электротехнике и радиоэлектронике . Архивировано из оригинального 6 -го января 2011 года . Проверено 18 августа 2010 года .
  28. Бос, Берт (31 марта 1995 г.). «Предложение таблицы стилей на основе потока» . Архивировано 12 октября 2014 года . Проверено 3 сентября 2014 года .
  29. ^ Nielsen, Хенрик Frystyk (7 июня 2002). "Либуу-хакеры" . Консорциум World Wide Web. Архивировано 2 декабря 2009 года . Проверено 6 июня 2010 года .
  30. ^ "Ив Лафон" . Консорциум World Wide Web. Архивировано 24 июня 2010 года . Проверено 17 июня 2010 года .
  31. ^ «Команда W3C: Технология и общество» . Консорциум World Wide Web. 18 июля 2008 года. Архивировано 28 мая 2010 года . Проверено 22 января 2011 года .
  32. ^ Лу Монтулли ; Брендан Эйх ; Скотт Фурман ; Донна Конверс ; Трой Шевалье (22 августа 1996 г.). «Таблицы стилей на основе JavaScript» . W3C. Архивировано 27 мая 2010 года . Проверено 23 июня 2010 года .
  33. ^ «Программное обеспечение CSS» . W3.org. Архивировано 25 ноября 2010 года . Проверено 15 января 2011 .
  34. ^ Энн ван Кестерен . «CSS 2.1 - блог Анны» . Архивировано 10 декабря 2005 года . Проверено 16 февраля 2011 .
  35. ^ «Архив новостей W3C в 2007 году» . Консорциум World Wide Web . Архивировано 28 июня 2011 года . Проверено 16 февраля 2011 .
  36. ^ Нит, Тристан (18 марта 2002). «Неверный тип MIME для файлов CSS» . Центр разработчиков Mozilla . Mozilla . Архивировано из оригинала на 2011-05-20 . Проверено 20 июня 2010 года .
  37. Рианна Макбрайд, Дон (27 ноября 2009 г.). «Типы файлов» . Архивировано 29 октября 2010 года . Проверено 20 июня 2010 года .
  38. ^ "Сведения о расширении файла css" . База данных расширений файлов. 12 марта 2010 года Архивировано из оригинала 18 июля 2011 года . Проверено 20 июня 2010 года .
  39. ^ «Как и почему вы хотели бы использовать префиксы поставщиков CSS на своем веб-сайте» . Lifewire . 2019-11-12.
  40. ^ «Стандарт совместимости» . WHATWG .
  41. Bos, / Håkon Wium Lie, Bert (1997). Каскадные таблицы стилей: проектирование для Интернета (1-е изд.). Харлоу, Англия; Ридинг, Массачусетс: Эддисон Уэсли Лонгман. ISBN 0-201-41998-X.
  42. ^ W3C : Каскадные таблицы стилей, уровень 1. Архивировано 09 февраля 2011 г. в спецификации CSS 1 Wayback Machine.
  43. ^ W3C : Спецификация каскадных таблиц стилей уровня 1. Архивировано 11 февраля 2011 г. в спецификации CSS уровня 1 Wayback Machine.
  44. ^ "Звуковые таблицы стилей" . W3C. Архивировано 26 октября 2014 года . Проверено 26 октября 2014 .
  45. ^ W3C : Каскадные таблицы стилей, уровень 2 Архивировано 16 января 2011 г. в спецификации CSS 2 Wayback Machine (рекомендация 1998 г.)
  46. ^ W3C : Каскадные таблицы стилей, уровень 2, редакция 1 Архивировано 09.11.2011 в спецификации CSS 2.1 Wayback Machine (предлагаемая рекомендация W3C)
  47. ^ W3C: Стандарт каскадных таблиц стилей может похвастаться беспрецедентной совместимостью. Архивировано 10 июня 2011 г. на Wayback Machine.
  48. Бос, Берт (18 февраля 2011 г.). «Описание всех спецификаций CSS» . Консорциум World Wide Web . Архивировано 31 марта 2011 года . Проверено 3 марта 2011 года .
  49. Бос, Берт (26 февраля 2011 г.). «Текущая работа CSS» . Консорциум World Wide Web . Архивировано 3 марта 2011 года . Проверено 3 марта 2011 года .
  50. ^ Etemad, Элика J. (12 декабря 2010). «Снимок каскадных таблиц стилей (CSS) 2010» . Консорциум World Wide Web . Архивировано 16 марта 2011 года . Проверено 3 марта 2011 года .
  51. ^ «Все спецификации CSS» . W3.org. 2014-05-22. Архивировано 30 мая 2014 года . Проверено 30 мая 2014 .
  52. ^ Atkins Jr, Tab. «Несколько слов о CSS4» . Архивировано 31 октября 2012 года . Проверено 18 октября 2012 года .
  53. ^ «CSS Flexible Box Layout Module Level 1» . W3C. 19 ноября 2018. Архивировано 19 октября 2012 года . Проверено 18 октября 2012 года .
  54. ^ «Снимок каскадных таблиц стилей (CSS) 2007» . 12 мая 2011. Архивировано 8 августа 2016 года . Проверено 18 июля +2016 .
  55. ^ «Снимок каскадных таблиц стилей (CSS) 2010» . 12 мая 2011. Архивировано 16 марта 2011 года . Проверено 3 марта 2011 года .
  56. ^ «CSS Snapshot 2015» . W3C . 13 октября 2015. Архивировано 27 января 2017 года . Проверено 13 февраля 2017 года .
  57. ^ «CSS Snapshot 2017» . 31 января 2017. Архивировано 13 февраля 2017 года . Проверено 13 февраля 2017 года .
  58. ^ «CSS Snapshot 2018» . 15 ноября 2018. Архивировано 1 февраля 2019 года . Проверено 2 января 2019 .
  59. ^ «Могу ли я использовать… Поддерживаемые таблицы для HTML5, CSS3 и т . Д.» . Архивировано 19 февраля 2018 года . Проверено 26 января 2019 .
  60. ^ "Веб-документы MDN: CSS" .
  61. ^ "Группа сообщества CSS4" . Архивировано 27 февраля 2020 года . Проверено 27 февраля 2020 .
  62. ^ «Решения CSS3 для Internet Explorer - Smashing Magazine» . Smashing Magazine . 2010-04-28. Архивировано 12 октября 2016 года . Проверено 12 октября 2016 .
  63. ^ «Использование запросов функций в CSS ★ Mozilla Hacks - блог веб-разработчиков» . hacks.mozilla.org . Архивировано 11 октября 2016 года . Проверено 12 октября 2016 .
  64. ^ "Последний раз заглянул в Интернет с помощью Internet Explorer 6" . Ars Technica . Архивировано 12 октября 2016 года . Проверено 12 октября 2016 .
  65. ^ a b Молли Хольцшлаг (январь 2012 г.). «Семь вещей, которые все еще отсутствуют в CSS» . .net Журнал. Архивировано из оригинала на 2017-03-05 . Проверено 4 марта 2017 .
  66. ^ «Селекторы уровня 4 - Определение предмета селектора» . W3.org. Архивировано 17 августа 2013 года . Проверено 13 августа 2013 .
  67. ^ «Селекторы уровня 4 - быстрые и полные профили селектора» . W3.org. Архивировано 17 августа 2013 года . Проверено 13 августа 2013 .
  68. ^ Снук, Джонатан (октябрь 2010 г.). «Почему у нас нет родительского селектора» . snook.ca. Архивировано из оригинала на 2012-01-18 . Проверено 26 января 2012 .
  69. ^ "Чистые всплывающие окна CSS" . meyerweb.com. Архивировано из оригинала на 2009-12-09 . Проверено 19 ноября 2009 .
  70. ^ Вкладка Аткинс-младший "Правило применения CSS" . GitHub. Архивировано из оригинала на 2016-02-22 . Проверено 27 февраля 2016 .
  71. ^ https://www.xanthir.com/b4o00
  72. ^ "Модуль макета гибкого блока CSS" . Могу ли я использовать ... Таблицы поддержки HTML5, CSS3 и т . Д. CanIUse.com. Архивировано из оригинала на 2016-02-23.
  73. ^ «Окончание поддержки Internet Explorer» . Microsoft. Архивировано 2 июня 2019 года . Проверено 27 февраля 2016 .
  74. ^ a b «О динамических свойствах» . Msdn.microsoft.com. Архивировано из оригинала на 2017-10-14 . Проверено 20 июня 2009 .
  75. ^ «CSS Values ​​and Units Module Level 3» . W3.org. 6 июня 2019. Архивировано 23 апреля 2008 года.
  76. ^ "calc () как значение единицы CSS" . Могу ли я использовать ... Таблицы поддержки HTML5, CSS3 и т . Д. CanIUse.com. Архивировано из оригинала на 2016-03-04.
  77. ^ "Модуль макета с несколькими столбцами CSS" . Консорциум World Wide Web. Архивировано 29 апреля 2011 года . Проверено 1 мая 2011 .
  78. ^ «Могу я использовать ... Таблицы поддержки HTML5, CSS3 и т . Д.» . CanIUse.com. Архивировано из оригинала на 2010-08-21 . Проверено 27 февраля 2016 .
  79. ^ Седерхольм, Дэн; Итан Маркотт (2009). Ручной CSS: более надежный веб-дизайн . Новые всадники. п. 114. ISBN 978-0-321-64338-4. Архивировано 20 декабря 2012 года . Проверено 19 июня 2010 года .
  80. ^ Антти, Hilja. «OOCSS, ACSS, BEM, SMACSS: что это такое? Что мне использовать?» . clubmate.fi . Hiljá. Архивировано из оригинала 2 июня 2015 года . Дата обращения 2 июня 2015 .

Дальнейшее чтение [ править ]

См. Также [ править ]

Внешние ссылки [ править ]