CSS styly - ·vod

Formßtovßnφ HTML - Kdy pou╛φvat CSS - Nßstin mo╛nostφ CSS - Trojφ pou╛itφ CSS - P°φklady - Syntaxe - P°φklad s nadpisem

Formßtovßnφ HTML

Ka╛d² text mß obsah a formu. Kdy╛ mluvφm o formßtu (form∞) webov²ch strßnek, myslφm tφm t°eba barvu a velikost pφsma, pozadφ, zarovnßnφ atd., prost∞ v╣echno, co nepat°φ do obsahu.

Proto╛e se jazyk HTML vyvφjel, vznikaly Φasem r∙znΘ zp∙soby, jak formßtovat text. Proto dnes existujφ dva odli╣nΘ zp∙soby, jak v HTML t°eba obarvit pφsmo nebo ztuΦnit text.

1. Star╣φ zp∙sob pou╛φvß p°φmo HTML tagy. (Nap°φklad kurzφva se d∞lß pomocφ tag∙ <i> a </i>: <i>kurzφva</i>). Pomocφ tag∙ se n∞kterΘ v∞ci nedajφ ud∞lat.
2. Nov∞j╣φ zp∙sob -- CSS styly -- pou╛φvß obecn² atribut "style", kterΘmu se p°i°azuje n∞jakß definice. Je to slo╛it∞j╣φ, ale v╣eobecnΘ. Dajφ se s tφm d∞lat r∙znΘ fφgle, kterΘ budu popisovat nφ╛e.

Mimochodem, co je CSS?

CSS vzniklo n∞kdy kolem roku 1997. Je to kolekce metod pro grafickou ·pravu webov²ch strßnek. Ta zkratka  znamenß Cascading Style Sheets, Φesky "kaskßdovΘ styly". KaskßdovΘ, proto╛e se na sebe mohou vrstvit definice stylu, ale platφ jenom ta poslednφ. To te∩ nenφ d∙le╛itΘ. (U╛ je na sv∞t∞ nßvrh CSS 2, vylep╣enΘ a slo╛it∞j╣φ formy styl∙, kterΘ ale zatφm moc nefungujφ v nejroz╣φ°en∞j╣φm prohlφ╛eΦi Internet Exploreru.)

Drobn² problΘm

CSS nepodporujφ star╣φ prohlφ╛eΦe (2. Explorer a 3. Navigator), v takov²ch se text nezformßtuje (z∙stßvß Φiteln²), ale tyhle prohlφ╛eΦe se u╛ tΘm∞° nevyskytujφ (a bude lΘpe). CSS zatφm nepodporujφ mobilnφ za°φzenφ, nap°φklad prohlφ╛eΦe Ipaq∙. I v nich ale jde text p°eΦφst.

Kdy pou╛φvat CSS

V prvnφ °ad∞ je pot°ebnß znalost HTML (alespo≥ ΦßsteΦnß). Pokud HTML ani trochu neznßte, nenφ t°eba Φφst dßl. Ale i pak je pouze p∞t p°φpad∙, kdy se opravdu vyplatφ zajφmat se o CSS styly:

• bu∩to si chcete dßt na strßnku n∞jak² formßtovacφ ╣pek, kter² se nedß ud∞lat normßln∞,
• Φasto pφ╣ete texty urΦenΘ pro Internet a nechcete ztrßcet Φas slo╛it²m formßtovßnφm,
• zab²vßte se skriptovßnφm, zejmΘna Javascriptem
• spravujete (Φi zatφm jen plßnujete) v∞t╣φ web s mnoha strßnkami, kterΘ by m∞ly vypadat podobn∞,
• nebo prost∞ nechcete b²t mimo mφsu, kdy╛ se mluvφ o stavb∞ strßnek.

Jinak se to asi nevyplatφ.

Nßstin mo╛nostφ CSS

Opravdu jenom nßstin. (Kdy╛tak vizte kompletnφ p°ehled.) Tak co t°eba CSS dovedou:

• Nastavit libovolnou a p°esnou velikost pφsma, proklßdßnφ, kapitßlky
• Ud∞lat odsazenφ prvnφho °ßdku odstavce, °ßdkovßnφ
• Zru╣it prßzdn² prostor po odstavci, tak╛e to pak vypadß jako normßlnφ text (ne jako americk²)
• Automaticky formßtovat nadpisy (nap°φklad je v╣echny ud∞lat zelenΘ)
• Zv²raz≥ovat odkazy po p°ejetφ my╣φ
• Ud∞lat automaticky grafickΘ odrß╛ky
• UrΦitΘ Φßsti textu zneviditelnit, zpr∙hlednit nebo nezobrazit
• P°edefinovat grafick² v²znam b∞╛n²ch tag∙ (nap°φklad v╣echno, co je kurzφvou, ud∞lat i tuΦn∞)
• Nastavit pozadφ Φehokoliv, strßnky, tabulky ale t°eba i odstavce; pozadφ se nemusφ opakovat!
• Umφstit n∞jak² objekt (t°eba kus textu) kamkoliv do strßnky, m∙╛e se to i p°ekr²vat
• P°idat k Φemukoli rolovacφ li╣ty, o°φznout to, orßmovat, nastavit okraje
• V kombinaci se skripty je dnes CSS nejmocn∞j╣φ zbra≥ pro "rozh²bßnφ" strßnek.
• Hlavnφ v²znam CSS spoΦφvß v tom, ╛e fungujφ hodn∞ automaticky.

(Bylo by ale nefΘr, kdybych zamlΦel, ╛e CSS majφ n∞kterΘ chyby a omezenφ, kv∙li kter²m jsou mnoh²mi rejpaly zavrhovßny.)

Trojφ pou╛itφ CSS

Styl se m∙╛e nadeklarovat t°emi zp∙soby, staΦφ, kdy╛ se nauΦφte jeden:

1. P°φmo v textu zdroje u formßtovanΘho elementu. Anglicky je to "in-line" styl, jß tomu °φkßm p°φm² styl. Je to ne╣ikovnΘ, ale obΦas se to pou╛φvß.
2. Pomocφ "stylopisu" (angl. "stylesheet") v hlaviΦce strßnky. Stylopis je jak²si seznam styl∙. Je v n∞m obecn∞ napsßno, co mß b²t jak zformßtovßno, nap°φklad ╛e nadpisy majφ b²t zelenΘ.
3. Pou╛itφm externφho stylopisu -- to je soubor *.css, na kter² se strßnka odkazuje tagem LINK. V souboru je umφst∞n² stylopis. Hlavnφ v²hoda je v tom, ╛e na jeden takov² soubor se dß nalinkovat mnoho strßnek, tak╛e pak v╣echny vypadajφ podobn∞.

Samoz°ejm∞ staΦφ ovlßdnout jenom jeden zp∙sob. Jß nejΦast∞ji pou╛φvßm externφ css soubor.

P°φklady

Chci ud∞lat odstavec Φerven²m pφsmem pomocφ CSS. Jak u╛ jsem popsal, jde to t°emi zp∙soby:

P°φmo (in-line)

Do zdroje se napφ╣e tato deklarace odstavce:

<p style="color: red">Tento odstavec bude Φerven².</p>

Vysv∞tlenφ: <p> je znaΦka vymezujφcφ odstavec; z anglickΘho paragraph. Atribut "style" je obecn² atribut podobn² t°eba atributu "align", jen╛e je mocn∞j╣φ.

Stylopisem

Do hlaviΦky dokumentu se napφ╣e stylopis uzav°en² mezi tagy <style></style>:

<style>
p    {color: red}
</style>

a do t∞la strßnky se mohou psßt odstavce:

<p>Tento odstavec bude Φerven². </p>
<p>Tento mimochodem takΘ, proto╛e ΦervenΘ budou v╣echny.</p>

To, jak za°φdit, aby nebyly ΦervenΘ v╣echny, ale jenom n∞kterΘ odstavce, se dß pomocφ "t°φd" a "identifikßtor∙", o tom pozd∞ji.

Externφm CSS souborem

Vytvo°φ se soubor, kter² se pojmenuje t°eba styly.css. V n∞m bude tento text:

p    {color: red}

Do hlaviΦky html dokumentu, kter² chci stylovat, musφm napsat odkaz na tento soubor:

<link rel="stylesheet" type="text/css" href="styly.css">

V t∞le dokumentu pak budou op∞t v╣echny odstavce ΦervenΘ. K dispozici je i podrobn∞j╣φ p°φklad.

Syntaxe

CSS nejsou souΦßstφ HTML, a tak se zapisujφ zcela jin²m zp∙sobem, jak u╛ jste si mo╛nß v╣imli. Pokud vßm tabulka p°ijde p°φli╣ teoretickß, v╣imn∞te si pouze p°φklad∙ ve spodnφ Φßsti.

P°φklady:

Je nutnΘ v╣imnout si, kde se pou╛φvajφ uvozovky, dvojteΦky, slo╛enΘ zßvorky, st°ednφky a Φßrky. Pokud si n∞kterΘ znamΘnko popletete, nebude to pravd∞podobn∞ fungovat. P°φklad sprßvnΘho zßpisu:

h2 {color: green; background-color: yellow}

Mezery a konce °ßdk∙ p°φli╣ velkou roli nehrajφ, mohou se p°idßvat a vypou╣t∞t. Velikost pφsmen nehraje roli. K dispozici je seznam vlastnostφ a jejich hodnot.

Hodnoty, kterΘ prohlφ╛eΦ neznß, ignoruje. Komentß°e ve stylopisech se d∞lajφ podobn∞ jako v Jav∞ mezi znaky /* a */. Nefungujφ dv∞ lomφtka.

P°φklad s nadpisem

Deklarovat formßt nadpis∙ p°φm²m stylem je hloupost (to nenφ usnadn∞nφ, ale ztφ╛enφ prßce). Ale ve stylopisu nebo v externφm css souboru se to dß ud∞lat docela snadno. 

<style>
H1    {color: green}
H2    {color: blue}
</style>

Potom v celΘm dokumentu budou nadpisy prvnφ ·rovn∞ zelenΘ a nadpisy druhΘ ·rovn∞ modrΘ. To ov╣em pouze za p°edpokladu, ╛e p°i psanφ textu byly pou╛ity tagy <H1> a <H2>. Jin²mi slovy, stylopisy se dajφ efektivn∞ pou╛φt pouze u dob°e strukturovan²ch text∙. Pokud vßs nezajφmß teorie strukturovßnφ text∙, p°eΦt∞te si, jak se CSS pou╛φvß prakticky.

Dal╣φ: strukturovßnφ text∙ nebo praktickΘ pou╛itφ CSS
Vizte tΘ╛: p°ehled hodnot CSS, vlastnφ styly, grafickΘ filtry, CSS pozicovßnφ, zdokonalenφ odkaz∙, dΘlkovΘ jednotky v CSS