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

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

У мові 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>

    У пункті margin відступи треба вказувати за годинниковою стрілкою, починаючи з верхнього відступу, через пробіл (зверху справа знизу зліва).