Janko

Úvod do CSS, šablóny, princíp používania
Každé pravidlo štýlu sa skladá z dvoch základných častí: selektoru, ktorý určuje, aký
element bude pravidlo ovplyvňovať, a deklarácie štýlu, ktorá sa skladá z jednej či viac
deklarácií vlastností pomocou ich hodnôt špecifikujúcich, čo sa ma stať.
Pravidlo štýlu vytvoríme týmto spôsobom:
h1 { color: red; }
kde je: h1 – selektor
{ - zahájenie deklarácie štýlu
color: - nejaká vlastnosť (v tomto prípade farba)
red: - hodnota vlastnosti (v tomto prípade farba je červená)
; - stredník
} - koniec deklarácie štýlu
77
ELCT, s.r.o. IT+ Rozvoj IT zručností pre potreby trhu práce v Košickom kraji prostredníctvom
www.elct.sk/itplus vytvorenia a realizácie programov celoživotného vzdelávania (kód projektu: 312011D381)
www.esf.gov.sk Tento projekt sa realizuje vďaka podpore z Európskeho sociálneho fondu
www.minedu.gov.sk a Európskeho fondu regionálneho rozvoja v rámci Operačného programu Ľudské zdroje.
Existuje viac miest, kde štýly možno zapisovať
1) aplikácia na špecifické elementy html priamo v zdrojovom kóde
2) vložením do hlavičky dokumentu html (interná šablóna)
3) importovaním z jedného alebo viac externých súborov (externá šablóna)
Môže sa stať, že existuje viac štýlov, ktoré sa majú aplikovať na daný
element. CSS v takom prípade používa princíp kaskády, aby sa vysporiadal s tak
dôležitými charakteristikami ako je dedičnosť, špecifickosť a umiestnenie v
prípade, kedy je treba určiť, ktorá skupina stretnutých štýlov má zvíťaziť
(aplikovať sa).
78
DEDIČNOSŤ: mnoho vlastností CSS ovplyvňuje nielen elementy, ktoré sú
definované selektorom takýchto elementov. napr.: pokiaľ vytvárame elementy h1
modré s červeným rámčekom, vlastnosti color, určujúcu farbu textu je však
dedičná , ale vlastnosť border, určujúci rámček je nededičná.
Takže, všetky elementy h1 budú modrej farby, ale nevykreslí sa okolo nich
modrý rámček.
Dedičnosť a špecifickosť: dedičnosť ovplyvňuje to, čo sa stane, ak sa pravidlo
aplikuje na element. Špecifickosť je kľúčom k riešeniu situácie vtedy, keď sa
aplikuje viac pravidiel naraz. Zákon špecifickosti hovorí, že čím špecifickejší
selektor je, tým je silnejšie jeho pravidlo.
79
Hodnoty vlastností - každá vlastnosť akceptuje iné typy hodnôt.
(preddefinované, čísla, percenta a pod.) Niektoré vlastnosti zasa akceptujú
viacej hodnôt naraz.
Preddefinované hodnoty (nesmieme uzatvárať vlastnosti ani ich hodnoty do
úvodzoviek)
napr.
border: none; „none“ je hodnota vlastnosti „border“
font-size: 24px; 24px je dĺžka (medzi označením jednoty a jej označením
nesmie byť medzera !!!)
80
alebo font-size: 80%; (veľkosť textu v percentách)
line-height: 1.5; (výška riadkovania)
veľmi málo vlastností CSS akceptuje hodnotu vo forme čísla, číslo nemá žiadne
jednotky
background: url(obrazok.jpg); (nastavenie obrázka ako pozadia)

niektoré vlastnosti umožňujú špecifikovať URL adresu iného súboru. Adresa
URL ako hodnota vlastnosti sa nemusí uzatvárať do úvodzoviek.
81
FARBY V CSS
color: red; najjednoduchší spôsob je použiť preddefinovaný názov farby (16
farieb)
color: rgb(35%, 0%, 50%); - určenie farby zadaním jednotlivých zložiek RGB v
percentách
alebo
color: #95007F - zadanie farby pomocou HEXA kódu (najčastejší spôsob)
82
Sadzba a formátovanie textu pomocou CSS
Konštrukcia selektoru
SELEKTOR určuje, na ktoré elementy sa pravidlo štýlu použije. Selektor môžeme
nadefinovať až piatimi kritériami, aby sme vybrali tie elementy, ktoré by sa mali
nadefinovať:
1) typ alebo názov elementu h1 {color: red;}
2) kontext, v ktorom sa element nachádza h1 em {color: red;}
– tento selektor používa kontext. Štýl sa použije na elementy „em“ obsiahnuté v
elemente „h1“. Elementy „em“ nachádzajúce sa kdekoľvek inde nie sú týmto
pravidlom ovplyvnené.
83
Konštrukcia selektoru
3) triedu alebo identifikátor elementu em.very {color: red;}
div#nieco {color: red;}
- prvý selektor vyberá všetky elementy „em“ s triedou „very“.
- druhý selektor vyberá elementy „div“ s identifikátorom „nieco“.
4) pseudotriedu elementu alebo pseudoelement samotný a:link {color: red;}
- v tomto prípade selektor vyberá elementy, ktoré patria pseudotriede „link“
5) parametre a ich hodnoty a [hodnota] {color: red;}
- môžeme použiť hranaté zátvorky, aby sme selektoru dodali informáciu o parametri
požadovaného elementu, alebo jeho hodnote.
84
Vyberanie selektoru podľa názvu
Najdôležitejším kritériom pre výber elementov k formátovaniu je názov elementu
a jeho typ. Napr. môžeme chcieť vytvoriť všetky elementy „h1“ veľkým, tučným
písmom a formátovať všetky elementy „p“ bezpätkovým písmom.
PRÍKLAD:
Máme nadefinovaný selektor „h2“ takto:
h2 {color: blue;}
Výsledok: všetko to, čo bude v zdrojovom kóde napísané medzi <h2></h2>,
bude vyfarbené na modro, pretože je to tak nadefinované h2 {color: blue;}.
85
CSS pre formátovanie textu:
Text Color (farba textu): hodnoty môžeme zadať pomocou:
mena (color:red)
HEXA hodnoty (color:#ff0000)
RGB hodnôt (color: rgb(255,0,0))
Text Alignment: zarovnanie textu:
text-align: center; (na stred) text-align:left; (k ľavému okraju)
text-align:right; (k pravému okraju) text-align:justufy; (do bloku)
86
CSS pre formátovanie textu:
Text Decoration: nastavuje vlastnosti textu ako sú napr. podčiarknutie alebo
preškrtnutie a pod: text-decoration: underline; (podčiarknutie)
Text Transformation: transformácia textu napr. na všetky malé písmená, alebo
na veľké, alebo na kapitálky. text-transform: capitalize (nastavíme kapitálky)
Text Indentation: nastavuje odsadenie prvého riadku: text-indent: 50px;
Letter Spacing: - medzery medzi znakmi letter-spacing: 3px;
Line Height: - medzery medzi riadkami line-height: 5px;
Word Spacing: medzery medzi slovami word-spacing: 10px;
87
CSS pre prácu s fontom:
CSS Font Families – nastavíme rodinu písma (serif, sans-serif)

Rodina písma Príklad písma patriaceho do rodiny
Serif Times New Roman
Príklad: Georgia
p{ Sans-serif Arial
font-family: "Times New Roman", Times, serif; Verdana
} Monospace Courier New
Lucida Console
88
Text Decoration: nastavuje vlastnosti textu ako sú napr. podčiarknutie alebo
preškrtnutie a pod: text-decoration: underline; (podčiarknutie)
Font Style: - nastavíme štýl textu ako napr. šikmé, naklonené a pod.
p { font-style: italic; } (šikmé) p{font-style: oblique;} (naklonené)
Font Size: - veľkosť textu: p {font-size: 40px;} p {font-size: 3em;} (1em sa rovná
aktuálnej veľkosti textu, štandardne je 16px, t.j. 1em=16px )
89
Font Weight: nastavuje hrúbku písma (tučné, veľmi tučné, tenké, veľmi tenké)
p {font-weight: bold;} (tučné písmo)
Responsive Font Size – nastavenie responzívnej veľkosti textu. Text sa

prispôsobuje veľkosti obrazovky <h1 style="font-size:10vw">Hello World</h1>
Font Variant: - variant textu, napr. vieme nastaviť všetky písmená malé
p {font-variant: small-caps;}
90
Umiestnenie blokových prvkov pomocou CSS
Blok <div></div>
Medzi základný stavebný prvok webovej stránky patrí blok (div). Môže tvoriť
layout webu alebo rozloženie jeho obsahu. Webová stránka môže mať rôzny
vzhľad. Najčastejšie je tvorená dvoma alebo troma stĺpcami. Texty, obrázky ako
aj rôzne multimédiá sú rozmiestňované veľa seba alebo pod sebou.
Rozmiesťovaniu jednotlivých blokových prvkov vo webovej stránke hovoríme

pozíciovanie. Realizuje sa príkazmi CSS (kaskádové štýly).
91
Blok <div></div>
CSS príkaz position určuje spôsob polohy pre prvok. Existuje 5 rôznych hodnôt
pre polohu prvku vo webovej stránke:
static, relative, fixed, absolute, sticky
position: static; staticky umiestnené prvky nie sú ovplyvnené vlastnosťami
hornej, dolnej, ľavej a pravej strany.
position: relative; relatívna pozícia hovorí, že element bude niekoľko (px, em, ...)
vzdialený od svojej pôvodnej pozície. To ako vzdialený a do akej strany sa
nastavuje pomocou atribútov right, left, top, bottom. deklarujeme, koľko doprava
alebo doľava, hore alebo dole má byť od pôvodnej pozície. Takýmto spôsobom
môžu dané elementy "vytŕčať" z obrazovky.
92
Blok <div></div>
position: fixed; blok, ktorému nastavíme fixnú pozíciu, je stále na viditeľnom
mieste web stránky bez ohľadu na rolovanie stránky.
position: absolute; určuje polohu bloku na webstránke vzhľadom od jeho
najbližšieho predka.
position: sticky; podobná vlastnosť ako fixed, prvok sa pri rolovaní webovej
stránky pohybuje, keď dorazí k okraju prehliadača, prvok ostane vo viditeľnej
časti webovej stránky,
93
94
95
96
Umiestnenie a formátovanie obrázkov pomocou
CSS
Zaoblenie rohov,
okrúhle obrázky
Vlastnosť CSS –
border-radius
(zaokrúhlenie rohov)
Obr. zdroj: https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_images_round 20.10.2018

97
CSS
Thumbnail Images (miniatúra s odkazom)
98
CSS
Responzívny obrázok - prispôsobí sa veľkosti obrazovky prehliadača
Obr. zdroj: https://www.w3schools.com/howto/howto_css_image_responsive.asp 26.10.2018

99
CSS
Centrovanie obrázka – na stred web stránky, nastavíme ľavý a pravý okraj na
auto a nakoľko je element <img> inline, potrebujeme s neho spraviť blokový
element a to pomocou CSS vlastnosti display: block;

100
CSS
Priehľadnosť obrázka– nastavuje ju CSS vlastnosť opacity. Hodnota je od 0.0 do
1.0. Čím je hodnota nižšia, tým je priehľadnosť vyššia.
Zdroj: https://www.w3schools.com/howto/howto_css_image_responsive.asp 26.10.2018

101
CSS
Text obrázka
Zdroj: https://www.w3schools.com/howto/howto_css_image_responsive.asp
26.10.2018 102
Formátovanie tabuľky pomocou CSS
Tabuľka vytvorené s použitím Tabuľka vytvorené s použitím

jazyka HTML5 jazyka HTML5 a kaskádových štýlov CSS
103
Zdrojový kód pre vytvorenie tabuľky:
104
Zdrojový kód pre vytvorenie tabuľky:
105
Kaskádové štýly pre formátovanie tabuľky:
106
Kaskádové štýly pre formátovanie tabuľky:
107
Kaskádové štýly pre formátovanie tabuľky – vysvetlenie CSS kódov:
- pruhovane riadky pomocou preudotriedy :nth-of-type , nájde každý n-ty element na základe kľúčového slova even=
nepárny, odd=párny
- zarovnanie textu v stĺpcoch pomocou preudotriedy :nth-child
vysvetlenie: a – násobok, b – posun, an+b - vzorec
selektor nth-child hľadá potomka elementu a , následne použijeme kľúčové slovo alebo vzorec
tr:nth-child(n) - vyberieme všetky riadky tabuľky
tr:nth-child(n+2) - vyberieme všetky riadky tabuľky okrem toho prvého, čo je riadok obsahujúci záhlavie
tr:nth-child(2n) - vyberieme každý druhý riadok
tr:nth-child(3n) - vyberieme každý tretí riadok
tr:nth-child(2n+4) - s využitím posunu vyberieme každý druhý riadok, ale začne počítať až od štvrtého riadku
priradenie hrúbky textu poslednému riadku pomocou pseudotriedy
:last-child - vyberie posledného potomka elementu
odčítanie pomocou preudotriedy :nth-last-child, chceme zvýrazniť riadok s dopravou 108
Formátovanie zoznamu pomocou CSS
Zoznam vytvorený s použitím Zoznam vytvorený s použitím

jazyka HTML5 jazyka HTML5 a kaskádových štýlov CSS
109
Zdrojový kód pre vytvorenie zoznamu:
110
Kaskádové štýly pre formátovanie zoznamu:
111
Cvičenie – použitím HTML5 a CSS3 vytvorte zoznam podľa predloženého vzoru:
112
Vytvorenie základného pevného layoutu web
stránky
Layout – návrh rozloženia jednotlivých elementov a prvkov webovej stránky
Obr. zdroj: Eccher C., Profesionální web design, techniky a vzorová řešení. Brno: Computer Press 2005. ISBN 80-251-0547-4. 03.11.2018 113
stránky
Layout – môže byť tvorený prostredníctvom týchto elementov (párových tagov):
<div></div> - bloky, blokové elementy

<section></section> - sekcie, logická časť webovej stránky
<header></header> - záhlavie webovej stánky
<footer></footer> - zápätie, pätička webovej stránky
<nav></nav> - miesto pre navigačné prvky a odkazy
<main></main> - hlavný obsah
<article></article> - článok, na webstránke ich môže byť viacej
<aside></aside> - postranný, menej dôležitý text
<figure></figure> - „obal“ na vložený obrázok, ktorý súvisí s príslušným obsahom 114
stránky
Rozloženie jednotlivých elementov
na stránke, poloha, zarovnanie,
vzájomné ovplyvňovanie sa, rozmer
a pod. je definované pomocou
kaskádových štýlov CSS.
Najčastejšie sa používa pre layout

rozvrhnutie elementov do dvoch
alebo troch stĺpcov s hlavičkou
a pätičkou.
115
stránky
Návrh blokového
dvojstĺpcového layoutu
Zloženie:
- záhlavie
- ľavý stĺpec
- pravý stĺpec
- pätička
116
stránky
117
stránky
Úpravou percentuálnej hodnoty v kaskádovej šablóne (riadok 20 a 26) môžeme
upravovať pomer šírky týchto dvoch vedľa seba umiestnených sekcií
Vysvetlenie príkazov CSS použitých pre tvorbu layoutu:
max-width: 1000px; - maximálna šírka elementu
margin: auto; - zarovnanie elementu na stred webstránky
font-family: sans-serif; - použitie bezserifového typu písma
min-height: 100px; - minimálna výška elementu
border: 1px solid red; - orámovanie elementu, hrúbka, typ a farba čiary
clear:both; - zastavenie obtekania (plávania)
float: left; - obtekanie – plávanie elementu vľavo
width: 69%; - šírka elementu zadaná percentuálne
float: right; - obtekanie – plávanie elementu vpravo 118
Tvorba grafických efektov prostredníctvom CSS
119
Tvorba tieňov
Aplikáciou kaskádových štýlov je možné elementu priradiť rôzne efekty ako sú
zaoblené rohy, tiene, farebný prechod a iné.
Na obrázku vidíme element blok s textom,

Na ktorý sme pomocou CSS aplikovali dva
efekty. Prvým je zaoblenie rohov a druhým
efektom je vrhnutie tieňa.
120
Tvorba tieňov
Aplikácia vonkajšieho tieňa:
121
Tvorba tieňov
Aplikácia vnútorného tieňa:
122
Tvorba tieňov
Dôležitá informácia: pri zadávaní horizontálneho/vertikálneho posunutia tieňa to
funguje nasledovne:
• keď zadávate kladné hodnoty tak vám to posúva tieň doprava a dolu.
• keď zadávate záporné hodnoty tak vám to tieň posúva doľava a nahor.
Funkčnosť:
Zaoblenie rohov (Box Radius) a Tieň (Box Shadow) funguje v týchto prehliadačoch:
• Firefox 3.5+
• Chrome 4+
• Safari 3.1+
• IE9+
• Opera 10.5+ 123
Tvorba prechodov
CSS gradient bol prvý krát svetu predstavený niekedy v roku 2008 ako súčasť webkitu.
Nedostalo sa mu však veľkej obľuby, nakoľko webkit máme len v chrome a safari
(vtedy len Safari).
Dnes je však situácia iná a okrem webkit-gradient tu máme aj -moz-gradient (Firefox), -
ms-gradient, linear-gradient a ďalších x možností definovania gradientu.
124
Tvorba prechodov
CSS gradient je vlastne prechod minimálne
medzi dvoma farbami.
Princípom je určenie počiatočnej farby

a koncovej farby. Medzi nimi je následne
vytvorený plynulý farebný prechod.
Gradient môže byť napr. lineárny alebo

radiálny.
125
Tvorba prechodov
Gradient pre WEBKIT
Gradient pre FIREFOX
Obr. zdroj: http://www.zajtra.sk/programovanie/430/css-triky-6-gradient-farebny-prechod-funkcny-vo-vsetkych-prehliadacoch. 10.11.2018 126

Tvorba prechodov
Gradient pre IE
Skompletizovanie príkazov pre

gradient
Obr. zdroj: http://www.zajtra.sk/programovanie/430/css-triky-6-gradient-farebny-prechod-funkcny-vo-vsetkych-prehliadacoch. 10.11.2018 127

Tvorba prechodov
128
Tvorba prechodov
Generovanie CSS
pre gradient pomocou
online aplikácie:
Link na generátor:
http://www.colorzilla.com/gradient-editor/
129
Časové funkcie
Časové funkcie – je popísaná matematicky kubickou Beziérovou krivkou. Určuje
priebeh pohybu elementu, na ktorý je aplikovaná.
CSS syntax:
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-
start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
Obr. zdroj: https://hackernoon.com/css3-animation-step-by-step-guide-97d78d8dfa9f 11.11. 2018

130
Časové funkcie
Hodnoty časových funkcií – ako bude prebiehať animácia?
ease: rýchly začiatok, spomalenie, rýchly koniec

linear: konštantná rýchlosť od začiatku po koniec (rýchlosť animácie sa nemení)
ease-in: pomalý štart animácie (animácia sa bude zrýchľovať)
ease-out: pomalý koniec animácie (animácia sa bude spomaľovať)
ease-in-out: pomalý štart aj pomalý koniec animácie
cubic-bezier(n,n,n,n): možnosť definovať priebeh animácie prostredníctvom funkcie

cubic bezier() a vlastnými hodnotami. Hodnoty sú v rozmedzí 0 a 1
131
Časové funkcie
Ekvivalentné časové priebehy animácií definované pomocou funkcie cubic bezier():
ease: cubic-bezier(0.25,0.1,0.25,1)
linear: cubic-bezier(0,0,1,1)
ease-in: cubic-bezier(0.42,0,1,1)
ease-out: cubic-bezier(0,0,0.58,1)
ease-in-out: cubic-bezier(0.42,0,0.58,1)
132
Časové funkcie
Časové funkcie – príklady (kód HTML)
133
Časové funkcie
Časové funkcie – príklady (kód CSS)
134
Časové funkcie
Časové funkcie – príklady (kód CSS)
135
Animácie
Animácie – transformácia v príkladoch: zmena šírky
HTML kód CSS kód
136
Animácie
Animácie – transformácia v príkladoch: zmena šírky + zmena výšky
HTML kód CSS kód
137
Animácie
Animácie – transformácia v príkladoch: zmena šírky + zmena výšky + rotácia
HTML kód CSS kód
138
Animácie
Vlastnosti CSS animácie (zmena pozície elementu, trvanie, opakovanie)
Kód HTML CSS kód
139
Animácie
Vlastnosti CSS animation-direction určuje, či sa má animácia prehrávať dopredu,
dozadu alebo v alternatívnych cykloch.
Hodnoty vlastnosti animation-direction:
normal: predvolené nastavenie, animácia sa prehrá normálne smerom dopredu

reverse: animácia sa prehrá v opačnom smere
alternate: animácia sa prehrá dopredu a následne v opačnom smere
alternate-reverse: animácia sa prehrá najskôr opačne a potom dopredu
140
Animácie
141
Tvorba zaoblených rohov
Aplikácia zaoblených rohov:
142
Tvorba zaoblených rohov
Aplikácia rôzne
zaoblených rohov:
143

Janko

Uploaded by

Copyright:

Available Formats

You might also like

Janko

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Janko

Uploaded by

Copyright:

Available Formats

Úvod do CSS, šablóny, princíp používania

background: url(obrazok.jpg); (nastavenie obrázka ako pozadia)

CSS Font Families – nastavíme rodinu písma (serif, sans-serif)

Responsive Font Size – nastavenie responzívnej veľkosti textu. Text sa

Rozmiesťovaniu jednotlivých blokových prvkov vo webovej stránke hovoríme

Obr. zdroj: https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_images_round 20.10.2018

Obr. zdroj: https://www.w3schools.com/howto/howto_css_image_responsive.asp 26.10.2018

Obr. zdroj: https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_images_round 20.10.2018

Zdroj: https://www.w3schools.com/howto/howto_css_image_responsive.asp 26.10.2018

Tabuľka vytvorené s použitím Tabuľka vytvorené s použitím

Zoznam vytvorený s použitím Zoznam vytvorený s použitím

<div></div> - bloky, blokové elementy

Najčastejšie sa používa pre layout

Na obrázku vidíme element blok s textom,

Aplikácia vonkajšieho tieňa:

Aplikácia vnútorného tieňa:

Princípom je určenie počiatočnej farby

Gradient môže byť napr. lineárny alebo

Gradient pre WEBKIT

Gradient pre FIREFOX

Obr. zdroj: http://www.zajtra.sk/programovanie/430/css-triky-6-gradient-farebny-prechod-funkcny-vo-vsetkych-prehliadacoch. 10.11.2018 126

Skompletizovanie príkazov pre

Obr. zdroj: http://www.zajtra.sk/programovanie/430/css-triky-6-gradient-farebny-prechod-funkcny-vo-vsetkych-prehliadacoch. 10.11.2018 127

Obr. zdroj: https://hackernoon.com/css3-animation-step-by-step-guide-97d78d8dfa9f 11.11. 2018

ease: rýchly začiatok, spomalenie, rýchly koniec

cubic-bezier(n,n,n,n): možnosť definovať priebeh animácie prostredníctvom funkcie

normal: predvolené nastavenie, animácia sa prehrá normálne smerom dopredu

Aplikácia zaoblených rohov:

You might also like