Все css команды: Справочник CSS | htmlbook.ru

Содержание

display | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	2.0+	7.0+	1.0+	1.0+	2.1+	1.0+

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

Версии CSS

Описание

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

Синтаксис

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень
короткий — block, inline,
list-item и none.
Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1
приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display
Значение	Описание	IE6	IE7	IE8	Cr2	Cr8	Op9.2	Op10	Sa3.1	Sa5	Fx3	Fx4
block	Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline	Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block	Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table	Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item	Элемент выводится как блочный и добавляется маркер списка.
none	Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in	Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table	Определяет, что элемент является блочной таблицей подобно использованию тега <table>.
table-caption	Задает заголовок таблицы подобно применению тега <caption>.
table-cell	Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).
table-column	Назначает элемент колонкой таблицы, словно был добавлен тег <col>.
table-column-group	Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.
table-footer-group	Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.
table-header-group	Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.
table-row	Элемент отображается как строка таблицы (тег <tr>).
table-row-group	Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>display</title>
  <style>
   .example {
    border: dashed 1px #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Шрифт текста */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы вокруг */
   }
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Устанавливаем как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер текста */
    margin: 0; /* Убираем отступы вокруг */
    white-space: nowrap; /* Отменяем переносы текста */
   }
  </style>
 </head> 
 <body> 
  <p>Пример</p>
  <p>
  &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
  &lt;html&gt;<br>
  &lt;body&gt;<br>
  &lt;b&gt;Формула серной кислоты:&lt;/b&gt;
  &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
  SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
  &lt;/sub&gt;&lt;/i&gt;<br>
  &lt;/body&gt;<br>
  &lt;/html&gt;</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

[window.]document.getElementById(«elementID»).style.display

Браузеры

Internet Explorer до версии 7 включительно:

поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
для элементов <li> понимает значение block как list-item;
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

значение table-column применяется только для тега <col>;
значение table-column-group поддерживается только для тега <colgroup>.

Chrome 2.0, а также Safari версии 3 и старше, iOS:

значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

border | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

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

Значение по умолчанию	Зависит от использования
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#propdef-border

Версии CSS

Описание

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг
элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер
сам определит, какое из них соответствует нужному свойству. Для установки границы
только на определенных сторонах элемента, воспользуйтесь свойствами border-top,
border-bottom, border-left,
border-right.

Синтаксис

border: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы.
Для управления ее видом предоставляется несколько значений border-style.
Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

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

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border</title>
  <style>
   .brd {
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.
   </div>
 </body>
</html>

В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

Рис. 2. Применение свойства border

Объектная модель

[window.]document.getElementById(«elementID»).style.border

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Справочник CSS | PuzzleWeb.ru

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

Свойство	Описание	CSS
align-content	Задаёт вертикальное выравнивание flex-элементов для flex-контейнеров с многострочным содержимым.	3
align-items	Вертикальное выравнивание flex-элементов внутри flex-контейнера.	3
align-self	Вертикальное выравнивание flex-элемента.	3
flex	Определяет ширину, сжатие и растяжение для flex-элемента.	3
flex-basis	Указывает ширину для flex-элемента.	3
flex-direction	Направление расположения flex-элементов.	3
flex-flow	Направление расположения и возможность переноса для flex-элементов.	3
flex-grow	Определяет коэффициент растяжения flex-элемента.	3
flex-shrink	Определяет коэффициент сжатия flex-элемента.	3
flex-wrap	Определяет возможность переноса flex-элементов.	3
justify-content	Горизонтальное выравнивание flex-элементов.	3
order	Определяет порядок вывода flex-элементов.	3
Свойство	Описание	CSS
@keyframes	Позволяет создавать анимацию.	3
animation	Позволяет установить несколько или все значения свойств animation в одном объявлении.	3
animation-delay	Определяет, когда запустится анимация.	3
animation-direction	Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах.	3
animation-duration	Определяет сколько понадобится времени, чтобы закончить 1 цикл анимации.	3
animation-fill-mode	Задаёт стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания). По умолчанию CSS анимация не влияет на элемент до тех пор, пока анимация не запуститься, во время паузы и после её завершения. Это и позволяет переопределить свойство animation-fill-mode.	3
animation-iteration-count	Определяет сколько раз анимация должна будет проигрываться.	3
animation-name	Определяет имя для @keyframes.	3
animation-play-state	Указывает будет анимация проигрываться или будет в режиме паузы.	3
animation-timing-function	Определяет кривую скорости для анимации.	3
backface-visibility	Определяет, должна ли быть видна задняя сторона элемента или нет.	3
Свойство	Описание	CSS
margin	Задает внешние отступы для элемента.	1
margin-bottom	Задает нижний внешний отступ для элемента.	1
margin-left	Задает левый внешний отступ для элемента.	1
margin-right	Задает правый внешний отступ для элемента.	1
margin-top	Задает верхний внешний отступ для элемента.	1
padding	Устанавливает внутренние отступы в элементе.	1
padding-bottom	Задает нижний отступ(внутреннее поле) для элемента.	1
padding-left	Задает левый отступ(внутреннее поле) для элемента.	1
padding-right	Задает правый отступ(внутреннее поле) для элемента.	1
padding-top	Задает верхний отступ(внутреннее поле) для элемента.	1
Свойство	Описание	CSS
bottom	Указывает направление смещения позиционированного элемента от нижнего края.	2
clear	Указывает с какой стороны элемента не допускаются плавающие элементы.	1
clip	Определяет видимую часть абсолютно позиционированных элементов.	2
display	Указывает, как будет отображаться элемент в браузере.	1
float	Определяет будет ли элемент плавающим.	1
left	Указывает направление смещения позиционированного элемента от левого края.	2
position	Определяет метод позиционирования элементов.	2
right	Указывает направление смещения позиционированного элемента от правого края.	2
top	Указывает направление смещения позиционированного элемента от верхнего края.	2
visibility	Определяет, является ли элемент видимым.	2
z-index	Указывает порядок расположения элементов по оси Z.	2
Свойство	Описание	CSS
height	Устанавливает фиксированную высоту.	1
max-height	Указывает максимальную фиксированную высоту.	2
max-width	Указывает максимальную фиксированную ширину.	2
min-height	Указывает минимальную фиксированную высоту.	2
min-width	Указывает минимальную фиксированную ширину.	2
overflow	Определяет, что предпринять, если содержимое элемента превосходит размер области элемента.	2
overflow-x	Указывает, обрезать или нет левый/правый край содержимого — если оно переполняет доступную область элемента для его содержания.	3
overflow-y	Указывает, обрезать или нет верхний/нижний край содержимого — если оно переполняет доступную область элемента для его содержания.	3
resize	Указывает, может ли размер элемента изменяться пользователем.	3
width	Устанавливает фиксированную ширину.	1
Свойство	Описание	CSS
border	Позволяет использовать основные свойства границ в одном объявлении.	1
border-bottom	Позволяет использовать значения основных свойств для нижней границы рамки в одном объявлении.	1
border-bottom-color	Задает цвет для нижней границы рамки.	1
border-bottom-left-radius	Позволяет сделать округлую границу нижнего левого угла.	3
border-bottom-right-radius	Позволяет сделать округлую границу нижнего правого угла.	3
border-bottom-style	Определяет стиль для нижней границы рамки.	1
border-bottom-width	Определяет ширину для нижней границы рамки.	1
border-color	Задает цвет для границ рамки элемента.	1
border-image	Позволяет использовать изображение в качестве рамки.	3
border-left	Позволяет использовать значения основных свойств для левой границы рамки в одном объявлении.	1
border-left-color	Задает цвет для левой границы рамки.	1
border-left-style	Определяет стиль для левой границы рамки.	1
border-left-width	Определяет ширину для левой границы рамки.	1
border-radius	Позволяет изменить форму углов.	3
border-right	Меняет внешний вид правой границы рамки.	1
border-right-color	Задает цвет для правой границы рамки.	1
border-right-style	Определяет стиль для правой границы рамки.	1
border-right-width	Задает ширину для правой границы рамки.	1
border-style	Задает стиль для границ рамки элемента.	1
border-top	Меняет внешний вид верхней границы рамки.	1
border-top-color	Задает цвет для верхней границы рамки.	1
border-top-left-radius	Позволяет сделать округлую границу верхнего левого угла.	3
border-top-right-radius	Позволяет сделать округлую границу верхнего правого угла.	3
border-top-style	Определяет стиль для верхней границы рамки.	1
border-top-width	Определяет ширину для верхней границы рамки.	1
border-width	Задает ширину для границ рамки элемента.	1
outline	Создает внешнюю границу вокруг элемента.	2
outline-color	Определяет цвет внешней границы.	2
outline-offset	Сдвигает внешнюю границу на заданное расстояние от края элемента.	3
outline-style	Указывает стиль для внешней границы.	2
outline-width	Указывает ширину для внешней границы.	2
Свойство	Описание	CSS
border-collapse	Определяет будут ли границы рамки объединены в одну.	2
border-spacing	Определяет расстояние между границами смежных ячеек и общей рамкой таблицы.	2
caption-side	Указывает расположение заголовка таблицы.	2
empty-cells	Регулирует видимость пустых ячеек в таблице.	2
table-layout	Задает алгоритм использования макета таблицы.	2
Свойство	Описание	CSS
color	Изменяет цвет текста.	1
direction	Определяет направление написания текста.	2
letter-spacing	Контролирует расстояние между символами в тексте.	1
line-height	Определяет межстрочный интервал(интерлиньяж).	1
quotes	Определяет тип кавычек для встроенных цитат.	2
text-align	Указывает способ выравнивания содержимого по горизонтали.	1
text-decoration	Добавляет некоторые элементы декорирования к тексту.	1
text-indent	Определяет отступ первой строки в тексте элемента.	1
text-overflow	Указывает, что должно произойти, когда текст переполняет содержащий элемент.	3
text-transform	Контролирует использование строчных и прописных букв в тексте.	1
vertical-align	Определяет вертикальное выравнивание в элементе.	1
white-space	Определяет способ обработки пробелов внутри элемента.	1
word-break	Определяет правила переноса для не-CJK сценариев.	3
word-spacing	Определяет ширину пробелов между словами.	1
word-wrap	Позволяет прерывать длинные слова для переноса на другую строку.	3
Свойство	Описание	CSS
perspective	Определяет, на сколько пикселей удален 3D элемент от точки обзора.	3
perspective-origin	Определяет, где располагается 3D элемент на осях x и y.	3
transform	Применяет 2D или 3D преобразование к элементу.	3
transform-origin	Позволяет изменить позицию преобразованных элементов.	3
transform-style	Определяет, как вложенные элементы будут отображаться в трехмерном пространстве.	3
transition	Управляет эффектом трансформации.	3
transition-delay	Указывает, когда должен начаться эффект трансформации.	3
transition-duration	Указывает продолжительность трансформации.	3
transition-property	Указывает название CSS свойства, для которого будет применен эффект трансформации.	3
transition-timing-function	Задает кривую скорости для эффекта трансформации.	3
Свойство	Описание	CSS
background	Устанавливает несколько или все значения свойств фона в одном объявлении.	1
background-attachment	Указывает будет ли фоновое изображение фиксированным.	1
background-clip	Определяет область в элементе, для которой задается фон.	3
background-color	Устанавливает цвет фона для элемента.	1
background-image	Устанавливает фоновое изображение в элементе.	1
background-origin	Указывает область позиционирования для фонового изображения.	3
background-position	Устанавливает начальное место для фонового изображения.	1
background-repeat	Задает, как фоновое изображение будет повторяться на экране.	1
background-size	Указывает размер для фонового изображения.	3
Свойство	Описание	CSS
font	Изменяет стандартный вид текста.	1
@font-face	Позволяет использование любого шрифта на странице.	3
font-family	Указывает шрифт или семейство шрифтов для текста.	1
font-size	Указывает размер для шрифта.	1
font-size-adjust	Контролирует размер неосновных шрифтов.	3
font-stretch	Регулирует ширину текста.	3
font-style	Позволяет изменять стиль текста.	1
font-variant	Конвертирует строчные буквы в прописные уменьшенного размера.	1
font-weight	Задает ширину символов текста.	1
Свойство	Описание	CSS
box-sizing	Позволяет заставить определенные элементы заполнять область определенным способом.	3
column-count	Разделяет элемент на колонки.	3
column-gap	Задает расстояние между колонками элемента.	3
column-rule	Свойство column-rule позволяет указать значения свойств column-rule-* (ширину, стиль и цвет) в одном объявлении.	3
column-rule-color	Определяет цвет границы между колонками.	3
column-rule-style	Определяет стиль границы между колонками.	3
column-rule-width	Указывает ширину границы между колонками.	3
columns	Позволяет использовать значения свойств column-width и column-count в одном объявлении.	3
column-span	Указывает элементу количество колонок для обхвата.	3
column-width	Определяет ширину колонок.	3
content	Определяет содержимое для псевдо-элементов ::before и ::after.	2
counter-increment	Увеличивает значение счетчика.	2
counter-reset	Устанавливает начальное значение счетчика.	2
cursor	Изменяет вид курсора мыши.	2
page-break-after	Определяет наличие или отсутствие разрыва страницы после заданного элемента.	2
page-break-before	Определяет наличие или отсутствие разрыва страницы перед заданным элементом.	2
page-break-inside	Определяет наличие или отсутствие разрыва страницы внутри элемента.	2

Основы CSS — Изучение веб-разработки

CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?

Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки — это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:

p {
  color: red;
}

Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles.

Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между <head> и </head> тегами:
```
<link href="styles/style.css" rel="stylesheet" type="text/css">
```
Сохраните index.html и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:

Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

Анатомия набора правил CSS

Давайте взглянем на вышеупомянутый CSS немного более подробно:

Вся структура называется набором правил (но зачастую для краткости «правило»). Отметим также имена отдельных частей:

Селектор (Selector): Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.
Объявление (Declaration): Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
Свойства (Properties): Способы, которыми вы можете стилизовать определённый HTML элемент (в данном случае, color является свойством для элементов <p>). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.
Значение свойства (Property value): Справа от свойства, после двоеточия, у нас есть значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color, помимо red).

Обратите внимание на важные части синтаксиса:

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

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

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Выбор нескольких элементов

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

Разные типы селекторов

Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:

Имя селектора	Что выбирает	Пример
Селектор элемента (иногда называемый селектором тега или типа)	Все HTML элемент(ы) указанного типа.	`p` Выбирает `<p>`
ID селектор	Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.	`#my-id` Выбирает `<p>` или `<a>`
Селектор класса	Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).	`.my-class` Выбирает `<p>` и `<a>`
Селектор атрибута	Элемент(ы) на странице с указанным атрибутом.	`img[src]` Выбирает `<img src="myimage.png">` но не `<img>`
Селектор псевдокласса	Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора.	`a:hover` Выбирает `<a>`, но только тогда, когда указатель мыши наведён на ссылку.

Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов (en-US).

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

Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент <link> где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами <head> и </head>). Это будет выглядеть примерно так:
```
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
```
Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.
Затем, удалите существующее правило в вашем style.css файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.
Добавьте следующие строки в нужное место, заменив строку placeholder актуальной font-family строкой, которую вы получили из Google Fonts. (font-family просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <html> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же font-size и font-family):
```
html {
  font-size: 10px; 
  font-family: placeholder: здесь должно быть имя шрифта из Google fonts
}
```
Примечание: Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.
Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела (<h2> (en-US), <li>, и <p>). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
```
h2 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
```

Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:

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

Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:

padding, пространство только вокруг контента (например, вокруг абзаца текста)
border, сплошная линия, которая расположена рядом с padding
margin, пространство вокруг внешней стороны элемента

В этом разделе мы также используем:

width (ширину элемента)
background-color, цвет позади контента и padding элементов
color, цвет контента элемента (обычно текста)
text-shadow: устанавливает тень на тексте внутри элемента
display: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)

Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.

Изменение цвета страницы

Разбираемся с телом

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Теперь для <body> элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:

width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для <html> элемента, но не стесняйтесь и экспериментируйте.
padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
border: 5px solid black; — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.

Позиционирование и стилизация нашего заголовка главной страницы

h2 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента <h2> (en-US) (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0;.

Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.

Здесь, мы использовали одно довольно интересное свойство — это text-shadow, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

Первое значение пикселей задаёт горизонтальное смещение тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.
Второе значение пикселей задаёт вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.
Третье значение пикселей задаёт радиус размытия тени — большее значение будет означать более размытую тень.
Четвёртое значение задаёт основной цвет тени.

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

Центрирование изображения

img {
  display: block;
  margin: 0 auto;
}

В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент <body> является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.

Примечание: Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для <body> (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы <body> и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путём установки свойства width для <img> элемента меньшего значения (например 400 px;).

Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

Консольные команды для CSS — полезные команды для КСС

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

Данные команды позволят вам «подкрутить» некоторые параметры игры так, чтобы вам было комфортнее играть. Например, можно отрегулировать установки соединения с игровым сервером, где вы так любите проводить свое свободное время, и тем самым уменьшить пинг. Также команды предоставляют возможность настроить графику и интерфейс для своего удобства.

Все представленные ниже команды, естественно, необходимо вводить в консоль; для удобства они разделены на несколько групп. Что такое консоль, как ее включить и открыть мы уже писали ранее в публикации Как включить и открыть консоль в Counter-Strike: Source. Кроме того, их можно привязать к определенным клавишам на клавиатуре или мышке для оперативного применения. О том, как это сделать, читайте в нашем материале Как забиндить кнопку в Counter-Strike: Source.

Полезные консольные команды для CSS

Регулировка прицела
Команда	Функция
cl_crosshairscale 500	Большое перекрестие прицела
cl_crosshairscale 5000	Делает прицел маленьким
cl_crosshairscale 50000	Превращает прицел в точку
cl_crosshairscale 1200	Возвращает прицел к стандартному размеру
cl_dynamiccrosshair 0	Отключает увеличение прицела при стрельбе «зажимом»
cl_crosshaircolor 1-5	Изменяет окрас прицела в зависимости от выбранного значения

Снижение пинга
Команда	Функция
cl_cmdrate 1	Понижает пинг на несколько миллисекунд
cl_cmdrate +65	Немного уменьшает пинг
cl_interp 0.033 – 0.055	Позволяет «сгладить» последствия высокого пинга. Конкретное значение устанавливается индивидуально.

Регулировка графики и настройка интерфейса
Команда	Функция
r_dynamic	Активирует или выключает динамическое освещение
fastsprites	Регулирует насыщенность клубов дыма. Подобрав оптимальное значение, можно повысить ФПС на старом ПК
scr_conspeed 600	Устанавливает скорость открытия консоли в миллисекундах
r_drawviewmodel	Выключает (0) или включает (1) показ модели оружия. С ее помощью можно увеличить обзор, освободив немного места на экране
hud_saytext_time	Устанавливает продолжительность отображения сообщения на дисплее в секундах
hud_centerid	Отображает ник игрока по центру (1) или внизу (0) экрана
hideradar	Убирает радар с экрана
drawradar	Включает радар
hud_fastswitch	Активирует (1) или отключает (0) быструю смену оружия
r_decals	Задает лимит на отображение декалей на карте
r_netgraph	Значения 0, 1 или 2 активируют показ сведений о текущем соединении с сервером
scr_printspeed	Устанавливает скорость вывода сообщений игроков в миллисекундах
gl_max_size	Задает лимит на размер текстур, помогая старым машинам легче обрабатывать графику

Другие команды
Команда	Функция
cl_upspeed	Задает скорость, с которой игрок поднимается по лестнице
cl_allowdownload	Позволяет (1) или запрещает (0) загрузку дополнительных ресурсов с сервера
cl_showfps	Показывает ФПС на экране

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

Материал опубликован 23.04.2020. Любое копирование без нашего ведома строго запрещено!

Css свойства оформления сайта: обзор самых основных

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

Что нужно знать для начала

Многие ошибочно называют свойства в css тегами. Так вот, это не совсем правильно. Теги – это команды html языка, и только его одного – все они пишутся в угловых скобках. В css же никаких тегов не нужно. Рассмотрим например, типичные правила для оформления веб-страницы, прописанные в таблице стилей:

body{
background: #fff;
color: #ccc;
…
}

body{

background: #fff;

color: #ccc;

…

}

Это типичный синтаксис этого языка. Тут все очень просто – вначале пишется селектор (body или любой другой), потом открываются фигурные скобки, в которые и записывают все необходимые свойства и их значения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Стили для текстового содержимого

Текст – всему голова на веб-странице. Для его оформления есть множество свойств. О них подробно написано в других статьях: Размер шрифта в html, Как задать цвет шрифта в html, Как задать шрифт в html.

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

Например, в css есть возможность определить расстояние между буквами и между отдельными словами. Это делается с помощью letter-spacing и word-spacing соответственно.

Отображение на экране

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

Итак, иногда такое поведение нужно изменить и для этого используется display и множество его значений, но я расскажу лишь о самых основных:

Block – элемент становится блочным (то есть приобретает блочные особенности, даже если он был строчным. С этих пор ему можно записывать размеры, нормально определять внешние отступы и т.д.)

Inline- преобразование в строчный элемент.

Inline-block – блочно-строчный тип. Это такое поведение, при котором элемент сохраняет свои блочные свойства, но при этом может стать в одну строку с другими блоками, если им тоже прописано inline-block и им хватает места по ширине. Стоит помнить, что по умолчанию блок занимает в родителе все свободное место по ширине, потому нужно вручную определить ширину для него (абсолютную или относительную).

Table — преобразование элемента в таблицу (соответственно, есть также значения table-row и table-cell)

None – элемент исчезает со страницы и не оставляет никаких следов, как будто бы его на ней и не было.

Опять же, это не все значения, только самые основные.

Свойства размера

Блоки играют основную роль в создании сайта. Им нужно прописывать определенные размеры, это указывается с помощью таких свойств:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Width – ширина

Height – высота

Max-width, min-width – максимальная или минимальная ширина. Например, если указать блоку max-width, то эта ширина не будет жесткой, она сможет меняться в зависимости от размеров окна. Если же указать и min-width, то тогда блок не сможет стать уже, чем указанный размер. Такое же можно прописать и для высоты, но это делают гораздо реже.

Также на размеры блочных элементов могут повлиять дополнительные параметры. Например, внутренние отступы. Они задаются с помощью слова padding и значения в пикселях (но можно и в другой величине). Если нужно задать отступ только для одной стороны, можно указать это, дописав к padding- через дефис нужную сторону (left, right и т.д.)

Например, если мы определили ширину контейнера в 600 пикселей, а потом добавили внутренние отступы по бокам в 20 пикселей, то реальная новая ширина составит 640px. Если вы не хотите, чтобы размеры добавлялись, можно воспользоваться таким приемом:

*{
box-sizing: border-box;
}

box-sizing: border-box;

}

В итоге теперь, когда вы будете определять ширину через width, в нее автоматически будут включаться внутренние отступы и рамка. Рамку задают с помощью параметра border. Ее тоже можно определить как для всех сторон, так и для каждой отдельно. Синтаксис таков: border: ширина стиль цвет;

Соответственно, записав так:

div{border: 3px solid blue;}

К блокам добавляется синяя рамка со всех сторон толщиной 3 пикселя с каждой. Суммарно ширина увеличивается на 6 пикселей, а если вы не хотите этого, нужно использовать то самое box-sizing.

Цвет и фон

Это основные параметры, которые отвечают за восприятие нами информации. В значении в этим свойствам записывается одно и то же – цвет, который можно определить с помощью ключевых слов, в шестнадцатеричном коде или каком-то цветовом формате (чаще всего rgb). Единственное отличие – цвет определяется с помощью свойства color, а фон – с помощью background.

CSS стили внутри тега – так тоже можно

Правильно будет создавать отдельный файл формата css и в нем писать все необходимые стили, но также существует возможность встроить все стили в html, в один тег. Этот тег – style. Он парный, писать его нужно обязательно в пределах тега head. Используется так:

<style>

font-size: 14px;

}

… другие стили

</style>

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Команды Counter-Strike Source (CSS). Полезные консольные команды для СSS v34, v81.

//Z — Заперещено к изменению
//R — Рекомендуемые параметры
//D — Значение по умолчанию
//? — Не знаю
//ai
ai_expression_optimization «1» // Скрывать отображение лица пока его не видишь. (!D «0»)
ai_report_task_timings_on_limit «0» // ? (!D «0»)
ai_think_limit_label «0» // ? (!D «0»)

//budget
budget_averages_window «0» // Число фреймов для подсчета при отображении средней частоты кадров панели (!D «30»)
budget_background_alpha «128» // Прозрачность панели
budget_bargraph_background_alpha «128» // Прозрачность панели (!D «128»)
budget_bargraph_range_ms «16.6666666667» // Граница диаграммы в секундах (!D «16»)
budget_history_numsamplesvisible «100» // Количество сегментов для отрисовки диаграммы
budget_history_range_ms «5» // Граница диаграммы в секундах (!D «5»)
budget_panel_bottom_of_history_fraction «.25» // ?
budget_panel_height «384» // Высота панели в пикселах
budget_panel_width «512» // Ширина панели в пикселах
budget_panel_x «0» // Позиция x окна от левого края экрана
budget_panel_y «50» // Позиция y окна от левого края экрана
budget_peaks_window «30» // Количество фреймов для подсчета отображения окна статистики
budget_show_averages «0» // Выключить среднее занчение в статистике
budget_show_history «1» // Включает историю графики
budget_show_peaks «1» // Включает отображения пиков в статистике

bugreporter_uploadasync «0» // Загрузить приложения асинхронно (!D «0»)

//cc
cc_lang «» // Язык субтитров (по умолчанию – язык пользовательского интерфеса)
cc_linger_time «1.0» // Время задержки субтитров.
cc_predisplay_time «0.25» // Задержка перед отображением субтитров.
cc_subtitles «0» // Если включено, то звуковые эффекты не будут отображаться в субтитрах, только речь (например, не будут отображаться звуки ранения игрока).

//cl Общие настройки клиента
cl_allowdownload «1» // Скачивание карт, моделей и декалей с сервера при подключении
cl_allowupload «1» // Загрузка карт, моделей и декалей на сервер при подключении
cl_autohelp «0» // Выключить подсказки (!D.»1″)
cl_autowepswitch «0» // Отключить автоматическую смену подобранного оружия (!D.»1″)
cl_bob «0.002» // Измеряет количество подскакиваний изображения, когда игрок бежит (!Z «0.002»)
cl_bobcycle «0.8» // Устанавливает частоту раскачивания изображения у игрока при беге (!Z «0.8»)
cl_bobup «0.5» // Устанавилвает количество «подскакиваний» изображения игрока при беге (!Z «0.5»)
cl_burninggibs «0» // Не поджигать от взрыва тела мертвых игроков.
cl_buy_favorite_nowarn «0» // ?
cl_buy_favorite_quiet «0» // ?
cl_c4progressbar «1» // Показывать процесс разминирования (!D.»1″)
cl_c4dynamiclight «0» // Отключить мигающий динамичный свет С4.
cl_chatfilter_version «1» // ?
cl_chatfilters «63» // Фильтр чата
cl_clanid «0» // Включить отображение клан-тега
cl_class «default» // ?
cl_clearhinthistory «1» // Очищает память подсказок на стороне клиента.
cl_cmdrate «67» // Количество пакетов, которые клиент может отослать серверу.
cl_crosshairalpha «300» // Прозрачность прицела. (!D.»200″)
cl_crosshaircolor «0» // ?
cl_crosshaircolor_b «50» // Цвет прицела (B)
cl_crosshaircolor_g «250» // Цвет прицела (G)
cl_crosshaircolor_r «50» // Цвет прицела (R)
cl_crosshairscale «1550» // Размер прицела. (!D.»0″)
cl_crosshairsize «3» // Размер прицела. (!D.»6″)
cl_crosshairthickness «0.1» // Толщина прицела. (!D.»0.5″)
cl_crosshairusealpha «1» // ?
cl_debugrumble «0» // Отключает Включает «Rumble» отладки.
cl_detaildist «1200» // Определяет диапазон, в которых подробно указаны реквизиты (!D.»1200″)
cl_detailfade «400» // Определяет дистанцию, на которой реквизиты начинают исчезать.
cl_detail_avoid_force «0.0» // ? (!D.»0″)
cl_detail_avoid_radius «0» // Радиус на котором будет виден всякий хлам.
cl_detail_avoid_recover_speed «0» // ? (!D. «0»)
cl_detail_max_sway «0» // Расстояние на котором будет виден мусор.
cl_disablefreezecam «1» // ?
cl_disablehtmlmotd «1» // ?
cl_downloadfilter «all» // Определяет, какие файлы могут быть загружены с сервера (all, none, nosounds).
cl_drawhud «1» // Включить меню HUD (!R «1»)
cl_drawmonitors «0» // ?
cl_dynamiccrosshair «1» // Включение динамического прицела — расширяется на ходу и в прыжке
cl_ejectbrass «1» // Показ отстрелянных гильз.
cl_extrapolate «1» // Простое линейное предсказание позиций объектов на основе истории их поведения ранее.
cl_extrapolate_amount «0.20» // Экстраполяция совершается только для потери пакетов до 0.20 секунды
cl_forcepreload «1» // Загрузка информации о текстурах и моделях в начале карты. (!D.»0″)
cl_hudhint_sound «1» // ?
cl_idealpitchscale «0.8» // ?
cl_interp «0.0152» // Временной промежуток, через который происходит интерполяция
cl_interp_all «0» // Включить оптимизацию интерполяции списка (?)
cl_interp_npcs «0» // Интреполяция позиций NPC запустившего несколько секунд назад
cl_interp_ratio «2» // Число промежутков между «интерполированием» мира. (!D. «2»)
cl_lagcompensation «1» // Производит компенсацию лагов на стороне сервера.
cl_language «russian» // Язык игры (!D. «english» )
cl_legacy_crosshair_recoil «0» // ?
cl_legacy_crosshair_scale «1» // Вернуть стандартное исчесление размера прицела (1).
cl_locationalpha «150» // ?
cl_logofile «materials/vgui/logos/sitemap.vtf» // Путь к твоему спрею
cl_minmodels «0» // Отображать все модели терорристов и контр-терорристов. (!Z «0»)
cl_min_t «2» // Отображать игроков терорристов только 2 скином. Действует только с командой (cl minmodels «1»)
cl_min_ct «1» // Отображать игроков контр-терорристов только 1 скином. Действует только с командой (cl minmodels «1»)
cl_mouselook «1» // Установите значение 1, чтобы оглядываться при помощи мыши, 0 – при помощи клавиатуры.
cl_new_impact_effects «0» // Отключить пыль, песок и другие погодные эффекты. (!D. «0»)
cl_nowinpanel «0» // Используются для включения таблички победы в которой в конце раунда отображается победившая команда лучший игрок и забавный факт
cl_observercrosshair «1» // Отображать прицел при полетах спектатором
cl_playerspraydisable «0» // Включить отображение спреев игроков
cl_pred_optimize «2» // Оптимизация для не копирования данных если небыло обновление сети (1), а также для не переадресации если небыло ошибок (2).
cl_predict «1» // Производит прогнозирование движений игрока на стороне клиента. (!D. «1»)
cl_predictweapons «1» // Производит прогнозирование эффектов оружия на стороне клиента. (!D. «1»)
cl_phys_props_max «200» // Количество одновременно просчитываемых мелких предметов.
cl_phys_timescale «1.0» // Устанавливает масштаб времени на стороне клиента (!D. «1.0»)
cl_radar_locked «0» // Фиксация радара в одном положении.
cl_radaralpha «200» // Прозрачность радара (!D. «200»)
cl_radartype «0» // Стандатный тип радара
cl_ragdoll_collide «0» // Отключает просчет пересекающихся мертвых тел
cl_ragdoll_physics_enable «1» // Включает прорисовку мертвых тел (!R «1»)
cl_resend «6» // Время через, которое будет послан пакет если предыдущий не дошел
cl_righthand «1» // Оружие в правой руке
cl_round_win_fade_time «1.5» // ?
cl_rumblescale «1.0» // Шкала чувствительности Rumble эффекта.
cl_scalecrosshair «1» // Включает возможность изменения размера

//cl_scoreboard Таблица результатов
cl_scoreboard_clan_ct_color_red «150» // Цвет клан игрока контр-терорристов (R) (!D. «150»)
cl_scoreboard_clan_ct_color_green «200» // Цвет клан игрока контр-терорристов (G) (!D. «200»)
cl_scoreboard_clan_ct_color_blue «255» // Цвет клан игрока контр-терорристов (B) (!D. «255»)
cl_scoreboard_clan_t_color_red «240» // Цвет клан игрока терорристов (R) (!D. «240»)
cl_scoreboard_clan_t_color_green «90» // Цвет клан игрока терорристов (G) (!D. «90»)
cl_scoreboard_clan_t_color_blue «90» // Цвет клан игрока терорристов (B) (!D. «90»)
cl_scoreboard_ct_color_red «150» // Цвет игрока контр-терорристов (R) (!D. «150»)
cl_scoreboard_ct_color_green «200» // Цвет игрока контр-терорристов (G) (!D. «200»)
cl_scoreboard_ct_color_blue «255» // Цвет игрока контр-терорристов (B) (!D. «255»)
cl_scoreboard_t_color_red «240» // Цвет игрока терорристов (R) (!D. «240»)
cl_scoreboard_t_color_green «90» // Цвет игрока терорристов (G) (!D. «90»)
cl_scoreboard_t_color_blue «90» // Цвет игрока терорристов (B) (!D. «90»)
cl_scoreboard_dead_clan_color_red «125» // Цвет клан убитого игрока (R) (!D. «125»)
cl_scoreboard_dead_clan_color_green «125» // Цвет клан убитого игрока (G) (!D. «125»)
cl_scoreboard_dead_clan_color_blue «125» // Цвет клан убитого игрока (B) (!D. «125»)
cl_scoreboard_dead_color_red «125» // Цвет убитого игрока (R) (!D. «125»)
cl_scoreboard_dead_color_green «125» // Цвет убитого игрока (G) (!D. «125»)
cl_scoreboard_dead_color_blue «125» // Цвет убитого игрока (B) (!D. «125»)

cl_show_achievement_popups «1» // Включить уведомления при получения достижения.
cl_show_splashes «1» // Брызги воды
cl_showerror «0» // Закрыть окно ошибки предсказания
cl_showfps «0» // Не отображать индикатор FPS вверху экрана
cl_showhelp «1» // Помощь на экране
cl_showpluginmessages «1» // Позволяет плагинам показывать вам сообщения.
cl_smooth «1» // Сглаживание ошибок предсказания.
cl_smoothtime «0.1» // Время, нужное для сглаживания ошибок предсказания.
cl_soundfile «sound/player/jingle.wav» // Файл звука звона.
cl_spec_mode «4» // Режим спектатора.
cl_team «default» // Выбор команды при осуществленном подключении к игре
cl_threaded_bone_setup «1» // Параллельная обработка «C_BaseAnimating». (!D.»0″)
cl_timeout «25» // Если сервер не отвечает в течение указанного времени, происходит автоматическое отключение. (!D «30»)
cl_updaterate «67» // Количество пакетов, которые клиент может получить от сервера.
cl_wpn_sway_interp «0.1» // ? (!D. «0.1»)
cl_wpn_sway_scale «1.0» // Амплитуда анимации модели оружия при стрельбе. (!D. «1.0»)

closecaption «0» //
commentary «0» //
commentary_firstrun «0» //
con_enable «1» // Активация консоли (!D. «1»)
crosshair «1» // Включить прицел (!D. «1»)

//dsp Звук
dsp_enhance_stereo «1» // Эффект расширения стереобазы.
dsp_slow_cpu «0» // Высокое качество звука
dsp_spatial «40.000000» // Громкость пространства
dsp_speaker «55.000000» // Громкость разговоров через микрофон.
dsp_volume «1.0» // Включить звук
dsp_water 14.000000 // Громкость воды

fps_max «121» // Ограничение FPS в 121 фрейм
func_break_max_pieces «0» // Кол-во осколков от всякого барахла типа ящиков, бутылок, бочек. (!D.»15″)
g15_update_msec «250» // ?
gl_clear «0» // Отключить механизм заглаживания стыков между текстурами

//nud Настройки меню показа времени, жизни и других меню
hud_achievement_count «5» // Максимальное кол-во достижений, которые могут быть показаны на экране.
hud_achievement_description «1» // Показать полное описание достижений.
hud_achievement_glowtime «0» // Время свечения рамочки достижения.
hud_classautokill «1» // ?
hud_deathnotice_time «3» // Время показа сообщений об убийствах вверху экрана (!D.»6″)
hud_draw_fixed_reticle «0» // ?
hud_drawhistory_time «3» // Как долго на экране остаются информационные картинки: покупки оружия и т.д. (!D. «5»)
hud_fastswitch «1» // Быстрое переключение оружия без подтверждения (!D. «0»)
hud_freezecamhide «0» // Выключить показ сообщения «Вас убили».
hud_reticle_maxalpha «255» // ? (!D. «255»)
hud_reticle_minalpha «125» // ? (!D. «125»)
hud_reticle_alpha_speed «700» // ? (!D. «700»)
hud_saytext_time «10» // Время показа сообщений игроков в чате (!D. «12»)
hud_showtargetid «1» // ?
hud_takesshots «0» // Авто скриншот «tab» в конце карты.

//joy Джойстик
joy_accelmax «1.0»
joy_accelscale «0.6»
joy_advanced «0»
joy_advaxisr «0»
joy_advaxisu «0»
joy_advaxisv «0»
joy_advaxisx «0»
joy_advaxisy «0»
joy_advaxisz «0»
joy_autoaimdampen «0»
joy_autoaimdampenrange «0»
joy_axisbutton_threshold «0.3»
joy_diagonalpov «0»
joy_display_input «0»
joy_forwardsensitivity «-1»
joy_forwardthreshold «0.15»
joy_inverty «0»
joy_lowend «1» // Определяет величину физического диапазона контроллера, который Вы хотите исключить как «внутреннюю зону».
joy_lowmap «1» // Определяет величину действительного диапазона контроллера, сопоставленную «внутренней зоне».
joy_movement_stick «0»
joy_name «joystick» // Название вашего джойстика.
joy_pitchsensitivity «1»
joy_pitchthreshold «0.15»
joy_response_look «0» // Режим отклика джойстика для взгляда
joy_response_move «1» // Режим отклика джойстика для передвижения
joy_sidesensitivity «1» // Определяет величину передвижения джойстика, необходимую для максимальной скорости передвижения из стороны в сторону.
joy_sidethreshold «0.15» // Определяет «мертвую зону» для передвижения из стороны в сторону.
joy_wingmanwarrior_centerhack «0» // Исправляет проблему центрирования с джойстиком Wingman Warrior.
joy_wingmanwarrior_turnhack «0» // Исправляет проблему вращения с джойстиком Wingman Warrior.
joy_xcontroller_cfg_loaded «0»
joy_yawsensitivity «-1» // Определяет скорость или коэффициент, используемый при обзоре влево или вправо.
joy_yawthreshold «0.15» // Определяет «мертвую зону» для обзора влево или вправо.
joystick «0» // Выключить джойстик

lod_transitiondist «800» // Расстояние на котором «lod» снижается на объектах.
lookspring «0» // Выключить автоматическую центровку прицела
lookstrafe «0» // Отключить возможность стрейфиться мышкой

//m Мышь
m_customaccel «0» // Пользовательское ускорение мыши
m_customaccel_exponent «1» // Измерение коэффициента пропорциональности акселерации.
m_customaccel_max «0» // Максимальный коэффициент пропорциональности акселерации.
m_customaccel_scale «0.04» // Пользовательское значение акселерации мышки.
m_filter «0» // Режим фильтрации (сглаживания) мыши.
m_forward «1» // Устанавливает множитель чуствительности скорости движения вперед мыши.
m_mouseaccel1 «0» // Windows ускорение мышки, первоначальный порог (2x движения).
m_mouseaccel2 «0» // Windows ускорение мышки, средний порог (4x движения).
m_mousespeed «1» // Коэфициент ускорения мыши в Windows
m_pitch «0.022» // Мышка инверсированая (Отключено) (!D. «0.022»)
m_rawinput «0» // Способ интерпритации сигналов мышки (!D.»0″)
m_side «0.8» // Устанавливает множитель чувствительности скорости перемещения у мыши.
m_yaw «0.022» // Устанавливает множитель чувствительности скорости поворотов влево-вправо.

//mat Настройки графики
mat_aaquality «0» // 2x MSAA } 16x CSAA – mat_aaquality «4» & mat_antialias «4»; 8x MSAA – mat_aaquality «0» & mat_antialias «8»; 16xQ CSAA — mat_aaquality «2» & mat_antialias «8»;
mat_antialias «2» // Сглаживание 2x } 2x MSAA – mat_aaquality «0» & mat_antialias «2»; 4x MSAA – mat_aaquality «0» & mat_antialias «4»; 8x CSAA – mat_aaquality «2» & mat_antialias «4»;
mat_autoexposure_max «3» // Максимальная яркость экрана.
mat_autoexposure_min «0.5» // Минимальная яркость экрана.
mat_bloomscale «1» // BLOOM эффект
mat_bufferprimitives «1» // Кэширование «примитивов»
mat_bumpmap «1» // (!D.»1″)
mat_clipz «1» // Ликвидирует проблемы с DirectX9 у некоторых видеокарт nVidia.
mat_colorcorrection «1» // Включена коррекция цвета
mat_compressedtextures «1» // Сжатие текстур.
mat_dxlevel «95» // DirectX 9c (!D. «0»)
mat_envmapsize «128» // История изображений в не достижимых разделах карты, таких, как SkyBox.
mat_fastnobump «1» // Включить быстрый алгоритм отрисовки объемных текстур
mat_fastspecular «1» // Алгоритм отрисовки гладких поверхностей.
mat_forceaniso «2» // Азатропная фильтрация 2
mat_forcemanagedtextureintohardware «1» // Очищение текстур в видеопамяти.
mat_hdr_level «2» // Включить HDR
mat_mipmaptextures «1» // Изменение качества текстур с расстоянием.
mat_monitorgamma «2.6» // Гамма.(D «2.2»)
mat_monitorgamma_tv_enabled «0» //
mat_motion_blur_forward_enabled «0» // Размытие при движении.
mat_parallaxmap «1» // (!D.»1″)
mat_picmip «0» // Высокая детализация текстур
mat_queue_mode «-1» // Включить многоядерный рендеринг
mat_reducefillrate «0» // Высокие Шейдеры
mat_software_aa_blur_one_pixel_lines «0.0» // Как много программного сглаживания требуется, чтобы сгладить линию толщиной в один пиксель
mat_software_aa_edge_threshold «0.5» // Регулирует чувствительность обнаружения краев шейдеров у программного сглаживания – меньшее значение сгладит больше краев, большее значение сгладит меньше. (def 1)
mat_software_aa_quality «0» // Качество программного сглаживания
mat_software_aa_strength «0.000000» // Производит программный А-А пост процесс
mat_software_aa_strength_vgui «1.000000» // ?
mat_software_aa_tap_offset «0.5» // Меньшее значение, сделает изображение более четкое, значение выше сделает его размытым.
mat_specular «1» // Включить отражение поверхностей в том числе оптика.
mat_texture_list_content_path «» // ?
mat_tonemap_algorithm «0» // Старый алгоритм прорисовки карт
mat_trilinear «1» // Трёхлинейное фильтрование.
mat_use_compressed_hdr_textures «1» // Сжатие текстур, используемых с HDR.

mem_force_flush «0» // Отключить Форсировать сброс кэша с незаблокированными ресурсами при каждом размещении (!R»0″)
mem_max_heapsize «2048» // ?(!D. «256»)
mem_min_heapsize «128» // ?(!D. «48»)

mod_forcedata «1» // Форсировать все файловые данные модели в кэш при загрузке модели (!D. «1»)
mod_forcetouchdata «1» // ? (!D «1»)
mp_decals «200.000000» // Количество декалей на карте за один раунд (!D. «200»)
muzzleflash_light «1» // Динамический (отраженный) свет от вспышек.
name «ROY» // Ваш ник

//net Настройки соединения
net_channels «0» // Отобразить информацию о канале в консоле (та же самая информация что и у команды net_graph).
net_fakeloss «0» // Имитация потери пакетов в процентом количестве (!R «0»)
net_graph «0» // Выключить панель информации о соединении
net_graphheight «40» // Высота net_graph панели
net_graphmsecs «400» // Изменения скорости обновления блока
net_graphpos «1» // Место положение net_graphа.
net_graphproportionalfont «0.5» // Размер net_graph
net_graphshowinterp «1» // Показывает строку интерполяции
net_graphshowlatency «1» // Рисует график Ping и «пакетов»
net_graphsolid «1» // Выключить прозрачность «лагомера»
net_graphtext «1» // Включить текст в блоке
net_maxfilesize «32» // Максимальный размер файла для скачивания с сервера
net_maxfragments «1260.000000» // Максимальная фрагментация в байтах на пакет
net_maxroutable «1260» // Максимальная фрагментация в байтах на пакет
net_scale «5» // Размер графика

npc_height_adjust «1» // ? (!D. «1»)
option_duck_method «1» // ? (!D. «1»)

//overview Карта(радар)
overview_alpha «1.0» // Прозрачность карты при обзоре.
overview_health «1» // Отображает здоровье игрока при обзоре карты.
overview_locked «1» // Закрепляет угол обзора карты.
overview_names «1» // Отображает имена игроков при обзоре карты.
overview_preferred_mode «1» // Включить предпочтительный режим Обзор
overview_preferred_view_size «600» // (!D. «600»)
overview_tracks «1» // Отображает пути игроков при обзоре карты.

password «» // Текущий пароль доступа к серверу (!D. «»)
props_break_max_pieces «0» // Количество осколков от мелких предметов (!D. «-1»)
props_break_max_pieces_perframe «0» // Максимальное количество мелких предметов в одном кадре (!D. «-1»)

rate «25000» // Количество байтов, которые клиент может получить от сервера за секунду.

//r Настройка графики
r_3dnow «0» // Включает поддержку технологии 3DNOW (только для AMD).
r_3dsky «1» // Включить дополнительные текстуры неба и нарисованный за пределами карты пейзаж
r_ambientboost «1» // Ускорение окружающих условий.
r_ambientfactor «5» // Ускоряет куб окружающей среды на величину не более указанного значения. (!R»5″)
r_ambientmin «0.3» // Порог, выше которого куб окружающей среды не ускорится
r_decal_cullsize «0» // Декали будут исчезать, если вы ушли из зоны их видимости или находитесь слишком далеко.
r_decals «200» // Временной отрезок, на время которого «деколы» будут видны. (!D. «2048»)
r_decalstaticprops «1» // Статическая термоаппликация.
r_dopixelvisibility «0» // Отключает «чёрточки» на источниках освещения.
r_drawdetailprops «0» // Выключает детальную прорисовку мелких структур на поверхностях объектов.
r_drawflecks «0» // Выключает прорисовку мелких осколков и пыли вокруг точки вхождения пули.
r_drawmodeldecals «0» // Выключает «Деколы» на моделях игроков.
r_drawmodelstatsoverlaymax «1.5» // ?
r_drawmodelstatsoverlaymin «0.1» // ?
r_eyegloss «1» // ?
r_eyemove «1» // ?
r_eyeshift_x «0» // ?
r_eyeshift_y «0» // ?
r_eyeshift_z «0» // ?
r_eyesize «0» // ?
r_fastzreject «-1» // Автоматически включает ускоренный алгоритм просчета перспективы, если поддерживается видеоускорителем
r_lightaverage «1» // Выключить усреднение света.
r_lod «-1» // Степень детализации объектов и текстур. -1 -Автоматическая настройка
r_maxmodeldecal «50» // Максимальное количество «деколей», которые могут быть сделаны на модель.
r_queued_decals «0» // Выключить просчет декал рендеринг установок. (!R «0»)
r_propsmaxdist «800» // Максимальное расстояние отрисовки мелких предметов.
r_renderoverlayfragment «1» // Включает наложенные на текстуры обьекты
r_rootlod «0» // Высокая детализация моделей в игре
r_shadowmaxrendered «32» // Макс. количество показываемых теней.
r_shadowrendertotexture «1» // Высокое качество Прорисовки теней
r_shadows «1» // Включить динамические тени от объектов и моделей
r_spray_lifetime «0» // Сколько раундов будет виден спрей у игроков
r_sse2 «1» // Включает поддержку процессоров SSE2.
r_unloadlightmaps «1» // Перезагружает текстуры и освещения.
r_waterforceexpensive «1» // Отражение в воде отражать все

rope_smooth «1» // Включить сглаживание отрисовки проводов

sensitivity «1.0» // Скорость передвижения прицела
zoom_sensitivity_ratio 1.0 // Скорость передвижения прицела с оптикой

//scene
scene_showfaceto «0» // При проигрывании сцены, не отображать направления фасетных событий (!D «0»)
scene_showlook «0» // При проигрывании, не отображать направления событий просмотра (!D «0»)
scene_showmoveto «0» // Не отображать конечную точку во время движения (!D «0»)
scene_showunlock «0» // ?

sk_autoaim_mode «1» // ?
skill «1»

//snd Настройки звука
snd_mixahead «0.1» // Размер звукового буфера. (!Z «0.1»)
snd_duckerattacktime «0.5»
snd_duckerreleasetime «2.5»
snd_duckerthreshold «0.15»
snd_ducktovolume «0.55»
snd_legacy_surround «0»
snd_musicvolume «0.000000» // Громкость музыки
snd_mute_losefocus «1»
snd_pitchquality «1»

spec_scoreboard «0»
suitvolume «0.25»

//sv Серверные команды
sv_backspeed «0.6»
sv_forcepreload «1» // Подключение игроков доступно только после полной загрузки сервера.
sv_lan «0» // Интернет сервер
sv_log_onefile «0»
sv_logbans «0»
sv_logecho «1»
sv_logfile «1»
sv_logflush «0»
sv_logsdir «logs»
sv_noclipaccelerate «5»
sv_noclipspeed «5»
sv_nostats «0» // Отображать звезды в статистике
sv_pvsskipanimation «1»
sv_skyname «tides»
sv_specaccelerate «5»
sv_specnoclip «1»
sv_specspeed «1.5»
sv_unlockedchapters «1»
sv_visiblemaxplayers «32» // Максимальное число игроков на карте
sv_voiceenable «1»

//texture
texture_budget_background_alpha «128»
texture_budget_panel_bottom_of_history_fraction «.25»
texture_budget_panel_height «284»
texture_budget_panel_width «512»
texture_budget_panel_x «0»
texture_budget_panel_y «450»

//Source TV
tv_nochat «0» // Получать сообщения чата от других зрителей SourceTV
tv_autorecord «0» // Автоматически записывает все игры при просмотре Source TV (!D. «0»)

vgui_message_dialog_modal «1»

//violence Настройки показа крови
violence_ablood «1» // Чужая кровь.
violence_agibs «1» // Чужие лица.
violence_hblood «1» // Человеческая кровь.
violence_hgibs «1» // Человеческие лица.

//voice Голосовые настройки
voice_avggain 0.5 // Усреднение голосовой волны (удаление шума).
voice_enable «1» // Включить Голосовой чат.
voice_forcemicrecord «1» // Включить запись микрофона.
voice_loopback «0» // Выключить воспроизведение голоса на ряду с другими игроками.
voice_modenable «1» // Голосовой чат в моде.
voice_overdrive «2.5» // Ослабляет все звуки в 2.5 раза, когда кто-то говорит.
voice_recordtofile «0» // Отключить микрофоную запись в файл.
voice_scale «1» // Уровень голоса для всех
volume «1.0» // Громкость общего звука

//vprof
vprof_graphheight «256»
vprof_graphwidth «512»
vprof_unaccounted_limit «0.3»
vprof_verbose «1»
vprof_warningmsec «10»

windows_speaker_config «1» //Тип динамиков Наушники
xbox_autothrottle «1»
xbox_throttlebias «100»
xbox_throttlespoof «200»

Ссылка CSS

align-content	Задает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все доступное пространство
align-items	Задает выравнивание элементов внутри гибкого контейнера
выровнять сам	Задает выравнивание для выбранных элементов внутри гибкого контейнера
все	Сбрасывает все свойства (кроме unicode-bidi и direction)
анимация	Сокращенное свойство для всех свойств анимации — *
задержка анимации	Определяет задержку начала анимации
анимация-направление	Определяет, должна ли анимация воспроизводиться вперед, назад или попеременно
продолжительность анимации	Определяет, сколько времени должно занять анимация для завершения одного цикла
режим заливки анимации	Задает стиль элемента, когда анимация не воспроизводится (ранее он начинается, после того, как он заканчивается, или и то, и другое)
количество итераций анимации	Указывает, сколько раз должна воспроизводиться анимация
имя-анимации	Задает имя для анимации @keyframes
состояние воспроизведения анимации	Указывает, запущена или приостановлена анимация
функция синхронизации анимации	Определяет кривую скорости анимации
задняя видимость	Определяет, должна ли быть видна задняя грань элемента, когда он смотрит на пользователя.
фон	Сокращенное свойство для всех свойств фона — *
фон-приставка	Устанавливает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксированным.
фоновый режим наложения	Определяет режим наложения каждого фонового слоя (цвет / изображение)
фоновая клипса	Определяет, насколько далеко должен распространяться фон (цвет или изображение) в пределах элемент
цвет фона	Определяет цвет фона элемента
фоновое изображение	Задает одно или несколько фоновых изображений для элемента
фон-происхождение	Определяет исходную позицию фонового изображения
фон-позиция	Определяет положение фонового изображения
фон-повтор	Устанавливает, будет ли / как будет повторяться фоновое изображение
размер фона	Определяет размер фоновых изображений
граница	Сокращенное свойство для border-width, border-style и border-color
граница нижняя	Сокращенное свойство для border-bottom-width, border-bottom-style и нижний цвет границы
цвет нижней границы	Устанавливает цвет нижней границы
граница-нижний левый-радиус	Определяет радиус границы нижнего левого угла
граница-нижний-правый-радиус	Определяет радиус границы нижнего правого угла
с окантовкой снизу	Устанавливает стиль нижней границы
ширина по краю снизу	Устанавливает ширину нижней границы
граница-развал	Устанавливает, должны ли границы таблицы сворачиваться в одну границу или разделяться
цвет рамки	Устанавливает цвет четырех границ
бордюр	Сокращенное свойство для всех свойств border-image- *
граница-изображение-исход	Определяет величину, на которую область изображения границы выходит за пределы рамки
повтор изображения границы	Указывает, должно ли изображение границы повторяться, закругляться или растягиваться.
граница-изображение-фрагмент	Указывает, как нарезать изображение границы
border-image-source	Указывает путь к изображению, которое будет использоваться в качестве границы
ширина границы изображения	Задает ширину изображения границы
граница левая	Сокращенное свойство для всех свойств border-left- *
цвет рамки слева	Устанавливает цвет левой границы
рамка-левая	Устанавливает стиль левой границы
ширина рамки слева	Устанавливает ширину левой границы
граница-радиус	Сокращенное свойство для четырех границ — — радиус* свойств
граница правая	Сокращенное свойство для всех свойств border-right- *
рамка-правая	Устанавливает цвет правой границы
граница-правая	Устанавливает стиль правой границы
ширина рамки справа	Устанавливает ширину правой границы
расстояние между границами	Устанавливает расстояние между границами соседних ячеек
с бордюром	Устанавливает стиль четырех границ
кайма-верх	Сокращенное свойство для border-top-width, border-top-style и цвет верхней границы
цвет верхней границы	Устанавливает цвет верхней границы
граница, верхний левый радиус	Определяет радиус границы верхнего левого угла
граница-верхний-правый-радиус	Определяет радиус границы верхнего правого угла
с бордюром	Устанавливает стиль верхней границы
ширина до верхней границы	Устанавливает ширину верхней границы
ширина рамки	Устанавливает ширину четырех границ
нижняя	Устанавливает позицию элемента от нижней части родительского элемента
коробка-отделка-перерыв	Задает поведение фона и границы элемента при разрыве страницы или, для встроенных элементов, при разрыве строки.
тень	Добавляет одну или несколько теней к элементу
размер коробки	Определяет, как рассчитываются ширина и высота элемента: следует они включают отступы и границы, или нет
обрыв после	Указывает, должен ли происходить разрыв страницы, столбца или области после указанного элемента
перерыв до	Указывает, должен ли происходить разрыв страницы, столбца или области перед указанным элементом
взлом внутри	Указывает, должен ли происходить разрыв страницы, столбца или области внутри указанного элемента
сторона подписи	Задает размещение заголовка таблицы
каре	Определяет цвет курсора (курсора) во входных, текстовых или любых других редактируемый элемент
@charset	Определяет кодировку символов, используемую в таблице стилей
прозрачный	Определяет, что должно произойти с элементом, который находится рядом с плавающим элемент
зажим	Зажимает абсолютно позиционированный элемент
цвет	Устанавливает цвет текста
количество столбцов	Задает количество столбцов, на которые должен быть разделен элемент.
колонка-заполнитель	Определяет способ заполнения столбцов, сбалансированный или несбалансированный.
колонна-зазор	Определяет зазор между столбцами
правило столбца	Сокращенное свойство для всех свойств column-rule- *
столбец-правило-цвет	Определяет цвет правила между столбцами
стиль правила столбца	Задает стиль правила между столбцами
ширина правила столбца	Определяет ширину правила между столбцами
колонна-пролет	Указывает, сколько столбцов должен занимать элемент в
ширина столбца	Задает ширину столбца
столбца	Сокращенное свойство для ширины столбца и количества столбцов
содержание	Используется с псевдоэлементами: before и: after для вставки сгенерированного содержимого
счетчик	Увеличивает или уменьшает значение одного или нескольких счетчиков CSS
сброс счетчика	Создает или сбрасывает один или несколько счетчиков CSS
курсор	Указывает курсор мыши, который будет отображаться при наведении указателя на элемент
направление	Задает направление текста / направление письма
дисплей	Определяет, как должен отображаться определенный элемент HTML
фильтр	Определяет эффекты (например,грамм. размытие или смещение цвета) на элементе перед отображением элемента
гибкий	Сокращенное свойство для flex-grow, flex-shrink и гибкая основа недвижимость
гибкая основа	Задает начальную длину гибкого элемента
гибкое направление	Определяет направление гибких элементов
гибкий поток	Сокращенное свойство для свойств flex-direction и flex-wrap
гибкий рост	Определяет, насколько элемент будет расти относительно остальных
гибкая термоусадочная	Определяет, как элемент будет уменьшаться по сравнению с остальными
гибкая пленка	Указывает, должны ли гибкие элементы оборачиваться или нет.
с плавающей запятой	Определяет, должен ли элемент плавать влево, вправо или нет. все
шрифт	Сокращенное свойство для font-style, font-variant, font-weight, font-size / line-height и свойство font-family
@ font-face	Правило, позволяющее веб-сайтам загружать и использовать шрифты, отличные от «веб-безопасных» шрифтов
семейство шрифтов	Задает семейство шрифтов для текста
font-feature-settings	Позволяет управлять расширенными типографскими функциями в шрифтах OpenType
@ font-feature-values	Позволяет авторам использовать общее имя в font-option-alternate для функции, активированной по-разному в OpenType
font-kerning	Управляет использованием информации кернинга (расстояние между буквами)
переопределение языка шрифта	Управляет использованием глифов для конкретного языка в гарнитуре
размер шрифта	Задает размер шрифта текста
регулировка размера шрифта	Сохраняет читаемость текста при восстановлении шрифта
растяжка шрифта	Выбирает обычное, сжатое или расширенное начертание из семейства шрифтов.
стиль шрифта	Задает стиль шрифта для текста
шрифт-синтез	Элементы управления, отсутствующие шрифты (жирный или курсивный) могут быть синтезированы браузером
вариант шрифта	Указывает, должен ли текст отображаться мелким шрифтом
альтернативные варианты шрифтов	Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @ font-feature-values
варианты шрифтов	Управляет использованием альтернативных глифов для заглавных букв
вариант шрифта восточноазиатский	Управляет использованием альтернативных глифов для восточноазиатских шрифтов (например,г японский и китайский)
лигатуры вариантов шрифта	Управляет тем, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым применяется
вариант шрифта числовой	Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
шрифт-вариант-позиция	Управляет использованием альтернативных глифов меньшего размера, расположенных как верхний или нижний индекс относительно базовой линии шрифта.
font-weight	Задает толщину шрифта
разрыв	Сокращенное свойство row-gap и column-gap properties
сетка	Сокращенное свойство для строк шаблона сетки , столбцы-шаблон-сетки, области-шаблона-сетки, автоматические строки сетки, grid-auto-columns и grid-auto-flow properties
сетка	Либо указывает имя для элемента сетки, либо это свойство является сокращенным свойством для grid-row-start , grid-column-start , grid-row-end и grid-column-end недвижимость
сетка-автоматические столбцы	Задает размер столбца по умолчанию
сетка-автопоток	Указывает, как автоматически размещенные элементы вставляются в сетку
сетка автоматических рядов	Задает размер строки по умолчанию
сетка-столбец	Сокращенное свойство для свойств grid-column-start и grid-column-end
конец столбца сетки	Указывает, где закончить элемент сетки
сетка-столбец-зазор	Определяет размер промежутка между столбцами
сетка-столбец-начало	Указывает, где начать элемент сетки
сетка-зазор	Сокращенное свойство grid-row-gap и grid-column-gap properties
сетка-рядка	Сокращенное свойство для свойств grid-row-start и grid-row-end
конец ряда сетки	Указывает, где закончить элемент сетки
сетка-рядок-зазор	Определяет размер зазора между рядами
сетка-ряд-начало	Указывает, где начать элемент сетки
сетка-шаблон	Сокращенное свойство для grid-template-rows , grid-template-columns и сетка объекта
области шаблона сетки	Указывает, как отображать столбцы и строки с использованием именованных элементов сетки
столбцы шаблона сетки	Задает размер столбцов и количество столбцов в макете сетки.
рядов шаблонов сетки	Определяет размер строк в макете сетки
Знаки пунктуации	Указывает, можно ли помещать знак препинания за пределы строки.
высота	Устанавливает высоту элемента
дефиса	Устанавливает способ разбиения слов для улучшения компоновки абзацев
рендеринг изображений	Подсказывает браузеру, какие аспекты изображения наиболее важно сохранить при масштабировании изображения
@ импорт	Позволяет импортировать таблицу стилей в другую таблицу стилей
изоляция	Определяет, должен ли элемент создавать новое содержимое стека.
justify-content	Задает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство
осталось	Определяет левую позицию позиционируемого элемента
межбуквенный интервал	Увеличивает или уменьшает расстояние между символами в тексте
разрыв строки	Указывает, как / если разрывать строки
высота строки	Устанавливает высоту строки
в виде списка	Устанавливает все свойства списка в одном объявлении
изображение в стиле списка	Задает изображение в качестве маркера элемента списка
позиция стиля списка	Определяет положение маркеров пунктов списка (пунктов списка)
тип списка	Определяет тип маркера элемента списка
маржа	Устанавливает все свойства полей в одном объявлении
нижнее поле	Устанавливает нижнее поле элемента
поле слева	Устанавливает левое поле элемента
поле справа	Устанавливает правое поле элемента
верхняя маржа	Устанавливает верхнее поле элемента
маска	Скрывает элемент, маскируя или обрезая изображение в определенных местах
маскировочная	Указывает, используется ли элемент маски в качестве маски яркости или альфа-маски.
макс. Высота	Устанавливает максимальную высоту элемента
макс. Ширина	Устанавливает максимальную ширину элемента
@media	Устанавливает правила стиля для различных типов / устройств / размеров носителей
мин. Высота	Устанавливает минимальную высоту элемента
Мин. Ширина	Устанавливает минимальную ширину элемента
режим смешивания	Определяет, как содержимое элемента должно сливаться с его прямым родительским фоном
пригонка объекта	Определяет, как содержимое заменяемого элемента должно быть размещено в блоке, установленном его используемой высотой и шириной.
объект-позиция	Задает выравнивание заменяемого элемента внутри его поля
непрозрачность	Устанавливает уровень непрозрачности для элемента
заказать	Устанавливает порядок гибкого элемента относительно остальных
дети-сироты	Устанавливает минимальное количество строк, которое должно оставаться внизу страницы, когда разрыв страницы происходит внутри элемента.
контур	Сокращенное свойство для outline-width, контурного стиля и контур-цвет свойства
контурный цвет	Устанавливает цвет контура
контур-офсет	Смещает контур и выводит его за край границы
контурный	Устанавливает стиль контура
ширина контура	Устанавливает ширину контура
перелив	Определяет, что происходит, если содержимое выходит за пределы поля элемента.
перелив-обертка	Указывает, может ли браузер разбивать строки в словах, чтобы предотвратить переполнение (когда строка слишком длинна, чтобы уместиться в содержащем ее поле).
переполнение-x	Указывает, следует ли обрезать левый / правый края содержимого, если он выходит за пределы области содержимого элемента.
переполнение	Указывает, следует ли обрезать верхний / нижний края содержимого, если оно выходит за пределы области содержимого элемента.
изменить размер	Определяет, можно ли (и как) изменять размер элемента пользователем
правый	Определяет правую позицию позиционируемого элемента
междурядье	Определяет зазор между рядами сетки
поведение прокрутки	Указывает, следует ли плавно анимировать позицию прокрутки в прокручиваемом поле вместо прямого перехода.
размер табулятора	Задает ширину символа табуляции
стол-макет	Определяет алгоритм, используемый для компоновки ячеек, строк и столбцов таблицы
выравнивание текста	Задает горизонтальное выравнивание текста
text-align-last	Описывает, как выравнивается последняя строка блока или строка непосредственно перед принудительным разрывом строки, когда выравнивание текста имеет значение «выравнивание по ширине».
текстовый комбайн вертикальный	Задает комбинацию нескольких символов в пространстве одного символа
текст-оформление	Указывает украшение, добавленное к тексту
текст-украшение-цвет	Определяет цвет оформления текста
текст-украшение-строка	Определяет тип линии в текстовом оформлении
оформление текста	Задает стиль линии в текстовом оформлении
текстовый отступ	Задает отступ первой строки в текстовом блоке
с выравниванием текста по ширине	Определяет метод выравнивания, используемый при выравнивании текста по ширине.
с ориентацией текста	Определяет ориентацию текста в строке
переполнение текста	Определяет, что должно произойти, когда текст переполняет содержащий элемент
тень текста	Добавляет тень к тексту
преобразование текста	Управляет использованием заглавных букв в тексте
текст-подчеркивание-позиция	Определяет положение подчеркивания, которое задается с помощью свойства text-decoration
верх	Определяет верхнюю позицию позиционируемого элемента
преобразование	Применяет 2D или 3D преобразование к элементу
преобразование происхождения	Позволяет изменять положение трансформируемых элементов
стиль преобразования	Определяет, как вложенные элементы отображаются в трехмерном пространстве.
переход	Сокращенное свойство для всех свойств перехода — *
задержка перехода	Указывает, когда начнется эффект перехода.
продолжительность перехода	Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода.
переход-собственность	Задает имя свойства CSS, для которого применяется эффект перехода
функция времени перехода	Определяет кривую скорости эффекта перехода
юникод-биди	Используется вместе со свойством direction для установки или возврата, следует ли переопределить текст для поддержки нескольких языков в одном документе.
по выбору пользователя	Указывает, можно ли выделить текст элемента.
белое пространство	Определяет, как обрабатывается пустое пространство внутри элемента
вдовы	Устанавливает минимальное количество строк, которые должны оставаться в верхней части страницы, когда разрыв страницы происходит внутри элемента.
ширина	Устанавливает ширину элемента
разрыв слова	Определяет, как слова должны разрываться при достижении конца строки
межсловный интервал	Увеличивает или уменьшает расстояние между словами в тексте
перенос слов	Позволяет разбивать длинные неразрывные слова и переносить их на следующую строку
режим записи	Определяет расположение строк текста: горизонтально или вертикально.

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

п.

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

CSS свойство границы

Пример

Установить стиль границ для разных элементов:

h2 {
граница: 5 пикселей сплошной красный;
}

h3 {
граница: синий пунктир 4px;
}

div {
граница:
двойной;
}

Попробуй сам »

Определение и использование

Граница — сокращенное обозначение:

Если цвет границы опущен, применяется цвет текста.

Значение по умолчанию:	средний нет цвет
Унаследовано:	№
Анимация:	да, см. Отдельные свойства . Прочитать о animatable Попробуй
Версия:	CSS1
Синтаксис JavaScript:	объект .style.border = «сплошной синий 3 пикселя» Попробуй

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

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

Имущество
граница	1,0	4,0	1,0	1,0	3,5

Синтаксис CSS

граница: ширина границы стиль границы цвет границы | начальная | наследование;

Стоимость недвижимости

Значение	Описание
ширина рамки	Задает ширину границы.Значение по умолчанию — «средний»
с бордюром	Задает стиль границы. Значение по умолчанию — «нет»
цвет рамки	Задает цвет границы. Значение по умолчанию — цвет текст
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
наследовать	Наследует это свойство от своего родительского элемента.Читать про наследство

Связанные страницы

Учебник

CSS: CSS Border

Учебник

CSS: модель коробки CSS

Ссылка на HTML DOM: свойство границы

Список свойств 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 и некоторых других технологиях.Селекторы используются для выбора элементов в документе 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 Scoping
уровень 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 Transforms
определяет 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, подходящее для портативных устройств,
например, мобильные телефоны.Этот профиль в дальнейшем заполняет поле «карманный».
тип носителя.

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

История

Тесты

Профиль печати 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
level 4 расширяет модуль level-3 механизмом взлома
блок на несколько страниц с отображением одной или всех страниц
показывать в то же время. Псевдоэлемент позволяет выбрать
отдельные страницы и применить к ним некоторый стиль.

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

История

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

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

История

Модуль загрузки шрифтов CSS
level 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 Module определяет
дополнительный способ установить положение и вращение абсолютно
позиционированные элементы. Положение задается траекторией (SVG
shape) и смещение вдоль этой траектории от 0 до 100%. В
в сочетании с анимацией, смещение также может быть анимировано.

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

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

История

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

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

История

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

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

История

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

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

История

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

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

История

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

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

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

История

Свойства и значения CSS API уровня 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

Свойство	Описание	Значения
граница	Устанавливает все свойства границы в одном объявлении	ширина границы, стиль границы, цвет границы
граница нижняя	Устанавливает все свойства нижней границы в одном объявлении	ширина-нижняя граница, border-bottom-style, цвет границы-дна
цвет нижней границы	Устанавливает цвет нижней границы	цвет рамки
с окантовкой снизу	Устанавливает стиль нижней границы	с бордюром
ширина по краю снизу	Устанавливает ширину нижней границы	ширина рамки
цвет рамки	Устанавливает цвет четырех границ	имя_цвета, шестнадцатеричное_число, rgb_number, прозрачный, унаследовать
граница левая	Устанавливает все свойства левой границы в одном объявлении	граница левой ширины, граница-левый стиль, цвет границы слева
цвет рамки слева	Устанавливает цвет левой границы	цвет рамки
рамка-левая	Устанавливает стиль левой границы	бордюрный
ширина рамки слева	Устанавливает ширину левой границы	ширина рамки
граница правая	Устанавливает все свойства правой границы в одном объявлении	ширина границы по правому краю, граница-правый стиль, цвет границы справа
рамка-правая	Устанавливает цвет правой границы	цвет рамки
граница-правая	Устанавливает стиль правой границы	с бордюром
ширина рамки справа	Устанавливает ширину правой границы	ширина рамки
с бордюром	Устанавливает стиль четырех границ	нет, скрытый, пунктирный, пунктирная, твердый, двойной, канавка, гребень вставка начало, унаследовать
кайма-верх	Устанавливает все свойства верхней границы в одном объявлении	border-top-width, граница-верх-стиль, бордюр-верх-цвет
цвет верхней границы	Устанавливает цвет верхней границы	цвет рамки
с бордюром	Устанавливает стиль верхней границы	с бордюром
ширина до верхней границы	Устанавливает ширину верхней границы	ширина рамки
ширина рамки	Устанавливает ширину четырех границ	тонкий, средний, толстый, длина, наследство

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

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

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

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

Значения

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

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

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

Демо

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

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

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

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

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

Chrome	Firefox	IE	Edge	Safari
37	27	№	79 45	9708 9,19
Android Chrome	Android Firefox	Android	iOS Safari
91	89	4.4,3-4,4,4	9,3

Chrome

Firefox

Edge

Safari

№

45

9708 9,19

Android Chrome

Android Firefox

Android

iOS Safari

4.4,3-4,4,4

9,3

Все css команды: Справочник CSS | htmlbook.ru

display | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

border | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Справочник CSS | PuzzleWeb.ru

Основы CSS — Изучение веб-разработки

Анатомия набора правил CSS

Выбор нескольких элементов

Разные типы селекторов

Изменение цвета страницы

Разбираемся с телом

Позиционирование и стилизация нашего заголовка главной страницы

Центрирование изображения

Консольные команды для CSS — полезные команды для КСС

Полезные консольные команды для CSS

Css свойства оформления сайта: обзор самых основных

Что нужно знать для начала

Стили для текстового содержимого

Отображение на экране

Свойства размера

Цвет и фон

CSS стили внутри тега – так тоже можно

PSD to HTML

Команды Counter-Strike Source (CSS). Полезные консольные команды для СSS v34, v81.

Ссылка CSS

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

CSS свойство границы

Пример

Определение и использование

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

Синтаксис CSS

Стоимость недвижимости

Связанные страницы

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

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

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

CSS Extended Box Модель

Математика CSS

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

SVG

Основные свойства CSS

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

Значения

Демо

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

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

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

45

Добавить комментарий Отменить ответ