Параметры CSS

Единицы измерения

В качестве значений параметров могут применятся числовые значения, именованные слова (bold, underline и т.д.), функции (url(), rgb() и т.д.) либо их комбинации.

Для числовых значений используются следующие единицы измерения:

ГруппаЕдиница измеренияОписание
ОтносительныеpxПикселы
em, %Зависимость от размера шрифта данного элемента. 0.6em=60%
remЗависимость от размера шрифта корневого элемента
exЗависит от высоты символа x в данном шрифте
chЗависит от ширины символа O в данном шрифте
vh, vw1/100 высоты и ширины vieport'а соответственно
vmax1/100 от максимума между высотой и шириной vieport'а
vmin1/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-stylenoneНе отображает границу и ее толщина (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-stylenormal, italic, oblique, inheritОпределяет начертание шрифта — обычное, курсивное или наклонное
font-weightbold, bolder, lighter, normal,
100—900
Устанавливает насыщенность шрифта. Числовое значение устанавливается с шагом 100.
normal=400, bold=700
font-stretchinherit, ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expandedПлотность шрифта
font-variantnormal*, small-caps, inheritПозволяет сделать строчные буквы в виде уменьшенных прописных

Параметры блока текста

line-heightЕИ длины > 0,
множитель
Высота строки
letter-spacingЕИ длины <>= 0,
кроме %
Расстояние между буквами
word-spacingЕИ длины <>= 0,
кроме %
Расстояние между словами
text-aligncenter, justify, left, right, start, endГоризонтальное выравнивание текста в пределах элемента
text-indentЕИ длины <>= 0Устанавливает отступ первой стоки абзаца (красная строка)

Оформление текста

text-decoration[underline, line-through, overline, blink], none, inheritОформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания
text-transformlowercase, uppercase, capitalize, none, inheritПреобразует текст в строчные или прописные символы, или делает первый символ каждого слова в предложении заглавным.
text-shadownone | тень [,тень]Добавляет тень к тексту. Тень задается набором параметров сдвиг-по-x, сдвиг-по-y [, радиус-размытия, цвет]

Многоколоночность

column-countЧисло >0,
auto
Определяет количество колонок в многоколоночном тексте.
column-gapЕИ длины >= 0,
normal
Задаёт расстояние между колонками в многоколоночном тексте.
column-widthЕИ длины >= 0,
auto
Задаёт оптимальную ширину колонки в многоколоночном тексте. Реальная ширина колонки может быть больше введённого значения, сокращение указанной ширины приводит к отмене нескольких колонок, текст при этом выстраивается в одну колонку.
column-ruleborder-width, border-style, цветЗадает ширину, тип и цвет разделителя колонок
column-spannone, allОпределяет, как должен отображаться элемент в многоколоночном тексте — занимать ширину всех колонок или только одну из них

Параметры переносов

overflow auto, hidden, scroll, visible, inheritУправляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
visible — Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden — Отображается только область внутри элемента, остальное будет скрыто.
scroll — Всегда добавляются полосы прокрутки.
auto — Полосы прокрутки добавляются только при необходимости.
text-overflowclip, ellipsisОпределяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область - текст обрезается или текст обрезается и к концу строки добавляется многоточие
hyphensnone, manual, autoСвойство сообщает браузеру, как расставлять переносы слов в блоке текста. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang="ru" к тегу или непосредственно к абзацу текста.
При установке параметра manual переносы слов в тексте происходят в тех местах, где добавлен &shy; или <wbr>, если их нет, то переносы не делаются.
word-breaknormal, break-all, keep-allУказывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.
break-all — слова переносятся по буквам
word-wrapnormal, break-word, inheritУказывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область
white-spacenormal, 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В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.Псевдоэлемент задает стиль первой строки форматированного текста.

Запись опубликована в CSS. Закладка ссылка.