Як задати колір посилання

Як задати колір посилання

Якщо браузер відвідувача веб-сайта не знаходить в коді сторінки ніяких вказівок на кольорове оформлення гіперпосилань, то він використовує значення за замовчуванням. Ці значення: синій для посилань в пасивному стані, червоний для активних (при наведенні курсору) посилань і відтінок кольору magenta для посилань вже відвіданих. Така кольорова схема не завжди поєднується з колірним рішенням дизайну сторінки, тому зазвичай в код включають блок описів стилю посилань.

Інструкція

  1. Складіть набір інструкцій для браузера, який міститиме описи кольорів посилання в трьох станах. Виглядати він може, наприклад, так:

    a: link {color: Red;}

    a: visited {color: Yellow;}

    a: hover {color: Orange;}

    Тут «a» на початку кожного рядка називається «селектором» і вказує тег, до якого браузер повинен застосовувати поміщене у фігурні дужки опису стилю. «A» — це і є тег гіперпосилання. Слово, доданий до селектора через двокрапку, називається «псевдокласів» — по ньому браузер визначає, до якого зі станів посилання відноситься стиль в фігурних дужках. link відповідає звичайній посиланню, visited — посиланню вже відвіданого, а hover — посиланням при наведенні на неї курсора. Кольори, присвоєні параметру color всередині фігурних дужок, можуть бути вказані як найменуванням відтінку кольору, так і його шістнадцятковим кодом.
  2. Якщо треба задати різні кольори різним групам посилань на сторінці, то надайте кожній групі власне позначення («клас») і зробіть для кожного з них окремий опис стилів. Наприклад, назвіть одну групу LinksRed, а іншу — LinksGreen. Тоді опис стилів буде виглядати так:

    a.LinksRed: link {color: Red;}

    a.LinksRed: visited {color: Yellow;}

    a.LinksRed: hover {color: Orange;}

    a.LinksGreen: link {color: Green;}

    a.LinksGreen: visited {color: DarkGreen;}

    a.LinksGreen: hover {color: Lime;}

    А в тегах посилань кожної групи треба вказати до якого класу вони відносяться. Наприклад:

    <a class=»LinksRed» href=»http://kakprosto.ru»> Червона посилання </ a>

    <a class=»LinksGreen» href=»http://kakprosto.ru»> Зелена посилання </ a>
  3. Ці інструкції написані на мові CSS (Cascading Style Sheets — «Каскадні таблиці стилів»), тому їх треба помістити всередину тега style, що відокремлює їх від інших інструкцій у вихідному коді сторінки, написаних мовою HTML (HyperText Markup Language — «мова розмітки гіпертексту» ):

    <style type=»text/css»>

     a.LinksRed: link {color: Red;}

     a.LinksRed: visited {color: Yellow;}

     a.LinksRed: hover {color: Orange;}

     a.LinksGreen: link {color: Green;}

     a.LinksGreen: visited {color: DarkGreen;}

     a.LinksGreen: hover {color: Lime;}

    </ Style>
  4. Помістіть підготовлений блок опису стилів посилань в заголовну частину вихідного коду сторінки — вона обмежена тегами <head> і </ head>.