CSS – základné princípy
Čo je to CSS? CSS je skratka názvu Cascade Style Sheet, čo je jazyk kaskádových štýlov Tento jazyk obsahuje množinu vlastností a hodnôt, ktoré môžu tieto vlastnosti nadobúdať Je to jazyk, pomocou ktorého vieme upravovať formát webstránok (to, ako vyzerajú)
Prečo používať CSS? Sprehľadnenie formátovania stránok (všetko máme na jednom mieste) Štandardizácia vzhľadu (na stránky aplikujeme rovnaký súbor so štýlmi, budú teda vyzerať rovnako alebo podobne) Jednoduché zmeny (zmenu urobím na jednom mieste a aplikuje sa na celú webstránku) Rôzne „fintičky“ na stránkach (CSS umožňuje omnoho viac efektov na stránkach ako samotné HTML)
Zápis vlastností a ich hodnôt v CSS Štýly vytvárame tak, že jednotlivým prvkom na stránke priradzujeme jednu alebo viacero vlastností Zápis je vždy v tvare: vlastnosť: hodnota; alebo vlastnosť: hodnota1 hodnota2 ...;
Spôsoby zápisu štýlu do stránky Zápis priamo do HTML elementu pomocou atribútu style Tento zápis využívame čo najmenej a väčšinou len v prípadoch, keď potrebujeme spraviť jedinečnú zmenu na stránke Napr: <h1 stlye="color:red">Nadpis</h1> nastaví farbu písma daného nadpisu na červenú
Spôsoby zápisu štýlu do stránky Zápis do hlavičky stránky pomocou párovej značky style Tento zápis využívame častejšie v prípadoch, keď potrebujeme využiť štýly len v jednom HTML dokumente Napr: <head> <style> h1 { color:red; } </style> … </head> nastaví farbu písma všetkých nadpisov prvej úrovne na červenú
Spôsoby zápisu štýlu do stránky Zápis do externého súboru a prilinkovanie štýlov k HTML dokumentu Tento zápis využívame najčastejšie pretože všetko máme na jednom mieste a zápis je prehľadný V tomto prípade si vytvoríme nový súbor, ktorý pomenujeme napr. mojstyl.css a doň píšeme priamo štýly: h1 { color: red; } Do HTML dokumentu vložíme potom riadok, ktorým spojíme súbor so štýlmi s našou stránkou: <link rel="stylesheet" type="text/css" href="mojstyl.css">
Spôsoby zápisu štýlu do stránky Mohli ste si všimnúť, že v posledných dvoch spôsoboch zapisujeme štýly v tvare: tag { vlastnosť1: hodnota; vlastnosť2: hodnota; ... vlastnosťn: hodnota; } Daný štýl je potom aplikovaný na všetky tagy (značky), teda ak uvedieme pred zloženou zátvorkou napr. h1, bude štýl aplikovaný na všetky nadpisy prvej úrovne na stránke Ak uvedieme img, bude aplikovaný na všetky obrázky, ak uvedieme td tak na všetky bunky tabuľky a pod.
Základné vlastnosti – farba písma a farba pozadia color – farba písma background-color – farba pozadia Zápis farieb: slovne (napr. blue, red, green, white) šestnástkovo ako množstvo farebných zložiek RGB vo výslednej farbe(napr. #102030 – 16 dielov červenej, 32 dielov zelenej, 48 dielov modrej) desiatkovo ako množstvo farebných zložiek RGB vo výslednej farbe (napr. rgb(16,32,48) - 16 dielov červenej, 32 dielov zelenej, 48 dielov modrej) percentuálne ako množstvo farebných zložiek RGB vo výslednej farbe (napr. rgb(10%,20%,30%) – 10% červenej, 20% zelenej, 30% modrej)
Základné vlastnosti – fonty font-family – font písma (napr. Arial, Verdana, "Comic Sans") font-size – veľkosť písma (napr. 20px, 30pt, ...) font-weight – hrúbka písma (napr. normal, bold) Dĺžkové jednotky: px – pixely (napr. 10px) pt – typografické body ako vo Worde (napr. 10pt) mm – milimetre (napr. 10mm) in – palce (napr. 0.7in) em – šírka veľkého písmena M (napr. 10em) ex – výška malého písmena x (napr. 10ex) % – percent normálnej veľkosti (napr. 10%)
Základné vlastnosti – rámčeky border-color – farba čiary rámčeka (napr. black) border-style – typ čiary rámčeka (napr. solid) border-width – hrúbka čiary rámčeka (napr. 2px) Typy čiar: solid – plná čiara dotted – bodkovaná čiara dashed – čiarkovaná čiara double – dvojitá čiara groove – vtlačená čiara ridge – vytlačená čiara none – žiadna čiara Môžeme použiť aj vlastnosť border, v ktorej vymenujeme vyššie spomínané čiastkové vlastnosti: border: 2px solid black;
Základné vlastnosti – rozmery a odsadenie width – šírka elementu (napr. 30px alebo 40%) height – výška elementu (napr. 30px alebo 40%) margin – vonkaší okraj elementu padding – vnútorný okraj elementu Zápis okrajov: margin: 2px 3px 4px 5px; (zhora 2px, sprava 3px, zdola 4px, zľava 5px) – v smere hodinových ručičiek margin: 2px 4px; (zhora a zdola 2px, sprava a zľava 4px) margin: 2px; (zo všetkých strán 2px) alebo využijeme prípony left, right, top a bottom, ktoré spojíme s okrajom cez pomlčku (margin-top: 2px; vonkajší horný okraj bude 2px, padding-left: 5px; vnútorný ľavý okraj bude 5px, ...)
Ďakujem za pozornosť