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

CSS – 2. SyntaxCSS – 2. Syntax

 

CSS – 2. Syntax

Google       Google       13. 4. 2007       20 832×

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

Reklama
Reklama
Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý