аватар Автор: Сергей Касаткин | 02 августа 2013 14:33

Уроки / CSS /

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

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

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

font-size


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

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

В качестве сравнения:
12pt=16px=1em=100%


Стандарт 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 — соответственно светлое начертание.

Внимание! Для многих новых шрифтов будут доступны не все значения. Для многих современных делают начертания, например, 300-400-700. Поэтому, если у вас не сработала установка с каким-либо шрифтом, то не переживайте, попробуйте другие интервалы.


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

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;
}


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



Похожие статьи


Комментарии к статье (vk.com)