Upload
jagger
View
57
Download
0
Embed Size (px)
DESCRIPTION
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ú). - PowerPoint PPT Presentation
Citation preview
CSS – základné princípyCSS – základné princípy
Čo je to CSS?Č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?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 Zápis vlastností a ich hodnôt v CSShodnô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 Spôsoby zápisu štýlu do stránkystrá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 Spôsoby zápisu štýlu do stránkystrá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 Spôsoby zápisu štýlu do stránkystrá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 Spôsoby zápisu štýlu do stránkystrá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 Základné vlastnosti – farba písma a farba pozadiapí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 – fontyZá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 – Základné vlastnosti – rámčekyrá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 – Základné vlastnosti – rozmery a odsadenierozmery 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ťĎakujem za pozornosť