Dažādu krāsu hipersaites parasti nepieciešamas lapās, kurās ir vairāki apgabali ar atšķirīgu fona krāsu. Uz tumša fona loģiskāk izvietot gaišas krāsas hipersaites, bet uz gaiša, pretēji - tumšas krāsas saites.
Dažādu hipersaišu stila atsevišķai vadībai izskatīsim divus variantus. Pirmais balstīts uz konteksta selektoriem. Ideja sekojoša. Izvēlnes saites iekļautas blokā, piemēram, <div id="menu">...</div>, bet tekstā atrodošās saites blokā <div id="content">...</div>. Tādā gadījumā stils šīm atšķirīgajām saitēm izskatīsies sekojošs.
<style type="text/css">
#menu A { color: red; }
#content A { color: green; }
</style>
Pieraksts #menu A nozīmē, ka stils attieksies tikai uz to selektoru A, kurš atrodas iekš elementa ar identifikātoru menu (piemērs 1).
Piemērs 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Konteksta selektoru izmantošana</title>
<style type="text/css">
#menu {
padding: 5px; /* Atkāpe ap tekstu */
background: #066; /* Fona krāsa */
}
#menu a {
color: #ffc; /* Hipersaites krāsa */
}
#content {
background: #ccc; /* Fona krāsa */
padding: 5px; /* Atkāpe ap tekstu */
}
#content a {
color:#6f4a25; /* Hipersaites krāsa */
}
</style>
</head>
<body>
<div id="menu">
<a href="link1.html">Saite 1</a> | <a href="link2.html">Saite
2</a> | <a href="link3.html">Saite 3</a>
</div>
<div id="content">
<a href="link1.html">Saite 1</a> | <a href="link2.html">Saite
2</a> | <a href="link3.html">Saite 3</a>
</div>
</body>
</html>
Piemēra rezultāts.
Otra metode balstās uz klašu izmantošanu. Hipersaitei, kurai jānosaka krāsa, tiek veidota jauna klase un pievienota selektoram A (piemērs 2).
Piemērs 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Klašu izmantošana</title>
<style type="text/css">
A {
color: orange; /* Hipersaites krāsa */
}
A.content {
color: #6f4a25; /* Hipersaites krāsa */
text-decoration: none; /* Novācam pasvītrojumu */
}
A.content:visited { /* Apmeklēto saišu krāsa */
color: purple;
}
A.content:hover {
color: red; /* Saišu krāsa, kad tai uzvests kursors */
}
</style>
</head>
<body>
<p><a href="link1.html">Saite 1</a> | <a href="link2.html">Saite
2</a> | <a href="link3.html">Saite 3</a></p>
<div id="content">
<a href="link1.html" class="content">Saite 1</a> | <a
href="link2.html" class="content">Saite 2</a> | <a
href="link3.html" class="content">Saite 3</a>
</div>
</body>
</html>
