Як змінити колір заголовків

Як змінити колір заголовків

У HTML (HyperText Markup Language або "Мова розмітки гіпертексту") передбачено шість спеціальних тегів для відображення заголовків різного рівня. Всі вони мають типові параметри (розмір та шрифт, величини відступів від попереднього та наступного елементів тощо). Ці параметри можна перевизначити за допомогою інструкцій мови CSS (Cascading Style Sheets або "Каскадні таблиці стилів") і таким чином змінити вигляд заголовків у тексті веб-сторінки.

Інструкція

1. Розмістіть заголовки різних рівнів між відкриваючими та закриваючими тегами, якщо це ще не зроблено у вихідному коді веб-сторінки. Наприклад, найважливіший заголовок (перший рівень) має бути між тегами < h1 > і </h1 >:< h1 > Заголовок першого рівня </h1 > Підзаголовок наступного за важливістю рівня слід розмістити між тегами < h2 > і </h2 > тощо. Останнім з цих рівнів є шостий - < h6 > і </h6 >.

2. Помістіть у заголовкову частину вихідного коду (між тегами < head > і </head >) інструкцію, що повідомляє браузеру відвідувача, що в цьому місці розміщено опис стилів мовою CSS:< style type = "" text/css "" >/* тут будуть інструкції мови CSS */</style >

3. Впишіть style, що відкриває та закриває теги, описи стилів для заголовків кожного рівня, вигляд якого ви хочете змінити. Наприклад, якщо треба змінити тільки зовнішній вигляд заголовків першого рівня, то цей код може виглядати так:<style type=""text/css""> h1 { color: Red; font-size: 20px; font-style: italic; font-weight: bold; margin-top: 30px; margin-bottom: 20px;} </style > Тут h1 вказує, що опис у фігурних дужках відноситься до тегу h1 і називається "селектором". Параметр color визначає колір тексту, параметр font-size - розмір шрифту, font-style зі значенням italic - похиле накреслення букв, font-weight зі значенням bold - жирний шрифт, margin-top - порожній, margin-bottom - знизу. Для заголовків другого рівня треба додати аналогічний блок з селектором h2 тощо.

4. Використовуйте скорочений синтаксис, якщо рівнів треба описати досить багато. Наприклад, можна помістити описи шрифтів в один параметр, як і опис розмірів відступів. Зразок:<style type=""text/css""> h1 { color: Red; font: bold 20px arial; margin: 30px 0 20px 0; } h2 { color: Orange; font: bold 18px arial; margin: 25px 0 15px 0;} </style > B параметрі margin відступи слід вказувати за годинниковою стрілкою, починаючи з верхнього відступу, через пробіл (зверху праворуч знизу ліворуч).