V tem zadnjem vadnem programu o selektorjih vam predstavljam posebno obliko selektorjev. To so tako imenovane psevdo-razrede in psevdo-elementi. To so selektorji, ki se ne nanašajo na določene elemente HTML, temveč se generirajo iz izhodne naprave.
Z uporabo psevdo-razredov in psevdo-elementov se lahko določijo deklaracije za elemente HTML, ki jih ni mogoče nedvoumno opisati s HTML elementom. Tipični primeri so hyperlink, ki je bil ravno kliknjen ali pa hiprelink, ki še ni bil obiskan.
Oblikovanje hiperpovezav
Zelo pogosto želimo oblikovati hiperpovezave na strani. Za to CSS ponuja številne možnosti, s katerimi lahko naslovimo različna stanja hiperpovezav in jih končno tudi optično prilagodimo.
Če želite hiperpovezavi dodeliti rdečo barvo, bi to izgledalo takole:
a:link {
color: red;
}
Z a:visited pa so že obiskane hiperpovezave označene. S spodnjo sintakso lahko prikažemo takšne hiperpovezave, ki so bile že kliknjene, z modro barvo.
a:visited {
color:blue;
text-decoration:none;
}Rezultat v brskalniku izgleda takole:
Če želite posebej oblikovati hiperpovezave, ki so trenutno kliknjene, je to prav tako mogoče.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Uporablja se sintaksa a:active.
Sintaksa a:hover se nanaša na stanje, ko s kazalcem miške preletimo preko hiperpovezave. Poleg tega obstaja psevdo-element a:focus. To opisuje trenutek, ko hiperpovezava dobi fokus.
Dodatni psevdo-elementi
Obstajajo psevdo-elementi, s katerimi lahko naslovimo dele drugih elementov. Tipičen primer tega je ::first-letter. Ta psevdo-element izbere prvi znak trenutnega elementa. Uporablja se lahko za vse elemente, ki vsebujejo besedilo. Vendar bodite previdni: psevdo-elementi morajo biti navedeni na koncu vseh selektorjev. Zato morajo biti pred odpirajočo kodno zavitko.
h1::first-letter {
color: blue;
}
Z ::first-line lahko nagovorimo prvo vrstico elementa. Ta psevdo-element je uporaben samo pri elementih na bločni ravni. Primer:
p::first-line {
background-blue;
}
In tukaj je rezultat v brskalniku:
en
Z uporabo psevdo-selektorjev :after in :before lahko pred in po elementu prikažemo dodatne vsebine. Z atributom content določimo, kaj naj bo izpisano.
• normal – običajno določen psevdo-element se ne generira.
• none – psevdo-element se ne generira.
• <string> – naveden niz znakov se izpiše. Nize znakov določamo z enojnimi ali dvojnimi narekovaji.
• <uri> – vstavi se vir, naveden pod URI.
• <counter> – določi števec ali naslovi določen števec.
• attr(<identifier>) – vstavi se vrednost atributa, navedena v oklepajih.
• close-quote – vstavi zapiralni narekovaj.
• no-close-quote – zapiralni narekovaj se sicer ne vstavi, vendar se raven vmesnika poveča za eno.
• no-open-quote – odpiralni narekovaj se sicer ne vstavi, vendar se raven vmesnika poveča za eno.
• open-quote – vstavi se odpiralni narekovaj.
Primer:
ul li:before {
content: uri("bullet.gif");
}
Z dodatkom CSS3 je bil uveden psevdo-selektor :not. S tem lahko zelo enostavno izbiramo vsebine ciljno. Prvi primer prikazuje, kako močan je ta psevdo-selektor v resnici. Recimo, da želite izbrati vse hiperpovezave, ki nimajo atributa href. Ustrezen zapis bi bil tak:
a:not([href])
Običajne hiperpovezave ne bi bile prizadete s tem zapisom. Vendar bi do definicij sidrišč dostopali preko tega.
<a name="top">Seitenanfang</a>
Podrobnejši primer bo razkril moč :not. V dokumentu je definiranih več odstavkov besedila.
<body> <h1>PSD-Tutorials.de</h1> <p>Das ist ein Absatz.</p> <p>Das ist ein weiterer Absatz.</p> <div>Das ist ein Textbereich.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Poleg odstavkov, označenih s p, obstajata tudi območje div in hiperpovezava. Zdaj naj se zgodi naslednje:
• Vsem odstavkom označenim s p se dodeli črna barva pisave.
• Kjer ni odstavkov p, pa se uporabi rdeča barva pisave.
Ustrezen CSS sintaksa je naslednja:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Načelo dedovanja
Ena najpomembnejših stvari pri razumevanju CSS definicij je dedovanje. V CSS se dejansko slogovne lastnosti dedujejo iz enega elementa na drugega.
Primer:
html {
color: red
}Z tej definicije bo elementu html dodeljena rdeča barva ospredja.
Zaradi tega dedovanega načela bo ta določena barva v prvi vrsti veljala tudi za vse elemente, ki so podrejeni html. Tako bodo torej privzeto vsi ti elementi najprej prikazani v rdeči barvi, ki so pod html. Prednost te možnosti je, da rdeče barve ni treba posebej določiti za te elemente. Kaj pa, če vsebine p-odstavkov ne smejo biti prikazane v rdeči barvi? Potem je treba preglasiti dedovano barvno določitev html.
html {
color: red;
}
p {
color: #000;
}
Kaj pa, če obstajata zdaj dva elementa, p in div?
<body> <p>PSD-Tutorials.de</p> <div>Svet</div> </body>
Rezultat je takšen:
Barvna določitev html vpliva le na vsebino div-a. Odstavek p pa je prikazan v črni pisavi.
V CSS obstajajo različni načini za določanje slogovnih definicij. Zato lahko za element obstajajo nasprotujoče si navodila. V takih primerih CSS določa pravila uteževanja. Na podlagi tega pravila je določeno, katera navodila za element imajo prednost. Ne želim se spustiti v podrobnosti tega načela, vendar boste podrobne informacije našli na strani http://wiki.selfhtml.org/wiki/CSS/Kaskade ali tudi na http://www.thestyleworks.de/basics/cascade.shtml.
Kar me zanima, je, da vam pokažem, na kaj morate biti pozorni pri določanju CSS lastnosti. V ta namen je naslednji primer:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>To je odstavek z besedo <strong>pogumna</strong>.</p>
<h2>To je naslov s <strong>pogumno besedo</strong>.</h2>
</div>
</body>
</html>V brskalniku to izgleda takole:
Kot vidite, so besede, označene z strong, oblikovane drugače. Katera vrsta oblikovanja se uporabi, je odvisno od zaporedja določitev.
Kot alternativo obstaja tudi ključna beseda !pomembno, s katero lahko označite CSS navodilo kot izredno pomembno.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Tudi tu si oglejte rezultat:
V zvezi s tem si zagotovo poglejte vire, navedene v tem vadnem programu. (Čeprav za začetek morda ni treba tako globoko prodreti v to tematiko).
