Форматирование текста. Часть 1

Шрифт

Большую часть контента сайтов занимает текстовые блоки. С помощью языка CSS можно оформить привлекательно и просто любой текст.

Для работы со шрифтом имеется свойство “font-family”, который можно применять как к заголовкам, так и к обычным параграфам.

h2, p {

font-family: Arial;

}

Если указанный шрифт не установлен в компьютере, абзацы страницы будут отображены с использованием исходного шрифта браузера (обычно это какой-нибудь вариант Times New Roman). На подобный случай можно указать сразу несколько шрифтов.

h2, p {

font-family: Arial, Tahoma, Verdana;

}

В данном примере браузер сначала выяснит, установлен ли на компьютере шрифт Arial. Если да, то браузер использует этот шрифт. В противном случае он ищет шрифт Tahoma и, если и тот не установлен, применяется последний из списка.

Если вы вносите в список универсальный тип шрифта (sans-serif или serif), то браузер выбирает установленный на компьютере шрифт из этого семейства.

Если название шрифта состоит из нескольких слов, их надо заключить в кавычки: “Corier New”.

Начертание

Для изменения обычного начертания текста на полужирный, курсивный или полужирный курсив понадобятся свойства: “font-weight” и “font-style”. Каждый из них может принимать по два значения font-weight: (bold, normal); font-style: (italic, normal). Если применить оба свойства, то текст станет полужирным курсивом.

Цвет

Существует несколько способов определения цвета текста, но все они базируются на одном принципе: нужно указать само свойство color и затем его значение (название цвета на латинском языке, по системе цветопередачи rgb, по системе hsl ,шестнадцатеричной системе счисления):

• color: red;
• color: rgb(128,250,5); - 128 – кол-во красной краски, 250 – кол-во зелёной, 5 – кол-во синей. Смешиванием этих трёх красок получается оттенок какого-либо цвета. Максимально возможное значение для каждой краски = 255.
• color: rgba(128,250,5, .8); 128 – кол-во красной краски, 250 – кол-во зелёной, 5 – кол-во синей, .8 - альфа-канал, определяющий уровень смешивания цвета с фоном (прозрачность, меняется от 0 до 1).
• color: hsl(25, 80%, 40%); - Первое — значение градуса от 0 до 360 цветов в радуге — красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый, то поймете основную идею значения, через которое выражен цвет. Красный — это 0 (это также и 360, поскольку это один полный оборот по кругу), желтый — это приблизительно 50, оранжевый — приблизительно 100, зеленый — 150 и т. д. Каждый цвет занимает примерно 51°. Вторым значением указывается насыщенность, или то, насколько чистым является оттенок цвета. Насыщенность указывается в диапазоне значений от 0% до 100%. Значение 0% означает полное отсутствие насыщенности, или тусклый серый оттенок. Значение 100% задает чистый цвет, яркий и живой. Третье значение определяет степень светлоты, указанную в процентах от 0% (полностью черный) до 100% (полностью белый).
• color: #4A84F3; - 4A – кол-во красной краски, 84 – кол-во зелёной, F3 – кол-во синей. Смешиванием этих трёх красок получается оттенок какого-либо цвета. Каждое значение может меняться от 0 до F.

Размер шрифта

Свойство font-size устанавливает размер шрифта текста. За значением всегда должна следовать единица измерения величины.

Единицами измерения могут выступать:

• пикселы – обеспечивают постоянные согласованные параметры размеров текста на различных типах компьютеров и браузеров.

Чтобы присвоить свойству font-size значение в пикселах, введите число с символами px:

font-size: 36px;

• ключевые слова – позволяют назначить размер шрифта относительно базового (16 пикселей): xx-small, x-small, small, medium, large, x-large и xx-large. CSS-код будет выглядеть следующим образом:

font-size: large;

Обычно xx-small является эквивалентом 9 пикселов, x-small соответствует 10 пикселам, small — 13, large — 18, x-large — 24, а xx-large — 32 пикселам.

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

font-size: 200%;

• единица измерения “em” - относится к базовому размеру шрифта текста, значение размера шрифта 1em означает то же самое, что и 100 %.

font-size: 2em; (= font-size: 200%)