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

Псевдо-класовете имат подобен на класовете синтаксис и се ползват за добавяне на специфични ефекти към някои селектори.

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

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

Псевдокласовете най-често се ползват за да се направят различни ефекти по хипервръзките на страницата. Направете 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}
a:visited {color: #00ff00}
a:hover {color: #0000aa}
a:active {color: #ff00ff}

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

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

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 ефекта, тъй като такова претрупване не спомага за професионалния вид на
страницата.

3. Други ефекти

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

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


a:link {color: #aa0000}
a:visited {color: #00ff00}
a:hover {font-size: 30px}
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 {color: #0000aa; font-family: impact}
a:active {color: #ff00ff}

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

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

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

За да се направят връзки с различен цвят и различни ефекти се ползва комбинация между 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 класа и т.н., така че в страницата да има множество връзки с различни цветове и ефекти при поставяне кърсъра върху текста на връзката.