|
 Nadzirajte povezave in njihov izgled s CSSjem!
CSS Povezave
Brez CSSja bi bile povezave zelo dolgočasne in nezanimive. S pomočjo CSSja pa lahko povezave različno obarvamo, jim določimo različne pisave, različne sloge, obrobe in še marsikaj drugega.
CSS povezave po poglavjih:
- osnove css povezav
- menjava barve besedila
- menjava barve ozadja
- podčrtane & nepodčrtane povezave
Priporočam:
- nepodčrtane povezave
CSS koda za povezave je razdeljena na 4 dele:
- a:link (osnovni izgled povezave)
- a:visited (obiskani izgled povezave)
- a:hover (izgled povezave, ko je miškin kazalec nad njo)
- a:active (izgled trenutne povezave)
Vsi deli povezave si morajo slediti nujno po vrsti, drugače stili ne bodo delali! (:hover nujno za :link in :visited, :active nujno za :hover)
V primeru, da hočemo imeti na strani več stilov povezav moramo uporabiti class-es. Class določa posamezni povezavi določen stil. Uporabimo jih pa tako, da za delom, ki ga želimo urejati (a, p, body, img, …) dodamo piko (.) in pa ime stila, ki bo določen, za to vrsto povezav. Toliko različnih povezav, kot jih imamo, toliko različnih imen moramo imeti. Preučite primer!
Primer:
CSS koda:
a.modra:link {
color: #0000FF; /* na začetku je besedilo povezave modre barve */
}
a.modra:visited {
color: #0000FF;
}
a.modra:hover {
color: #FF0000; /* ko greste z miško čez se besedilo obarva rdeče */
}
a.zelena:link {
color: #00FF00;
}
a.zelena:visited {
color: #00FF00;
}
a.zelena:hover {
color: #FFFF00;
}
HTML koda:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<a class="modra" href="/">modra povezava</a>
<br><br>
<a class="zelena" href="/">zelena povezava</a>
</body>
</html>
Prikaz
Zamenjava barve besedila
V tem primeru bomo določili, da bo bila povezava zelene barve (:link). Ko bomo šli z miško čez se bo barva spremenila v rdečo (:hover). Če boste povezavo kliknili se bo obarvala modro (:active), ker bo to aktivna povezava. Če boste šli nato pogledat še drugo vsebino in prišli nazaj na to stran pa bo povezava obarvana rumeno (:visited), kar bo nakazovalo, da ste jo že enkrat kliknili.
Primer:
CSS koda:
a:link {
color: #00FF00;
}
a:visited {
color: #FFFF00;
}
a:hover {
color: #FF0000;
}
a:active {
color: #0000FF;
}
HTML koda:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<a href="/">povezava</a>
</body>
</html>
Prikaz
Zamenjava barve ozadja
Na začetku bo ozadje modre barve, ko pa se bomo z miško sprehodili čez povezavo bo postalo rumene barve. Medtem se bo spreminjala tudi barva povezave, kar pa smo že obravnavali v prejšnjem poglavju o zamenjavi barve besedila.
Primer:
CSS koda:
a:link {
color: #FFFF00;
background: #0000FF;
}
a:visited {
color: #FFFF00;
background: #0000FF;
}
a:hover {
color: #0000FF;
background: #FFFF00;
}
HTML koda:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<a href="/">povezava</a>
</body>
</html>
Prikaz
Podčrtana in nepodčrtana povezava
Če v HTML dokumentu določimo samo povezavo, brez dodatnih stilov, nam brskalniki samodejno podčrtajo povezavo.
Primer:
HTML koda:
<html>
<head>
</head>
<body>
<a href="/">povezava</a>
</body>
</html>
Prikaz
V veliko primerih nam to, da se povezave samodejno podčrtajo, ne ustreza. Za to, da se znebimo podčrtanih povezav uporabimo atribut z imenom text-decoration:. Temu atributu nastavimo vrednost none (ni podčrtana). Če hočemo, da so povezave podčrtane pa nastavimo na underline.
Primer:
CSS koda:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
HTML koda:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<a href="/">povezava</a>
</body>
</html>
Prikaz
Uporabljajte CSS … vaša stran vam bo hvaležna !
|
Loading Poll...
ovezava znotraj iFrama