2.1 ⋅ Ako na stránku umiestniť štýlový hárok
2.2 ⋅ Základná syntax
2.3 ⋅ Spájanie do skupín
2.4 ⋅ Komentáre
2.5 ⋅ Záver
Ako na stránku umiestniť štýlový hárok
Váš štýlový hárok budete musieť pripojiť k stránke, aby prehliadač vedel, že má (X)HTML elementy upravovať podľa grafických definícií uložených v hárku. Existujú tri spôsoby, z toho dva formátujú kód (X)HTML priamo v dokumente a jeden pomocou externého súboru.
Externý CSS dokument
Je to zrejme najideálnejší spôsob – najmä vtedy, ak majú byť grafické definície štýlového hárku aplikované na viacero stránok. Pri použití tejto aplikačnej metódy stačí zmeniť zopár riadkov v jednom súbore, zmeny sa prejavia na všetkých stránkach, ktoré s daným CSS dokumentom pracujú – práve preto musíte prehliadaču „prikázať“, aby s vašim externým CSS súborom spolupracoval. Ide vlastne o obyčajný link (odkaz) umiestnený v tagu <link>. Ten sa musí nachádzať v hlave (X)HTML dokumentu a ešte pred prípadnými ďalšími tagmi <style>.
Toto je samostatný CSS dokument a čoskoro sa naučíme, ako doň vkladať značky upravujúce grafiku (X)HTML elementov.<link rel="stylesheet" href="style.css" type="text/css" /><head>
...
<link rel="stylesheet" href="style.css" type="text/css" />
...
</head>Dokument začne pracovať s externým CSS súborom style.css. Samozrejme, názov externého súboru môžete zmeniť (napríklad styl.css, dizajn.css), no v žiadnom prípade nedávajte do názvu medzery či diakritiku.
Interný štýlový hárok
Veľmi často sa nepoužíva, no nájdu sa situácie, keď musí mať istý (X)HTML dokument unikátne formátovanie. Keďže aplikovanie hárku do hlavy dokumentu má väčšiu prioritu, ako externý CSS dokument (pozri článok CSS – 1. Úvod), prehliadač uprednostní interný štýlový hárok, no iba ak sa link na externý CSS dokument nachádza ešte pred ním.
Priamo do hlavy (X)HTML dokumentu vložte tieto riadky:<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
Tu budú CSS značky definujúce vzhľad (X)HTML dokumentov.
</style>
</head>Štýlovanie (X)HTML elementu
Najmenej sa využíva štýlovanie priamo v riadkoch kódu (X)HTML dokumentov. Keďže má však zo všetkých najväčšiu prioritu, nájde uplatnenie pri extrémne ojedinelých situáciách, keď svojou prioritou musia byť „prepísané“ predchádzajúce dva štýlové hárky.
Napríklad, takto sa štýluje odstavec:<p style="Tu budú CSS značky">
Toto je odstavec (X)HTML dokumentu.
</p>Základná syntax
Syntax tvoria všetky CSS značky. Tie sa skladajú zo selektora, vlastnosti a hodnoty.
selektor {
vlastnosť: hodnota;
}Selektorom obyčajne býva (X)HTML element, ktorý chcete naštýlovať, vlastnosť je atribút, ktorý chcete zmeniť a každý takýto atribút musí mať nejakú hodnotu. Ak rozumiete tejto definícii, určite pre vás nebude ťažké naštýlovať tag <body> tak, aby bola farba písma v ňom modrá.
body {
color: blue;
}Keď tieto tri riadky uložíte ako style.css a do hlavy (X)HTML dokumentu naň pridáte link, zistíte, že prehliadač automaticky „zafarbil“ akýkoľvek text na stránke namodro. Teraz si už určite uvedomujete, prečo je vlastne dobré používať CSS. Totiž do samotného (X)HTML dokumentu ste napísali iba tag
a nepridali ste mu žiaden atribút. Ten ste mu priradili až v CSS dokumente – teda ste oddelili dizajn od kódu stránky. To má obrovskú výhodu – ak niekedy v budúcnosti budete chcieť zmeniť farbu textu všetkých stránok, ktoré s daným externým CSS súborom pracujú na červenú, jednoducho slovko blue prepíšete na red. Skúste si predstaviť, koľko času ušetríte…Spájanie do skupín
Využitie tejto možnosti nájdete pri nastavovaní spoločného atribútu pre viacero selektorov.
h1,h2,h3 {
color: green;
}Komentáre
Komentár je časť kódu, ktorá slúži len ako poznámka na vysvetlenie a neplní žiadnu funkciu v kóde dokumentu. Začína značkami /* a končí značkami */. Využíva sa najmä pri OpenSource webových šablónach, kde programátor vysvetlí pomocou komentáru význam nejakej zložky CSS dokumentu.
/* Komentár. Chcel by som povedať, že mením farbu tagu body */
body {
color: blue
}Záver
Zatiaľ ste sa naučili pracovať ešte len s atribútom color, čo je však veľmi málo na to, aby ste vytvorili peknú stránku – neviete meniť farbu pozadia, odsadenie od okraja, nastavenie tabuľky, zmenu fontu atď. Napriek tomu nemáte byť prečo sklamaní, hoci si musíte počkať na ďalšie lekcie, dnes ste urobili sedemmíľový krok dopredu, lebo horeuvedené riadky sú základom všetkého… Jednoduché, nie?