Download
1 / 13
130 likes | 291 Views
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ú).
E N D
Č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, ...)
