Вторая наша статья посвящена заголовкам, работе с ними, способам изменения их внешнего вида с помощью CSS.
Заголовок - один из важнейших аспектов преставления текста. Он даёт читателю понятие об основной теме текста, его направлении и т.д.
В языке html, заголовки задаются тегами:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Цифра после буквы h называется уровнем заголовка и определяет высоту и ширину символов. (h1 - самый большой). Оформлять заголовок можно непосредственно в коде, но это оказывается крайне неудобным и громоздким. Посмотрим, как это можно сделать оптимальным образом - с помощью CSS.
Существует довольно много стилей, которые могут быть применены к заголовку. Мы можем изменить размер шрифта, его положение на странице, цвет, начертание и т.д. Попробуем сделать это в несколько этапов.
1) Начнём с цвета. Создадим html файл и запишем туда такой код:
<html>
<head>
<style type="text/css" media="screen">
h1 {
color:#003366;
}
h2 {
color:#e2b500;
}
h3 {
color:#9d0000;
}
</style>
</head>
<body>
<h1>Основной заголовок</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
</body>
</html>
Посмотрим, что у нас получилось: демо. Все стили будут прописываться в фигурных скобках через ;
2. Теперь стоило бы выравнить заголовок 1-го уровня по центру страницы. Для этого в списке стилей h1, после color:#......; добавим такой стиль: text-align:center;
3. Теперь изменим начертание шрифта для заголовка 2-го уровня. Для примера возьмём шрифт Verdana. Добавим только для h2 такой стиль: font-family: Verdana;
4. Для примера, выделим заголовок 3-го уровня фоновым цветом. и границей (сделаем вид блока). Добавим для него такие стили: background: #d4e6ff; border: solid 1px #006cff; width: 200px;
В итоге у нас получился такой код:
<html>
<head>
<style type="text/css" media="screen">
h1 {
color:#003366;
text-align:center;
}
h2 {
color:#e2b500;
font-family: Verdana;
}
h3 {
color:#9d0000;
background: #d4e6ff;
border: solid 1px #006cff;
width: 200px;
}
</style>
</head>
<body>
<h1>Основной заголовок</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
</body>
</html>
Сохраняем его и смотрим, что получилось.
Итак, основные стили для заголовков были описаны. Но можно придумать ещё множество красивых и эффектных комбинаций стилей, которые без сомнения привлекут внимание читателей.
Для оформления заголовков и окружающего их пространства допустимо использование всех стандартных текстовых и блоковых стилей CSS 2.0. Подробнее об этом можно узнать из соответствующих глав нашего справочника.
Надеюсь, статья оказалась полезной, а процесс оформления блоков стал казаться проще.