Tyylitiedostojen avulla voidaan hallinnoida koko nettisivuston ulkoasua. Jokaisen sivuston sivun. CSS:n teho on juuri siinä, että hyvin pienellä vaivannäöllä, ideaalitilanteessa vain yhden tyylitiedoston, kautta voidaan muokata kaikkien sivuston ulkoasussa olevien tavaroiden esitystapaa.
Joskus voi vastaan tulla sellainen tilanne, jossa halutaan tehdä globaalilla tasolla toimivan tyylitiedoston kautta muutoksia vain johonkin sivustolla olevaan sivuun. Hämärältä kuulostaa, mutta tarkoitan tällä sitä, että jos meillä on koko nettisivuston alueella toiminnassa tyylitiedosto “oletus.css” ja halutaan siitä käsin vaikuttaa esimerkiksi vain jotakin yhtä haluttua osiota. Tämä on mahdollista tehdä asettamalla nettisivun lähdekoodiin haluttuun osioon haluttu id-tunniste avaavaan body-tagiin. Esimerkiksi näin:
<body id="yhteydenotto">
Tämän tunnisteen avulla voi koko sivun sisältöön tarrautua CSS:n avulla. Hyvin yksinkertaista, mutta tätä ei nähdäkseni kovin usein toteuteta. Syynä lienee se, ettei kansa tunne tämänlaisen ratkaisun olevan olemassa. Syynä tähän ilmiöön voi tietysti olla myös julkaisujärjestelmän kankeus.
Demonstroidaan (tämä on päivän fiini sana, jota pyrin jatkossakin suoltamaan suustani) vielä jonkin verran. Jospa nettisivuilla on vaikka yhteinen ulkoasun rakenne. Esimerkkitilanteessa sivuston rakenne on laitettu div-palikoilla läjään. Elementit on sijoitettu CSS:n avulla. Vau. Mitä mahdollisuuksia nyt avautuukaan! Asettamalla uniikin id-selektorin halutuille osioille voimme vaikka vaihtaa haluttujen osioiden palstojen leveyttä, sijaintia, fontin väriä, koko ulkoasun grafiikkaa… Kaikki sivuston ulkoasun tavarat kun on sijoitettu polveutuvasti body-elementin väliin. Esitellään tätä ajatusta näin:
Meillä on sivusto, siinä on useita eri sivuja. Laitamme etusivulle body-elementtiin CSS-selektoriksi “etusivu”. Sitten vaan tyylitiedostoa kopeloimaan.
body { background: #fff; }
body p { color: #000; }
body#etusivu { background: #000; }
body#etusivu p { color: #fff; }
Oheisessa esimerkkimerkkauksessa kaksi ylintä riviä käskyttävät kaikkia sivuston osioita, mutta kaksi alempaa riviä kumoavat ylimpien rivien ehdottamat temput.
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 0 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Sivupohja. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2008/03/10/hallitse-ulkoasua-cssn-ja-body-elementin-avulla.