Vytváříme webové stránky – Pokračujeme s CSS (část 10.)

Minule jsme si ukázali, že CSS se dá použít třemi způsoby. Pochopili jsme, že si můžeme nastylovat buď celé tělo dokumentu, prvky stejného typu a prvky se stejným názvem nebo identifikátorem. Příklad, který jsme si uvedli minule, je dobré dobře pochopit a mít ho k dizpozici – může to urychlit tvorbu nové stránky. Než budu moct kapitolu o CSS považovat za uzavřenou, měli bychom však znát více. Chci probrat většinu CSS vlastností, se kterými se můžete při tvorbě setkat, pozicování, tvorbu layoutu pomocí CSS a nakonec i nějaké vychytávky jako třeba nejznámější CSS hacky.

Nejprve trochu doplnění
V zápisu stylu nejprve identifikujeme, pro které všechny skupiny prvků bude styl platit. Dokonce můžeme napsat před závorky i více prvků, oddělit je čárkou. Příklad (všechny odstavce, nadpisy úrovně 2 a pojmenované prvky – vše bude červeným písmem).

1
2
3
p, h2, .vyber {
color: red;
}

Pokud zapomenete napsat tu čárku, znamená to, že chcete podprvek toho prvku výše. Třeba následující příklad vybere z pojmenované části „menu“ pouze odkazy (a těm zakáže podtržení)

1
2
3
.menu a {
text-decoration: none;
}

Stylujeme text
Zde je příklad některých vlastností a některých jejich hodnot (podotýkám některých, s nimiž se spíš setkáte).

color: red .. Barva písma (různé druhy zápisů barvy)
font-family: Arial .. Výběr písma (název)
font-size: 16px .. Velikost textu (16 pixelů), existuje i small/medium/large
font-weight: normal/bold/800 .. Tučnost písma: normální/tučné/vyjádřené číslem
font-style: normal/italic .. Styl textu: normální/kurzíva
font-variant: normal/small-caps .. Kapitálky: vypnuty/zapnuty

text-align: left/center/right/justify .. Zarovnej text horizontálně: doleva/doprostřed/doprava/do bloku.
text-decoration: none/underline/overline/line-through .. Přikrášlení textu: žádné/podrtžené/nadrtžené/přeškrtnuté
text-indent: 20px / 5% .. Odsazení prvního řádku v odstavci (bloku).
text-transform: none/capitalize/uppercase/lowercase .. Transformace: ne/velká na zač. vět/velká/malá písm.

word-spacing: normal/10px .. Mezera mezi slovy: normální/zvětšená o 10 pixelů
letter-spacing: normal/4px .. Mezera mezi písmeny: normální/zvětšená o 4 pixely
vertical-align: baseline/sub/super/40% .. Odsazení řádku nahoru: nedělat/dolní index/horní index/procento výšky
display: block/inline/list-item/none .. Způsob zobrazení: do bloku/do řádku/jako seznam/nezobrazovat

Zadávejme FONT to najednou
U některých prvků lze zadat více vlastností najednou. Musí se však zadávat v daném pořadí. Defaultní hodnoty (např. normal, none, apod. lze a je dobré vynechat). To pořadí je takhle: kurzíva, kapitálky, tučné, velikost/výška-řádku, font. Povinné hodnoty jsou zde dvě, a to velikost písma a font. Uvedu dva příklady. V druhém příkladu názvy písem oddělené čárkou znamenají, že pokud prohlížeč nezná první font, použije druhý, atakdále. Existují i systémové názvy písem, ale ty považuji za zcela zbytečné uvádět.

1
2
font: italic bold 20px Arial;
font: small-caps bold 30px Verdana, Arial, Helvetica, Sans-serif;

Jednotky délky
Existují i jiné jednotky délky používané v CSS než jenom pixel (px). Jak už jste mohli vidět, mezi číslem a jednotkou se nedělá mezera. Existují dva základní typy délkových jednotek, a to absolutní a relativní. Relativní mění vždy svou velikost s nastavenou velikostí písma, dokonce dost u nich záleží i na prohlížeči. Existují dva relativní typy a nejvíce se používá EM, příklad font-size: 3em. Mělo by udávat šířku velkého písmene „M“. Pokud obtékáte obrázek a chcete mít velikost přesně na řádek, pak mu zadejte výšku: height: 1em. Dále pak existuje EX, výška písmene „X“ a zhruba dvojnásobek EM, ale zatím jsem neviděl použití.

Dalším typem jsou délky absolutní. Nejvíce se používají moje oblíbené pixely (px) nebo typografické body (pt). Občas se můžete setkat s palci (in), ale velmi málo se pak už setkáte s klasickými centimetry a milimetry (cm, mm) či s jinými dalšími. Já osobně preferuji pixely, ale určitě se občas setkáte i s PT a EM.

Mezi relativní typy by se ještě dala zařadit procenta. font-size: 90%. Jenže vždycky záleží, z čeho ta procenta jsou a u každé vlastnosti je to trochu jiné. Mohli bychom si jistě domyslet, že se procenta mohou počítat z přirozených rozměrů elementu, jenže to se týká jen písma a výšky řádku). Někdy se i počítají ze šířky a výšky stránky okna prohlížeče, nebo z velikosti rodičovského elementu.

Závěr
A to by bylo prozatím všechno. V příštím díle budeme pokračovat v podobném duchu a rozšiřovat svůj zásobníček CSS vlastností. Už jste si dost možná všimli toho, co jsem tvrdil na začátku – stylování pomocí CSS je mnohem bohatší než pár desítek tagů, které byly možné na formátování dokumentu použít v klasickém HTML. Ale nebojte se, není si všechno třeba pamatovat hnedka z hlavy. Někdy stačí, že si vzpomenete, že by asi taková vlastnost mohla existovat a kde případně tu danou vlastnost najít. Třeba na ajtaci.net :)

O Petr Fořt

Student ČVUT FJFI KSE ASI (Softwarové inženýrství v ekonomii). Zajímám se o počítače (programování, diagnostika chyb hw), hudbu. Mám rád grilování, táboráky, hraní na kytaru a srandu v dobré společnosti.