Css all: 🤷🏽‍♀️ Page not found | MDN Web Docs

Что делать пересекли свойства стиля в Гугл Хром инструменты разработчика имеешь в виду? При проверке элемента с помощью инструментов разработчика в Chrome, в элементах вкладка, правая панель…

EDIT: мой вопрос относится к Drupal 6 & 7, хотя мой пример кода-Drupal 6. Люди предоставили ответы, полезные для обеих версий Drupal. В настоящее время я работаю в Drupal, создавая мобильную…

При использовании CSS reset like * { all: unset; } встроенные графики SVG отображаются неправильно, см. https://jsfiddle.net/593qysxp/1 / Я проверил это с помощью Safari 11 и Chrome 61. Я попытался…

Кажется, я не могу перетащить элемент, который имеет свойство unset: all css. .my-component { all: initial; * { all: unset; } } Я использую эти правила внутри расширения chrome, на элементах,…

У меня есть фиксированный div на моей странице, который позиционируется со следующими свойствами CSS: width: 320px; height: 160px; position: fixed; right: 15px; bottom: 15px; top: unset; z-index:…

Согласно MDN: Ключевое слово revert работает точно так же, как unset во многих случаях. Единственное различие заключается в свойствах, значения которых задаются браузером или пользовательскими…

I all: unset , чтобы отменить все свойства наследования, но разрешить таблицу стилей агента пользователя. Как я могу это сделать? Как вы можете видеть в коде, он отключает все стили, даже таблицы…

Так что в основном я сделал эту ситуацию, у родителя есть css all: unset . Затем я замечаю, что когда я использую Safari(версия 12.1.1 (14607.2.6.1.1) ), все дочерние элементы этого цвета могут быть…

У меня есть очень простой HTML, который отлично работает на Chrome, но на Safari он этого не делает. По словам веб-инспектора, мой span должен показывать зеленый текст. Однако он отображается как…

Почему я должен использовать таблицу стилей сброса, такую как Normalize, когда я могу просто написать следующее CSS * { all: unset; }

Объяснение ключевых слов initial, inherit, unset и revert в CSS — Веб-стандарты

В CSS есть несколько ключевых слов для задания значений свойств. Я собираюсь поговорить о нескольких из них: initial, inherit и об относительно новых — unset и revert.

В оригинальной статье в заголовке и во вступлении говорится только о трёх ключевых словах, но дальше в тексте идёт обсуждение четвёртого — revert. Мы решили добавить его во вступление для удобства читателя — прим. переводчика.)

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

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

Базовые стили для вебаСкопировать ссылку

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

Начальное значение для каждого свойства в CSSСкопировать ссылку

Каждое свойство в CSS имеет начальное (initial) значение. Оно никак не связано с типом HTML-элемента, к которому применяется.

Пример начального значения из MDN:

Браузерные стилиСкопировать ссылку

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

Пример браузерных стилей:

У HTML-элементов нет начальных значений для стилей! Базовые стили HTML-элемента, такого как <h2>, например, предоставляются стилями браузера, а не начальными значениями CSS-свойств.

Теперь начнем говорить о ключевых словах.

Ключевое слово

Ключевое слово inherit сообщает браузеру, что значение свойства нужно найти у ближайшего родительского элемента и унаследовать его для текущего элемента. Если у ближайшего родителя также задано значение inherit, то браузер продолжит подниматься по DOM, пока не найдет какое-нибудь значение. Если значения нет, то браузер применит свои стили, а если и браузерных стилей нет, то тогда будет применено значение initial.

Ключевое слово

Чтобы понять ключевое слово initial, мы должны помнить важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером. Браузерные стили — это стили, которые применяются браузером к конкретным HTML-элементам. Мы часто думаем, что они автоматически приходят вместе с HTML, но это не так.

Ключевое слово initial говорит браузеру использовать значение по умолчанию для заданного CSS-свойства. Например, для свойства color значение initial всегда будет black.

Такое поведение может очень запутывать, потому что, как мы и говорили ранее, значение по умолчанию для CSS-свойства не всегда совпадает со значением, которое браузер задает конкретному элементу. Например, initial-значение для свойства display равно inline для всех элементов. Поэтому, если для элемента <div> будет задано свойство display со значением initial, то свойство будет вычислено как inline, а не block, как в стилях браузера.

Пример:

div.box {
    background-color: red;
    display: initial; /* примет значение `inline`, а не `block` */
}

Пример на CodePen значения initial для свойства display элемента <div>.

Ключевое слово

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

1. Наследуемые свойстваСкопировать ссылку

Свойства, которые затрагивают дочерние элементы. Все свойства, которые влияют на текст, имеют такое естественное поведение. Например, если мы зададим font-size элементу <html>, то он будет применяться ко всем дочерним элементам, пока вы не зададите другой font-size какому-нибудь из них.

2. Ненаследуемые свойстваСкопировать ссылку

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

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

Для ненаследуемых свойств unset ведет себя как initial, то есть применится значение по умолчанию. Например, для свойства border-color оно будет работать как initial.

.some-class {
    color: unset; /* будет равно `inherit` */
    display: unset; /* будет равно `initial` */
}

Зачем использовать

Если unset ведет себя как inherit и initial, то зачем оно может понадобиться? Если мы сбрасываем только одно свойство, то unset не нужен. Вместо него мы можем просто использовать inherit или initial. Но сейчас у нас есть свойство all, которое дает нам новую возможность — сбросить наследуемые и ненаследуемые свойства одновременно.

Таким образом, вам не нужно сбрасывать свойства по отдельности. Применение ключевого слова unset к свойству all приведет к сбросу всех наследуемых свойств к значению inherit и всех ненаследуемых свойств — к значению initial.

Это единственная причина существования нового ключевого слова unset! В противном случае мы могли бы вместо этого использовать inherit и initial.

Вместо сброса свойств по отдельности, к примеру:

/* Плохо */
.common-content {
    font-size: inherit;
    font-weight: inherit;
    border-width: initial;
    background-color: initial;
}

Мы можем использовать новое свойство all со значением unset, которое повлияет на все существующие свойства, например:

/* Хорошо */
.common-content {
    all: unset;
}

Я создал небольшой пример для демонстрации того, как свойства ведут себя, когда используется свойство all со значением unset. Некоторые ведут себя так, как будто к ним применено значение inherit, а некоторые так, как будто к ним применено значение initial. Пример на Codepen использования all: unset.

Ключевое слово

Но что, если мы хотим сбросить значение свойства до первоначально заданных браузером значений, а не до значений по умолчанию? Например, вернуть значение свойства display элемента <div> к значению block (это стили браузера), а не к значению inline (это базовые стили CSS).

Для этих целей мы скоро получим новое ключевое слово в CSS: revert. Оно очень похоже на unset, единственное отличие состоит в том, что оно предпочитает стили браузера базовым значениям свойств CSS. Например:

div {
    display: revert; /* = block */
}

h2 {
    font-weight: revert; /* = bold */
    font-size: revert; /* = 2em */
}

Таким образом, если мы хотим сбросить все стили HTML-элемента до базовых стилей браузера, мы можем сделать это так:

/* Хорошо */
.common-content {
    all: revert;
}

Соответственно, revert дает гораздо больше возможностей, чем unset. Правда, на данный момент revert работает только в Firefox и Safari. (В Chrome работает с версии 84 — прим. переводчика.)

ЗаключениеСкопировать ссылку

На этом всё. Надеюсь, вам понравилась эта статья, и вы чему-то научились из моего опыта.

Видео доклада по темеСкопировать ссылку

Я сделал короткий доклад на эту тему, смотрите видео целиком на YouTube:

Медиа-запросы | htmlbook.ru

Краткая информация

Версии CSS

Описание

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

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

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color) { ... }

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

@media all and (not handheld) { ... }

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

@media not all and (color) { ... }

следует понимать как

@media not (all and (color)) { ... }

а не

@media (not all) and (color) { ... }

only

Применяется для старых браузеров, которые не поддерживают медиа-запросы.

Пример. Стиль для новых браузеров

@media only all and (not handheld) { ... }

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

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

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

Медиа-функции

Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2³ цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.

Пример 2. Цветной дисплей

@media all and (min-color-index: 256) {
 ...
}

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

@media screen and (min-device-aspect-ratio: 16/9) {
 ...
}

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк, 
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

Тип носителя: all
Значение: нет

Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media handheld and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

@media print and (monochrome) { 
 body { font-family: Times, 'Times New Roman', serif; }
h2, h3, p { color: black; }
}
@media print and (color) { 
 body { font-family: Arial, Verdana, sans-serif; }
h2, h3, p { color: #556b2f; }
}

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

@media screen and (orientation: landscape) { 
  #logo { background: url(logo1.png) no-repeat; }
}
@media screen and (orientation: portrait) { 
  #logo { background: url(logo2.png) no-repeat; }
}

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

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

Пример 8. Разрешение принтера

@media print and (min-resolution: 300dpi) { 
 ...
}

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток, 
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

CSS-текст

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

Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.

CSS построен на Unicode.

1. Преобразование текста: свойство text-transform

Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.

Свойство наследуется.

Синтаксис

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;
text-transform: initial;

2. Обработка пробелов и переносы строк: свойство white-space

Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.

Свойство наследуется.

Синтаксис

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
white-space: inherit;
white-space: initial;

3. Настройка табуляции: свойство tab-size

Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line, normal или nowrap свойства white-space.

Работает только для элементов <textarea> и <pre>, для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.

Свойство наследуется.

Синтаксис

tab-size: 0;
tab-size: 10px;
tab-size: inherit;
tab-size: initial;

4. Разрыв строки и границы слов

Когда содержимое на строчном уровне разбивается на строки, оно разбивается на линейные блоки. Такое разбиение называется разрыв строки.

Когда строка прерывается из-за явных элементов управления разрывом строки, например, символа новой строки или тега <br>, начала или конца блока — это принудительный разрыв строки.

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

4.1. Правила разрыва для букв: свойство word-break

Свойство word-break определяет возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует ли возможность мягкого переноса между смежными типографскими буквенными единицами и/или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами.

Свойство наследуется.

Синтаксис

word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: inherit;
word-break: initial;

4.2. Разрыв строки: line-break

Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.

Свойство наследуется.

Синтаксис

line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: inherit;
line-break: initial;

4.3. Расстановка переносов: свойство hyphens

Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.

Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.

CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.

Свойство наследуется.

Синтаксис

hyphens: none;
hyphens: manual;
hyphens: auto;
hyphens: inherit;
hyphens: initial;

4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap

Свойство overflow-wrap (или его устаревшее имя word-wrap) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока. Работает в том случае, когда свойство white-space разрешает перенос.

Свойство наследуется.

Синтаксис

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
overflow-wrap: inherit;
overflow-wrap: initial;

5. Выравнивание и выключка строк

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

5.1. Краткая запись для выравнивания текста: свойство text-align

Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent, присваиваются text-align-all и сбрасываются в text-align-last на auto.

Свойство наследуется.

Синтаксис

text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;
text-align: inherit;

5.2. Выравнивание текста по умолчанию: свойство text-align-all

Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last. Принимает значения start, end, left, right, center, justify и match-parent.

Свойство наследуется.

Синтаксис

text-align-all: start;
text-align-all: end;
text-align-all: left;
text-align-all: right;
text-align-all: center;
text-align-all: justify;
text-align-all: match-parent;
text-align-all: inherit;

5.3. Выравнивание последней строки: свойство text-align-last

Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.

Если задано значение auto, содержимое в соответствующей строке выравнивается по text-align-all, если только для text-align-all не настроено justify — в этом случае оно выравнивается по началу блока. Все остальные значения интерпретируются как описано для text-align.

Принимает значения auto, start, end, left, right, center, justify и match-parent.

Свойство наследуется.

Синтаксис

text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
text-align-last: match-parent;

6. Промежутки

CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing.

6.1. Промежутки между словами: свойство word-spacing

Свойство word-spacing определяет дополнительный интервал между словами.
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.

Свойство наследуется.

Синтаксис

word-spacing: normal;
word-spacing: 1px;
word-spacing: 0.2em;
word-spacing: 1rem;
word-spacing: inherit;
word-spacing: initial;

6.2. Трекинг: свойство letter-spacing

Свойство letter-spacing определяет дополнительный интервал, или трекинг, между смежными типографскими символами. Межбуквенный интервал является дополнением к кернингу и word-spacing. В зависимости от действующих правил выравнивания пользовательские агенты могут дополнительно увеличивать или уменьшать расстояние между типографскими символьными единицами для выравнивания текста.

Свойство наследуется.

Синтаксис

letter-spacing: normal;
letter-spacing: 0.1em;
letter-spacing: 2px;
letter-spacing: inherit;
letter-spacing: initial;

7. Отступ первой строки: свойство text-indent

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

Свойство наследуется.

Синтаксис

text-indent: 5mm;
text-indent: 20px;
text-indent: 5%;
text-indent: 2em each-line;
text-indent: 2em hanging;
text-indent: inherit;
text-indent: initial;

По материалам CSS Text Module Level 3

все — CSS: каскадные таблицы стилей

 
все: начальные;
все: наследовать;
все: вернуться;
все: отключено;
  

Свойство all указано как одно из значений глобального ключевого слова CSS. Обратите внимание, что ни одно из этих значений не влияет на свойства unicode-bidi и direction .

Значения

начальные

Указывает, что все свойства элемента должны быть изменены на их начальные значения.

наследовать

Указывает, что все свойства элемента должны быть изменены на их унаследованные значения.

снято

Указывает, что все свойства элемента должны быть изменены на их унаследованные значения, если они наследуются по умолчанию, или на их начальные значения, если нет.

вернуться

Задает поведение, зависящее от источника таблицы стилей, к которой принадлежит объявление:

Источник агента пользователя

Эквивалент без учета .

Происхождение пользователя

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

Авторское происхождение

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

 начальная | наследовать | отключено | вернуться 

HTML

  

  Lorem ipsum dolor sit amet, conctetur adipiscing elit.

Phasellus eget velit sagittis. 

CSS

  кузов {
  размер шрифта: маленький;
  цвет фона: # F0F0F0;
  цвет синий;
  маржа: 0;
  отступ: 0;
}

blockquote {
  цвет фона: голубой;
  красный цвет;
}
  

Результат

Нет

  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 
 Phasellus eget velit sagittis.  

  body {font-size: small; цвет фона: # F0F0F0; цвет синий; }
цитата {цвет фона: голубой; красный цвет; }  

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

все: отключено

  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 
 Phasellus eget velit sagittis.  

  body {font-size: small; цвет фона: # F0F0F0; цвет синий; }
цитата {цвет фона: голубой; красный цвет; }
blockquote {все: отключено; }  

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

все: начальные

  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 
 Phasellus eget velit sagittis.  

  body {font-size: small; цвет фона: # F0F0F0; цвет синий; }
цитата {цвет фона: голубой; красный цвет; }
blockquote {все: начальные; }  

не использует стиль браузера по умолчанию: теперь это встроенный элемент (начальное значение), его цвет фона — прозрачный (начальное значение), его размер шрифта нормальный (начальное значение), а его цвет — черный (начальное значение).

все: наследовать

  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 
 Phasellus eget velit sagittis.  

  body {font-size: small; цвет фона: # F0F0F0; цвет синий; }
цитата {цвет фона: голубой; красный цвет; }
blockquote {все: наследовать; }  

не использует стиль браузера по умолчанию: теперь это элемент block (унаследованное значение от содержащего его элемента ), его background-color — # F0F0F0 ( унаследованное значение), его font-size — это small (унаследованное значение), а его color — blue (унаследованное значение).

Таблицы BCD загружаются только в браузере

Справочник по селекторам CSS

с. Вход

Селектор	Пример	Описание примера
. класс	.intro	Выбирает все элементы с помощью
.class1.class2	.name1.name2	Выбирает все элементы с name1 и name2 set в пределах своего атрибута класса
.класс1. класс2	.name1 .name2	Выбирает все элементы с именем 2 , который является потомком элемент с именем 1
# id	# имя	Выбирает элемент с помощью
*	*	Выбирает все элементы
элемент	с.	Выбирает все элементы
элемент.класс	стр. Intro	Выбирает все элементы с помощью
элемент, элемент	див,	Выбирает все элементы и все элементы
элемент элемент	дел. Стр.	Выбирает все элементы внутри элементов
элемент > элемент	div> p	Выбирает все элементы , где родительский элемент
элемент + элемент	div + p	Выбирает первый элемент , который помещается сразу после элементов
элемент1 ~ элемент2	пол	Выбирает каждый элемент , которому предшествует элемент
[ атрибут ]	[цель]	Выбирает все элементы с целевым атрибутом
[ атрибут = значение ]	[target = _blank]	Выбирает все элементы с target = «_ blank»
[ атрибут ~ = значение ]	[название ~ = цветок]	Выбирает все элементы с атрибутом title, содержащим слово «цветок». = «https»]	Выбирает каждый элемент , значение атрибута href которого начинается с «https».
[ атрибут $ = значение ]	а [href $ = «.pdf »]	Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf»
[ атрибут * = значение ]	a [href * = «w3schools»]	Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools».
: активный	a: активный	Выбирает активную ссылку
:: после	р :: после	Вставить что-нибудь после содержимого каждого элемента
:: до	р :: до	Вставить что-нибудь перед содержимым каждого элемента
: проверено	ввод: проверено	Выбирает каждый отмеченный элемент
: по умолчанию	ввод: по умолчанию	Выбирает элемент по умолчанию
: отключено	вход: отключен	Выбирает каждый отключенный элемент
: пусто	p: пусто	Выбирает каждый элемент , не имеющий дочерних элементов (включая текстовые узлы).
: включено	вход: включен	Выбирает каждый активированный элемент
: первенец	р: первенец	Выбирает каждый элемент , который является первым дочерним элементом своего родителя
:: первая буква	п :: первая буква	Выбирает первую букву каждого элемента
:: первая линия	р :: первая линия	Выбирает первую строку каждого элемента
: первый в своем роде	р: первый в своем роде	Выбирает каждый элемент , который является первым элементом его родительского
: фокус	ввод: фокус	Выбирает элемент ввода с фокусом
: полноэкранный режим	: полноэкранный режим	Выбирает элемент, который находится в полноэкранном режиме
: парение	a: парение	Выбирает ссылки при наведении указателя мыши на
: в пределах	ввод: в пределах	Выбирает элементы ввода со значением в указанном диапазоне
: неопределенный	ввод: неопределенный	Выбирает элементы ввода, которые находятся в неопределенном состоянии
: недействительно	ввод: недопустимый	Выбирает все входные элементы с недопустимым значением
: язык ( язык )	p: lang (it)	Выбирает каждый элемент с атрибутом lang, равным «it» (итальянский)
: последний ребенок	p: последний ребенок	Выбирает каждый элемент , который является последним дочерним элементом своего родителя
: последний тип	р: последний тип	Выбирает каждый элемент , который является последним элементом его родительского
: ссылка	а: ссылка	Выбирает все непосещенные ссылки
:: маркер	:: маркер	Выбирает маркеры элементов списка
: нет ( селектор )	: нет (p)	Выбирает каждый элемент, не являющийся элементом
: n-й ребенок ( n )	p: nth-child (2)	Выбирает каждый элемент , который является вторым дочерним элементом своего родителя
: nth-последний-ребенок ( n )	p: nth-last-child (2)	Выбирает каждый элемент , который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента
: nth-last-of-type ( n )	p: nth-last-of-type (2)	Выбирает каждый элемент , который является вторым элементом своего родительского элемента, считая от последнего дочернего элемента
: n-й тип ( n )	p: nth-of-type (2)	Выбирает каждый элемент , который является вторым элементом его родительского
: только тип	p: однотипный	Выбирает каждый элемент , который является единственным элементом его родительского
: единственный ребенок	p: единственный ребенок	Выбирает каждый элемент , который является единственным дочерним элементом своего родителя
: дополнительно	: опционально	Выбирает элементы ввода без атрибута «обязательный»
: вне допустимого диапазона	вход: вне допустимого диапазона	Выбирает элементы ввода со значением вне указанного диапазона
:: заполнитель	input :: заполнитель	Выбирает элементы ввода с указанным атрибутом «заполнитель»
: только для чтения	ввод: только для чтения	Выбирает элементы ввода с указанным атрибутом «только для чтения»
: чтение-запись	ввод: чтение-запись	Выбирает элементы ввода с НЕ указанным атрибутом «только для чтения»
: требуется	ввод: требуется	Выбирает элементы ввода с указанным атрибутом «обязательный».
: корень	: корень	Выбирает корневой элемент документа
:: выбор	:: выбор	Выбирает часть элемента, выбранную пользователем
: цель	# новости: цель	Выбирает текущий активный элемент #news (щелкнул URL-адрес, содержащий это имя привязки)
: действует	ввод: действителен	Выбирает все входные элементы с допустимым значением
: посетил	a: посетил	Выбирает все посещенные ссылки

все | CSS-уловки

Свойство all в CSS сбрасывает все свойства выбранного элемента, за исключением свойств direction и unicode-bidi , которые управляют направлением текста.

  .module {
  все: отключено;
}  

Суть в том, чтобы разрешить сброс стилей на уровне компонентов. Иногда гораздо проще начать создание стиля с нуля, чем бороться со всем, что уже есть.

Значения

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

Некоторые свойства не имеют начального значения, явно определенного в спецификации, и вместо этого позволяют пользовательскому агенту устанавливать начальное значение — цвет и font-family являются двумя примерами. Если all: initial; или все: не настроено; , значение по умолчанию пользовательского агента используется как начальное значение для этих свойств.

все считается «сокращенным» свойством, потому что оно позволяет нам управлять значениями каждого свойства CSS одновременно с помощью одного объявления. Однако, в отличие от большинства сокращенных свойств, здесь нет практической «полной» версии и нет вложенных свойств.

Демо

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

См. Демонстрацию свойств Pen all от CSS-Tricks (@ css-tricks) на CodePen.

Дополнительная информация

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

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

Chrome	Firefox	IE	Edge	Safari
37	27	Нет	79	9,1 9055 9055 Мобильный	9,1 9055 Мобильный
Android Chrome	Android Firefox	Android	iOS Safari
91	89	4.4,3-4,4,4	9,3

Список свойств CSS3 — Tutorial Republic

align-content	Задает выравнивание элементов гибкого контейнера внутри гибкого контейнера.
align-items	Задает выравнивание по умолчанию для элементов в гибком контейнере.
с выравниванием	Задает выравнивание для выбранных элементов в гибком контейнере.
анимация	Задает анимацию на основе ключевых кадров.
задержка анимации	Указывает, когда начнется анимация.
анимация-направление	Указывает, должна ли анимация воспроизводиться в обратном порядке поочередно или нет.
продолжительность анимации	Определяет количество секунд или миллисекунд, которое требуется анимации для завершения одного цикла.
режим анимации-заливки	Определяет, как CSS-анимация должна применять стили к своей цели до и после ее выполнения.
количество итераций анимации	Указывает, сколько раз цикл анимации должен быть воспроизведен перед остановкой.
имя-анимации	Задает имя @keyframes определенных анимаций, которые должны быть применены к выбранному элементу.
состояние воспроизведения анимации	Указывает, запущена или приостановлена ​​анимация.
функция синхронизации анимации	Определяет, как должна развиваться анимация CSS в течение каждого цикла.
задняя видимость	Указывает, будет ли «обратная» сторона преобразованного элемента видна, если смотреть лицом к пользователю.
фон	Определяет множество свойств фона в одном объявлении.
фоновая насадка	Укажите, фиксируется ли фоновое изображение в области просмотра или прокручивается.
фоновая клипса	Задает область рисования фона.
цвет фона	Определяет цвет фона элемента.
фоновое изображение	Определяет фоновое изображение элемента.
фон-происхождение	Задает область расположения фоновых изображений.
фон-позиция	Определяет источник фонового изображения.
фоновый повтор	Укажите, будет ли / как фоновое изображение выложено мозаикой.
размер фона	Определяет размер фоновых изображений.
граница	Задает ширину, стиль и цвет для всех четырех сторон границы элемента.
край нижний	Задает ширину, стиль и цвет нижней границы элемента.
цвет нижней границы	Задает цвет нижней границы элемента.
край-нижний левый радиус	Определяет форму нижнего левого угла границы элемента.
край-нижний правый радиус	Определяет форму нижнего правого угла границы элемента.
с окантовкой снизу	Задает стиль нижней границы элемента.
ширина по краю снизу	Устанавливает ширину нижней границы элемента.
пограничный обвал	Указывает, соединены ли границы ячеек таблицы или разделены.
цвет рамки	Задает цвет границы со всех четырех сторон элемента.
бордюр	Определяет, как изображение должно использоваться вместо стилей границ.
граница-изображение-исход	Задает величину, на которую область изображения границы выходит за пределы рамки.
повтор изображения границы	Указывает, должна ли граница изображения повторяться, закругляться или растягиваться.
срез изображения границы	Задает внутреннее смещение границы изображения.
источник изображения границы	Задает расположение изображения, которое будет использоваться в качестве границы.
ширина границы изображения	Задает ширину границы изображения.
граница левая	Задает ширину, стиль и цвет левой границы элемента.
левая рамка	Задает цвет левой границы элемента.
с рамкой слева	Задает стиль левой границы элемента.
ширина рамки слева	Устанавливает ширину левой границы элемента.
Край-радиус	Определяет форму краевых углов элемента.
кайма правая	Задает ширину, стиль и цвет правой границы элемента.
цвет рамки справа	Задает цвет правой границы элемента.
с окантовкой справа	Задает стиль правой границы элемента.
ширина рамки справа	Устанавливает ширину правой границы элемента.
расстояние между границами	Задает интервал между границами соседних ячеек таблицы.
с бордюром	Задает стиль границы со всех четырех сторон элемента.
бордюрный верх	Задает ширину, стиль и цвет верхней границы элемента.
цвет верхней границы	Задает цвет верхней границы элемента.
граница, верхний левый радиус	Определяет форму верхнего левого угла границы элемента.
граница верхняя правая радиус	Определяет форму верхнего правого угла границы элемента.
с бордюром	Задает стиль верхней границы элемента.
ширина по верху границы	Задает ширину верхней границы элемента.
ширина рамки	Задает ширину границы со всех четырех сторон элемента.
нижний	Укажите расположение нижнего края позиционируемого элемента.
тень	Применяет одну или несколько падающих теней к блоку элемента.
Размер коробки	Изменить стандартную блочную модель CSS.
со стороны подписи	Укажите положение заголовка таблицы.
прозрачный	Определяет размещение элемента по отношению к плавающим элементам.
зажим	Определяет область отсечения.
цвет	Укажите цвет текста элемента.
количество столбцов	Задает количество столбцов в многоколоночном элементе.
колонка-заполнитель	Задает способ заполнения столбцов.
колонна-зазор	Задает промежуток между столбцами в многоколоночном элементе.
линейка-столбец	Задает прямую линию или «правило», которое следует провести между каждым столбцом в многоколоночном элементе.
цвет столбца-линейки	Задает цвет правил, нарисованных между столбцами в многоколоночном макете.
стиль столбца-линейки	Задает стиль правила, нарисованного между столбцами в многоколоночном макете.
ширина столбца-линейки	Определяет ширину линейки, нарисованной между столбцами в многоколоночном макете.
колонно-пролетная	Указывает, сколько столбцов занимает элемент в многоколоночном макете.
ширина столбца	Задает оптимальную ширину столбцов в многоколоночном элементе.
столбца	Сокращенное свойство для установки свойств column-width и column-count .
содержание	Вставляет сгенерированный контент.
счетчик	Увеличивает одно или несколько значений счетчика.
сброс счетчика	Создает или сбрасывает один или несколько счетчиков.
курсор	Укажите тип курсора.
направление	Определите направление текста / направление письма.
дисплей	Определяет, как элемент отображается на экране.
пустые ячейки	Показать или скрыть границы и фон пустых ячеек таблицы.
гибкий	Задает компоненты гибкой длины.
гибкая основа	Задает начальный основной размер гибкого элемента.
изгиб	Задает направление гибких элементов.
гибкий поток	Сокращенное свойство для свойств flex-direction и flex-wrap .
гибкий рост	Определяет, как гибкий элемент будет расти относительно других элементов внутри гибкого контейнера.
гибкая усадка	Определяет, как гибкий элемент будет сжиматься по сравнению с другими элементами внутри гибкого контейнера.
гибкая пленка	Указывает, должны ли гибкие элементы оборачиваться или нет.
с плавающей запятой	Указывает, должен ли блок плавать.
шрифт	Определяет множество свойств шрифта в одном объявлении.
семейство шрифтов	Определяет список шрифтов для элемента.
размер шрифта	Определяет размер шрифта для текста.
регулировка размера шрифта	Сохраняет удобочитаемость текста при замене шрифта.
растяжка шрифта	Выбирает обычное, сжатое или расширенное начертание шрифта.
стиль шрифта	Определяет стиль шрифта для текста.
вариант шрифта	Укажите вариант шрифта.
font-weight	Укажите толщину шрифта текста.
высота	Укажите высоту элемента.
justify-content	Указывает, как гибкие элементы выравниваются по главной оси гибкого контейнера после определения любых гибких длин и автоматических полей.
слева	Укажите расположение левого края позиционируемого элемента.
межбуквенный интервал	Задает дополнительный интервал между буквами.
высота строки	Устанавливает высоту между строками текста.
в виде списка	Определяет стиль отображения для списка и элементов списка.
изображение в стиле списка	Задает изображение, которое будет использоваться в качестве маркера элемента списка.
позиция стиля списка	Определяет положение маркера элемента списка.
тип списка	Определяет стиль маркера для элемента списка.
маржа	Устанавливает поля со всех четырех сторон элемента.
нижнее поле	Устанавливает нижнее поле элемента.
поле слева	Задает левое поле элемента.
поле справа	Задает правое поле элемента.
верхняя граница	Задает верхнее поле элемента.
макс. Высота	Укажите максимальную высоту элемента.
макс. Ширина	Укажите максимальную ширину элемента.
минимальная высота	Укажите минимальную высоту элемента.
Мин. Ширина	Укажите минимальную ширину элемента.
непрозрачность	Задает прозрачность элемента.
заказать	Задает порядок, в котором элементы гибкости отображаются и размещаются в контейнере гибкости.
контур	Устанавливает ширину, стиль и цвет для всех четырех сторон контура элемента.
контурный цвет	Устанавливает цвет контура.
контур-офсет	Задайте расстояние между контуром и краем элемента.
контурный	Задает стиль контура.
ширина контура	Устанавливает ширину контура.
перелив	Задает обработку содержимого, которое выходит за пределы поля элемента.
переполнение-x	Задает обработку содержимого, которое выходит за пределы поля элемента по горизонтали.
переполнение	Задает обработку содержимого, которое выходит за пределы поля элемента по вертикали.
набивка	Задает отступ со всех четырех сторон элемента.
набивка нижняя	Устанавливает отступ для нижней стороны элемента.
обивка левая	Устанавливает отступ слева от элемента.
прокладка правая	Устанавливает отступ с правой стороны элемента.
утеплитель	Устанавливает отступ на верхней стороне элемента.
разрыв страницы после	Вставляет разрыв страницы после элемента.
разрыв страницы до	Вставляет разрыв страницы перед элементом.
разрыв страницы внутри	Вставляет разрывы страниц внутри элемента.
перспектива	Определяет перспективу, с которой просматриваются все дочерние элементы объекта.
перспективное начало	Определяет исходную точку (точку схода для трехмерного пространства) для свойства перспективы.
позиция	Задает расположение элемента.
котировки	Задает кавычки для встроенных цитат.
изменить размер	Указывает, может ли пользователь изменять размер элемента.
правый	Укажите расположение правого края позиционируемого элемента.
размер табулятора	Задает длину символа табуляции.
стол-расклад	Задает алгоритм компоновки таблицы.
выравнивание текста	Задает горизонтальное выравнивание встроенного содержимого.
text-align-last	Указывает, как выравнивается последняя строка блока или строка непосредственно перед принудительным разрывом строки, когда выравнивание текста равно выравниванию .
текст-оформление	Задает украшение, добавляемое к тексту.
цвет текстового оформления	Задает цвет строки оформления текста .
текст-украшение-строка	Указывает, какие линейные украшения добавляются к элементу.
стиль оформления текста	Определяет стиль линий, заданный свойством text-decoration-line
текстовый отступ	Отступ первой строки текста.
с выравниванием текста	Определяет метод выравнивания, который будет использоваться, если для свойства text-align установлено значение justify .
переполнение текста	Определяет, как будет отображаться текстовое содержимое при переполнении контейнеров блоков.
тень текста	Применяет одну или несколько теней к текстовому содержимому элемента.
преобразование текста	Преобразует регистр текста.
верхняя	Укажите расположение верхнего края позиционируемого элемента.
преобразование	Применяет к элементу преобразование 2D или 3D.
преобразование происхождения	Определяет исходную точку преобразования для элемента.
стиль трансформации	Указывает, как вложенные элементы отображаются в трехмерном пространстве.
переход	Определяет переход между двумя состояниями элемента.
задержка перехода	Определяет, когда начнется эффект перехода.
продолжительность перехода	Определяет количество секунд или миллисекунд, которое должно занять эффект перехода.
переходная собственность	Задает имена свойств CSS, к которым должен применяться эффект перехода.
функция времени перехода	Определяет кривую скорости эффекта перехода.
с вертикальным выравниванием	Задает вертикальное расположение элемента относительно текущей базовой линии текста.
видимость	Указывает, является ли элемент видимым.
белое пространство	Указывает, как обрабатываются пробелы внутри элемента.
ширина	Укажите ширину элемента.
разрыв слова	Указывает, как разбивать строки внутри слов.
межсловный интервал	Устанавливает интервал между словами.
перенос слов	Указывает, следует ли разбивать слова, когда содержимое выходит за границы своего контейнера.
z-индекс	Задает порядок наложения или наложения для позиционированных элементов.

Все спецификации CSS

Все спецификации CSS

История

Тесты

Селекторы описывает селекторы элементов, используемые в CSS и некоторых других технологиях.Селекторы используются для выбора элементов в документе HTML или XML, чтобы прикрепить к ним (стилевые) свойства. Элементы могут быть выбираются на основе их имени, атрибутов, контекста и других аспекты.

Редакторы: Тантек Челик, Элика Дж. Этемад, Даниэль Глазман, Ян Хиксон, Питер Линсс , Джон Уильямс

История

Селекторы уровня 4 расширяются уровень 3 с новыми способами выбора элементы.основанные, например, на том, что они содержат, или на том, что следует за ними.

Редакторы: Элика Дж. Этемад, Таб Аткинс мл.

История

Тесты

CSS Level 2 Revision 1 исправляет ошибки в Рекомендациях CSS 1998 г. уровень 2 и добавляет несколько очень востребованных функций изначально планировалось для уровня 3, которые уже широко реализовано. Но больше всего CSS 2.1 представляет собой «снимок» CSS. использование: он состоит из всех реализованных функций CSS. совместимость для HTML и XML на дату публикации Рекомендация.

Редакторы: Берт Бос, Тантек Челик, Ян Хиксон, Хокон Виум Ли

История

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

Редакторы: Берт Бос

История

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

Редакторы: Элика Дж. Этемад

История

CSS Snapshot 2010 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2010 год. В этом документе CSS WG призван помочь разработчикам различать части CSS, готовые к производству и части, которые все еще являются экспериментальными.

Редакторы: Элика Дж. Этемад

История

CSS Snapshot 2015 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2015 год. В этом документе CSS WG призван помочь разработчикам различать части CSS, готовые к производству и части, которые все еще являются экспериментальными.

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

Редакторы: Элика Дж. Этемад

История

CSS Snapshot 2017 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2017 год. Это преемник аналогичных снимков за 2015, 2010 и 2007 годы. В этом документе CSS WG призван помочь разработчикам различать части CSS, готовые к производству и части, которые все еще являются экспериментальными.

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

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Флориан Ривоал

История

CSS Snapshot 2018 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2017 год. Это преемник аналогичных снимков за 2017, 2015, 2010 и 2007 годы. В этом документе CSS WG направлен на чтобы помочь разработчикам различать части CSS, которые готовые к производству и экспериментальные части.

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

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Флориан Ривоал

История

CSS Snapshot 2020 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2017 год. Это преемник аналогичных снимков за 2018, 2017, 2015, 2010 и 2007 годы.В этом документе CSS WG призван помочь разработчикам различать части CSS, готовые к производству и части, которые все еще являются экспериментальными.

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

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Флориан Ривоал

История

Макет шаблона сетки (ранее: Advanced Layout) описывает новый способ позиционирования элементы, использующие ограничения на их выравнивание друг относительно друга и на их гибкость.Элементы документа объединены в один или несколько шаблоны, напоминающие традиционную сетку макета, со строками и столбцы как в таблице. Его можно применить к странице или к отдельному элементы, например, для создания формы. Этот модуль и Grid Layout находятся в процессе слились.

Редакторы: Берт Бос, Сезар Асебаль

Таблицы стилей CSS Aural

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

Редакторы: Дэйв Рэггетт, Дэниел Глазман

История

Тесты

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

Редакторы: Берт Бос, Элика Дж. Этемад

Фоны и границы уровень 4 - это хранилище предлагаемых функций для следующих уровень фонов и границ модуль. Если (некоторые из) эти функции сохраняются, модуль в конечном итоге заменит модуль уровня 3.Черновиков не было опубликовано еще, но в настоящее время ожидаемые функции включают угловой формы, положение фона относительно режима письма (для автоматически вращать, зеркально отражать и / или позиционировать фон в зависимости от от того, содержит ли элемент вертикальное письмо справа налево или текст с направлением слева направо) и частичные границы (вырезание частей край).

Редакторы: Берт Бос, Элика Дж. Этемад, Брэд Кемпер, Леа Веру

История

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

Редакторы: Тантек Челик

История

Box Модель описывает макет блочного содержимого в нормальном потоке. Когда документы размещены на визуальном носителе (например, экране или бумаге), CSS представляет элементы документа в виде прямоугольных блоков, которые расположены один за другим или вложены друг в друга в таком порядке называется потоком . Течение может быть горизонтальным (типично для большинства языков) или вертикальным (часто используется для японского и китайского языков).

Редакторы: Элика Дж. Этемад Берт Бос

История

Box Модель описывает макет блочного содержимого в нормальном потоке. Уровень 4 расширяется уровень 3 с возможностью автоматического подавления поля первый или последний элемент внутри строки или блока (что часто иначе невозможно, потому что невозможно всегда знать какой элемент попадает на край).

Редакторы: Элика Дж.Etemad

CSS Extended Box Модель

Модель Extended Box, модель обеспечивает дополнительный контроль над расположением поплавков и размером коробки.

Редакторы: Берт Бос

История

Marquee содержит свойства, управляющие скорость и направление эффекта «шатра». Шатры - это механизм прокрутки, не требующий вмешательства пользователя: переполнение контент сам по себе появляется и исчезает из поля зрения.Шатер в основном используется на мобильных телефонах. (До апреля 2008 г. свойства marquee были частью модуля Box.)

Редакторы: Берт Бос

История

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

Редакторы: Элика Дж. Этемад, Таб Аткинс мл., Хокон Виум Ли

История

По сравнению с уровнем 3, уровень 4 добавляет ключевое слово default, чтобы переопределить нормальный порядок каскадирования и наследование, и возможность квалифицировать правило '@import' не только с медиа-запросом, но также с предложением supports () (подробности см. в условных правилах CSS).

Редакторы: Элика Дж. Этемад / fantasai, Таб Аткинс Младший

История

Каскадирование и наследование Уровень 5 расширяет уровень 4 с помощью возможность классифицировать таблицы стилей на произвольное количество «Слои»: базовые слои и замещающие слои. Это упрощает повторно использовать таблицы стилей и добавлять локальные переопределения без необходимости '! important' или очень специфические селекторы.

Редакторы: Элика Дж. Этемад / fantasai, Мириам Э.Сюзанна, Таб Аткинс мл.

История

Тесты

Цвет определяет связанные с цветом аспекты CSS, включая прозрачность и различные обозначения для типа значения <цвет> .

Редакторы: Л. Дэвид Барон, Тантек Челик, Крис Лилли

История

Уровень 4 модуля цвета расширяет уровень 3 цвета. Он определяет различные обозначения цвета, в том числе RGB, HSL, шестнадцатеричный, именованные цвета, HWB, Lab, LCH и относительный цвета ('color-mod').Он определяет «цвет» и «непрозрачность». характеристики. И он предоставляет способы работы в цветовых пространствах, отличных от sRGB по умолчанию.

Редакторы: Таб Аткинс младший, Крис Лилли, Л. Дэвид Бэрон

История

Шрифты содержат свойства для выбора шрифтов, а также свойства для шрифта "Корректировки", например варианты глифов (например, наклонные буквы, мелкие заглавные буквы, цифры старого стиля) и кернинг. Выбор шрифта идентичен аналогичный раздел в CSS2.Свойства настройки шрифта являются новыми до уровня 3. Модуль также содержит правило @ font-face для загружаемые шрифты, которые ранее были в отдельном модуле.

Модуль со временем будет заменен на более крупные шрифты уровня 4

Редакторы: Джон Даггетт, Пол Нельсон, Джейсон Крэнфорд Teague, Michel Suignard , Крис Лилли

История

Сгенерированный контент для страниц Носитель содержит расширенные свойства для печати, помимо модуль Paged Media предоставляет.Имеет свойства для создания сноски, перекрестные ссылки («см. раздел X на странице Y») и построение бегущих заголовков из заголовков разделов.

Редакторы: Хокон Виум Ли

История

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

Редакторы: Йоханнес Вильм, Хокон Виум Ли

История

Создано и заменено Content определяет, как разместить контент до, после или в место элемента. Контент может быть текстом или внешним объектом, например изображение. Например, когда документ содержит элемент, ссылки на изображение, именно этот модуль позволяет дизайнеру выберите, будет ли изображение отображаться вместо элемента или нет. (Расчет размера замененных элементов равен определены в модуле CSS Image Values.)

Редакторы: Ян Хиксон

История

Гиперссылки Презентация рассматривает различные способы представления гиперссылок. CSS1 уже предоставил псевдоклассы ": посещено" и ": ссылка" на выберите гиперссылки. Этот модуль предоставит свойства для управления какие гиперссылки активны и где отображается цель, когда пользователь переходит по ссылке (например, в новом окне или в строке в текущий документ). Обратите внимание, что не все ссылки должны быть представлены как гиперссылки; некоторые могут обрабатываться как заменяемые элементы (см. модуль «Созданное и замененное содержимое») и некоторые из них выходят за рамки CSS (например, ссылки на скрипты, определения пространств имен, политики P3P и т. д.)

Редакторы: Тантек Челик, Берт Бос, Даниэль Глазман

История

Введение было удален и заменен серией Примечаний под названием «Снимки CSS». См., например, Снимок 2010 для описания.

Редакторы: Хокон Виум Ли, Эрик А. Мейер , Берт Бос

История

Списки содержат свойства для списков стилей, в частности различные типы пули и системы нумерации.

Редакторы: Таб Аткинс младший, Шинью Мураками , Ян Хиксон

Математика CSS

Math - предлагаемый модуль для свойств, предназначенных для стилизации математических формул, построения на макете макета «презентационных» элементов MathML. В настоящее время не работает на.

Редакторы: -

История

Многоколонный макет содержит свойства для переноса содержимого в гибко определяемые столбцы.

Редакторы: Хокон Виум Ли

История

Тесты

Форматы на основе XML могут использовать «пространства имен» для различения нескольких использует одно и то же имя элемента друг у друга, и этот черновик объясняет, как можно расширить селекторы CSS для выбора этих элементов. на основе их «пространства имен», а также их локального имени.

Редакторы: Элика Дж. Этемад, Энн ван Кестерен, Крис Лилли, Питер Линсс

История

Модель DOM определяет функции, которые встречаются в нескольких библиотеки программирования (и браузеры) для управления HTML, XML и CSS документы.Программисты могут скорее вызывать их из своих программ. чем писать самостоятельно. Некоторые из этих функций связаны с добавлением & удаление правил и изменение свойств в таблицах стилей CSS. Эти API-интерфейсы образуют объектную модель CSS или CSS-OM . Они полезны для автономных программ, а также для скриптов и апплетов. ДОМ уровень 2 содержит две главы по CSS-OM (объектной модели CSS) и РГ CSS разработает CSS-OM уровня 3.

Редакторы: Анн ван Кестерен

История

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

Редакторы: Анн ван Кестерен

История

Тесты

Paged Media расширяет свойства, которые уже были в CSS2, с новыми для управления такими такие вещи, как верхние и нижние колонтитулы и номера страниц.

Редакторы: Мелинда Грант, Элика Дж.Этемад, Хокон Виум Ли, Саймон Сапин, Джим Бигелоу

История

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

Редакторы: Аррон Эйхольц

История

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

Редакторы: Хокон Виум Ли

История

Этот модуль был удален в марте 2008 года. Ключевое слово 'reader' - это тип мультимедиа для использования в медиа-запросах (аналогично «экран», «печать», «проекция» и т. д.). Устройства, которые могут выбрать для применения правил внутри '@media reader' такие устройства, как экран читатели, которые отображают страницу на экране и одновременно говорят на ней времени, или отображать страницу и одновременно отображать ее на динамическом устройство Брайля.К этому типу мультимедиа применяются следующие свойства: поэтому комбинация свойств экрана, речи и шрифт Брайля.

Редакторы: Берт Бос

История

Ruby описывает CSS свойства для управления положением "рубина", которые маленькие аннотации поверх слов или рядом с ними, особенно часто в Китайский и японский. Их часто используют для произношения или значение сложных идеограмм.

Редакторы: Ричард Исида, Поль Нельсон, Мишель Сюиньяр

История

Модуль определения объема CSS уровень 1 определяет аналог CSS для области видимости HTML5 стили, механизмы для стилизации псевдоэлементов («регионов») и селекторы для теневой модели DOM.’

Редакторы: Таб Аткинс мл., Элика Этемад

История

Grid Layout позволяет настроить гибкую сетку дизайна для элемент так, чтобы потомки элемента могли быть расположены относительно этой сетки и, таким образом, быть выровненными друг к другу в двух Габаритные размеры. Областям сетки можно присвоить имена как для удобства использования и создать уровень косвенности, который облегчает переупорядочивание элементов. Как и другие модули сетки / шаблона, этот модуль строится на основе каркасной компоновки идеи, которые зародились в 1996 году и позволили, среди прочего, абсолютное позиционирование в CSS уровня 2.Таким образом, модуль Grid Layout имеет большое перекрытие с многоколоночным Макет, Макет шаблона, Гибкий макет коробки, Сетка Позиционирование и регионы, но не замените их. Однако ожидается, что шесть модулей могут в конечном итоге будет сокращено до трех: многоколоночный, гибкий блок, и третий для сеток / шаблонов / регионов.

Редакторы: Алексей Могилевский, Фил Купп, Маркус Мильке, Дэниел Глазман, Таб Аткинс мл., Элика Я. Этемад / fantasai, Россен Атанасов

История

Уровень 2 модуля Grid Layout расширяет возможности сетка, в частности с возможностью сделать потомка элементы элемента сетки, кроме прямых дочерних элементов сетки Предметы.

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Россен Атанасов

История

«Регионы» - это собирательное название некоторых видов областей на холст, который можно выбрать псевдоэлементами.Регионы создается некоторыми другими модулями, такими как Paged Media (который создает области, называемые «полями полей»), Selectors (который создает, например, область ':: first-line') и шаблон сетки Макет (который создает «слоты»).

Модуль регионов определяет два типа вещей, которые вы можете делать с регионами: Некоторые виды регионы могут быть объединены в цепочку, и контент перетекает в них, например этот текст, который слишком длинный для одной области, не переполняется, а автоматически продолжается в другом регионе; и, во-вторых, контент может быть стилизован в зависимости от того, в каком регионе он находится.Например, абзац который перетекает в две области, может иметь полужирный текст в первой области и обычный текст во втором, даже если нет элемента граница.

Редакторы: Винсент Харди, Россен Атанасов, Алан Stearns

История

Речь содержит свойства, чтобы указать, как документ воспроизводится речью синтезатор: громкость, голос, скорость, высота звука, реплики, паузы и т.д. уже был модулем ACSS (Aural CSS) в CSS2, но никогда не был правильно реализован и несовместим с синтезом речи Язык разметки (SSML), язык W3C для управления речью синтезаторы.Поэтому модуль ACSS CSS2 был разделен на две части: речь (для реальной речи, совместимая с SSML) и аудио (для звуковых эффектов на других устройствах). В свойства речи на уровне 3 будут такими же, как и на уровне 2, но имеют разные значения. (Старые свойства все еще можно использовать с устаревшим типом мультимедиа 'aural', но новые должны быть используется внутри нового носителя «речи», а также в таблицах стилей для 'все' СМИ.)

Редакторы: Дэниел Век, Дэйв Рэггетт, Клаудио Сантамброджо, Даниэль Глазман

История

Синтаксис правил CSS в атрибуте HTML "style" строго не является частью CSS, но упоминается здесь, потому что это подготовлено рабочей группой CSS.Это было необходимо, потому что XHTML 1.0, в отличие от HTML 4.0, не определяет синтаксис Правила CSS в его атрибуте стиля. Однако спецификация действительно для всех похожих атрибутов (например, в SVG), а не только для HTML.

Редакторы: Элика Дж. Этемад, Тантек Челик, Берт Бос, Марк Аттинаси

История

Синтаксис содержит общая (прямая совместимость) грамматика, которой придерживаются все уровни CSS к.У каждого свойства также есть ограничения на синтаксис его value, но их можно найти в других модулях CSS.

Редакторы: Таб Аткинс младший, Саймон Сапин, Л. Дэвид Барон

Модуль таблиц CSS

В таблицах описывается макет таблиц: строки, столбцы, ячейки и подписи, с их границы и выравнивания. Модель уровня 3, вероятно, не будет иметь ничего нового по сравнению с уровнем 2, но это будет описано подробнее деталь.

Редакторы: Франсуа Реми, Грег Уитворт

История

Текст содержит связанные с текстом свойства CSS2 (выравнивание, перенос текста, и т. д.) плюс несколько новых свойств, многие из которых предназначены для работы с текстом в разные языки и скрипты (разрыв строки, кашида, расстановка переносов и т. д.). Он включает (и заменяет) предложение в Эскиз международного макета. Также смотрите модуль Line для вещей например, вертикальное выравнивание внутри линии, вычисление высоты строки и стили для первой строки / первой буквы.Текстовый модуль достиг CR статус 2003 года, но реализовано очень мало. Некоторые общие типографика требовала слишком большого количества свойств, в то время как множество комбинаций ценности не были полезны. Переписывание началось в 2004 году и должно приводят к той же функциональности, но с меньшим количеством свойств и лучше по умолчанию. Текстовый модуль разделен на четыре части: Текст, режимы ввода, линейная сетка и текст Украшение.

Редакторы: Элика Дж. Этемад, Кодзи Исии, Шинью Мураками, Пол Нельсон, Мишель Суиньяр, Крис Лилли

История

Режимы записи (ранее: Text Layout) описывает свойства, которые управляют направление текста: горизонтальные строки текста, расположенные сверху вниз (нормально для большинства языков), вертикальные строки текста, складываются справа налево (часто используется для японского), или вертикальные линии, которые складываются слева направо (монгольский).Это также описывает порядок букв внутри строки (двунаправленность) и поворот, который может произойти для некоторых букв внутри вертикального текст.

Редакторы: Элика Этемад / fantasai, Кодзи Исии, Шинью Мураками, Пол Нельсон, Мишель Суиньяр

История

Уровень 4 расширяет уровень 3 несколькими дополнительными функции, такие как 'sideways-lr / sideways-rl', объединение цифр горизонтально внутри вертикального текста и автоматически помещает текст в столбцах, когда текст ортогонален (вертикальный или горизонтальный), чтобы окружающий текст (горизонтальный или вертикальный).'Sideways-lr' и 'sideways-rl' - это альтернативные режимы вертикального письма, которые очень полезно для вертикального написания текста в скриптах, которые обычно горизонтально, например, чтобы написать английский текст на корешках книг или вдоль край страницы.

Редакторы: Элика Этемад / fantasai, Кодзи Исии

История

Модуль CSS Line Grid уровень 1 определяет свойства, чтобы упростить выравнивание строки в соседнем столбце или на двух сторонах листа бумага, несмотря на изображения или заголовки, которые прерывают обычную сетку.Он также определяет механизмы для выравнивания букв по вертикали в серии. линий, что является обычным дизайном в идеографических шрифтах, таких как Японский. (Эти функции ранее были частью режимов записи.)

Редакторы: Элика Этемад, Коджи Исии, Алан Стернс

История

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

Редакторы: Хокон Виум Ложь, Таб Аткинс, фантазия, Крис Лилли

История

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

Редакторы: Таб Аткинс, fantasai,

История

Модуль Web Fonts был объединен с модулем Fonts. Веб-шрифты позволяют загружать шрифты для использования с документом. В технология также включена в SVG и, наоборот, можно создавать шрифты для скачивания в формате SVG. Раньше эта функция была частью CSS уровня 2, но с пересмотром уровня 2 он был перемещен до уровня 3.

Редакторы: Джон Даггетт, Крис Лилли , Мишель Suignard

История

Поведенческие расширения для CSS определяет свойство «привязки» для XBL. Имущество называлось «поведение» в первом черновике. Этот проект содержал ряд другие предложения, которые больше не рассматриваются. (В какой-то степени они были заменены на XBL.)

Редакторы: Ян Хиксон

История

Гибкая компоновка коробки Модуль определяет ключевые слова flex и inline-flex для 'display' свойство, которое заставляет элемент отображаться как либо столбец, либо ряд дочерних элементов.Дополнительные свойства определить порядок дочерних полей (слева направо, снизу сверху и т. д.) и как пространство распределяется между детьми и промежутки между ними. Модуль в первую очередь предназначен для принуждения ряды элементов управления в графическом интерфейсе пользователя равны по высоте или ширине.

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Россен Атанасов, Алексей Могилевский , Л. Дэвид Барон , Нил Дикин , Ян Хиксон , Дэвид Хаятт

История

Модуль изображений CSS определяет, как свойства могут ссылаться на изображения по URL-адресу.Все свойства который может принимать изображения в качестве значения, например 'background-image' и 'list-style-image' используйте этот синтаксис. Он также определяет цвет градиенты. как встроенный тип изображения.

Редакторы: Элика Дж. Этемад, Таб Аткинс мл.

История

Значение изображения и заменено Контентный модуль определяет, как свойства могут ссылаться на изображения с помощью URL. Все свойства, которые могут принимать изображения в качестве значений, например 'background-image' и 'list-style-image' используйте этот синтаксис.Это также определяет цветовые градиенты. Модуль уровня 4 расширяет одноименный модуль уровня 3, среди которых прочее конические цветовые градиенты.

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / фантасай, Леа Веру

История

Фрагментация CSS Модуль определяет свойства, чтобы принудительно или избегать страницы и столбца. перерывы. Он сочетает в себе функции, которые ранее были в двух разных спецификации, CSS Paged Media и Multi-column Layout.

Редакторы: Россен Атанасов, Элика Дж. Этемад / фантазия

История

Модуль фрагментации CSS Уровень 4 расширяет Уровень 3 с помощью контроль над полями при разрывах страниц и другие улучшения.

Редакторы: Россен Атанасов, Элика Дж. Этемад / фантазия

История

Модуль преобразования CSS определяет 2D-преобразования (повороты, перемещения и т. д.), которые могут быть применил к элементам после нормальную компоновку (т.е., а transform не влияет на положение окружающих элементов). Преобразования также доступны в SVG (как значения для атрибута преобразование ), и спецификация является совместной работой. рабочих групп CSS и SVG.

Редакторы: Саймон Фрейзер, Дин Джексон, Дэвид Хаятт, Крис Маррин, Эдвард О'Коннор, Дирк Шульце, Арье Грегор

Уровень 2 преобразований CSS Модуль расширяет уровень 1 с помощью 3D трансформирует.

Редакторы: Таб Аткинс мл., Саймон Фрейзер, декан Джексон, Тереза ​​О'Коннор

История

Преобразования 2D Модуль заменен на CSS. Модуль трансформирует.

Редакторы: Саймон Фрейзер, Дин Джексон, Дэвид Хаятт, Крис Маррин, Эдвард О'Коннор

История

3D-преобразования Модуль заменен на CSS. Модуль трансформирует.

Редакторы: Дин Джексон, Дэвид Хаятт, Крис Маррин

История

Модуль переходов определяет свойство для анимации переходов между псевдоклассы (например,g., когда элемент входит или покидает ': hover' государственный). В течение заданной задержки некоторые значения свойств постепенно перейти от старого значения к новому, а не мгновенно, как на уровне 2.

Редакторы: Дин Джексон, Дэвид Хаятт, Крис Маррин, Сильвен Галино, Л. Дэвид Барон

История

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

Редакторы: Дин Джексон, Дэвид Хаятт, Крис Маррин

История

Web Animations совместное спецификация рабочими группами CSS и SVG. CSS-переходы, CSS-анимация и SVG - все это обеспечивает механизмы, которые генерируют анимированный контент на веб-странице.Хотя три спецификации предоставляют много схожих функций, они описаны в разных терминах. В данной спецификации предлагается абстрактная анимационная модель, которая включает в себя общие черты все три спецификации. Эта модель обратно совместима с текущее поведение этих спецификаций, так что они могут быть определены в терминах этой модели без каких-либо заметных изменений.

Редакторы: Брайан Бертлз, Шейн Стивенс, Алекс Данило, Таб Аткинс

История

Тесты

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

Редакторы: Сванте Шуберт, Робин Бержон, Тед Вугофски, Дуг Доминик, Питер Старк, Tapas Roy

История

Тесты

Профиль печати CSS описывает подмножество CSS, подходящее для документов, напечатанных на недорогие принтеры. Это дополнение к профилю печати XHTML.

Редакторы: Элика Дж. Этемад, Мелинда Грант, Джим Бигелоу

История

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

Редакторы: Гленн Адамс, Тантек Челик, Шон Хейс, Хокон Виум Ли

История

Условные правила CSS определяет несколько способов сделать правила стиля зависимыми от факторов вне документа, например, на выходном носителе ('@media', для большая часть уже на уровне 2), возможности пользовательского агента, и URL-адрес документа.

Редакторы: Л. Дэвид Барон

История

Адаптация устройства CSS определяет (1), как исходный содержащий блок соотносится с область просмотра и (2) как единицы измерения CSS ('px', 'cm', 'pt', и т.п.) относятся к реальным единицам. Первоначальный содержащий блок - это гипотетический прямоугольник в модели рендеринга CSS, определяющий (0,0) положение и значение процентов в корневом элементе. На уровне 2 CSS он равен области просмотра (т.е. окну или страницу, на которой нарисован документ). Этот модуль определяет Правило '@viewport', которое позволяет исходному содержащему блоку быть больше или меньше окна просмотра. Он также может установить коэффициент масштабирования, для изменения сопоставления между единицами CSS и реальными единицами.('@viewport' обычно бесполезен для авторов, но позволяет читателям избавиться от эффекта любого элемента это может происходить в документах HTML5.)

Редакторы: Руне Лиллесвин

История

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

Редакторы: Винсент Харди, Россен Атанасов, Алан Stearns

История

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

Редакторы: Винсент Харди, Россен Атанасов, Алан Stearns

История

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

Редакторы: Рик Кабанье

История

Эффекты фильтра позволяет графические фильтры, применяемые к элементу (после того, как он был визуализирован, но до того, как он был составлен, см. Создание и смешивание). Фильтры могут размыть элемент, добавить тень, изменить цвета, увеличить контраст, добавить «текстуру» и т. д. Модуль определяет ряд общих графические эффекты, но также позволяет использовать фильтры, написанные на OpenGL (Язык затенения OpenGL ES).Этот модуль создан в сотрудничестве с SVG.

Редакторы: Винсент Харди, Дин Джексон, Эрик Дальстрём

История

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

Редакторы: Дирк Шульце, Брайан Бертлс, Таб Аткинс Младший

История

Анонимный блок, в котором заключено содержимое ячейки таблицы или сетки. слот, и один или несколько блоков внутри гибкого бокса имеют общее, что все они могут быть выровнены по каждому четырех краев контейнера или по центру между ними края. Если флексбокс содержит несколько боксов, их также можно разложить («по ширине») между двумя краями. Модуль Box Alignment определяет различные свойства для таких выравниваний.Это расследуется если свойства могут быть расширены для применения к ящикам в других контексты, в частности нормальный поток. Это позволило бы, например, содержимое плавающего поля должно быть выровнено по нижнему краю float, аналогично тому, как 'vertical-align: bottom' выравнивает содержимое ячейки таблицы. Еще одно возможное дополнение - контроль над выравнивание с помощью гибких полей (например, 'margin: auto' без его ограничения).

Редакторы: Элика Дж. Этемад / fantasai, Таб Аткинс Младший

История

Модуль оформления текста определяет свойства, управляющие стиль и расположение различных украшений вокруг текста, обычно чтобы подчеркнуть это, и это не влияет на макет текста сам по себе: 'text-decoration' (подчеркивание, надчеркивание, мигание и т. д.), 'выделение текста' (восточноазиатские знаки ударения поверх идеографов) и «тень текста». Эти свойства ранее были в текстовом модуле.

Редакторы: Элика Дж. Этемад, Кодзи Исии

История

Уровень 4 модуля оформления текста расширяет уровень 3 дополнительными возможностями контроль над различными аспектами декора, такими как стиль и расположение подчеркиваний.

Редакторы: Элика Дж. Этемад, Кодзи Исии

История

Модуль определения размеров определяет ключевые слова для использования в "ширине" и свойства 'height', чтобы указать, что размер элемента должен быть как можно более узким или максимально широким, а не ширина, унаследованная от родительского элемента. Эти ключевые слова разделены вне определения "ширина" и "высота" в базовой модели коробки и, вероятно, будут объединены обратно в этот модуль позже.

Редакторы: Таб Аткинс, Элика Дж. Этемад / fantasai

История

Уровень 4 расширяет уровень 3 дополнительными возможностями ключевые слова для выбора различных алгоритмов определения размера поле, а также определяет свойство "соотношение сторон", чтобы дать окнам фиксированное соотношение ширины и высоты, независимо от их размера.

Редакторы: Таб Аткинс, Элика Дж. Этемад / fantasai, Джен Симмонс

История

Модуль Counter Styles определяет Правило @ counter-styles, с помощью которого авторы могут определять свои собственные стили нумерации списков, заголовков разделов, рисунков и т. д.В стили нумерации с уровня 2 предопределены. Они включают десятичную дробь (1, 2, 3, 4…), верхний римский (I, II, III, IV…), нижний альфа (a, b, c, d…) и т. д., а также некоторые стили для маркированных списков, такие как disc (•).

Редакторы: Таб Аткинс мл.

История

Модуль Каскадных переменных позволяет произвольно данные (пары имя / значение), которые будут связаны с элементами. Данные в виде свойств вида var-NAME: VALUE.В свойства наследуются. Доступ к ним можно получить через DOM и также упоминается в других свойствах через функционал var (NAME) обозначение.

Редакторы: Люк Макферсон, Таб Аткинс мл., Дэниел Глазман

История

Модуль переполнения CSS уровень 3 определяет свойство «переполнение», которое определяет, как текст считается слишком широким или слишком высоким для своего поля. Текст можно оставить для переполнения, обрезки или прокрутки.См. Модуль выделения CSS для различных механизмы прокрутки и CSS модуль фрагментации уровня 3 для управления тем, как текст разбит на страницы.

Редакторы: Л. Дэвид Барон

История

Модуль переполнения CSS уровень 4 расширяет модуль уровня 3 механизмом взлома блок на несколько страниц с отображением одной или всех страниц показывать в то же время. Псевдоэлемент позволяет выбрать отдельные страницы и применить к ним некоторый стиль.

Редакторы: Л. Дэвид Бэрон, Флориан Ривоал

История

Модуль отображения CSS уровень 3 переопределяет свойство 'display' как сокращение для три других свойства, каждое для более или менее независимого аспекта свойства 'display': запускает ли элемент новый блок или продолжается в строке; как выложено содержимое элемента; и есть ли у элемента метка сбоку. Модуль также определяет новое свойство, которое делает то же самое, что и display: none (т.е., не отображать и не произносить элемент). Эти низкоуровневые свойства Ожидается, что они будут полезны в основном в сценариях.

Редакторы: Таб Аткинс мл.

История

Модуль загрузки шрифтов CSS уровень 3 определяет часть DOM API для '@ font-face' правило CSS. В частности, он определяет методы, позволяющие сценарию явно загрузить шрифт (например, чтобы загрузить его раньше, чем средство визуализации загрузит его сам) и будет проинформирован, когда шрифт будет загружен.

Редакторы: Таб Аткинс мл.

История

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

Редакторы: Таб Аткинс мл.

История

Модуль безэлементных селекторов Уровень 1 определяет селекторы для других типов узлов в древовидный документ, чем элементы.В частности, он обеспечивает способы выбора атрибутов элементов.

Эти селекторы не действуют в CSS, поскольку стили только для CSS элементы. Они предназначены для других контекстов, в которых используются селекторы. используется для выбора частей дерева, таких как Selectors API и ЕГО 2.0. Таким образом, они предоставляют альтернативу XPath, когда XPath непригоден для использования или нежелателен.

Редакторы: Йирка Косек, Таб Аткинс мл.

История

Геометрические интерфейсы определяет API для скриптов, которые манипулируют точками, прямоугольниками, четырехугольники и матрицы преобразований.

Редакторы: Саймон Питерс, Дирк Шульце, Рик Кабанье

История

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

Редакторы: Анне ван Кестерен, Тантек Челик

История

Модуль встроенного макета CSS описывает макет в строке и наложение строк, и также стиль буквиц.Он заменяет модуль CSS Line Layout.

Редакторы: Дэйв Крамер, Элика Дж. Этемад / fantasai, Стив Зиллес

История

Модуль CSS псевдоэлементов определяет различные псевдоэлементы, то есть части документов, которые соответствуют чему-то визуализированному, но не непосредственно элементу в исходный документ. Некоторые из них уже определены в CSS2. ( :: первая строка , :: первая буква и т. Д.), несколько других являются новыми, например :: selection (selected текст) и :: заполнитель (текст-заполнитель в элемент ввода).

Модуль «Селекторы» описывает, как использовать псевдоэлементы как часть селекторов.

Редакторы: Дэниел Глазман, Элика Дж. Этемад / fantasai, Алан Стернс

История

Модуль Motion Path определяет дополнительный способ установить положение и вращение абсолютно позиционированные элементы. Положение задается траекторией (SVG shape) и смещение вдоль этой траектории от 0 до 100%. В в сочетании с анимацией, смещение также может быть анимировано.

Этот модуль является совместной работой рабочих групп SVG и CSS.

Редакторы: Дирк Шульце, Шейн Стивенс

История

Модуль CSS Scroll Snap определяет свойства для контролировать некоторые аспекты прокрутки переполняющегося элемента: когда прокручивая мышкой или аналогичным устройством, элемент можно сделать для "привязки" к определенным позициям, например, к первой строке дочернего элемента элемент или центр изображения. Эти точки привязки могут быть либо по близости (элемент фиксируется в позиции только тогда, когда действие прокрутки закончилось близко к этой позиции) или обязательное ( элемент всегда привязывается к ближайшей точке привязки при прокрутке действие заканчивается).

Редакторы: Мэтт Раков, Джейкоб Росси, Таб. Аткинс-Биттнер, Элика Дж. Этемад / fantasai

История

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

Редакторы: Хёджин Сон, Джихе Хон

История

Модуль CSS Basic User Interface Module описывает свойства и значения CSS для стилизации базового пользовательского интерфейса. элементы.Он включает и расширяет CSS Basic User Уровень интерфейса 3, среди прочего, со свойствами для стиль вставки каретки.

Редакторы: Флориан Ривоал

История

Текстовый модуль CSS , уровень 4 включает и расширяет текстовый модуль CSS уровня 3. Он определяет разрыв строки, выравнивание и выравнивание, пробелы обработка и текстовые преобразования.

Редакторы: Элика Дж. Этемад / fantasai, Кодзи Исии, Алан Стернс

История

Спецификации оперативной группы Houdini (совместное рабочая группа CSS WG и TAG) стремятся указать низкоуровневый доступ к механизму рендеринга CSS, например как в обычном браузере, включая e.g., синтаксический анализатор CSS, модель коробки, загрузка шрифтов, обработка переполнения и прокрутка. An приложение, использующее такой движок CSS, может, таким образом, переопределить или расширить некоторые его особенности.

CSS Painting API Level 1 является одним из спецификации и определяет API для подключения к функциям, которые нарисуйте поле CSS на экране, включая его фон, границы и содержание. Его можно использовать, например, для рисования фона, заданного алгоритм, а не изображение.

Редакторы: Шейн Стивенс, Ян Килпатрик, декан Джексон

История

CSS Properties and Values ​​API Level 1 является частью спецификаций Houdini. Это определяет API для регистрации новых свойств с помощью механизма CSS. В отличие в модуль пользовательских свойств (который позволяет декларативно определять свойства), API позволяет свойства со специальным синтаксисом и свойства, которые не наследовать.

Редакторы: Таб Аткинс, Шейн Стивенс, Дэниел Глазман, Алан Стернс, Эллиот Спрен, Грег Уитворт

История

CSS Typed OM Level 1 является частью спецификаций Houdini.Он определяет API для эффективный доступ к значениям свойств в объектной модели CSS, т.е. обычно в виде чисел, а не в виде строк.

Редакторы: Шейн Стивенс

История

Worklets уровня 1 является частью спецификаций Houdini. Он определяет API для вставить код JavaScript в конвейер рендеринга.

Редакторы: Ян Килпатрик

История

CSS Layout API Level 1 является частью спецификаций Houdini.Он определяет JavaScript API для прикрепления скриптов, которые реагируют на вычисляемый стиль и дерево ящиков меняется.

Редакторы: Грег Уитворт, Ян Килпатрик, Таб. Аткинс-Биттнер, Шейн Стивенс, Роберт О'Каллахан, Россен Атанасов

История

Уровень модуля шрифтов 4 расширяет уровень шрифтов 3. Он добавляет поддержку, среди прочего, цветные шрифты, вариативные шрифты и эмодзи.

Редакторы: Джон Даггетт, Майлз К. Максфилд

История

Уровень модуля шрифтов 5 расширяет уровень шрифтов 4 с более точным контролем над выбором шрифта и подстановка шрифтов (резервные шрифты), например расширенные Свойство font-size-adjust.

Редакторы: Майлз К. Максфилд, Крис Лилли

История

CSS Rhythmic Sizing Level 1 предоставляет свойство для установить расстояние между линиями, которое обычно задается линией высота, которая должна быть округлена до кратного заданного значения. Это позволяет линии должны оставаться выровненными по фиксированной сетке, даже если есть случайные строки, которым нужно больше места (например, потому что они содержат математическая формула или встроенное изображение). Этот модуль возможен дополнение к модулю Line Grid.

Редакторы: Кодзи Исии, Элика Дж. Этемад / fantasai

История

Модуль Fill and Stroke определяет свойства для установки цветов и узоров заливки SVG. формы и текста. Синтаксис CSS позволяет стилизовать формы SVG. с (внешней) таблицей стилей, а не с атрибутами на каждом форма сама. «Заполнение» относится к внутренней части форм, «Штрих» к краям. Оба могут быть простых цветов, но также узоры, градиенты или изображения.

Редакторы: Элика Дж. Этемад / fantasai, Tab Аткинс-Биттнер

История

Модуль содержания предоставляет свойство "содержать", которое особенно полезно в динамический GUI : Это заявляет, что элемент не влияет на отображение других элементы вне себя и не рисуют за пределами своего собственного ящика. Это означает, что элемент можно добавлять и удалять очень быстро, без пересчета стиля других элементов.Например., такой элемент не увеличивает размер своего родителя и не не увеличивать счетчики списка.

Редакторы: Таб Аткинс, Флориан Ривоал

История

2-й уровень сдерживания Модуль расширяет сдерживание уровень 1 с дополнительными значениями для свойства «содержать».

Редакторы: Таб Аткинс, Флориан Ривоал

История

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

Редакторы: Брайан Бертлз, Дин Джексон, Мэтт Рэкоу, Шейн Стивенс

История

Логические свойства и Модуль значений предоставляет способы косвенного задания свойств, в зависимости от направления и режима письма элемента или его содержащий блок.Например, косвенная установка margin-inline-start устанавливает одно из четырех свойств полей (margin-top, -right, -bottom или -left), в зависимости от того, написан ли текст элемента слева направо, справа налево, сверху вниз или снизу вверх. Это полезен в простых общих таблицах стилей, таких как стиль User Agent. листов, но иногда может также сокращать стили для документов, смешивать текст с письмом слева направо и справа налево, в частности, для элементы, макеты которых для текста с письмом справа налево и слева направо (в основном) зеркальное отображение.

Редакторы: Россен Атанасов, Элика Дж. Этемад / фантазия

История

Модуль CSS Shadow Parts определяет синтаксис селектора (а именно, псевдоэлемент ‘:: part ()’) для выбора «частей» «теневого дерева».

CSS знает о «замененных элементах», элементах в документе, которые не отображают собственное содержимое, а заменяются другим объект, например изображение или «теневое дерево». Теневое дерево - это объект, который, как правило, имеет один или несколько настраиваемых аспектов, называемые "частями", которые настраиваются путем установки свойств CSS на их.Например, теневое дерево может представлять календарь или встроенный видеоплеер и можно настроить фон цвет или шрифт на некоторых кнопках. Какие части существуют (и какие у них name is), какие свойства применяются к ним и каковы их точные эффект зависит от объекта. Этот модуль CSS определяет, как напишите селекторы, которые выбирают такую ​​деталь. (См. Также CSS Scoping.)

Редакторы: Таб Аткинс-Биттнер, Фергал Дейли

История

Спецификация CSS Spatial Уровень навигации 1 определяет общую модель направленного навигация: вверх, вниз, влево, вправо, внутри группы или между группами элементов; и он определяет функции и события JavaScript, которые реализовать эту модель.Он не определяет, какие нажатия клавиш или другие физические действия вызывают эти события. Это зависит от агента пользователя.

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

Редакторы: Джихе Хонг, Флориан Ривоал

История

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

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

Цветовой модуль определяет ключевые слова представляющие системные цвета. Они устарели, но они также следуйте цветовой схеме системы.

Редакторы: Элика Дж. Этемад / fantasai, Россен Атанасов, Руне Лиллесвин, Таб Аткинс мл.

История

Animation Worklet API определяет два API для создания анимации в JavaScript. Код для такие анимации можно запускать в отдельном потоке (фон процесс), так что основной поток не прерывается или может быть с учетом приоритета.

Редакторы: Маджид Валипур, Роберт Флэк, Стивен Макгрюер

История

Resize Observer определяет API для скриптов, которые должны реагировать на изменения в элементе размер.

Редакторы: Алекс Тотич, Грег Уитворт

История

Color Level 5 расширяет Color Level 4 обозначениями для относительных цвета: цвета между другими цветами, более светлые или темнее заданного цвета или дополнительных.

Редакторы: Крис Лилли, Уна Кравец, Леа Веру, Адам Аргайл

История

CSS Custom Highlight API Уровень 1 определяет библиотеку функций, которые могут быть вызваны из сценария для выбора (выделения) одного или нескольких диапазонов текста в документ и присвойте им имя. Он также определяет селектор CSS для стиль таких именованных диапазонов текста из таблицы стилей.

Например, если диапазон текста был выбран скриптом и присвоил имя «моя-ключевая-фраза», правило CSS ':: highlight (my-key-фраза) {color: blue} "делает этот текст синим.

Редакторы: Флориан Ривоал, Санкет Джоши, Меган Гарднер

История

Уровень 1 содержит только самые основные свойства CSS, такие как "поля", "отступы", "фон", "цвет" и "шрифт" с ограничения на допустимые значения. Это был первый уровень CSS. должна быть завершена (в 1996 г.) и соответствовала возможностям реализации того времени. В настоящее время это только исторический интерес; все реализации должны поддерживать уровень 2 и вероятно, большие части уровня 3 тоже.

Редакторы: Хокон Виум Ли, Берт Бос

SVG

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

Базовые селекторы - Мастер-класс по макету CSS

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

Мастер-класс по макету CSS: основные селекторы

Селекторы элементов

Самый простой из селекторов - это селектор элемента .Например, абзацы в документе HTML представлены элементом p и заключены в теги

. Чтобы выбрать все абзацы в документе, мы использовали бы следующий селектор.

  п {}  

Чтобы выбрать все заголовки уровня 1, мы использовали бы селектор h2 .

  h2 {}  

Селекторы элементов будут применять CSS к каждому экземпляру этого элемента в вашем документе.

Селекторы классов

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

В HTML мы добавляем класс к элементу, например:

  
 Содержимое 
  

В нашем CSS мы можем использовать селектор классов, он начинается с . персонаж.

  .box {}  

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

  п.бокс {}  

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

  
 Содержимое 
 Содержимое 
  

Вы можете добавить свой класс к нескольким элементам в одном HTML-документе, и селектор выберет их все и применит к каждому из них одинаковые стили.

Селекторы идентификаторов

Другой способ выделить один элемент - присвоить ему идентификатор в разметке.

  
 Содержимое 
  

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

  #box {}  

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

CSS All Caps: Пошаговое руководство

CSS-свойство text-transform: uppercase устанавливает для содержимого текстового элемента все заглавные буквы. Вы также можете использовать это свойство, чтобы установить для содержимого текстового элемента строчные буквы или регистр заголовка.text-transform может применяться к абзацам, заголовкам или любому другому текстовому элементу.

---

При написании и разработке веб-сайта разработчики могут использовать свойства CSS для корректировки регистра шрифта текста, если это необходимо. В этой статье мы поговорим о двух способах использования text-transform и font-variant. Давайте посмотрим на синтаксис обоих.

CSS Все заглавные буквы

Вы можете изменить содержимое текстового элемента на все заглавные буквы, используя свойство CSS text-transform.Это свойство устанавливает, как текст на веб-странице пишется с заглавных букв. Вы также можете использовать это свойство для установки нижнего регистра содержимого текстового элемента.

Чтобы сделать блок текста заглавными буквами, используйте text-transform: uppercase в селекторе CSS:

Найдите свой учебный лагерь Match

• Карьера Карма подойдет вам с лучшими техническими учебными курсами
• Получите эксклюзивные стипендии и подготовительные курсы

преобразование текста: прописные;

Свойство text-transform принимает три возможных значения:

• верхний регистр: переводит каждое слово в верхний регистр в текстовом элементе.
• нижний регистр: перевод текста в нижний регистр.
• заглавная буква: каждое слово пишется с заглавной буквы.

Давайте посмотрим на пример использования метода преобразования текста в действии.

Пример CSS со всеми заглавными буквами

Мы собираемся создать веб-страницу, на которой будет отображаться сообщение «Эта страница не существует». заглавными буквами.

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

На всякий случай мы будем использовать метод преобразования текста.

Давайте определим HTML-документ с нашим текстом и правилом преобразования текста:

 
 
 
   <стиль>
     п {
       преобразование текста: прописные буквы;
     }
   
 
 
 
   
 это все заглавными буквами 
 
 

Все буквы в выделенном тексте отображаются в верхнем регистре.

Сначала мы определяем тег. Этот тег включает тег

это все заглавными буквами

Заключение

Свойство text-transform дает нам возможность делать весь текст в верхнем регистре элемента.