наверх




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

Допустим у вас есть интересная статья, которая будет полезна пользователю, но просто вставив её в HTML документ её вид не будет призывать пользователя прочесть её. Сам текст стоит как-нибудь оформить, сделать более пригодным для чтения. Поэтому то и разберем те свойства, которые помогут изменить стили текста в документе.

text-decoration


Свойство предназначено для декорация текста и имеет четыре значения:

blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте.

line-through
Создает перечеркнутый текст.

overline
Линия проходит над текстом.

underline
Устанавливает подчеркнутый текст.


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

a {
  text-decoration: none;
}


font-weight


Данное свойство устанавливает насыщенность текста, жирность его начертания. В качестве значения прописываются как установленные стандарты, так и числовые, в диапазоне от 100 до 900, с интервалом 100 единиц.

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

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

bolder
Жирное начертание.

lighter
Светлое начертание

normal
Нормальное начертание.


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

#bold {
  font-weight: bold;
}


font-style


Свойство определяет тип написания текста: нормальное, наклонное или курсивное.

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

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

oblique
Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.


#italic {
  font-style: italic;
}


font-size


Определяет размер текста, относительной указанной единицы измерения.
В веб-стандартах существует множество видов единиц измерения: pt, em, %, px и прочее.
Если их сравнить, то получиться, что:
12pt=16px=1em=100%

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

Пример:

#ft1em {
  font-size: 1em;
}






Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.