Уроки HTML+CSS: Стили для текста (Часть 2)

Всем привет, продолжаем рассматривать CSS свойства для стилизации текста.

`font-family` – установка шрифта

Для того чтобы указать новый шрифт для текста прописываем свойство font-family с указанием названия шрифта и специальных параметров (начертание, стиль).

p {font-family: "Times New Roman", Georgia, Serif;}

Основные правила установки шрифтов:

параметры и название шрифта перечисляются через запятую
если название шрифта состоит из нескольких слов, то его необходимо заключить в кавычки.
можно использовать стандартные шрифты, подключать сторонние или самописные файлы. Как правильно подключать шрифты, вы можете посмотреть в этой записи – http://prog-time.ru/kak-pomenyat-shrift-na-sajte-kak-ustanovit-svoj-shrift/

`font-style` – стили для начертания

`normal`	Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
`italic`	Выделяет текст курсивом.
`oblique`	Устанавливает наклонное начертание шрифта.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

p{font-style: italic;}

Пример текста

p{font-style: oblique;}

Пример текста

p{font-style: initial;}

Пример текста

`font-variant` – начертание шрифтов

`normal`	Значение по умолчанию, выводит текст обычным начертанием.
`small-caps`	Все строчные буквы заменяются на малые прописные, которые отличаются от обычных прописных слегка измененными пропорциями и уменьшенным размером. Очень похоже на `text-transform: uppercase`, отличие состоит в том, что здесь прописные буквы имеют разные размеры.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

p{font-variant: small-caps;}

Пример текста

`font-weight` – насыщенность шрифта

`normal`	Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
`bold`	Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
`bolder`	Насыщенность шрифта будет больше, чем у предка.
`lighter`	Насыщенность шрифта будет меньше, чем у предка.
`100, 200, 300, 400, 500, 600, 700, 800, 900`	Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

p{font-weight: bold;}

Пример текста

p{font-weight: bolder;}

Пример текста

p{font-weight: lighter;}

Пример текста

.p1{font-weight: 100;}
.p2{font-weight: 200;}
.p3{font-weight: 300;}
.p4{font-weight: 400;}
.p5{font-weight: 500;}
.p6{font-weight: 600;}
.p7{font-weight: 700;}
.p8{font-weight: 800;}
.p9{font-weight: 900;}
.p10{font-weight: 1000;}

Пример текста

`font-size` – размер шрифта

`absolute-size`	`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`. Абсолютные размеры определены относительно друг друга и коэффициент масштабирования между двумя соседними абсолютными размерами составляет примерно 1,5 при переходе от меньшего к большему и 0,66 при переходе от большего к меньшему. В качестве стандартного размера принимается `medium`.
`relative-size`	`smaller`, `larger`. Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для `xx-small` и `xx-large`.
`длина`	Размер шрифта устанавливается с помощью положительных значений единиц длины — `px`, как целых, так и дробных.
`%`	Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью `em` эквивалентно процентному значению.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

p{font-size: 40px;}

Пример текста

p{font-size: 50%;}

Пример текста

text-decoration-line

Свойство text-decoration-line указывает расположение линии относительно текста.

none	Значение по умолчанию
underline	Подчеркивание под текстом
overline	Подчеркивание над текстом
line-through	Добавляет линию перечеркивания
inherit	Наследует значение свойства от родительского элемента.
initial	Устанавливает значение свойства в значение по умолчанию.

text-decoration-style

Свойство text-decoration-style указывает тип линии.

solid	Добавляет отрезок простой линии. Значение по умолчанию.
double	Две параллельные сплошные линии с небольшим промежутком между ними.
dotted	Последовательность круглых точек.
dashed	Последовательность прямоугольных штрихов.
wavy	Указывает на волнистую линию.
inherit	Наследует значение свойства от родительского элемента.
initial	Устанавливает значение свойства в значение по умолчанию.