1. Начало
  2. Уеб сайт
  3. Уеб разработка
  4. CSS
  5. Промяна на стила на линковете с CSS псевдо-класове

Промяна на стила на линковете с CSS псевдо-класове

Псевдо-класове

Освен стандартните класове в CSS може да се използват и псевдо-класове. Псевдо-класовете в CSS се използват за влияние върху стила на специално състояние на селектора, например :hover може да се използва за промяна на цвета на бутона, след като потребителят постави курсора на мишката върху него.

Синтаксисът им е:

селектор:псевдоклас {свойство: стойност;}

Псевдокласовете най-често се ползват, за да се направят различни ефекти по хипервръзките на страницата. Направете CSS файл със следния примерен код:

a:link {color: #aa0000;}
a:visited {color: #00ff00;}
a:hover {color: #0000aa;}
a:active {color: #ff00ff;}

В горния код:
a:link – определя цвета на непосетените връзки в страницата
a:visited – определя цвета на посетените връзки
a:hover – задава ефект при поставяне на курсора върху връзката (връзката променя цвета си от тъмносин в тъмночервен)
a:active – задава цвят на активните връзки

Подредбата при дефинирането на псевдокласовете в CSS файла или секцията head на страницата трябва да бъде същата като в примера, т.е. най-горе да се дефинира a:link, след това a:visited, под него a:hover и най-долу – a:active, в противен случай ефектът няма да се прояви.

На мястото на цветовете (стойностите на свойството color) може да сложите каквито пожелаете други стойности за цвят. Експериментирайте за да получите различни цветови ефекти на хипервръзките.

Комбиниране на няколко ефекта

Чрез псевдокласовете могат да се комбинират няколко ефекта едновременно за хипервръзките в страницата. Един от най-често използваните ефекти, освен промяната на цвета, е премахване на подчертаването на хипервръзките и появата на долна черта при поставяне на курсора върху връзката. Този ефект се постига чрез следния код:

a:link {color: #aa0000; text-decoration: none;}
a:visited {color: #00ff00; text-decoration: none;}
a:hover {color: #0000aa; text-decoration: underline;}
a:active {color: #ff00ff; text-decoration: none;}

В случая е зададено премахване на подчертаването от хипервръзките чрез text-decoration: none и чрез text-decoration: underline е заден ефекта при поставяне на курсора върху връзката да се появява долна черта. Този ефект е комбиниран с промяната на цвета на връзката от тъмносин в тъмночервен. Тъй като в случая са дефинирани по две свойства на селектор, те са отделени с точка и запетая (;).

Могат да се комбинират и повече от 2 ефекта за хипервръзките, но е препоръчително да се избягва комбинирането например на 3-4 ефекта, тъй като такова претрупване не спомага за професионалния вид на
страницата.

Други ефекти

Чрез background-color: #ffff00 се задава появата на жълт фон при поставяне на курсора върху връзката. Така общият ефект е промяна цвета на връзката от тъмносин в тъмночервен и поява на жълт фон зад текста на връзката.

a:link {color: #aa0000;}
a:visited {color: #00ff00;}
a:hover {color: #0000aa; background-color: #ffff00;}
a:active {color: #ff00ff;}

Чрез font-size: 30px се задава уголемяване на текста до 30 пиксела. Уголемяване или намаляване на текста може да се постигне и като стойностите се зададат в процент, например font-size: 120%, което ще увеличи текста с 20% над първоначалния размер или font-size: 80%, което ще намали големината на текста с 20% под първоначалния му размер (при поставяне на курсора върху връзката) и т.н.

a:link {color: #aa0000;}
a:visited {color: #00ff00;}
a:hover {font-size: 30px;}
a:active {color: #ff00ff;}

Чрез font-family: impact при поставяне на курсора върху връзката се променя шрифта на текста от първоначално зададения – на impact.

a:link {color: #aa0000;}
a:visited {color: #00ff00;}
a:hover {color: #0000aa; font-family: impact;}
a:active {color: #ff00ff;}

Задаване на различни ефекти за различни хипервръзки от една страница

Понякога е наложително хипервръзките в една и съща страница да имат различен цвят и различни ефекти. Например ако страницата е с тъмносин фон на менюто, където ще са хипервръзките-бутони и с бял фон на останалата част от страницата, където също ще има хипервръзки, тогава е нужно връзките от менюто да бъдат с някакъв блед контрастен цвят, например бледожълто или бледосив и т.н., а връзките от основната част на страницата могат да бъдат с този по подразбиране цвят или някакъв оттенък на синия цвят.

За да се направят връзки с различен цвят и различни ефекти, се ползва комбинация между CSS класове и CSS псевдо-класове.

Синтаксисът при комбиниране на класове и псевдокласове е:

селектор.клас:псевдоклас {свойство: стойност;}

Направете CSS файл със следния примерен код:

a.menu:link {color: #cccccc; text-decoration: none;}
a.menu:visited {color: #dddddd; text-decoration: none;}
a.menu:hover {color: #ffffff; text-decoration: underline;}
a.menu:active {color: #aaaaaa; text-decoration: none;}
a:link {color: #aa0000;}
a:visited {color: #00ff00;}
a:hover {color: #0000aa;}
a:active {color: #ff00ff;}

В случая като наименование на класа е зададено „menu“, за да подсказва, че този вид хипервръзки е предназначен за менюто на страницата. Това название е произволно и може да бъде всякакво друго.

Зададените ефекти са:

  • за връзките от менюто – светлосив цвят, без подчертаване, като при поставяне на курсора върху тях те променят цвета си на бял и се появява подчертаване.
  • за връзките от тялото на страницата – тъмносин цвят, като при поставяне на курсора върху връзката цветът се променя на тъмночервен.
  • След като CSS файлът е готов, за да се проявят дефинираните ефекти, в HTML документа трябва да се напише код подобен на следния:
<a href="menupage.html" class="menu">Връзка от менюто</a>
<a href="otherpage.html">Връзка от тялото на страницата</a>

За да се ползва дефинирания ефект за хипервръзките от менюто, към тага за хипервръзки а трябва да се добави наименованието на дефинирания клас – class=“menu“.

В горния пример е дефиниран само един клас (menu), но в CSS файла могат да бъдат дефинирани 2, 3 класа и т.н., така че в страницата да има множество връзки с различни цветове и ефекти при поставяне курсора върху текста на връзката.

Обновена: 18.03.2022

Беше ли Ви полезна тази статия?

Вижте още