Hierarchija ir paveldimumas CSS kalboje
Nepaprastai svarbus dalykas CSS kalboje yra paveldimumas (angl. „inheritance“). Dauguma pradedančiųjų web dizainerių (CSS koduotojų), kurie bando įvaldyti CSS, šios sąvokos nesupranta ir nežino, kaip tai veikia.
Šiame straipsnyje išsiaiškinsime paveldimumo principą, elementų hierarchiją ir tarpusavio sąveiką ir paveldimumo reikšmę CSS kalboje.
Paveldimumo principas
Paprastai sakant, paveldimumą CSS kalboje galima lyginti su realiu pasaliu. Pavyzdžiui, tėvai susilaukia vaiko. Jis paveldėjo kokius nors tėvų bruožius (tėvo plaukus, motinos akis). Įsivaizduokime, kad vaikas užaugo ir sukūrė savo šeimą, o galiausiai gimė vaikas. Šios šeimos vaikas galbūt paveldėjo tėvo nosį, motinos plaukus ir senelio akių spalvą. Panašiu principu paveldimumas veikia ir CSS kalboje.
Elementų hierarchija ir tarpusavio sąveika
Išsiaiškinus paveldimumo sąvoką, būtina žinoti, kaip paveldimumas veikia. Iš tikrųjų paveldimumo hierarchijos nurodyti CSS aprašuose nereikia, tai prilauso nuo dokumento struktūros.
Turėtumėte puikiai žinoti, kad HTML dokumentas prasideda <html>, po to seka <head>, tada <title> ir t.t., o kiekviena atidaryta žymė turi būti uždaryta atitinkama tvarka ( </title>, </head>, ir </html> ). Patogu kiekvieną žymių porą įsivaizduoti kaip dėžę (bloką), į kurią gali būti patalpinta mažesnė dėžė, o toje dėžėje — dar kita dėžė ir t.t.
Žemiau pateiktas paveiksliukas su labai paprasta HTML struktūra.
<html>
<head>
<title></title>
</head>
<body>
<div>
<span></span>
<p></p>
</div>
</body>
</html>
Iš paveikslėlio arba kodo matome, kad visus elementus apima žymės <html> </html>, kurias galima įsivaizduoti kaip bloką, o jame — sudėtua kitus elementus (blokus). Kadangi mūsų tikslas yra suvokti, kaip paveldimos CSS savybės, į <head> </head> bloką nekreipsime dėmesio (ten aprašoma tik dokumento informacija, įtraukiami papildomi failai (*.css, *.js)).
Rašydamas apie paveldimumą negaliu nepaminėti dviejų esminių terminų, susijusių su šia sąvoka: tėvas (angl. „parent“) ir vaikas (angl. „child“).
Tėvas — elementas, turintis jam priklausančių elementų; vaikas — elementas, kuris paveldės savybes, priklausančias tėvui.
Taigi <body> </body> bloke surašyti 3 skirtingi elementai (div, span ir p), kurie yra jo vaikai; div elementas yra span ir p elementų tėvas.
Span ir p elementai yra lygiaverčiai, t.y. paveldės tas pačias tėvo savybes, tačiau neturės ryšio tarp vienas kito.
Beje, paveldimos ne tik tėvo savybės, tačiau taipogi ir tėvo tėvo, tėvo tėvo tėvo ir t.t.
Taigi tiek span, tiek p elementas paveldės html, body ir div savybes.
Aukščiau pateiktiems HTML kodo elementams parašykime atitinkamus CSS aprašus.
body { font-size: 10px; font-family: Arial; color: #333; }
div { color: #666; }
span { color: black; }
p { font-size: 80%; font-family: Verdana; }
Bandykime išsiaiškinti, kokias galutines savybes ir reikšmes turės visi elementai.
-
body
Kadangi nenurodyta jokia html elemento savybė, paveldimos tik numatytosios naršyklės savybės, o vėliau priskiriamos naujos reikšmės. Galutinės savybių reikšmės:
font-size: 10px;
font-family: Arial;
color: #333;
-
div
Elementas paveldi numatytasias naršyklės savybes bei body savybes. Galutinės savybių reikšmės:
font-size: 10px;
font-family: Arial;
color: #666 (iš pradžių elmentas paveldėjo color reikšmę iš body, t.y. #333, tačiau vėliau buvo nurodyta #666 reikšmė būtent šiam elementui);
-
span
Paveldi numatytasias naršyklės, elementų body ir div savybes. Galutinės savybių reikšmės:
font-size: 10px;
font-family: Arial;
color: black (paveldėjo #666 iš div, tačiau čia reikšmė buvo pakeista į black);
-
p
Paveldi numatytasias naršyklės, elmentų body ir div savybes. Galutinės savybių reikšmės:
font-size: 8px (nors div elementui nenurodyta font-size savybė, ji yra paveldima iš body, tad div perduoda savybę p elementui, tačiau čia nurodyta 80% paveldėtos reikšmės, t.y. 8px);
font-family: Verdana (kadangi šiam elementui buvo priskirta nauja font-family reikšmė);
color: #666 (reikšmė, kuri buvo nurodyta div elementui);
Paveldimumo ir hierarchijos reikšmė
Darbas su CSS būtų kur kas sunkesnis ir labiau varginantis, jeigu nebūtų paveldimumo. Įsivaizduokite — body sudaro 15 elementų. Jūs norite, kad visi elementai turėtų tą patį šriftą, dydį, tokią pat teksto spalvą. Būtų didžiausias absurdas, jeigu visiems elementams reikėtų rašyti tą patį kodą, ar ne? Laimei, mums šito daryti nereikia ir turime išeitį.
Nepamirškite viską išbandyti patys, praktikuotis. Sėkmės!
2008-10-05 11:36:08
Gairės:
Martyna
