V CSS jsou prvky zásadně zpracovávány jako obdélníkové rámečky nebo pruhy. Pro popis rámečků jsou použity následující - již vám jistě známé - vlastnosti:
• width - šířka prvku
• height - výška prvku
• left - vzdálenost zleva
• right - vzdálenost zprava
• top - vzdálenost shora
• bottom - vzdálenost zdola
• margin - vnější okraj
• border - obruba prvku
• padding - vnitřní mezera, tedy vzdálenost od obruby k obsahu prvku
Tyto vlastnosti byly již představeny.
Celková šířka prvku se skládá z šířky jednotlivých údajů. (Totéž platí pak mimochodem také pro výšku).
Příklad:
div#box {
width: 100px;
padding: 20px; /* po 20px zleva a zprava /
border: 2px solid; po 2px zleva a zprava /
margin: 0 30px; po 30px zleva a zprava */
}Jakou šířku má tento div-rámeček? Podívejme se na jednotlivé údaje:
• 100 pixelů
• 2krát 20 pixelů
• 2krát 2 pixelů
• 2krát 30 pixelů
To dává celkovou šířku prvku 204 pixelů.
Šířka a výška prvků se určují pomocí width a height. Pokud tyto údaje nejsou explicitně uvedeny ve stylovacím souboru, platí následující:
• Chybí-li width, bude rámeček zobrazen tak široký, jak okolní prvek.<
• Chybí-li height, bude prvek zobrazen tak vysoký, jak je jeho obsah.
Příklad:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* po 2px zleva a zprava */
margin: 0 30px; /* po 30px zleva a zprava */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
V prohlížeči to vypadá následovně:
Nadřazeným prvkem v rámci div-prvku je body. Rámeček se tedy skutečně zobrazí tak široký, jak body-prvek. Pokud jde o výšku, orientuje se podle obsahu.
Všechno na nulu
Každý prohlížeč má v sobě vestavěný stylovací soubor. V těchto souborech jsou definovány některé standardní hodnoty. Platí to například i pro padding a margin. Tyto standardní hodnoty se bohužel liší mezi různými prohlížeči. Tento aspekt komplikuje dosažení identických výsledků v jednotlivých prohlížečích v souvislosti s modelováním rámečků. Proto se doporučuje nastavit vzdálenosti, které jsou v prohlížečích přednastaveny, na nulu. Lze to udělat následujícím způsobem:
* { padding: 0; margin: 0; }
Přidejte tento řádek na začátek svého stylovacího souboru. Tímto způsobem můžete začít umisťovat rámečky na požadovaná místa.
Typy rámečků
Jak je prvek nakonec zobrazen a jak ovlivňuje ostatní prvky, záleží na typu prvku. Skutečně se rozlišuje mezi blokovými prvky a řádkovými prvky dle specifikace CSS. (Existují i jiné typy, které zde ale nejsou zmíněny, jelikož mají podřadnou roli).
Blokové prvky vždy vytváří nový řádek. Následující prvky také začínají v novém řádku. Typickými blokovými prvky jsou například p, div, h1, ul atd. Pro tyto prvky platí uvedené vlastnosti vnější okraj, vnitřní okraj, výška, šířka a obruba.
<h1>Digital Painting & Matte Painting: Definice kompozice obrázku</h1> <p>Modul 2 - část 2: Obrázek je vždy celek. Nicméně vždy je třeba zvážit, kam by se měl divák jako první podívat.</p>
Pohled na výsledek v prohlížeči ukazuje, že h1 a p vytvářejí každý svůj vlastní řádek.
Řádkové prvky naopak nevytváří vlastní odstavec, ale jsou zobrazovány v běžném toku textu. Typickými řádkovými prvky jsou span, em, strong, img, br atd. Pro řádkové prvky neplatí žádné vertikální vnější okraje ani šířkové a výškové údaje.
<h1><em>Digitální malba & Matná malba</em>: Definovat strukturu obrázku</h1> <p>Modul 2 - část dva: <strong>Obrázek je vždy celek</strong>. Nicméně vždy je třeba zvážit, kam by se měl divák jako první podívat.</p>
A zde je pohled na výsledek:
Nyní můžete z elementů, které jsou původně blokové, vytvořit elementy inline.
<!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 - Část 2: <em>Obraz je vždy celek</em>. Vždy však musíte zvážit, kam by měl divák nejdříve pohlédnout.</p>
</body>
</html>Zobrazte si výsledek v prohlížeči.
Barva pozadí nadpisu h1 signalizuje, že prvek zabírá celou šířku. Šířka se orientuje podle nadřazeného prvku body.
Nyní se dostává do hry vlastnost 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 - Část 2: <em>Obraz je vždy celek</em>. Vždy však musíte zvážit, kam by měl divák nejdříve pohlédnout.</p>
</body>
</html>
Pomocí display: inline se mění šířka prvku.
Ve skutečnosti se šířka prvku nyní přizpůsobuje obsahu. Zde je přehled hodnot, které lze prveku přiřadit vlastností display:
• none – neuvidí se
• block – prvek se zobrazí jako blokový prvek a vytvoří nový řádek.
• inline – prvek se zobrazí jako inline prvek a objeví se v textovém proudu.
• inline-block – vzhledově se chová jako blokový prvek, ale můžete nastavit výšku, šířku a vnější okraje. Každý prvek však zůstává v textovém proudu. Jedná se tedy o kombinaci blokového a inline prvku.
• list-item – prvek se zobrazí jako blokový prvek, ale před něj je přidáno odrážka.
• run-in – vytvoří buď blokový nebo inline prvek v závislosti na obsahu.
• table – chová se jako známý prvek table z HTML.
• inline-table – chová se jako prvek table v přímém textu.
• table-row – prvek obsahuje vedle sebe uspořádané dceřiné prvky. Chová se jako HTML prvek tr.
• table-cell – prvek představuje buňku tabulky a chová se jako prvky th a td z HTML.
• table-row-group – prvek obsahuje skupinu prvků s vedle sebe uspořádanými dceřinými prvky a chová se jako prvek tbody z HTML.
• table-header-group – prvek obsahuje skupinu prvků s vedle sebe uspořádanými dceřinými prvky a chová se jako prvek thead z HTML.
• table-footer-group – prvek obsahuje skupinu prvků s vedle sebe uspořádanými dceřinými prvky a chová se jako prvek tfoot z HTML.
• table-column – tímto se popisují vlastnosti buněk sloupce. table-column se chová jako prvek col z HTML.
• table-column-group – tento prvek obsahuje skupinu prvků, přes které jsou popisovány vlastnosti buněk sloupce. Chová se jako prvek colgroup z HTML.
• table-caption – pomocí tohoto je definován popisek tabulky. Vlastnost se chová jako prvek caption z HTML.
Ve skutečnosti CSS nabízí různé možnosti zobrazení pro různé typy prvků. Tyto možnosti hrají významnou roli v souvislosti s pozicováním prvků. Více informací v dalších tutoriálech.
