Разное

Оформление заголовков css: Стили заголовков в CSS: градиенты / Хабр

08.01.2022

Содержание

: Статьи о CSS :: ВСЁ о CSS :: Platnyj-Hosting

Оформление заголовков CSS

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

Итак начнем…
Заголовок — один из важнейших вещей, предоставляющий текст. Он даёт читателю понять какаю будет основная тема текста, на что он направлен и т.п.
В языке html, заголовки сайта задаются тегами

<h2>, <h3>, <h4>….

Цифра после буквы h называется уровнем заголовка и определяет ширину и высоту символов. (h2 — самый большой). Оформить заголовок можно непосредственно в коде, но это, как потом покажет практика, оказывается очень неудобно. И чтобы не было грамоздко это можно сделать оптимальным образом — с помощью CSS.
Существует довольно много стилей, которые могут быть применены к заголовку. Мы можем изменить размер шрифта, его положение на странице, начертание, цвет и т. д. Попробуем сделать это в несколько этапов.

1) Начнём пожалуй с цвета. Создадим html файл и запишем туда такой код или откроем «Блокнот» и скопируем этот же код и «Сохраним как…» index.html

<html>
<head>
<style type=»text/css» media=»screen»>
h2 {
    color:#003366;
}

h3 {
    color:#e2b500;
}

h4 {
    color:#9d0000;
}
</style>
</head>
<body>
<h2>Заголовок (размер текста h2)</h2>
<h3>Заголовок (размер текста h3)</h3>
<h4>Заголовок (размер текста h4)</h4>
</body>
</html>

Посмотрим, что у нас получилось: Пример css. Все стили будут прописываться в фигурных скобках через ;

2. Теперь стоило бы выравнить заголовок 1-го уровня по центру страницы. Для этого в списке стилей h2, после color:#. …..; добавим такой стиль: text-align:center;

3. Теперь изменим начертание шрифта для заголовка 2-го уровня. Для примера возьмём шрифт Verdana. Добавим только для h3 такой стиль: font-family: Verdana;

4. Для примера, выделим заголовок 3-го уровня фоновым цветом. и границей (сделаем вид блока). Добавим для него такие стили:

background: #d4e6ff; border: solid 1px #006cff; width: 200px;

В итоге у нас получился такой код:

<html>
<head>
<style type=»text/css» media=»screen»>
h2 {
    color:#003366;
    text-align:center;
}

h3 {
    color:#e2b500;
    font-family: Verdana;
}

h4 {
    color:#9d0000;
       background: #d4e6ff;
    border: solid 1px #006cff;
    width: 200px;
}
</style>
</head>
<body>
<h2>Заголовок (по середине)</h2>
<h3>Заголовок (размер текста h3)</h3>
<h4>Заголовок (размер h4)</h4>

</body>
</html>

Сохраняем его и смотрим, что получилось: Пример css.
Итак, основные стили для заголовков были описаны. Но можно придумать ещё множество красивых и эффектных комбинаций стилей, которые без сомнения привлекут внимание читателей.

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

Предыщая: Введение в CSS

Следующая: Оформление списков CSS

Создание заголовка сайта с помощью CSS