CSS уроки, 3 часть: CSS шрифт, текст, списки

CSS шрифт

С помощью команд CSS вы можете контролировать различные аспекты текстового представления. Давайте сначала посмотрим, как можно указать тип, размер и стиль шрифта (что представляют собой шрифты, объясняется в статье «Шрифты на сайт – руководство»).

Тип шрифта

Тип шрифта устанавливается с помощью font-family: value, с конкретным названием шрифта (например, Verdana) или одним из следующих слов – категориями шрифта:

• serif – шрифты с засечками, например Times New Roman.
• sans-serif – шрифты без засечек, например Arial.
• monospace – шрифты, в которых все символы занимают одинаковую ширину, например Courier New.

Когда вы выбираете serif, sans-serif или monospace, браузер автоматически выбирает определенный тип шрифта из указанной категории.

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

p {font-family: Georgia, Verdana, "Trebuchet MS"}

Если у пользователя не установлен первый указанный шрифт, браузер использует второй шрифт, если он не установлен, третий и т. д. Если ни один из указанных типов шрифтов не установлен, браузер будет использовать любой из шрифтов по умолчанию, которые являются универсальными и установлены почти на всех компьютерах (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana).

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

Размер шрифта (размер текста) устанавливается с помощью font-size, например:

h1 {font-size: 1.5em}

В качестве значения для размера шрифта можно использовать как цифры, так и слова или ставки, отражающиеся относительно элемента-родителя. В порядке увеличения размера шрифта слова, которые могут быть использованы, являются:

xx-small, x-small, small, medium, large, x-large, xx-large

В качестве основы берется размер родительского элемента, приравненный к среднему. Относительный размер шрифта также может быть указан с словами larger (больше) или smaller (меньше).

Толщина шрифта

Толщина шрифта указывается с помощью font-weight, а для значений можно использовать:

• числа от 100 до 900, кратные 100 (100, 200, 300 и т.д.). 100 соответствует самой маленькой толщине шрифта, а 900 – самой большой;
• слова bold (соответствует числу 700), normal (эквивалентно 400) – значение по умолчанию, bolder и lighter – соответственно большей и меньшей толщины шрифта относительно элемента-родителя.

Стиль шрифта

С CSS можно задать определенный стиль шрифта – например, шрифт может быть курсивный. Этот стиль шрифта указывается с помощью font-style: italic:

h3 {font-style: italic}

На месте italic можно использовать normal (обычный текст) или oblique – шрифты, которые поддерживают наклонные символы. На практике, italic и oblique выглядят одинаково.

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

h1 {font: bold italic 1.8 em Verdana;}

Перечисление параметров идет в следующем порядке: стиль, толщина, размер, вид шрифта.

CSS – текст

Помимо шрифта, CSS-команды могут настраивать многие другие свойства текста.

Межстрочный интервал

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

h1 {font-size: 1.8em}

p {line-height: 1.5}

Это увеличит размер строки на 50%, и, поскольку размер текста не изменится, межстрочный интервал будет увеличен. Числа, относительные единицы (такие как em) и проценты могут использоваться в качестве значения высоты строки.

Межбуквенный и межстрочный интервал

Межбуквенный интервал задается letter-spacing, а межсловный интервал – word-spacing:

h1 {letter-spacing: 10px;}

h2 {word-spacing: 2ex;}

В приведенном выше примере указывается расстояние между буквами заголовков h1 – 10 пикселей и расстояние между словами для заголовков h2 – 2ex.

Дополнительные текстовые эффекты

Текст может быть изменен с помощью text-decoration и одного из следующих значений:

• underline: обыкновенное подчеркивание текста;
• overline: подчеркивание над текстом;
• line-through: линия проходит через середину текста;
• none: убирает подчеркивание текста, если указано;
• blink: мигающий текст (поддерживается только Firefox и Opera).

Отступ для первой строки абзаца

Для отступа текста используется text-indent и требуемое значение. Например:

p {text-indent: 1em}

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

Горизонтальное выравнивание

Положение текста может быть скорректировано с помощью text-align, и одним из значений:

• left: левое выравнивание – значение по умолчанию
• right: выровнять текст по правому краю
• center: центрирование
• justify: двустороннее выравнивание

Вертикальное выравнивание

Это свойство используется, в основном, чтобы определить взаимное расположение текста и графики. Используется vertical-align и одно из следующих значений:

• sub: Как и в HTML-элементе sub, буквы записываются в виде нижнего индекса
• sup: текст отображается в виде верхнего индекса
• baseline: нижний край изображения расположен на уровне базовой линии
• middle: середина изображения совпадает с серединой текстовой строки
• text-top: верхний край элемента совпадает с верхним краем строки
• text-bottom: нижний край элемента находится на одном уровне с нижним краем линии
• top: верхний край элемента совпадает с верхним краем строки, размер которого изменяется, чтобы включить элемент
• bottom: аналогично top, но выравнивание по нижней линии.

Цвет текста

С помощью color вы можете указать желаемый Вами цвет текста. Для задания конкретного цвета текста можно использовать допустимые названия цветов, RGB или HEX значений:

p {color: #EE00BB}

Более подробно о цветах вы можете прочитать в статье HTML цвета.

Преобразование в строчные или прописные буквы

Вы можете указать использование строчных или прописных букв с помощью text-transform и одного из следующих слов:

• capitalize: первая буква каждого слова будет заглавной. Часто используемый стиль в заголовках.
• uppercase: все буквы становятся заглавными.
• lowercase: все буквы превращаются в маленькие.
• none: не меняется вид буквы маленькие-большие

Регулировка пустого пространства

С помощью white-space вы можете изменить способ, которым браузер показывает пустые поля:

• normal: по умолчанию, браузер сокращает ряд пробелов и строк до одного пробела / строки
• pre: сохраняет пустые пробелы и строки
• nowrap: серия пробелов будет обрезана до одного пробела, а текст будет продолжаться в одной строке, пока не будет вставлен символ перевода строки.

CSS списки

Списки HTML бывают двух типов – упорядоченные (нумерованные) и неупорядоченные (без нумерации). CSS позволяет изменять символы, цифры или буквы, которые используются для маркировки отдельных элементов списка. Вы даже можете установить свои изображения, в качестве символа списка.

Тип символа списка

Тип символа элемента списка указывается с помощью свойства list-style-type, и возможны следующие значения:

Неупорядоченные списки

• none – без символа
• disc – заполненный круг (стоит по умолчанию)
• circle – круг незаполненный
• square – квадрат

Упорядоченные списки

• none – без символа
• disc – заполненный круг
• circle – круг незаполненный
• square – квадрат
• decimal – числа арабскими цифрами: 1, 2, 3…
• decimal-leading-zero – как decimal, но с дополнительным нулем для цифр от 1 до 9, например. 01, 02, 03
• lower-latin – маленькие буквы латинского алфавита: a, b, c, d, e…
• lower-greek – маленькие греческие буквы: α, β, γ, δ …
• lower-roman – числа римскими цифрами, маленькие: i, ii, iii, iv, v…
• upper-latin – заглавные буквы латинского алфавита: A, B, C, D, E…
• upper-roman – числа латинскими цифрами, заглавные: I, II, III, IV, V…

Позиционирование списка

Положение списка может управляться свойством list-style-position. Возможные значения:

• outside – значение по умолчанию
• inside – будет задан дополнительный отступ для списка

Использование собственного изображения

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

ul {list-style-image:url(kartinka.gif)}

На месте kartinka.gif поставить название файла, который вы будете использовать.

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

ul {list-style-type:none;
padding:0px;
margin:0px;}

li {background-image:url(kartinka.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:17px;}

Список по умолчанию не указывает изображение (list-style-type:none), а свойства padding и margin со значением 0, чтобы не было никаких различий в результатах между браузерами.

Для отдельных элементов списка (li) указывается изображение, которое, конечно, не должно повторяться (background-repeat: no-repeat). С помощью свойства background-position вы можете точно позиционировать изображение, а padding-left требуется для перемещения текста вправо, в противном случае произойдет наложение текста и изображения.

Укороченный стиль для списков

Стили для списков могут быть заданы и с укороченной форме:

ol {list-style: lower-latin inside:}

ul {list-style: inside image-url(kartinka.gif);}

Значения в list-style разделяются только интервалом и задаются в таком порядке: type, position, image.

Далее: CSS уроки, 4 часть: блочная модель, рамки, границы, отступы