Ka seekord ei puutu me eriti xhtml-i, vaid tegeleme ainult css-ga. Ning seekord on teema palju huvitavam kui eelmine teema (kasti element). Seekord räägime veebilehe kujudamise erinevatest tehnikatest ja võtetest. Pange ennast valmis, teema on väga lai, ning artikkel on suhteliselt pikk.
Rohkem kui ühe elemendi omaduste muutmine
Kui me tahame anda mitmele elemendile ühesugused omadused, näiteks värvuse, stiili jne. siis peame stiililehte lisame ühele reale mitu elemendi märgendit, eraldades neid üksteist komadega. Seejärel lisame märgendi järele looksulud ja nende vahele omadused, mis hakkavad kehtima kõikide elementide puhul. Näiteks, kui lisame stiililehte nii paragrahvi kui ka pealkirja ning omaduseks määrame tekstivärvuse, siis hakkavad kõik samal lehel olevate paragrahvide ja pealkirjade värvus olema sama.
Elemendi ühe osa kujunduse muutmine
Seda tehnikat on kasulik rakendada siis, kui te tahate muuta ainult ühte osa elemendist. Näiteks, te tahate muuta paragrahvis ainult ühe sõna värvust. Selle jaoks ümbritseme soovitud elemendi osa <span> märgenditega ja stiililehte lisame märgendi “span”. Looksulgude vahele lisame need muudatused, mis hakkavad kehtima ainult elemendi selle osa kohta, mis on “span” märgendite vahel.
Pseudo-elemendid
Pseudo-elemendi ülesandeks on mõjutada ainult väikest osa elemendist. Näiteks teksti ainult iga rea esimest tähte või teksti esimest rida. Pseudo-elemendi kasutamiseks lisame elemendi märgendi, seejärel kooloni ja seejärel ühe neljast omadusest:
- :first-letter- Mõjutab paragrahvi või pealkirja esimest tähte
- :first-line- Mõjutab paragrahvi esimest rida
- :after- Lisandub mõni objekt elemendi järel (looksulgude vahele tuleb lisada omadus “content” ning selle väärtuseks lisatav element)
- :before- Lisandub objekt enne elementi (samamoodi nagu “:after” puhul)
Kogu veebilehekülge mõjutavad stiililehed
Kui me loome veebilehekülge, mis koosneb mitmest veebilehest/dokumendist, siis muutub igaühe kujundamine suhteliselt tüütuks. Selleks, et luua selline kontrollpunkt, kust saaks mõjutada kõiki veebilehe elemente, tuleb esimesena asjana luua uus fail. Selle faili nimetuse valite ise, kuid selle nimelaiendiks peab olema “css” ning see fail peab asuma samas kaustas mis teisedki veebidokumendid. Sellesse faili lisame kõik märgendid ja omadused, mida tahame nende puhul muuta. NB! Selles failis pole vaja luua stiililehte, see dokument juba ongi iseenesest stiilileht.
Kui oleme lisanud kõik vajalikud muudatused, salvestame faili. Seejärel läheme nendele veebilehtedele, kus me tahame neid muudatusi kasutada. Selle jaoks lisame veebilehe päisesse poolmärgendi “link”. Sellel märgendil on 3 atribuuti:
- rel (relativity) mille väärtuseks on alati “stylesheet”
- type mille väärtus on alati “text/css”
- href (hyper reference) mille väärtuseks on .css- faili nimetus, mis sisaldab kõiki reeglid ja omadusi. Selle väärtus on alati kujul “nimetus.css”
Nüüd mõjutavad kõik .css failis olevad reeglid ja omadused neid veebilehti, kus asub selle stiililehe link.
Välise stiililehe ignoreerimine
Vahel tekib vajadus muuta mõnel veebilehel oleva elemendi omadust, mis on juba määratud välise stiililehe poolt. Näiteks kui välise stiililehe poolt on tekstivärvus sinine, kuid kindlal veebilehel tahate, et tekst oleks mõnd muud värvi. Sellisel juhul tuleb antud veebilehe päisesse vanaviisi lisada stiilileht ja muuta siis vastavad omadused. KUID see peab olema päises välise stiililehe järel.
Alluvus
Märgendid on xhtml-s alati kõrgema järgu märgendi suhtes alluvad. Näiteks päis ja keha alluvad “html”-le ja päisele allub css stiilileht jne. Kui me tahame näiteks kujundada paragrahvi sees olevat linki või muud objekti, kuidas me seda tegema peaksime?
Selleks, et kujundada mõne elemendi alluvuses olevat elementi (last) lisame stiililehte vanemelemendi märgendi, seejärel nurksulu ja lapselemendi märgendi (vanem>laps). Niiviisi saab html aru, kumb elementidest on laps ja kes vanem, ning oskab anda css reeglid lapsele või siis vanemale.
Kujundamine klasside abil
Vahel tahame mitmele ühesugusele elemendile anda erinevad omadused. Kuid see ei tule välja, kui lisame stiililehte elemendi märgendi. Kõigil elementidel on siis ühesugused omadused. Siin tulevad mängu klassid. Klassi loomiseks lisame css stiililehte punkti ja seejärel mõne nimetuse. Seejärel lisame looksulud ja nende vahele omadused, mis hakkavad kehtima just selle klassi liikmetel. See näeks välja umbes nii “.klassinimetus {omadus: väärtus;}”.
Seejärel lisame nendele elementidele, mis peavad kuuluma ühte või teisse klassi atribuudi “class” ja selle väärtuseks paneme klassi nimetuse.
tehnikarott 