Урок: оформление и декор текста

  • Автор темы AriCosmo
  • Дата начала
AriCosmo
Участник
Сообщения
515
Реакции
115
Skype
Всем привет! В данном уроке мы рассмотрим CSS свойства, которые позволят работать непосредственно с web-документом и с его элементами - создавать, изменять, убирать определённые свойства, придающие внешний вид.

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

font-size

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

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

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

Код CSS

HTML:
#fs1em {
font-size:1em;
}
text-decoration

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

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

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

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

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

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

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

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

Код СCS
HTML:
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
HTML:
#bold {
font-weight: bold;
}
...либо...
HTML:
#bold {
font-weight:900;
}
font-style

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

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

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

oblique - наклонное начертание.
Курсивное и наклонное начертание похожи друг на друга, но тем не менее отличаются. Курсив задумывался как начертание, имитирующее рукописный текст, а наклонный текст образуется путём наклона обычных знаков вправо.

Код СCS
HTML:
#italic {
font-style: italic;
}
На этом всё! Спасибо за внимание!!)

Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
 
Последнее редактирование:
Сверху