Biror bir saytga kirsangiz, u yerdagi havola(ссылка)ga sichqonchani oborsanigiz, bu havola o‘z ko‘rinishini o‘zgartirishini ko‘rgan bo‘lsangiz kerak, ya’ni tegiga chizadi yoki havola rangi o‘zgaradi vahakazo. Bular aynan CSS orqali amalga oshiriladi, to‘g‘riroq aytadigan bo‘lsak, psevdoklasslar bu ishni amalga oshirib beradi. Maqolamiz aynan havolalarga —  psevdoklasslarga bag‘ishlanadi.

Havolalar uchun quyidagi 4 ta psevdoklass ishlatiladi:

link — havolaning doimiy ko‘rinishi;

active — havolaning aktiv holatdagi(bosilayotgandagi) ko‘rinishi;

visited — havolaga kirilgandagi holati;

hover — sichqoncha havolaga olib borilgandagi ko‘rinishi.

Psevdoklasslar quyidagicha ishlatiladi:

A: psevdoklass nomi{…stil…}

Keling biror misol ko‘ramiz.

<html>
 <head>
  <title>Havola</title>
  <style>
a:link{color:red;}
a:active{color:black;}
a:hover{color:blue;}
a:visited{color:yellow;}
  </style>
 </head>
 <body>
<a href="#1">Doimiy havola qizil rangda</a></br>
<a href="#2">Kirilgan havola sariqda</a></br>
<a href="#3">sichqoncha oborilgandagi havola ko'k</a></br>
<a href="#4" >Aktiv havola qora</a></br>
 </body>
</html>

Natijada hamma stil xususiyatlarini ishlatib chiqardim, ya’ni rang barang bo‘lishi uchun

8css_1

Ranglardan tashqari boshqa attributlarni ham qo‘llash mumkin:

a:link {
color: blue ;
}
a:visited {
color:gray;
}
a:hover {
color:red ;
text-decoration:none;
font-weight:bold;
}
a:active {
color:green;
text-decoration:none;
text-transform:uppercase;
}

Agar, havolaning barcha holatlari bir xil bo‘lishini hohlasangiz, quyidagicha yozishingiz mumkin.

a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}

YUqoridagi holatni psevdoklassiz ham amalga oshirish mumkin.

a {color:black; text-decoration:none;}

Xullas, havolalarning tashqi ko‘rinishi CSS orqali boshqarilur ekan.