Astmelised laadilehed (0)

Esitlusgraafika ja koduleheküljed ­ CSS 1
Astmelised laadilehed ­ CSS Kodulehekülgede üheks oluliseks kujunduspõhimõtteks on hoida lehtede visuaalne väljanägemine võimalikult ühtne kogu kodulehekülje ulatuses. See tähendab ühesugust taustavärvi, sama kirjatüübi ja suuruse kasutamist ning sama paigutust. Suuremate kodulehekülgede puhul võib näiteks taustavärvi või kirjatüübi muutmine põhjustada suurt peavalu ­ muudatused tuleb ju teha kõikidele HTML-failidele. Et selliseid probleeme vältida peaks olema sisu ja kujundust teineteisest lahus. Algselt oligi HTML mõeldud ainult dokumendi struktuuri (pealkirjad, tekstilõigud, loetelud ) määramiseks, kuid seda hakati ka kasutama dokumentide kujundamiseks. Lahenduseks sellele probleemile töötati välja CSS ehk Cascading Style Sheets ( sobivaim eestikeelne tõlge oleks astmelised laadilehed) ­ keel HTML-dokumentide kujunduse määramiseks. CSS puhul on hoitakse kujundust dokumendi sisust lahus, ning piisab muudatusest ühes kohas, et muuta näiteks kõigi kodulehekülje lehtede taustavärvi. Samuti lisab CSS terve rea võimalusi, mis HTML'is puudusid ­ näiteks tekstiridade vahe muutmine.
CCS standardid ja tarkvara Astmeliste laadilehtede standardid on välja töötanud sama organisatsioon , kes on koostanud ka HTML standardid ­ W3 konsortsium (www.w3.org). Praegusel hetkel on kasutusel W3C soovitused CSS1 (1996) ja CSS2 (1998) ning käib töö CSS3 kallal. Lisaks sellele on eraldi CSS soovitus mobiilseadmete jaoks. Cascading Style Sheets, http://www.w3.org/Style/CSS/ CSS1, http://www.w3.org/TR/REC-CSS1 CSS2, http://www.w3.org/TR/REC-CSS2/ Laadilehtede kasutamisel on peamiseks probleemiks see, et enamiku brauserite toetus CSS'le on hetkel ainult osaline ­ peamised CSS käsud töötavad, kuid vähemkasutatavaid käske brauser ei toeta või tõlgendab W3C soovitustest erinevalt. Üldiselt toetavad levinumad brauserid CSS'i alates järgmistest versioonidest: · Netscape Navigator 4.0 ja uuemad; · Internet Explorer 3.0 ja uuemad; · Opera 3.5 ja uuemad. Ainsaks brauseriks, mis CSS'i täies ulatuses toetab on Internet Explorer 5 for the Macintosh. ülejäänud brauserid toetavad vaid osa CSS käske. Täpsema ülevaate, milliseid CSS käske levinumad brauserid toetavad, leiab aadressil http://www.webreview.com/style/css1/charts/mastergrid.shtml . CSS-failide toimetamiseks sobib ükskõik milline tekstitoimeti, kuid on loodud ka spetsiaalseid CSS-tekstitoimeteid, mis võimaldavad defineeritud laadi väljanägemist koheselt vaadata, kontrollida kasutaja poolt kirjutatud CSS vastavust standarditele jpm. Üheks selliseks programmiks on TOPStyle Pro, mille piiratud võimalustega versioon TOPStyle Lite on tasuta saadaval. TOPStyle Lite, http://www.bradsoft.com/topstyle/tslite/
Hans Põldoja, Tallinna Lilleküla Gümnaasium Esitlusgraafika ja koduleheküljed ­ CSS 2
Kuidas CSS käsud HTML lehele lisatakse? CSS käskude lisamiseks HTML lehele on kaks võimalust: · Lisada CSS käsud iga HTML faili päisesse (sisemine laadileht); · Salvestada CSS käsud eraldi faili ja lisada iga HTML lehe päisesse selle faili nimi (väline laadileht). Esimesel juhul on HTML faili päises ja käskude vahel järgmine osa:
Teisel juhul on HTML faili päises järgmine rida:
CSS käskude vahele saab lisada kommentaare, märgiste /* ja */ vahele. Alljärgnevalt on tutvustatud CSS1 soovituses defineeritud omadusi ja nende muutmist. CSS reeglid esitatakse jä H1 on siin valija, mis näitab, millise HTML elemendi kohta reegel kehtib. Deklaratsioonid esitatakse valija järel loogelistes sulgudes. Deklaratsioon koosneb omadusest (color) ja väärtusest (green), mida eraldab koolon . Kui ühe valija järel loogelistes sulgudes on mitu deklaratsiooni, eraldatakse need üksteisest semikoolonitega.
Fontide omadused font -family Märgib fondi nägu e. shrifti. Kui on määratud mitu fonti, valitakse esimese fondi puudumisel järgmine font. Tühikut sisaldavad fondinimed tuleb kirjutada jutumä font-style Märgib fondi laadi. Võimalikud väärtused: normal, italic, oblique . font-variant Märgib fondi esitusviisi. Võimalikud väärtused: small caps, normal. font- weight Märgib fondi paksust. Võimalikud väärtused: normal, bold , bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Märksõna normal on samaväärne paksusega 400 ja bold paksusega 700. font- size Märgib fondi suurust. Mõõdetakse punktides (pt), tollides (in), sentimeetrites (cm), pikselites (px) või protsentides (%). Võimalik on kasutada ka absoluutset suurust (xx-small, x-small, small, medium , large, x-large, xx-large) ja suhtelist suurust (larger, smaller). Oluline on tähele panna, et numbri ja pikkusühiku vahele ei tohi tü CSS-is kasutatavad pikkusühikud jagnevad absoluutseteks ja suhtelisteks. Näited absoluutsete pikkusü /* tollid , 1in = 2.54cm */
Hans Põldoja, Tallinna Lilleküla Gümnaasium Esitlusgraafika ja koduleheküljed ­ CSS 3< /* sentimeetrid */ /* millimeetrid */ /* punktid, 1pt = 1/72 in */ /* pica'd, 1pc = 12pt */ Näited suhteliste pikkusü /* em - elemendi fondi kõrgus */ /* ex - x-tähe kõrgus */ /* px ­ piksel */ Fondi omaduste kasutamise näiteks toome lihtsa laadilehe, mille abil on kujundatud esimese ja teise tasandi pealkirjade ning tekstilõikude vorming .
H1, H2 ja P tähistavad siin HTML märgiseid

,

ja ning defineeritud CSS laadid kehtivad HTML dokumendis nende märgiste mõjupiirkonnas. Kui dokumendis on ka loetelu (märgised või

), siis selle mõjupiirkonnas ei kehti ükski antud laadilehel defineeritud laad ning näidatakse brauseri vaikimisi tekstivormingut (ilmselt 12pt Times New Roman või Arial ). Et me ei peaks tavalise teksti laadi iga HTML elemendi puhul eraldi määrama võime määrata märgise kohta. BODYVärvi ja tausta omadused color Määrab HTML elemendi vä background-color Määrab HTML elemendi tausta vä background- image Võimaldab mää
Hans Põldoja, Tallinna Lilleküla Gümnaasium Esitlusgraafika ja koduleheküljed ­ CSS 4
background- repeat Määrab taustapildi kordamist. Võimalikud väärtused repeat (vaikimisi väärtus, taustapilti korratakse terve tausta ulatuses), repeat-x (taustapilti korratakse horisontaal- suunal), repeat-y (taustapilti korratakse vertikaalsuunal), no-repeat (taustapilt esitatakse ainult ühe korra) background-attachment Määrab, kas taustapilt püsib paigal või liigub koos dokumendi kerimisel. Võimalikud väärtused scroll (liigub) ja fixed (püsib paigal). background- position Määrab taustapildi algse asukoha. Värvitoone on võimalik defineerida kas märksõna või RGB väärtusega. CSS juures kasutatakse märksõnadega Windowsi VGA paleti 16 värvi nimetusi: aqua, black , blue, fuchsia, gray, green, lime, maroon , navy, olive , purple, red, silver , teal, white ja yellowvormingu asemel defineeritud vorminguga.
Hans Põldoja, Tallinna Lilleküla Gümnaasium Esitlusgraafika ja koduleheküljed ­ CSS 5
Teksti omadused word-spacing Määrab ruumi sõnade vahel. Mõõdetakse punktides (pt), tollides (in), sentimeetrites (cm), pikselites (px), protsentides (%). letter -spacing Määrab ruumi tähtede vahel. Mõõdetakse punktides (pt), tollides (in), sentimeetrites (cm), pikselites (px), protsentides (%). text-decoration Märgib teksti dekoreerivaid elemente. Võimalikud väärtused: none , underline, overline, line- through , blink. Kui näiteks soovitakse kuvada allajoonimata linke tuleks CSS'i kirjutada järgmine rida: A: linkalign Märgib teksti vertikaalset joondust. Võimalikud väärtused: baseline, sub, super , top, text-top, middle , bottom , text-bottom. Võimalik on määrata ka protsentides. text-transform Võimaldab esitada teksti suurte algustähtedega, suurtähtedena või väiketähtedena. Võimalikud väärtused: capitalize, uppercase, lowercase. text-align Märgib tekstiplokkide joondust. Võimalikud väärtused: center, left , right, justify. text- indent Märgib teksti taandeid. Mõõdetakse tollides (in), sentimeetrites (cm), pikselites (px). line-height Märgib tekstirea kõrgust. Väärtus esitatakse kas numbrites (1.2), pikkusühikutes (1.2em) või protsentides (120%) Täiendame eelnevat CSS laadilehe näidet teksti omadustega. Suurendatud on reavahet (1.5), määratud tekstilõikudele rööpjoondus ning lisatud linkide vorming.
CSS keeles eksisteerivad ka mõned nn. pseudoelemendid, mille abil saame määrata mõnede selliste lehekülje elementide vormindust, mille kohta HTML-is eraldi märgis puudub. Näiteks linkide vormingu defineerimisel kasutatakse järgmiseid lingitüüpe: · A: link ­ tavaline hüperlink; · A:visited ­ külastatud hüperlink; · A:active ­ aktiivne hüperlink (hüperlink on aktiivne sellele vajutamise hetkel) · A:hover ­ fookuses olev hüperlink (lisandus CSS2-ga). Lisaks lingi pseudoelementidele saab kasutada lõigu pseudoelemente P: first -line ja P:first-letter, mille abil saame määrata lõigu esimese rea või esimese tähe vormingut (nagu Drop Cap vorming MS Wordis).
Kasti omadused Kasti omadused võimaldavad määrata äärised, tühja ruumi ning kasti äärejoonte kujunduse. margin-left Määravad ära elemendist antud suunda jääva vaba ruumi. Mõõdetakse pikkusühikutes võ margin-bottom padding-left Padding "täidis". Mõõdetakse pikkusühikutes või protsen- tides. padding-right padding-top padding-bottom border-top- width Äärejoone paksus. Mõõdetakse pikkusühikutes, samuti on võimalikud väärtused thin , medium ja thick. border-right-width border-bottom-width border-left-width
Hans Põldoja, Tallinna Lilleküla Gümnaasium Esitlusgraafika ja koduleheküljed ­ CSS 7
border-width border-color Määrab äärejoone värvi. border-style Määrab äärejoone laadi. Võimalikud väärtused none, dotted, dashed, solid, double , groove, ridge , inset, outset . border-top Lühiomadused, mis mille abil saame deklareerida äärejoone paksuse, vä border-bottom border-left border height Võimaldab määrata näiteks pildi kõrguse. Mõõdetakse pikselites või protsentides. width Eelmisega analoogiline omadus laiuse määramiseks. Demonstreerimaks kasti omaduste kasutusvõimalusi lisame oma näites dokumendile äärised. Kuna need mõjutavad kogu dokumendi sisu deklareeritakse need valija BODY juures. Samuti on lisatud lõigu laiuse deklaratsioon, mis seab tekstilõiikude laiuseks 460 pikselit.
Klassid Kui kasutajale olemasolevatest HTML elementidest ei piisa, siis klassid annavad võimaluse luua piiramatult erinevaid valijaid. See võimaldab meil näiteks määrata, et mingi konkreetse lõigu teksti vä Valijas eraldatakse klassi nimi HTML elemendi tüübist punktiga. Dokumendi sees kasutatakse klasse järgnevalt: see lõik on sinine
Lisalugemist Huvi korral leiate lisalugemist CSS kohta paljudelt veebilehtedelt. Alljärgnevalt mõned kasulikud viited: CSS Tutorial , http://www.w3schools.com/css/ Web Developers Virtual Library, http://wdvl.com/Authoring/Style/Sheets/ CSS Pointers Group, http://css.nu/
Hans Põldoja, Tallinna Lilleküla Gümnaasium