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 часть: блочная модель, рамки, границы, отступы
Разработка сайтов и мобильных приложений. Вы можете заказать у нас:
Готовый маркетплейс, тариф «Базовый»
80 000руб.Создание лендинга
20 000руб.Создание корпоративного сайта
35 000руб.Создание агрегатора, маркетплейса
80 000руб.
