Топ-100 CSS уроки, 3 часть: CSS шрифт, текст, списки - Разработка сайтов на WordPress
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 часть: блочная модель, рамки, границы, отступы

 

VECHNOST
VECHNOST
Наша веб-студия — это то место, где рождаются оригинальные идеи, выдвигаются необычные предложения и находятся совершенно уникальные и, главное, действенные пути решения самых сложных задач! Комплексный подход к проектам: разработка сайтов, поддержка, эффективное продвижение.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заказ услуги

Pin It on Pinterest

Открыть чат
1
Задать вопрос
Здравствуйте! 👋
У вас возникли вопросы?