Šiame paskutiniame selektorių vadove aš jums pristatysiu labai specialų selektorių formą. Tai yra taip vadinamosios pseudo klasės ir pseudo elementai. Tai yra tokių selektorių, kurie nėra susieti su konkrečiais HTML elementais, o yra sugeneruojami iš išvesties įrenginio.
Naudodamiesi pseudo klasėmis ir pseudo elementais, galite nustatyti deklaracijas HTML komponentams, kuriuos negalima aiškiai apibūdinti naudojant HTML elementą. Tipiški pavyzdžiai yra tiesiogiai spustelėtoji arba dar neapšviečiama hipersaita.
Stilius hipersaitų
Labai dažnai norite pertvarkyti puslapio hipersaitus. CSS yra daug galimybių, leidžiančių apdoroti šių hipersaitų skirtingas būsenas ir pagaliau juos pritaikyti vizualiai.
Norėdami priskirti raudoną spalvą hipersaitui, kodas atrodys taip:
a:link {
spalva: raudona;
}Su a:visited bus pažymėtos jau lankytos hipersaitos. Naudojant šį sintaksę, galite pateikti tokias hipersaitas, kurie jau buvo spustelėti, mėlynai.
a:visited {
spalva:mėlyna;
teksto-dekoravimas:nėra;
}Naršyklėje tai atrodys taip:
Norėdami atskirai pertvarkyti hipersaitus, kuriuos šiuo metu spustelia, tai taip pat įmanoma.
a:active {
šriftavimo-svoris: pusjuodis;
spalva: mėlyna;
teksto-dekoravimas: nėra;
}
Tai atliekama naudojant a:active sintaksę.
Sintaksė a:hover skirta situacijai, kai pele pasiekiamas hipersaitas. Be to, su a:focus yra dar vienas pseudo elementas. Jis aprašo momentą, kai hipersaitas susilaukia fokuso.
Papildomi pseudo elementai
Yra pseudo elementų, leidžiančių pasiekti kitų elementų dalis. Tipiškas to pavyzdys yra ::pirmoji-raida. Šis pseudo elementas pasirenka esamo elemento pirmąją raidę. Jis gali būti naudojamas visiems elementams, kuriuose yra tekstas. Tačiau dėmesio: pseudo elementai turi būti užrašyti tik po visų selektorių. Jie turi stovėti prieš atidarantį skliaustą.
h1::first-letter {
spalva: mėlyna;
}
Naudodamas ::pirmoji-eilutė, galite pasiekti elemento pirmąją eilutę. Šis pseudo elementas taikomas tik bloko lygio elementams. Pavyzdys:
p::first-line {
fonas-mėlyna;
}
O čia rezultatas naršyklėje:
vienu
Naudodamiesi abiem pseudo elementais :after ir :before, galite pridėti papildomų turinio dalių prie elemento. Nustatoma, ką reikia rodyti su turiniu.
• normalus - įprastai nustatytas pseudo elementas negeneruojamas.
• nėra - pseudo elementas nesugeneruojamas.
• <string> - čia nurodytas eilučių eilutė yra išvedama. Eilutės dedamos į viengubas arba dvigubas kabutes.
• <uri> - įterpiama nurodyta URI išteklius.
• <skaitiklis> - apibrėžiamas skaitiklis arba kalbame apie tam tikrą skaitiklį.
• attr(<identifikatorius>) - įdedamas skliaustų nurodyto atributo reikšmė.
• close-quote - dedama uždaranti kabutė.
• no-close-quote - uždaranti kabutė neįdedama, tačiau vienetas padidėja viena lygiu.
• no-open-quote - atvira kabutė neįdedama, tačiau vienetu padidėja viena lygiu.
• open-quote - įdedama atvira kabutė.
Pavyzdys:
ul li:before {
turinys: uri("bullet.gif");
}
Naudojant CSS3, buvo pristatytas :not pseudo selektorius. Tai leidžia labai lengvai pasirinkti tiksliai turinį. Pirmuoju pavyzdžiu parodykime, kaip galingas iš tikrųjų yra šis pseudo selektorius. Tarkime, norite pasirinkti visus hipersaitus, neturinčius href atributo. Atitinkanti sintaksė atrodytų taip:
a:not([href])
"Įprasti" hipersaitai nepalieka įtakos šiai sintaksei. Tačiau galima pasiekti prieigos prie jų ankerio apibrėžimų.
<a name="top">Puslapio pradžia</a>
Truputį išsamus pavyzdys turėtų aiškiai parodyti naudojimąsi :not. Dokumente apibrėžti keli teksto paragrafai.
<body> <h1>PSD-Tutorials.de</h1> <p>Tai yra paragrafas.</p> <p>Tai yra kitas paragrafas.</p> <div>Tai yra teksto sritis.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Be abrašytų teksto skyrių, yra ir div plotas, ir hiperlinkis. Dabar turėtų įvykti šie dalykai:
• Visi su p pažymėti skyriai gauna juodą šrifto spalvą.
• O kur nėra p skyrių, šrifto spalva bus naudojama raudona.
Atitinkama CSS sintaksė atrodo taip:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Paveldėjimo principas
Viena svarbiausių dalykų, kai kalbama apie CSS apibrėžimus, yra paveldėjimas. Iš tikrųjų CSS stiliaus savybės paveldimos iš vieno į kitą elementą.
Pavyzdys:
html {
color: red
}
html {
color: red;
}
p {
color: #000;
}
Kas nutinka, jei yra du elementai p ir div?"
<body> <p>PSD-Tutorials.de</p> <div>Welt</div> </body>
Rezultatas atrodo taip:
Html spalvos apibrėžimas veikia tik div turinį. O p skyrius rodomas juoda šriftu.
CSS yra skirtingų stilių apibrėžimo būdų. Tai yra priežastis, kodėl vienam elementui gali būti prieštaringi nurodymai. Tokiais atvejais CSS numato svorio principą. Remiantis šiuo principu, aišku, kuriuos nurodymus elementui reikia laikytis. Šio principo smulkmenų čia netiksliai nesigilinsiu. Išsamesnė informacija šiuo klausimu pavyzdžiui rasite puslapyje http://wiki.selfhtml.org/wiki/CSS/Kaskade arba taip pat tinklalapyje http://www.thestyleworks.de/basics/cascade.shtml.
Kas man svarbu, tai parodyti, į ką turite atkreipti dėmesį, kai apibrėžiate CSS savybes. Tam, kaip pavyzdys, tarnauja šis pavyzdys:
<!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>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Naršyklėje tai atrodo taip:
Kaip matote, pavyzdžiui, strong pažymėti žodžiai formatuojami skirtingai. Koks formatavimo rūšis taikomas galiausiai priklauso nuo apibrėžimų eilės.
Papildomai, yra dar žymėjimas !important, kurį panaudojus galite pažymėti CSS nurodymą kaip ypatingai svarbų.
<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>Čia dar kartą pažvelkime į rezultatą:
Būtinai perskaitykite šio vadovo minėtas šaltinius. (Nors pradžioje jūs tikriausiai neturėtumėte gilintis į šią temą).
