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

Link Tugmalari

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>

CSS Linklar

CSS Linklar

Linklarga Stil Berish

Matn Dekoratsiyasi

Fon Rangi

Link Tugmalari

Qo'shimcha Misollar

Kursorga Misol

On this page