CSS

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

Каскадные таблицы стилей (CSS ) - это стиль язык листов, использование для описания презентации документа, написанного на языке разметки, таком как HTML. CSS - это краеугольная технология World Wide Web, включая HTML и JavaScript.

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

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

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

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

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

Содержание

  • 1 Синтаксис
    • 1.1 Селектор
    • 1.2 Блок объявления
      • 1.2.1 Единицы длины
    • 1.3 Используйте
    • 1.4 Источники
    • 1.5 Специфичность
      • 1.5.1 Примеры
    • 1.6 Наследование
      • 1.6.1 Пример
    • 1.7
    • 1.8 Позиционирование
      • 1.8.1ство позиции
      • 1.8.2 Плавающий и очищающий
  • 2 История
    • 2.1 Проблемы с внедрением
    • 2.2 Варианты
      • 2.2.1 CSS 1
      • 2.2.2 CSS 2
      • 2.2.3 CSS 2.1
      • 2.2.4 CSS 3
      • 2.2.5 CSS 4
  • 3 Поддержка
  • 4 Ограничения
    • 4.1 Прежние проблемы
  • 5 Преимущества
  • 6 Стандартизация
    • 6.1 Структуры
    • 6.2 Методологии проектирования
  • 7 Ссылки
  • 8 Дополнительная литература
  • 9 Внешние ссылки

Синтаксис

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

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

Селектор

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

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

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

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

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

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

В этой таблице представлена ​​сводка синтаксиса селектора с использованием и версией CSS.

ШаблонСоответствуетСначала определено. в CSS level
Eelement типа E1
E: linkelement E является исходным якорем гиперссылки, цель которой еще не посещена (: ссылка) или уже посещена (: посещена)1
E: активныйэлемент E во время определенных действий пользователя1
E :: first-lineпервая форматированная строка элемента E1
E :: первая буквапервая форматированная буква элемент E1
.cвсе элементы с class = "c"1
#myidэлемент с id = "myid"1
E.warningэлемент E, класс - "предупреждение" (язык документа определяет, как определенный класс)1
E # myidэлемент E с указателем, равным "myid"1
.c # myidс class = "c "и вычислительным, равным" myid "1
EFэлемент F, потомок элемента E1
*любой элемент2
E [foo]элемент E с атрибутом" foo "2
E [foo = "bar"]и E элемент, значение атрибута "foo" которого точно равно "bar"2
E [foo ~ = "bar"]элемент E, значение атрибута "foo" которого представляет собой список значений, разделенных пробелами, одно из которых в точности равно "bar"2
E [foo | = "ru"]элемент E, атрибут "foo" которого содержит список значений, разделенных дефисами, начинающийся (слева) с "ru"2
E: first-childэлемент E, первый дочерний элемент его родительского2
E: lang (fr)типа E на языке "fr" (язык документа указывает, как определенный язык)2
E :: beforeсгенерированное содержимое перед содержимым элемента E2
E: : afterсгенерированное содержимое после содержимого элемента E2
E>Fдочерний элемент F элемента E element2
E + Fэлемент F, который является внутренним предшествующим элементом E2
E [foo ^ = "bar"]элемент E, значение атрибута "foo" которого начинается точно со строки "bar"3
E [foo $ = "bar"]элемент E, значение атрибута "foo" которого заканчивается точно строкой "bar"3
E [foo * = "bar"]элемент E, чей "f oo" значение атрибута содержит подстроку "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: первый по типуE элемент, первый брат его типа3
E: последний по типуэлемент E, последний родственник его типа3
E: only-childэлемент E, единственный дочерний элемент его родительского3
E: only-of-typeэлемент E, только брат своего типа3
E: пустойэлемент E, не имеющий дочерних элементов (включая текстовые узлы)3
E: targetE, являющийся элементом которым целью рассматриваемого URI3
E: включенпользовательского элемента интерфейса E, включен3
E: отключенэлемент пользовательского интерфейса E, который отключен в состоянии3
E: отмеченэлемент пользовательского интерфейса E, к оторый отмечен (например, радио-кнопка или флажок)3
E: not (s)элемент E, который не соответствует простому селектору s3
E ~ F <512 элемент>F, который предшествует элемент E3

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

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

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

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

Единицы длины

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

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

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

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

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

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

CSS - CSS

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

CSS - CSS

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

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

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

Стили также могут быть помещены во внешний файл CSS. внешний файл CSS.

Источники

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

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

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

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

Специфичность

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

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

СелекторыСпецифичность
H1 {color: white;}0, 0, 0, 1
P EM {color: green;}0, 0, 0, 2
.grape {color: red;}0, 0, 1, 0
P.bright {color: blue ;}0, 0, 1, 1
P.bright EM.dark {color: yellow;}0, 0, 2, 2
# id218 {color: brown;}0, 1, 0, 0
style = ""1, 0, 0, 0

Примеры

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

Для демонстрации специфичности

В примере выше объявления в атрибуте стильпереопределяет объявление в элементе