www.youtube.com/.../watch?v=dC34rfY8Eyk

Naučili jsme se,

jak vytvořit celou webovou stránku,

se všemi druhy textů a obrázků.

Ale trochu tomu chybí styl.

Moje stránka
vypadá úplně stejně

jako vaše webová stránka.

Černý text, bílé pozadí,
ten samý druh písma.

Uspořádáno od horního
okraje až k dolnímu.

Určitě jste na internetu viděli,

že každá webová stránka
vypadá trochu jinak.

Zde na Khan Academy

také máme různé barvy,
písma a velikosti.

Klidně se podívejte i teď,
zastavte si toto video

a podívejte se na několik různých webů.

V čem se od sebe liší?

Co se vám na nich líbí nebo naopak nelíbí?

Já na vás tady počkám.

Důležité je si všimnout, jak
různé stránky mohou vypadat,

protože se brzy naučíte,

jak odlišit vaši stránku od jiných.

Stylem, který se vám

líbí, protože
vás to jednak reprezentuje,

ale také se to líbí
ostatním návštěvníkům.

Abychom to mohli udělat,

musíme se naučit jazyk CSS,

neboli kaskádové styly,

kterým určíme styly,
které se poté použijí

na různých částech naší stránky.

CSS použijeme uvnitř HTML,
ale ve skutečnosti to není HTML,

takže se musíme naučit nový jazyk,

a nesmíme si plést HTML s CSS.

Naučíme se, jak použít CSS
k různým stylům

naší stránky, jako jsou písma,

velikosti a uspořádání
obsahu, ale začneme

s něčím zábavným.

A to jsou barvy.
Co třeba změnit barvu nadpisů,

aby byly pěkně zelené jako tráva.

Nejprve musíme přidat tag style

do tagu head v naší stránce.

Jakmile ji prohlížeč načte, řekne si:

"Fajn, tady uvnitř je vše jen CSS."

"Použiji můj CSS parser,
abych tomu rozuměl,

ne HTML parser."

Tady uvnitř teď přidáme
pravidlo CSS stylu.

Každé pravidlo má selektor, určující,

jakou část obsahu má prohlížeč

upravit, a obsah určující,

jak má prohlížeč tuto část změnit.

Pokud bychom chtěli změnit
všechny nadpisy H2,

jako selektor napíšeme H2
a složené závorky.

Musí být složené, ne hranaté

nebo kulaté, jinak to nebude fungovat.

Dovnitř napíšeme naši deklaraci,

s vlastnostmi a hodnotami.

Abychom změnili barvu,
použijeme vlastnost color,

poté napíšeme dvojtečku a hodnotu.

Musíme říct prohlížeči,
jakou barvu chceme.

Mohli bychom napsat green (zelená),

a prohlížeč by to pochopil,
protože je to standardní barva,

ale to není taková zelená,
jakou chci já.

Já chci trávově zelenou.

Když bych napsala trávově zelenou,
hmmmm.

Prohlížeč najednou nebude vědět,
jakou barvu myslím

a vrátí nadpisu černou barvu,

protože nikdy neslyšel o trávově zelené.

Pokud chceme definovat jakoukoliv barvu,

potřebujeme něco, čemu
se říká RGB spektrum.

Možná jste o něm slyšeli
v hodinách výtvarné výchovy.

Ale nemusíte být experty na RGB,

protože tu pro vás máme RGB
barevnou paletu.

Aby se zobrazila, nahraďte toto
R-G-B a závorkami,

a paleta vyskočí sama.

Myší na ní můžete najet

a vybrat si barvu,
a vidíte, jak se barva mění

okamžitě, a až si vyberete,
tak stačí kliknout na tu barvu.

Všimli jste si těch tří čísel,

která se měnila v našich RGB závorkách?

To je červená, zelená a modrá

složka výsledné barvy.

Skvělé na našem CSS selektoru H2 je,

že platí pro všechny nadpisy
H2 na naší stránce,

takže můžeme změnit najednou
několik nadpisů,

protože chceme všechny H2 nadpisy zelené.

Je to stejné pro všechny
H2 nadpisy naší stránky.

Jak budete pokračovat ve studiu CSS,

naučíte se více způsobů, jak vybrat
různé části vaší stránky,

třeba pokud chcete jen jeden nadpis H2.

Se selektory tagů si můžete
vcelku dobře vystačit.

Přidejme další CSS pravidlo.

Teď uděláme pozadí
modré jako nebe.

Jak to uděláme?

Který tag obaluje celou stránku?

Není to tag H1, ani tag P,

není to ani obrázek, ale body tag.

Pamatujte si, že vše, co jde vidět,

je uvnitř tagu body.

Pokud chceme stylovat celou stránku,

musíme použít selektor,
který vybere tento tag.

Napíšeme tedy body.

Místo color napíšeme
background-color, barva pozadí,

dvojtečka

a pak rgb a závorky.

Vyskočí naše barevná paleta.

A vyberu takovou modrou,

která mi připomíná mráčky
jako zajíčky na obloze.

Tak, mám svoji stylovou stránku.

Existují stovky CSS vlastností,

kromě barvy a pozadí,

ale tyhle jsou ty zábavné,
proto s nimi začínáme.

Jakmile domluvím,
hrajte si klidně dál

s barvami a upravte si tuto stránku

podle vašich představ.

Tak, jen do toho!