V CSS so elementi obravnavajo kot pravokotniki ali trakovi. Za opis pravokotnikov se uporabljajo naslednje lastnosti, ki so vam že znane:
• width - širina elementa
• height - višina elementa
• left - razdalja na levo
• right - razdalja na desno
• top - razdalja navzgor
• bottom - razdalja navzdol
• margin - zunanji rob
• border - obroba okoli elementa
• padding - notranji odmik, torej razdalja od roba do vsebine elementa
Te lastnosti so bile že predstavljene.
Skupna širina elementa se določi s seštevanjem širine posameznih navedb. (Enako velja tudi za višino).
Primer:
div#box {
width: 100px;
padding: 20px; /* po 20px levo in desno /
border: 2px solid; / po 2px levo in desno /
margin: 0 30px; / po 30px levo in desno */
}Koliko širok je ta območje div? Poglejmo si posamezne vrednosti:
• 100 slikovnih točk
• 2-krat 20 slikovnih točk
• 2-krat 2 slikovni točki
• 2-krat 30 slikovnih točk
To skupaj daje skupno širino elementa 204 slikovnih točk.
Širina in višina elementov sta določeni s pomočjo lastnosti width in height. Če teh navedb ni izrecno navedenih v slogovnem listu, velja naslednje:
• Če manjka width, se škatla prikaže tako široko, kot je obdajajoči element.
• Če manjka height, se element prikaže tako visoko kot njegova vsebina.
Primer:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* po 2px levo in desno */
margin: 0 30px; /* po 30px levo in desno */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
V brskalniku to zadevo izgleda takole:
Nadrejeni element div elementa je body. Zato bo element dejansko prikazan tako široko kot body element. Glede na višino pa se orientira na vsebino.
Vse na nič
Vsak brskalnik vsebuje vgrajen slogovni list. V teh slogovnih listih so določene nekatere privzete vrednosti. To velja tudi za padding in margin. Te privzete vrednosti se žal razlikujejo v različnih brskalnikih. Ta vidik otežuje doseganje enakih rezultatov v različnih brskalnikih, zlasti v zvezi z modelom polja (box model). Zato je priporočljivo, da nastavljene razdalje, ki jih imajo brskalniki, nastavimo na nič. To storimo takole:
* { padding: 0; margin: 0; }
Dodajte to vrstico na začetek vašega slogovnega lista. Na ta način lahko začnete postavljati škatle na želene položaje.
Tipi polj
Kako je element končno prikazan in kako vpliva na druge elemente, je odvisno od vrste elementa. V resnici se v CSS specifikaciji razlikuje med blok elementi in inline elementi. (Obstajajo še drugi tipi, ki pa jih tukaj ne bomo obravnavali, ker igrajo le stranske vloge).
Blok elementi vedno ustvarijo novo vrstico. Naslednji elementi se prav tako začnejo v novi vrstici. Tipični blok elementi so na primer p, div, h1, ul itd. Za te elemente veljajo že prej navedene lastnosti zunanji rob, notranji odmik, višina, širina in obroba.
<h1>Digitalno slikarstvo in mat slikarstvo: Opredelitev gradnje slike</h1> <p>Modul 2 - del 2: Slika je vedno celota. Vendar morate vedno razmisliti, kam naj gledalec najprej pogleda.</p>
Pogled na rezultat v brskalniku pokaže, da h1 in p vsak ustvarita svojo vrstico.
Inline elementi pa ne ustvarjajo lastnega odstavka, temveč se prikažejo v normalnem toku besedila. Tipični inline elementi so span, em, strong, img, br itd. Za inline elemente ne veljajo navpični zunanji odmiki ter širinske in višinske navedbe.
<h1><em> Digitalno slikarstvo in mat slikarstvo </em>: Opredelitev gradnje slike </h1> <p>Modul 2 - Del dve: <strong> Slika je vedno celota </strong>. Vendar morate vedno razmisliti, kam naj gledalec najprej pogleda. </p>
In tukaj je pogled na rezultat:
Zdaj lahko elemente, ki so dejansko bločni elementi, spremenite v vrstične elemente.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digitalno slikarstvo in mat slikarstvo</h1>
<p>Modul 2 - Del 2: <em>Slika je vedno celota</em>. Vedno pa morate razmisliti, kam naj gledalec najprej pogleda.</p>
</body>
</html>Oglejte si rezultat v brskalniku.
Ozadinska barva naslova h1 signalizira, da element zavzema celotno širino. Širina je odvisna od nadrejenega elementa body.
Zdaj pa v igro vstopi lastnost display.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digitalno slikarstvo in mat slikarstvo</h1>
<p>Modul 2 - Del 2: <em>Slika je vedno celota</em>. Vedno pa morate razmisliti, kam naj gledalec najprej pogleda.</p>
</body>
</html>
Z uporabo display: inline se spremeni širina elementa.
Dejansko se zdaj širina elementa prilagaja dejanski vsebini. Tu je pregled vrednosti, ki jih je mogoče dodeliti lastnosti display:
• none – ne prikaže
• block – element se prikaže kot bločni element, ustvari torej novo vrstico.
• inline – element se prikaže kot vrstični element, se pojavi v tekočem besedilnem toku.
• inline-block – zunanji videz elementa je bločen, za višino, širino in zunanji odmik se lahko določijo vrednosti. Vsak element pa ostane v tekočem besedilnem toku. Gre torej za kombinacijo bločnega in vrstičnega elementa.
• list-item – element se prikaže kot bločni element, pred njim pa se doda oznaka seznama.
• run-in – glede na vsebino ustvari bločni ali vrstični element.
• table – deluje podobno kot poznan element table iz HTML.
• inline-table – deluje podobno kot element table v HTML, vendar vrstično.
• table-row – element vsebuje elemente, ki so postavljeni drug ob drugem. Deluje kot element HTML tr.
• table-cell – element predstavlja tabelno celico in deluje kot elementa th in td v HTML.
• table-row-group – element vsebuje skupino elementov, razporejenih drug ob drugem, in deluje kot tbody v HTML.
• table-header-group – element vsebuje skupino elementov, razporejenih drug ob drugem, in deluje kot thead v HTML.
• table-footer-group – element vsebuje skupino elementov, razporejenih drug ob drugem, in deluje kot tfoot v HTML.
• table-column – opisuje lastnosti celic stolpca. table-column deluje kot element col v HTML.
• table-column-group – ta element vsebuje skupino elementov, ki opisujejo lastnosti celic stolpca. Deluje kot element colgroup v HTML.
• table-caption – uporablja se za definiranje naslova tabele. Lastnost deluje kot element caption v HTML.
Pravzaprav CSS ponuja različne možnosti prikaza za različne vrste elementov. Te možnosti so pomembne pri pozicioniranju elementov. Več o tem v naslednjih vadnicah.
