CSS-is käsitletakse elemente põhimõtteliselt ristkülikutena või triipudena. Kasti kirjeldamisel kasutatakse järgmisi - teile juba teadaolevaid - omadusi:
• width – elemendi laius
• height – elemendi kõrgus
• left – vasakpoolne kaugus
• right – parempoolne kaugus
• top – ülemine kaugus
• bottom – alumine kaugus
• margin – välimine äär
• border – elemendi raam
• padding – sisemine vahe, ehk kaugus raamist elemendi sisule
Need omadused on juba esitletud.
Elemendi kogulaius saadakse kõigi näidatud mõõtmete summeerimisel (sama kehtib ka kõrguse kohta).
Näide:
div#box {
width: 100px;
padding: 20px; /* mõlemal pool 20px /
border: 2px solid; / mõlemal pool 2px /
margin: 0 30px; / mõlemal pool 30px */
}Milline laius on sellel div-alal? Vaatame lähemalt iga väärtust:
• 100 pikslit
• 2 korda 20 pikslit
• 2 korda 2 pikslit
• 2 korda 30 pikslit
See annab elemendi kogulaiuseks 204 pikslit.
Elementide laiust ja kõrgust määratakse läbi width ja height. Kui neid näiteid pole stylesheetis selgelt määratud, kehtib järgmine:
• Kui width puudub, kuvatakse kast sama laiusega kui ümbritsev element.
• Kui height puudub, kuvatakse element nii kõrge kui tema sisu.
Näide:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* mõlemal pool 2px */
margin: 0 30px; /* mõlemal pool 30px */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Sirvis kuvatakse see järgmiselt:
div-elemendi ülemine element on tegelikult body. Seega kuvatakse element tegelikult sama laiusega nagu body-element. Kõrguse puhul järgib see sisu.
Kõik nulli
Igal brauseril on sisseehitatud stylesheet. Nendes stylesheetides on määratud mõned vaikeväärtused. See kehtib näiteks ka padding ja margin kohta. Kahjuks varieeruvad need vaikeväärtused erinevates brauserites. See muudab sarnaste tulemuste saavutamise brauserites, eriti seoses kastimudeliga, keeruliseks. Seetõttu on soovitatav nullida brauserites antud vaikeväärtused. Seda saab teha järgmiselt:
* { padding: 0; margin: 0; }
Lisage see rida oma stylesheet'i algusse. Nii saate hakata kaste soovitud kohtadesse paigutama.
Kastitüübid
Kuidas element lõpuks kuvatakse ja kuidas see mõjutab teisi elemente, sõltub elemendi tüübist. Tegelikult eristab CSS-spetsifikatsioon plokk- ja ridaelemente. (On ka teisi tüüpe, kuid siin jäetakse need kõrvale, sest need mängivad vaid alatähtsat rolli).
Plokkid elemendid loovad alati uue rea. Järgmised elemendid alustavad samuti uuel real. Tüüpilised plokkid elemendid on näiteks p, div, h1, ul jne. Nendele elementidele kehtivad eespool loetletud omadused: äärevahemik, sisemine vahe, kõrgus, laius ja raam.
<h1>Digital Painting & Matte Painting: Pildi struktuuri määratlemine</h1> <p>Moodul 2 - Osa 2: Pilt on alati tervik. Siiski peate alati mõtlema, kuhu vaataja esmalt vaatab.</p>
Tulemus brauseris näitab, et nii h1 kui ka p loovad eraldi rea.
Ridaelemendid ei loo aga omaette lõiku, need kuvatakse pigem tavalises tekstivoos. Tüüpilised ridaelemendid on span, em, strong, img, br jne. Ridaelementidele ei kehti vertikaalsed äärevahemikud ega laiuse ega kõrguse määramine.
<h1><em>Digital Painting & Matte Painting</em>: Pildi struktuuri määratlemine</h1> <p>Moodul 2 - Osa kaks: <strong>Pilt on alati tervik</strong>. Siiski peate alati mõtlema, kuhu vaataja esmalt vaatab.</p>
Ja siin on pilk tulemusele:
Nüüd saate teha elementidest, mis on tegelikult plokk-elementid, ridaelemente.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
taustavärv:#00CCFF;
}
</style>
</head>
<body>
<h1>Digimaaling & Matte-maal</h1>
<p>Moodul 2 - Osa 2: <em>Iga pilt on alati terviklik</em>. Kuid alati tuleb mõelda, kuhu vaataja esmalt peaks vaatama.</p>
</body>
</html>Vaatage tulemust brauseris.
h1 pealkirja taustavärv näitab, et element ulatub kogu laiuses. Laius põhineb ülemisel body- elemendil.
Arutelus on omadus kuvatav.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
kuvatav:ridamoodus;
taustavärv:#00CCFF;
}
</style>
</head>
<body>
<h1>Digimaaling & Matte-maal</h1>
<p>Moodul 2 - Osa 2: <em>Iga pilt on alati terviklik</em>. Kuid alati tuleb mõelda, kuhu vaataja esmalt peaks vaatama.</p>
</body>
</html>Kuvatav:ridamoodus muudab elemendi laiust.
Tegelikult kohandub elemendi laius nüüd olemasoleva sisuga. Siin on ülevaade, milliseid väärtusi saab display veel omistada:
• puudub – ei kuvata
• plokk – element kuvatakse plokk-elementina, see tähendab, et see loob uue rea.
• ridamoodus – element kuvatakse reamoodulina, seega ilmub see jooksvasse tekstivoolu.
• reedaelement – loob välimiselt ploki, mille kõrgus, laius ja välismarginaalid on määratud. Iga element jääb siiski jooksvasse tekstivoolu. See on plokk- ja reamooduli kombinatsioon.
• loendiüksus – element kuvatakse plokk-elementina. Lisaks lisatakse sellele loendi märk.
• täitmisdžinn – sõltuvalt sisust genereerib plokk- või reaelemendi.
• tabel – toimib nagu tuntud tabel-element HTML-is.
• ridatabel – toimib nagu HTML-i tabeli element tabel, kuid reas.
• tabelirida – element sisaldab kõrvuti paigutatud lapselemente. Toimib nagu HTML-i element tr.
• tabelirakendus – element tähistab tabelirakku ja toimib nagu kaks HTML-i elementi th ja td.
• tabelirühm – element sisaldab mitut kõrvuti paiknevat lapsobjekti ja toimib nagu tbody-HTML-i element.
• tabelipealkirjarühm – element sisaldab mitut kõrvuti asuvat lapsobjekti ja toimib nagu thead-HTML-i element.
• tabelijalusteerühm – element sisaldab mitut kõrvuti asuvat lapsobjekti ja toimib nagu tfoot-HTML-i element.
• tabelitulp – väli tulpade omaduste kirjeldamiseks. tabelitulp toimib nagu HTML-i col-element.
• tabelitulbirühm – see element sisaldab tulba elementide gruppi, mille kaudu kirjeldatakse sammude omadusi. Ta tegutseb HTML-i colgroup-elemendina.
• tabelipealkiri – määratletakse tabeli pealkiri. Oma omaduse poolest toimib see nagu HTML-i element pealkiri.
Tegelikult pakub CSS erinevatele elementide tüüpidele erinevaid kuvamisvõimalusi. Need mängivad elemendi paigutamise kontekstis otsustavat rolli. Sellest räägitakse rohkem järgmistes õpetustes.
