#Урок 5. Оформление и декор в тексте.

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

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

  • font-size — свойство отвечающее за размер текста

Самое распространенное свойство в сайтостроении. Точнее самое используемое.

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

Для сравнения данных единиц:

12pt=16px=1em=100%

А вот как выглядит все это в css:

#fs1em{

font-size: 1em;

}

text-decoration — это свойство отвечающее за декор текста и имеет оно четыре значения:

none — декорация отсутствует
blink — мигающий текст (1 раз в секунду исчезает и появляется на прежнем месте). Устаревшая установка, в последнее время используется крайне редко.
line-through — перечёркнутый текст.
overline — горизонтальная линия над текстом.
underline — подчёркнутый текст. Как правило, используется для обозначения ссылок.

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

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

Установленные значения:

  • bold — полужирный текст
  • bolder — жирный текст (с большинством современных шрифтов либо не работает либо срабатывает так же как bold)
  • lighter — светлый шрифт
  • normal — стандартный шрифт

Не забудьте, что кроме этих значений используются и числовые (100-900)

Как это выглядит в CSS:

#bold{

font-weight: bold;

}

аналогичен этот вариант:

#bold{

font-weight: 900;

}

  • font-style — свойство отвечающее за тип написания текста: обычный, жирный, курсив.

normal — обычный текст.

italic — курсив.

oblique — наклонный

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

На этом данный урок объявляется оконченным! ) Переходим к следующему!

Комментарии закрыты.