Havolalar

Havolalarni o'zgartishish.


Havolalar css propertilari bilan o'zgartirilishi mumkin(masalan font-family, background va boshqalar bilan)

Namuna:

a {
color: hotpink;
}

Havolalar yana qanday holatda ekanligiga qarab ham turli ravishda o'zgartirilishi mumkin.

Havolalarning 4 ta holati:

a:link - oddiy holat
a:visited - foydalanuvchi tashrif buyurgan holat
a:hover - sichqoncha havolaning ustida turgan holat
a:active - havola bosilgan paytdagi holat
Namuna:
/* oddiy holat*/
a:link {
color: red;
}

/* foydalanuvchi tashrif buyurgan havola */
a:visited {
color: green;
}

/* sichqoncha havolaning ustida turgan holat */
a:hover {
color: hotpink;
}

/* havola bosilgan paytdagi holat */
a:active {
color: blue;
}

Havolarning o'zgarishi quyidagi qoidalarga rioya qilishi shart:

a:hover a:link va a:visited dan keyin kelishi shart
a:active a:hover dan keyin kelishi shart
Matnni o'zgartirish
text-decoration propertisi asosan havolalarning tagidagi chiziqni olib tashlash uchun ishlatiladi

Namuna:
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

Fon rangi
background-color propertisi halalarning foni rangini o'zgartirish uchun ishlatiladi:

Namuna:
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}

Havola tugmalari
Quyidagi misolda havola CSS propertilari majmui bilan o'zgartirilib tugma ko'rinishida tasvirlangan:

Namuna:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}