Единицы измерения
В качестве значений параметров могут применятся числовые значения, именованные слова (bold, underline и т.д.), функции (url(), rgb() и т.д.) либо их комбинации.
Для числовых значений используются следующие единицы измерения:
Группа | Единица измерения | Описание |
---|---|---|
Относительные | px | Пикселы |
em, % | Зависимость от размера шрифта данного элемента. 0.6em=60% | |
rem | Зависимость от размера шрифта корневого элемента | |
ex | Зависит от высоты символа x в данном шрифте | |
ch | Зависит от ширины символа O в данном шрифте | |
vh, vw | 1/100 высоты и ширины vieport'а соответственно | |
vmax | 1/100 от максимума между высотой и шириной vieport'а | |
vmin | 1/100 от минимума между высотой и шириной vieport'а | |
Абсолютные | mm | Миллиметры |
cm | Сантиметры | |
in | Дюймы | |
pt | Пункты (1in=72pt) | |
pc | Пики (1pc=12pt) | |
Цвет | name | Имена цветов. Их много, например red, green, blue и т.д. |
rgb(255,0,0) | Задание цвета с помощью указания параметров цветов red, green и blue в диапазоне от 0 до 255 | |
rgba(255,0,0,1) | Тоже самое, но добавляется параметр прозрачности в диапазоне от 0 до 1 | |
#00AAFF #0AF | Задание цвета в шестнадцатеричной системе исчисления. Сокращенная форма может применяться, если при задании цветов используется пара одинаковых значений | |
border-style | none | Не отображает границу и ее толщина (border-width) задается нулевой. |
hidden | Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще. | |
dotted | Точки |
|
dashed | Штрихи |
|
solid | Сплошная линия |
|
double | Двойная линия |
|
groove | Выемка |
|
ridge | Бортик |
|
inset | Углубление |
|
outset | Возвышение |
Общие параметры
Параметр | Возможные значения | Описание |
---|---|---|
color | цвет | Цвет переднего плана, например текста |
background-color | цвет | Цвет заливки элементов |
Параметры текста
Параметр | Возможные значения | Описание |
---|---|---|
|
||
font | [font-variant, font-style, font-weight] font-size [/ line-height] font-family | Универсальное свойство шрифта, где все параметры указываются через запятую |
font-family | Список шрифтов через запятую, группа шрифтов | Устанавливает семейство шрифта. serif — шрифты с засечками; sans-serif — шрифты без засечек; cursive — курсивные шрифты; fantasy — декоративные шрифты; monospace — моноширинные шрифты. |
font-size | ЕИ длины > 0, xx-small—medium—xx-large, smaller, larger | Размер шрифта |
font-style | normal, italic, oblique, inherit | Определяет начертание шрифта — обычное, курсивное или наклонное |
font-weight | bold, bolder, lighter, normal, 100—900 | Устанавливает насыщенность шрифта. Числовое значение устанавливается с шагом 100. normal=400, bold=700 |
font-stretch | inherit, ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded | Плотность шрифта |
font-variant | normal*, small-caps, inherit | Позволяет сделать строчные буквы в виде уменьшенных прописных |
|
||
line-height | ЕИ длины > 0, множитель | Высота строки |
letter-spacing | ЕИ длины <>= 0, кроме % | Расстояние между буквами |
word-spacing | ЕИ длины <>= 0, кроме % | Расстояние между словами |
text-align | center, justify, left, right, start, end | Горизонтальное выравнивание текста в пределах элемента |
text-indent | ЕИ длины <>= 0 | Устанавливает отступ первой стоки абзаца (красная строка) |
|
||
text-decoration | [underline, line-through, overline, blink], none, inherit | Оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания |
text-transform | lowercase, uppercase, capitalize, none, inherit | Преобразует текст в строчные или прописные символы, или делает первый символ каждого слова в предложении заглавным. |
text-shadow | none | тень [,тень] | Добавляет тень к тексту. Тень задается набором параметров сдвиг-по-x, сдвиг-по-y [, радиус-размытия, цвет] |
|
||
column-count | Число >0, auto | Определяет количество колонок в многоколоночном тексте. |
column-gap | ЕИ длины >= 0, normal | Задаёт расстояние между колонками в многоколоночном тексте. |
column-width | ЕИ длины >= 0, auto | Задаёт оптимальную ширину колонки в многоколоночном тексте. Реальная ширина колонки может быть больше введённого значения, сокращение указанной ширины приводит к отмене нескольких колонок, текст при этом выстраивается в одну колонку. |
column-rule | border-width, border-style, цвет | Задает ширину, тип и цвет разделителя колонок |
column-span | none, all | Определяет, как должен отображаться элемент в многоколоночном тексте — занимать ширину всех колонок или только одну из них |
|
||
overflow | auto, hidden, scroll, visible, inherit | Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. visible — Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden — Отображается только область внутри элемента, остальное будет скрыто. scroll — Всегда добавляются полосы прокрутки. auto — Полосы прокрутки добавляются только при необходимости. |
text-overflow | clip, ellipsis | Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область - текст обрезается или текст обрезается и к концу строки добавляется многоточие |
hyphens | none, manual, auto | Свойство сообщает браузеру, как расставлять переносы слов в блоке текста. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang="ru" к тегу или непосредственно к абзацу текста. При установке параметра manual переносы слов в тексте происходят в тех местах, где добавлен ­ или <wbr>, если их нет, то переносы не делаются. |
word-break | normal, break-all, keep-all | Указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область. break-all — слова переносятся по буквам |
word-wrap | normal, break-word, inherit | Указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область |
white-space | normal, nowrap, pre, pre-line, pre-wrap, inherit | Устанавливает, как отображать пробелы между словами. normal — Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap — Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку. pre — Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line — В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap — В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. |
Параметры псевдоэлементов
Псевдоэлемент | Возможные параметры | Описание |
---|---|---|
::before | Все + content= "Текст"; | Псевдоэлемент применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется |
::after | Все + content= "Текст"; | Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. |
::first-letter | К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном. | Псевдоэлемент определяет стиль первого символа в тексте элемента, к которому добавляется. |
::first-line | В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона. | Псевдоэлемент задает стиль первой строки форматированного текста. |