css – základné princípy

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ú


• 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ú


• 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">


• 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ť

css – základné princípy

Documents