CSS Linklar

CSS Linklar


Havolalarni o'zgartishish.

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

Namuna:

O'zingni Sinab Ko'r
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:

O'zingni Sinab Ko'r
/* 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:

O'zingni Sinab Ko'r
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:

O'zingni Sinab Ko'r
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:

O'zingni Sinab Ko'r
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;
}

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017