CSS havolalar
CSS havolalarni uslublash
HTML havolalar ko‘p CSS xossalari bilan ushlab kelinishi mumkin: color, text-decoration, background-, colorfont-size, font-weight, font-family va h.k.).
Misol
Havolani rang, background-color va qalin font-weight bilan ushlab keling:
a {
color: hotpink;
background-color: yellow;
font-weight: bold;
}
O‘zingiz sinab ko‘ring »
Havolalarni holatiga qarab uslublash
Bundan tashqari, havolalar qaysi holatda ekanligiga qarab turlicha uslubda bo‘lishi mumkin.
To‘rtta havola holati:
:link- a normal, unvisited link:visited— foydalanuvchi tashrif buyurgan havola:hover— foydalanuvchi sichqonchasini olib borgan havola:active— bosilgan o‘zanda havola
Havola holatlari uchun uslub belgilashda ba’zi tartib qoidalari bor:
- :hover :link va :visited dan keyin kelishi kerak
- :active must come after :hover
Misol
Havolalarga ularning holatiga qarab stil bering:
/* unvisited link */
a:link {
color: red;
}
/* visited
link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
O‘zingiz sinab ko‘ring »
CSS havolalar — matn bezagi
text-decoration xossasi ko‘pincha havolalardagi ostini chizishni 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;
}
O‘zingiz sinab ko‘ring »
CSS havolalar — fon rangi
background-color xossasi havolalar uchun fon rangi belgilash uchun ishlatilishi mumkin:
Misol
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
O‘zingiz sinab ko‘ring »
Ko‘proq misollar
Misol
Bu misol HTML havolalarga boshqa uslublar qanday qo‘shilishini ko‘rsatadi:
a.one:link {color:red;}
a.one:visited {color:blue;}
a.one:hover
{color:orange;}
a.two:link {color:red;}
a.two:visited {color:blue;}
a.two:hover {font-size:150%;}
a.three:link {color:red;}
a.three:visited {color:blue;}
a.three:hover {background:lightgreen;}
a.four:link {color:red;}
a.four:visited {color:blue;}
a.four:hover
{font-family:monospace;}
a.five:link {color:red;text-decoration:none;}
a.five:visited {color:blue;text-decoration:none;}
a.five:hover
{text-decoration:underline;}
O‘zingiz sinab ko‘ring »
Misol
Bu misol turli kursor turlarini ko‘rsatadi (havolalar 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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!