Šajā pēdējā selektora pamācībā es iepazīstināšu jūs ar ļoti īpašu selektora veidu. Tās ir tā sauktās pseidoklases un pseidoelementi. Tie ir selektori, kas neatsaucas uz konkrētiem HTML elementiem, bet tos ģenerē izvades ierīce.
Pseidoklases un pseidoelementus var izmantot, lai definētu deklarācijas HTML komponentiem, kurus nevar skaidri aprakstīt ar HTML elementu. Tipiski piemēri ir hipersaite, uz kuras tikko ir noklikšķināts, vai hipersaite, kas vēl nav apmeklēta.
Hipersaites projektēšana
Ļoti bieži lapā ir jāveido hipersaites. CSS šim nolūkam piedāvā daudzas iespējas, ko var izmantot, lai risinātu hipersaites dažādos stāvokļus un galu galā vizuāli pielāgotu tās.
Piemēram, ja vēlaties hipersaitei piešķirt sarkanu krāsu, tā izskatās šādi:
a:link { colour: red; }
Savukārt ar a:visited tiek atzīmētas jau apmeklētās hipersaites. Lai zilā krāsā attēlotu hipersaites, uz kurām jau ir uzklikšķināts, var izmantot šādu sintaksi.
a:visited { color:blue; text-decoration:none; }Pārlūkprogrammā tas izskatās šādi:
Ja vēlaties atsevišķi noformēt hipersaites, uz kurām pašlaik tiek klikšķināts, arī tas ir iespējams.
a:active { font-weight: bold; color: blue; text-decoration: none; }
Šim nolūkam tiek izmantota sintakse a:active.
Savukārt sintakse a:hover attiecas uz stāvokli, kad peles rādītājs ir pārvietots virs hipersaites. Ir arī vēl viens pseidoelements ar a:focus. Tas apraksta brīdi, kad hipersaite saņem fokusu.
Citi pseidoelementi
Ir pseidoelementi, kurus var izmantot, lai adresētu citu elementu daļas. Tipisks piemērs ir ::first-letter. Šis pseidoelements atlasa pašreizējā elementa pirmo rakstzīmi. To var izmantot visiem elementiem, kas satur tekstu. Taču jāuzmanās: pseidoelementus drīkst atzīmēt tikai visu selektoru beigās. Tāpēc tie jānovieto pirms sākuma iekavās.
h1::first-letter { color: blue; }
Elementa pirmo rindu var adresēt, izmantojot ::first-line. Šis pseidoelements ir piemērojams tikai bloku līmeņa elementiem. Piemērs:
p::first-line { background-blue; }
Un šeit ir redzams rezultāts pārlūkprogrammā:
uz
Divus pseidoelementus :after un :before var izmantot, lai parādītu papildu saturu pirms un pēc elementa. Saturs nosaka, kas tiks parādīts.
- normal - noteikumā definētais pseidoelements netiek ģenerēts.
- none - pseidoelements netiek ģenerēts.
- <string> - tiek izvadīta šeit norādītā rakstzīmju virkne. Virknēm jābūt ieslēgtām ar vienu vai divām pēdiņām.
- <uri> - tiek ievietots resurss, kas norādīts zem URI.
- <counter> - definē skaitītāju vai adresē konkrētu skaitītāju.
- attr(<identifier>) - iestarpina iekavās norādītā atribūta vērtību.
- close-quote - iestarpina noslēdzošo apvērsto komatu.
- no-close-quote - netiek ievietots noslēdzošais apvērstais komats, bet ligzdošanas dziļums tiek palielināts par vienu.
- no-open-quote - netiek ievietots sākuma apvērstais komats, bet ligzdošanas dziļums tiek palielināts par vienu.
- open-quote - tiek ievietots sākuma komats.
Piemērs:
ul li:before { content: uri("bullet.gif"); }
CSS3 ieviesa arī pseidoselektoru :not. Tas ļauj ļoti viegli atlasīt konkrētu saturu. Pirmais piemērs parādīs, cik spēcīgs ir šis pseidoselektors. Pieņemsim, ka vēlaties atlasīt visas hipersaites, kurām nav atribūta href. Atbilstošā sintakse izskatās šādi:
a:not([href])
Šī sintakse neietekmētu "parastās" hipersaites. Tomēr būtu iespējama piekļuve enkuru definīcijām.
<a name="top">Slapas sākums</a>
Nedaudz detalizētāks piemērs ilustrē :not darbību. Dokumentā ir definētas dažādas teksta rindkopas.
<body> <h1>PSD-Tutorials.de</h1> <p>Šī ir rindkopa </p> <p>Šī ir vēl viena rindkopa.</p> <div>Šī ir teksta apgabals.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Papildus teksta rindkopām, kas apzīmētas ar p, ir arī div apgabals un hipersaite. Tagad vajadzētu notikt šādam:
- Visām ar p atzīmētajām rindkopām tiek piešķirta melna šrifta krāsa.
- Visur, kur nav p-paragrāfu, kā fonta krāsa tiek izmantota sarkana.
Attiecīgā CSS sintakse izskatās šādi:
p { krāsa:#000; } :not(p) { krāsa:#ff0000; }Mantojamības princips
Viena no vissvarīgākajām lietām, lai izprastu CSS definīcijas, ir mantošana. Patiesībā CSS stila īpašības tiek mantotas no viena elementa citam.
Piemēram:
html { krāsa: sarkana }Šī definīcija elementam html piešķir priekšplāna sarkano krāsu.
Pateicoties mantošanas principam, šī krāsas definīcija tagad attiecas arī uz visiem elementiem, kas ir pakārtoti html. Tas nozīmē, ka visi zem html esošie elementi pēc noklusējuma tiek attēloti sarkanā krāsā. Šī varianta priekšrocība ir tā, ka šiem elementiem nav skaidri jādefinē sarkanā krāsa. Bet ko darīt, ja p-daļu saturs nav jāattēlo sarkanā krāsā? Tad ir jāpārraksta html virsuzdevuma krāsas definīcija.
html { krāsa: sarkana; } p { krāsa: #000; }
Kas notiek, ja ir divi elementi p un div?
<body> <p>PSD-Tutorials.de</p> <div>World</div> </body>
Rezultāts izskatās šādi:
Krāsu definīcija html ietekmē tikai div saturu. Savukārt p rindkopa tiek attēlota melnā krāsā.
CSS ir dažādi veidi, kā norādīt stila definīcijas. Tas ir arī iemesls, kāpēc elementam var būt pretrunīgi norādījumi. Šādiem gadījumiem CSS nodrošina svēršanas principu. Šis princips nosaka, kuriem elementa norādījumiem ir prioritāte. Es šeit nevēlos iedziļināties šajā principā. Tomēr sīkāku informāciju par to var atrast vietnē http://wiki.selfhtml.org/wiki/CSS/Kaskade vai http://www.thestyleworks.de/basics/cascade.shtml.
Mans mērķis ir parādīt, kam jāpievērš uzmanība, definējot CSS īpašības. Šim nolūkam kalpo šāds piemērs:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> body { font-family:Arial, Helvetica, sans-serif; font-size: 90%; } p { colour: #000; } h1 { font-size: 120%; font-weight: normal; } strong { krāsa: #CCCCCC; } h2 strong { krāsa: sarkana; } </style> </head> <body> <div> <div> <h1>PSD-Tutorials.lv</h1> <p>Šī ir rindkopa ar <strong>bold vārdu</strong>.</p> <h2>Šī ir virsraksts ar <strong>bold vārdu</strong>.</h2> </div> </body> </html>Pārlūkprogrammā tas izskatās šādi:
Kā redzams, ar, piemēram, strong apzīmētie vārdi tiek formatēti atšķirīgi. Tas, kurš formatēšanas veids tiek izmantots, galu galā ir atkarīgs no definīciju secības.
Kā alternatīva ir arī atslēgvārds !important, ko var izmantot, lai CSS norādījumu atzīmētu kā īpaši svarīgu.
<style> body { font-family:Arial, Helvetica, sans-serif; font-size: 90%; } p { color: #000; } h1 { font-size: 120%; font-weight: normal; } strong { colour:#CCCCCC !important; } h2 strong { colour: red; } </style>Vēlreiz aplūkojiet rezultātu:
Šajā kontekstā noteikti vēlreiz izlasiet šajā pamācībā minētos avotus. (Pat ja jums noteikti nav nepieciešams pārāk dziļi iedziļināties šajā tēmā, lai sāktu ar to).
