Урок 4. Оформление и декор текста в CSS

В данном уроке мы рассмотрим CSS свойства, которые позволят работать непосредственно с web-документом и с его элементами - создавать, изменять, убирать определённые свойства, придающие внешний вид.

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

font-size

font-size - это свойство, которое определяет размер текста, относительной указанной единицы измерения. Самое используемое свойство для работы с текстом.

Существует несколько принятых видов измерения шрифта: px, pt, em, % и прочее.



Стандарт W3 (WorldWideWeb) рекомендует к использованию для вывода на экран лишь указывать em, px, %.

Код CSS

#fs1em {
  font-size: 1em;
}

text-decoration

text-decoration - это свойство предназначено для декорация текста и имеет четыре значения.

Список установленных значений

1. none - декорация отсутствует.

2. blink - делает мигающий текст (раз в секунду исчезает и появляется на прежнем месте). Устаревшая установка, по эстетическим соображениям используется всё реже и реже.

3. line-through - перечёркивает текст.

4. overline - создаёт линию над текстом.

5. underline - подчёркивает текст. Как правило, используется для обозначения ссылок.

Чаще всего используется underline. Как правило, для обозначения ссылок - элементов <a>. В примере ниже у всех ссылок в документе убирается заданное им по умолчанию нижнее подчёркивание, но при наведении на них оно заново появляется.

Код СCS

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

font-weight

font-weight - это свойство, которое отвечает за насыщенность текста, жирность его начертания. В качестве значений имеются величины от 100 до 900 с интервалом в 100, то есть 100, 200, 300 ... 900. Где 900 — жирное начертание, 100 — соответственно светлое начертание.



Список установленных значений

bold - полужирное начертание.

bolder - жирное начертание (со многими шрифтами либо не работает, либо отображает аналогично bold)

lighter - светлое начертание

normal - стандартное, обычное начертание.

Помимо установленных значений, как уже говорилось, можно использовать числовые единицы:

Код СCS

#bold {
  font-weight: bold;
}

...либо...

#bold {
  font-weight: 900;
}

font-style

font-style - это свойство, определяющее тип написания текста: стандартное, наклонное или курсивное.

normal - обычное начертание текста.

italic - курсивное начертание.

oblique - наклонное начертание.



Код СCS

#italic {
  font-style: italic;
}

Спасибо за внимание!