Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Статьи по CSS » Статья по CSS 2. Оформление заголовков
Не нравится(-) 20 Нравится(+)
Статья по CSS 2. Оформление заголовков

Вторая наша статья посвящена заголовкам, работе с ними, способам изменения их внешнего вида с помощью CSS.

Заголовок - один из важнейших аспектов преставления текста. Он даёт читателю понятие об основной теме текста, его направлении и т.д.
В языке html, заголовки задаются тегом
<h1>, <h2>, <h3>....
Цифра после буквы 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. Подробнее об этом можно узнать из соответствующих глав нашего справочника.

Надеюсь, статья оказалась полезной, а процесс оформления блоков стал казаться проще.

-----------------------------------
Демо
Правила копирования материалов статьи
Перейти в категорию статей по CSS


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 21497 раз(а) и написали 1 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!