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 537×

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 Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

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 © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý