Orámovanie elementov
Keď sme si preberali element table v sekcii jazyka HTML, pre lepšiu demonštráciu, resp. pre výraznejší vzhľad tabuľky sme použili atribút border, ktorý nám urobil hranicu (border – hranica) tabuľky. Použitie atribútu spôsobilo to, že sa nám okolo tabuľky a aj medzi jednotlivými bunkami tabuľky urobilo orámovanie (čiara oddeľujúca elementy od okolia). V jazyku CSS na toto slúži vlastnosť border, ktorá sa dá samozrejme použiť na viaceré rôzne elementy. Najčastejšie sa využíva na zvýraznenie hrán (čiar – orámovania) jednotlivých sekcií stránky (div) alebo aj na obrázok, aby sa tým oddelili jednotlivé časti pre lepšiu prehľadnosť. Túto vlastnosť budeme často používať najmä keď si budeme preberať rôzne vlastnosti jazyka CSS, ktoré určujú rozloženie a správanie sa elementov v priestore webstránky. Pomocou tejto vlastnosti budeme vidieť hranice každého elementu a bude nám tak jasné, kde sa čo nachádza, čo koľko miesta zaberá a aké to je veľké.
Pri definovaní orámovania je možné zadať viacero parametrov ako je farba, hrúbka a štýl čiary, pre každú z týchto možností existuje samostatná vlastnosť. Farba orámovania sa definuje vlastnosťou border-color a jej hodnota podobne ako pri písme je aj slovný názov farby. Pre hrúbku čiary je property border-width, ktorej hodnotu zadávame okrem iného štandardne v pixeloch, takže číslo a za ním skratka px. Štýl čiary sa určuje pomocou vlastnosti border-style a hodnotou je slovný názov štýlu. Existuje viacero štýlov čiary, medzi najpoužívanejšie patrí klasická čiara (solid), bodkovaná (dotted), čiarkovaná (dashed), dvojitá (double) alebo skrytá (hidden). V nasledujúcej ukážke si vyskúšame tieto vlastnosti na jednotlivých elementoch, použijeme aj vlastnosť pre rozmery, aby to bolo viditeľnejšie:
<!DOCTYPE html>
<html>
<body>
<div style="width: 300px; height: 20px; border-style: solid; border-width: 1px;"></div><br>
<div style="width: 300px; height: 50px; border-style: dotted; border-width: 3px; border-color: red;"></div><br>
<div style="border-style: dashed; border-width: 10px; border-color: blue;">
Obsah divu
</div><br>
<div style="width: 300px; height: 20px; border: 1px dotted black;"></div><br>
</body>
</html>
Všimnite si, že sme v niektorých prípadoch na ukážku použili element div bez akéhokoľvek obsahu. Keďže je to ale blokový element a zadefinovali sme jeho rozmery, tieto rozmery budú dodržané a bude zaberať danú plochu, aj keď neobsahuje nič, čiže jeho obsah nemá žiadne rozmery. Naopak pri treťom dive sme nepoužili rozmery, jeho výšku určovala výška, resp. veľkosť obsahu (text). Šírka tohto divu, keďže je to blokový element, zaberá celú dostupnú šírku. Druhá vec za zmienku je zadefinovanie štýlu orámovania posledného divu. Všimnite si, že sme nepoužili tri vlastnosti jednotlivo ako v predchádzajúcich príkladoch. Štýl orámovania môže byť skrátene zadefinovaný aj pomocou vlastnosti border, ktorej hodnota sú tri hodnoty vlastností border-width, border-style a border-color. Poradie nie je nutné dodržať, môže to byť aj pomiešané, je ale dobré dodržiavať toto poradie pre lepšiu prehľadnosť. Keďže defaultne je farba orámovania čierna, tento parameter nie je nutné použiť, takže pre definovanie orámovania stačí zadefinovať vlastnosti border-style a border-width alebo skrátene iba použiť tie dve hodnoty vo vlastnosti border, napríklad border: 1px solid;.
V predchádzajúcej ukážke sme zadefinovaním vlastnosti border určili štýl orámovania okolo celého elementu. Predstavte si ale stránku, na ktorej je v ľavej časti zvislé menu. Veľmi často sa používa, že na pravej strane tohto menu alebo po ľavej strane celého obsahu stránky, ktorý je hneď vedľa v strede, býva oddeľujúca čiara. Podobne to býva použité aj v inom prípade, keď horná časť stránky – hlavička býva na spodku oddelená čiarou od zvyšného obsahu stránky. Tieto predeľovače sa vo väčšine vytvárajú práve pomocou vlastnosti border. Okrem zadefinovania štýlu orámovania naraz pre celý element, resp. pre všetky štyri čiary orámovania (štyri strany štvoruhloníka), je možné zadať aj štýl osobitne pre každú čiaru zvlášť. Opäť je to možné dvomi spôsobmi, jednotlivo definovať vlastnosti pre každú z čiar alebo naraz. Ten prvý je podobne ako pre celé orámovanie, kedy zadávame každú vlastnosť pre každú stranu zvlášť. Jednotlivé strany orámovania sú top (vrch), right (vpravo), bottom (spodok) a left (vľavo). Do názvu vlastnosti (napr. border-style) medzi slovo border a typ vlastnosti vložíme názov časti orámovania, pre ktoré má vlastnosť platiť, takže výsledok bude napr. border-bottom-width. Druhý spôsob je samozrejme rýchlejší, kedy hodnoty troch vlastností zadáme naraz. Meno vlastnosti bude border s pomlčkou a za ňou názov časti orámovania, takže napríklad border-left. V nasledujúcej ukážke sú použité obidva spôsoby:
<!DOCTYPE html>
<html>
<body>
<div style="border-bottom: 2px dashed grey; text-align: center;">Header</div><br>
<div style="height: 400px;">Content</div><br>
<div style="border-top-width: 2px; border-top-style: dashed; text-align: center;">Footer</div><br>
</body>
</html>
Na záver tejto kapitoly si ukážeme ešte jeden spôsob zápisu. Dúfam, že ho pochopíte a nebude vás nateraz mýliť. Tento spôsob zápisu nebudeme veľmi často používať pri vlastnosti border, ale skôr pri vlastnostiach margin a padding, ktoré si preberieme v nasledujúcej kapitole. Je ale dobré, aby ste to ovládali, pretože sa s tým môžete stretnúť a nebude to pre vás cudzie. Všimnite si poradie jednotlivých čiar, ako boli vymenované v predchádzajúcom odstavci. Presne toto poradie (hore, vpravo, dole, vľavo) – dookola v smere hodinových ručičiek od hora sa používa pri tomto špeciálnom zápise. Ako to teda funguje? Tento zápis sa vzťahuje iba na vymenovávanie vlastností orámovania jednotlivo, čiže na border-style, border-width a border-color. Pomocou tohto zápisu vieme v jednom riadku zadefinovať hodnoty týchto vlastností pre všetky štyri čiary. Nie naraz, ale jednotlivo každej čiare zadefinovať napríklad aj inú hodnotu. To sa takisto dá viacerými spôsobmi, dáme si ukážku a potom si ju vysvetlíme, aby sme sa lepšie rozumeli:
<!DOCTYPE html>
<html>
<body>
<br><div style="border-width: 1px 3px 5px 7px; border-style: solid;">Div 1</div><br>
<br><div style="border-width: 1px 3px 7px; border-style: solid;">Div 2</div><br>
<br><div style="border-width: 1px 7px; border-style: solid;">Div 3</div><br>
</body>
</html>
Pri prvom dive sme použili ako hodnotu vlastnosti border-style iba jeden parameter, takže všetky štyri čiary sú rovnakou farbou. Vo vlastnosti border-width sme použili štyri hodnoty, takže sa tieto hodnoty postupne priradia čiare hore, vpravo, dole a vľavo, tak ako je vidieť vo výsledku. Samozrejme tento štýl sa to dá použiť aj na vlastnosť border-style ako aj na border-color, ale tou sme sa teraz zbytočne nezaťažovali. V druhom dive sme pri vlastnosti border-width použili iba tri hodnoty. V tomto prípade sa hodnoty priraďujú nasledovne: prvé číslo sa priradí hornej čiare, druhé číslo sa priradá naraz vpravo a vľavo (platí to pre obe strany) a tretie posledné číslo sa priradí spodnej čiare. Pri treťom dive sme použili iba dve hodnoty a v tomto prípade sa prvá hodnota priraďuje hornej a spodnej čiare a druhá vpravo a vľavo. Tento zápis vznikol preto, aby sa zase len zrýchlilo zadávanie hodnôt a uľahčila sa tak práca programátorovi, aby nemusel písať viackrát to isté. Často sa stáva, že okraje elementov sú rovnaké na stranách, ktoré sú oproti, takže sa využíva druhá možnosť s dvomi hodnotami, pre zadefinovanie rovnakých hodnôt pre bočné čiary a pre hornú a spodnú čiaru. Ešte by som spomenul, že keď sme zadávali štýl pre text, aplikovali sa pravidlá aj na vnorené (child) elementy. Táto vlastnosť sa viaže ale len na daný element, kde je previdlo zadané. Takže ak zadáme elementu div vlastnosť border, neznamená to, že aj všetky vnútorne elementy budú dediť toto pravidlo. Tento štýl – zadávanie štyroch, troch, dvoch alebo iba jednej hodnoty budeme používať aj v nasledujúcej kapitole.