CSS orqali linklar ko'plab usullarda stil berilishi mumkin.
Linklarga har qanday CSS xususiyati yordamida stil berishingiz mumkin (masalan, rang, shrift, fon va hokazo).
Misol
Shuningdek, linklar holatiga qarab turli xil ko'rinishda stil berilishi mumkin.
Linklarning to'rtta holati mavjud:
a:link - oddiy, hali tashrif buyurilmagan linka:visited - foydalanuvchi tashrif buyurgan linka:hover - sichqoncha ustida turgan linka: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 keraka:active holati a:hover dan keyin kelishi kerak
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 ; } 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 : 14 px 25 px ; text-align : center ; text-decoration : none ; display : inline-block ; }
a :hover , a :active { background-color : red ; } 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 : 2 px solid green ; padding : 10 px 20 px ; text-align : center ; text-decoration : none ; display : inline-block ; }
a :hover , a :active { background-color : green ; color : white ; } 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 >