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

CSS – 2. SyntaxCSS – 2. Syntax

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

CSS – 2. Syntax

Google       Google       13. 4. 2007       23 112×

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 Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

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