"Истина где-то рядом."
 Уроки HTML |
 Скрипты PHP |
 Шаблоны HTML |
| Уроки HTML |
| Уроки CSS |
| HTML5 |
| Скрипты JAVA |
| Вёрстка сайта |
| Примеры PHP |
| Графика |
| Оптимизация сайта |
| Полезное |
Оформление и декор текста в CSS
Урок №7
Оформление текста, имеет такое же важное значение, как и его содержание. Вероятность того, что пользователь не станет читать даже очень хорошо написанный, но неоформленный текст очень велика, поэтому приложите, немного усилий, чтобы привести ваши статьи в читабельный вид.
Положительное восприятие веб-сайта пользователем зависит не только от смыслового содержания текста, но и от его оформления.
В данном уроке мы рассмотрим CSS свойства, которые позволят работать непосредственно с web-документом и с его элементами - создавать, изменять, убирать определённые свойства, придающие внешний вид.
В качестве примера работы CSS свойств используем текст и попробуем его изменить: цвет, размер, положение, шрифт и тд.
Практически на каждом сайте текст определённым образом декорируется для того, чтобы он был читабельным и не вызывал у пользователя раздражения.
Например, сделать заголовки другим цветом, ключевые фразу выделять жирным шрифтом и так далее, и тому подобное.
Итак, приступим!
font-size
font-size - это свойство, которое определяет размер текста, относительной указанной единицы измерения. Самое используемое свойство для работы с текстом.
Существует несколько принятых видов измерения шрифта: px, pt, em, % и прочее.
Стандарт W3 (WorldWideWeb) рекомендует к использованию для вывода на экран лишь указывать px, em, % .
Пример кода CSS:
#fs1em {
font-size: 1em;
}
text-decoration
text-decoration - это свойство предназначено для декорации текста и имеет пять значений.
Список установленных значений:
1. none - декорация отсутствует.
2. blink - делает мигающий текст.
3. line-through - перечёркивает текст.
4. overline - создаёт линию над текстом.
5. underline - подчёркивает текст. Как правило, используется для обозначения ссылок.
Значение underline используется чаще всего для обозначения ссылок - элементов <a>.
В примере ниже у всех ссылок в документе убирается заданное им по умолчанию нижнее подчёркивание, но при наведении на них курсором оно заново появляется.
Пример кода CSS:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
font-weight
font-weight - это свойство, которое отвечает за насыщенность текста то есть, жирность его начертания. В качестве значений имеются величины от 100 до 900 с интервалом в 100, то есть 100, 200, 300 ... 900. Где 900 — жирное начертание, 100 — соответственно светлое начертание.
Список установленных значений:
1. normal - стандартное, обычное начертание.
2. bolder - жирное начертание.
3. bold - полужирное начертание.
4. lighter - светлое начертание.
Пример кода CSS:
#bold {
font-weight: bold;
}
Как уже упомяналось ранее, помимо установленных значений можно использовать числовые единицы.
Пример кода CSS:
#bold {
font-weight: 900;
}
font-style
font-style - это свойство, определяющее тип написания текста: стандартное, наклонное или курсивное.
Список установленных значений:
1. normal - обычное начертание текста. (Стандартное).
2. italic - курсивное начертание.
3. oblique - наклонное начертание.
Пример кода CSS:
#italic{
font-style: italic;
}
Если разница между наклонным текстом и курсивными символами для вас не очень велика, просто выберите один из этих вариантов. Если же она имеет для вас значение, придется протестировать различные сочетания шрифтов и браузеров для достижения лучшего результата.
 | Курсивное и наклонное начертание похожи друг на друга, но тем не менее отличаются. Курсив задумывался как начертание, имитирующее рукописный текст, а наклонный текст образуется путём наклона обычных знаков вправо. |
font-color
font-color - это свойство служит для изменения цвета текста.
Для изменения фона вокруг текста используют значение background-color. Значения в обоих свойствах задается тремя способами: название цвета (white, blue, black, yellow и др.), шестнадцатеричное значение (белый - #FFFFFF, черный - #000000, красный - FF0000), либо с помощью RGB;
Пример кода CSS:
h1{color:#001B99;}
span{background-color:#2200CC; color:white;
}
Следующий урок будет посвящён отступам и полям в CSS.
