CSS – 2. Syntax
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

CSS – 2. SyntaxCSS – 2. Syntax

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

CSS – 2. Syntax

Google       Google       13. 4. 2007       22 529×

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

Reklama
Reklama

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>.

Najprv vytvoríte samostatný CSS dokument, ktorý uložíte ako style.css:
Toto je samostatný CSS dokument a čoskoro sa naučíme, ako doň vkladať značky upravujúce grafiku (X)HTML elementov.
Potom do hlavy (X)HTML dokumentu pridáte tento riadok:
<link rel="stylesheet" href="style.css" type="text/css" />
Teda samotný dokument bude vyzerať napríklad takto:
<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?

Zdroj: http://w3schools.com

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

2 názory  —  2 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
Autor sa zaujíma o šport, je aktívnym hudobníkom a v minulosti písal pre portál Programujte. V súčasnosti je prakticky nemožné zastihnúť ho.

Nové články

Obrázek ke článku Lepší hosting chrání i vaše data

Lepší hosting chrání i vaše data

Kybernetických útoků na webové stránky rok od roku přibývá, jsou čím dál důmyslnější a páchají stále větší škody. Možná si říkáte, že vás se to netýká, opak je ale pravdou. Jeden z nejčastějších typů útoku využívá zranitelnosti samotných webových stránek a spočívá v umístění škodlivé části programového kódu (tzv. malware) přímo do jejich těla. 

Reklama
Reklama
Obrázek ke článku Spotřebitelé důvěřují novým technologiím při péči o seniory, ale správu financí by jim nesvěřili

Spotřebitelé důvěřují novým technologiím při péči o seniory, ale správu financí by jim nesvěřili

 71 % vítá nové technologie ke sledování zdravotního stavu postarších příbuzných, které jim umožňují žít déle doma

 Pouhých 7 % by svěřilo správu svých financí umělé inteligenci, i kdyby to znamenalo rychleji naspořit prostředky na pořízení bydlení

 64 % respondentů nemá dojem, že firmy a stát dostatečně informují o tom, jaké technologie a jak užívají

Obrázek ke článku Mobilní operátoři využívají digitální modely terénů a kvůli stavebnímu boomu i 3D modely budov

Mobilní operátoři využívají digitální modely terénů a kvůli stavebnímu boomu i 3D modely budov

Mít pokrytí co nejširšího území Česka a nabízet svým zákazníkům co nejlepší signál je společným cílem všech mobilních operátorů. Při plánování sítí proto využívají aktualizovaných digitálních modelů terénu, jež jim umožňují přesně si vypočítat pokrytí a šíření signálu. V hustě zastavěných oblastech a s ohledem na stavební boom jim pak pomáhají také 3D modely budov, které by jim při nesprávném umístění vysílače mohly signál blokovat.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý