Core

CSS Linklar

...

SU

CSS Linklar

CSS orqali linklar ko'plab usullarda stil berilishi mumkin.

Linklarga Stil Berish

Linklarga har qanday CSS xususiyati yordamida stil berishingiz mumkin (masalan, rang, shrift, fon va hokazo).

Misol

a {
  color: hotpink;
}

Shuningdek, linklar holatiga qarab turli xil ko'rinishda stil berilishi mumkin.

Linklarning to'rtta holati mavjud:

  • a:link - oddiy, hali tashrif buyurilmagan link
  • a:visited - foydalanuvchi tashrif buyurgan link
  • a:hover - sichqoncha ustida turgan link
  • a:active - bosilgan paytdagi link

Misol

/* tashrif buyurilmagan link */
a:link {
  color: red;
}
 
/* tashrif buyurilgan link */
a:visited {
  color: green;
}
 
/* sichqoncha ustidagi link */
a:hover {
  color: hotpink;
}
 
/* tanlangan link */
a:active {
  color: blue;
}

Linklar holati uchun stil belgilashda quyidagi tartib qoidalariga rioya qilish kerak:

  • a:hover holati a:link va a:visited dan keyin kelishi kerak
  • a:active holati a:hover dan keyin kelishi kerak

Matn Dekoratsiyasi

text-decoration xususiyati ko'pincha linklardagi ostki chiziqni olib tashlash uchun ishlatiladi:

Misol

a:link {
  text-decoration: none;
}
 
a:visited {
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
a:active {
  text-decoration: underline;
}

Fon Rangi

background-color xususiyati linklar uchun fon rangini belgilash uchun ishlatiladi:

Misol

a:link {
  background-color: yellow;
}
 
a:visited {
  background-color: cyan;
}
 
a:hover {
  background-color: lightgreen;
}
 
a:active {
  background-color: hotpink;
}

Bu misol ko'plab CSS xususiyatlarini birlashtirib, linklarni tugma sifatida ko'rsatishni namoyish etadi:

Misol

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

Qo'shimcha Misollar

Bu misol linklarga boshqa uslublarni qanday qo'shishni namoyish etadi:

Misol

a.one:link {
  color: #ff0000;
}
a.one:visited {
  color: #0000ff;
}
a.one:hover {
  color: #ffcc00;
}
 
a.two:link {
  color: #ff0000;
}
a.two:visited {
  color: #0000ff;
}
a.two:hover {
  font-size: 150%;
}
 
a.three:link {
  color: #ff0000;
}
a.three:visited {
  color: #0000ff;
}
a.three:hover {
  background: #66ff66;
}
 
a.four:link {
  color: #ff0000;
}
a.four:visited {
  color: #0000ff;
}
a.four:hover {
  font-family: monospace;
}
 
a.five:link {
  color: #ff0000;
  text-decoration: none;
}
a.five:visited {
  color: #0000ff;
  text-decoration: none;
}
a.five:hover {
  text-decoration: underline;
}

Misol

Bu misol link tugmalarini yaratishning boshqa usulini ko'rsatadi:

a:link,
a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
 
a:hover,
a:active {
  background-color: green;
  color: white;
}

Kursorga Misol

Bu misol turli xil kursor turlarini namoyish etadi (linklar uchun foydali bo'lishi mumkin):

<span style="cursor: auto">auto</span><br />
<span style="cursor: crosshair">crosshair</span><br />
<span style="cursor: default">default</span><br />
<span style="cursor: e-resize">e-resize</span><br />
<span style="cursor: help">help</span><br />
<span style="cursor: move">move</span><br />
<span style="cursor: n-resize">n-resize</span><br />
<span style="cursor: ne-resize">ne-resize</span><br />
<span style="cursor: nw-resize">nw-resize</span><br />
<span style="cursor: pointer">pointer</span><br />
<span style="cursor: progress">progress</span><br />
<span style="cursor: s-resize">s-resize</span><br />
<span style="cursor: se-resize">se-resize</span><br />
<span style="cursor: sw-resize">sw-resize</span><br />
<span style="cursor: text">text</span><br />
<span style="cursor: w-resize">w-resize</span><br />
<span style="cursor: wait">wait</span>

Last updated on

Previous

Belgilar (Icons)

Next

CSS Ro'yxatlar

On this page

Xato haqida xabar berish