V CSS sú elementy základne spracovávané ako obdĺžnikové boxy alebo pásiky. Na popis boxov sa používajú nasledujúce – už vám iste známe – vlastnosti:
• width – šírka elementu
• height – výška elementu
• left – odsadenie zľava
• right – odsadenie zprava
• top – odsadenie zhora
• bottom – odsadenie zdola
• margin – vonkajší okraj
• border – rámeček okolo elementu
• padding – vnútorný odsad, teda odsadenie od rámu k obsahu elementu
Tieto vlastnosti boli už predstavené.
Celková šírka elementu sa skladá z šírky jednotlivých udaní. (Platí to samozrejme aj pre výšku).
Príklad:
div#box {
width: 100px;
padding: 20px; /* po 20px zľava a sprava /
border: 2px solid; / po 2px zľava a sprava /
margin: 0 30px; / po 30px zľava a sprava */
}Akú šírku má tento div-box? Pozrime sa na jednotlivé hodnoty:
• 100 pixelov
• 2 krát 20 pixelov
• 2 krát 2 pixelov
• 2 krát 30 pixelov
To dáva celkovú šírku elementu 204 pixelov.
Šírka a výška elementov sa určuje pomocou width a height. Ak tieto údaje nie sú explicitne definované vo stylesheete, platí nasledujúce:
• Ak chýba width, box sa zobrazí s rovnakou šírkou ako okolitý element.
• Ak chýba height, element sa zobrazí s výškou určenou jeho obsahom.
Príklad:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* po 2px zľava a sprava */
margin: 0 30px; /* po 30px zľava a sprava */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Vo webovom prehliadači to bude vyzerať nasledovne:
Nadradeným elementom div-elementu je body. Preto sa element zobrazí rovnako široký ako body-element. Čo sa týka výšky, prispôsobí sa obsahu.
Všetko na nulu
Každý prehliadač má vstavaný stylesheet. V týchto stylesheetoch sú definované niektoré predvolené hodnoty. Toto platí napríklad aj pre padding a margin. Tieto predvolené hodnoty sa bohužiaľ líšia v rôznych prehliadačoch. Tento aspekt komplikuje dosiahnutie rovnakých výsledkov v jednotlivých prehliadačoch v súvislosti s Boxmodelom. Preto sa odporúča nastaviť odsadenia, ktoré sú prehliadačmi preddefinované, na nulu. Môžete to urobiť takto:
* { padding: 0; margin: 0; }
Pridajte tento riadok na začiatok vášho stylesheetu. Takto môžete začať umiestňovať boxy na požadované miesta.
Typy boxov
Ako sa element nakoniec zobrazí a ovplyvní iné prvky, závisí od typu elementu. Skutočne, CSS špecifikácia rozlišuje medzi blokovými a inline elementmi. (Existujú aj ďalšie typy, ktoré v tomto bode vynecháme, pretože hrajú iba vedľajšiu úlohu). Blokové elementy vždy vytvárajú nový riadok. Nasledujúce prvky začínajú tiež v novom riadku. Typickými blokovými elementmi sú napríklad p, div, h1, ul a podobne. Pre tieto elementy platia vyššie uvedené vlastnosti, ako vonkajšie odsadenie, vnútorné odsadenie, výška, šírka a rámček.
<h1>Digital Painting & Matte Painting: Definovanie zloženia obrázka</h1> <p>Modul 2 - Časť 2: Obrázok je vždy celok. Avšak vždy si treba uvedomiť, kam sa má divák najprv pozrieť.</p>
Po pohľade na výsledok v prehliadači vidíme, že h1 a p vytvárajú každé vlastný riadok.
Inline elementy naopak nevytvárajú vlastný odsek, namiesto toho sa zobrazujú bežne v texte. Typické inline elementy sú span, em, strong, img, br a podobne. Pre inline elementy nie sú platné žiadne vertikálne vonkajšie odsadenia ani definované šírky a výšky.
<h1><em>Digitálne Maľovanie & Matné Maľovanie</em>: Definovanie zloženia obrázka</h1> <p>Modul 2 - Časť dva: <strong>Obrázok je vždy celok</strong>. Avšak vždy si treba uvedomiť, kam sa má divák najprv pozrieť.</p>
A tu je pohľad na výsledok:
Teraz môžete z elementov, ktoré sú v skutočnosti blokové, vytvoriť inline-elementy.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - časť 2: <em>Obrázok je vždy Celok</em>. Avšak vždy je potrebné zvážiť, kam by mal divák jako prvé pozrieť.</p>
</body>
</html>Pozrite sa na výsledok v prehliadači.
Farba pozadia nadpisu h1 signalizuje, že tento element zaberá celú šírku. Šírka sa riadi nadradeným elementom body.
Teraz prichádza na rad vlastnosť 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>Digital Painting & Matte Painting</h1>
<p>Modul 2 - časť 2: <em>Obrázok je vždy Celok</em>. Avšak vždy je potrebné zvážiť, kam by mal divák jako prvé pozrieť.</p>
</body>
</html>
Zmenou display: inline sa mení šírka elementu.
Skutočne sa teraz šírka elementu prispôsobuje obsahu. Tu je prehľad o tom, akých hodnôt môže byť vlastnosti display priradených:
• none – nezobrazuje sa
• block – element sa zobrazuje ako blokový, vytvára nový riadok.
• inline – element sa zobrazuje ako inline, teda v plynulom texte.
• inline-block – vonkajšie sa správa ako blok, pre ktorý je možné definovať výšku, šírku a vonkajší odstup. Každý element však zostáva v plynulom texte. Je to teda kombinácia blokového a inline elementu.
• list-item – element sa zobrazuje ako blokový, pred ním je vložený odrážkový znak.
• run-in – podľa obsahu sa správa ako blokový alebo inline element.
• table – má rovnaký efekt ako známy element table z HTML.
• inline-table – má rovnaký efekt ako element table, avšak zobrazený inline.
• table-row – element obsahuje vedľa seba usporiadané potomkovské elementy. Má rovnaký efekt ako HTML prvok tr.
• table-cell – element predstavuje bunku tabuľky a má rovnaký efekt ako prvky th a td z HTML.
• table-row-group – element obsahuje skupinu prvkov s viacerými vedľa seba usporiadanými potomkami a funguje podobne ako tbody v HTML.
• table-header-group – element obsahuje skupinu prvkov s viacerými vedľa seba usporiadanými potomkami a funguje podobne ako thead v HTML.
• table-footer-group – element obsahuje skupinu prvkov s viacerými vedľa seba usporiadanými potomkami a funguje podobne ako tfoot v HTML.
• table-column – popisuje vlastnosti buniek stĺpca. table-column má rovnaký efekt ako prvok col z HTML.
• table-column-group – tento element obsahuje skupinu prvkov, cez ktoré sa definujú vlastnosti buniek stĺpca. Funguje podobne ako prvok colgroup z HTML.
• table-caption – definuje titulok tabuľky. Vlastnosť má rovnaký efekt ako prvok caption z HTML.
Skutočne CSS ponúka rôzne možnosti zobrazenia pre rôzne typy prvokov. Tieto majú kľúčovú úlohu v súvislosti s pozíciou prvkov. Viac informácií nájdete v nasledujúcich návodoch.
