С помощью команд CSS вы можете контролировать различные аспекты текстового представления. Давайте сначала посмотрим, как можно указать тип, размер и стиль шрифта (что представляют собой шрифты, объясняется в статье «Шрифты на сайт — руководство»).
Тип шрифта устанавливается с помощью font-family: value, с конкретным названием шрифта (например, Verdana) или одним из следующих слов — категориями шрифта:
Когда вы выбираете 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, а для значений можно использовать:
С CSS можно задать определенный стиль шрифта — например, шрифт может быть курсивный. Этот стиль шрифта указывается с помощью font-style: italic:
h3 {font-style: italic}
На месте italic можно использовать normal (обычный текст) или oblique — шрифты, которые поддерживают наклонные символы. На практике, italic и oblique выглядят одинаково.
Описанные здесь свойства шрифта можно задать сокращенно с помощью свойства font и списка желаемых параметров, разделенных пробелами друг с другом. Вот и пример:
h1 {font: bold italic 1.8 em Verdana;}
Перечисление параметров идет в следующем порядке: стиль, толщина, размер, вид шрифта.
Помимо шрифта, 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 и одного из следующих значений:
Для отступа текста используется text-indent и требуемое значение. Например:
p {text-indent: 1em}
будет отступать одну букву для первой строки каждого абзаца.
Положение текста может быть скорректировано с помощью text-align, и одним из значений:
Это свойство используется, в основном, чтобы определить взаимное расположение текста и графики. Используется vertical-align и одно из следующих значений:
С помощью color вы можете указать желаемый Вами цвет текста. Для задания конкретного цвета текста можно использовать допустимые названия цветов, RGB или HEX значений:
p {color: #EE00BB}
Более подробно о цветах вы можете прочитать в статье HTML цвета.
Вы можете указать использование строчных или прописных букв с помощью text-transform и одного из следующих слов:
С помощью white-space вы можете изменить способ, которым браузер показывает пустые поля:
Списки HTML бывают двух типов — упорядоченные (нумерованные) и неупорядоченные (без нумерации). CSS позволяет изменять символы, цифры или буквы, которые используются для маркировки отдельных элементов списка. Вы даже можете установить свои изображения, в качестве символа списка.
Тип символа элемента списка указывается с помощью свойства list-style-type, и возможны следующие значения:
Положение списка может управляться свойством list-style-position. Возможные значения:
Вместо нескольких символов, которые предлагают вам браузеры, вы можете использовать собственное изображение для маркировки списка элементов. Это делается следующим образом:
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 часть: блочная модель, рамки, границы, отступы