HTML / CSS / JavaScript
June 12, 2019

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; }