9. CSS - základy syntaxe

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_09

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - základy syntaxe

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Seznámení se základními pravidly zápisu kaskádových stylů CSS.

Klíčová slova: CSS, kaskádový styl, syntaxe, selektor, vlastnost, CSS kód

Metodické zhodnocení: Žáci se seznámí se základními pravidly zápisu kaskádových stylů CSS.

Ověřeno: 10. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

9.1 CSS - základy syntaxe (studijní text)

Co je to CSS?

CSS je systém metod pro grafickou úpravu dnešních webových stránek,
CSS znamená Cascading Style Sheets, česky "kaskádové styly,
kaskádové styly proto, že se definice mohou vrstvit jedna na druhou (tzv. dědičnost)

Proč používat s HTML i CSS?

důležité je si uvědomit, že dnes se vzhled webových stránek tvoří odděleně od obsahu,
HTML jazyk se tedy používá tvorbu samotného obsahu (text, obrázky, tabulky, atd.) a CSS se používá na definování vzhledu tohoto obsahu (jinými slovy: HTML jsou cihly, CSS omítka),
hlavní a největší výhodou CSS je možnost definovat vzhled určitým částem webových stránek najednou a pouze jednou (stejně jako styly v textovém editoru Word).

Dědičnost

dědičnost u CSS znamená, že když nadřízenému HTML prvku nastavíte jistou barvu textu, není již potřeba nastavovat barvu textu u podřízených HTML prvků.
například: pokud nastavíte styl například HTML prvku <body>, nemusíte již nastavovat stejný styl např. <h1> nebo <p>.

Syntaxe CSS

CSS není HTML, proto se zapisují jinak,
zápis se skládá ze tří částí: selektor, vlastnost, hodnota,

selektor {vlastnost_1: hodnota; vlastnost_2: hodnota}

Selektor

selektorem se určuje, čeho se definovaný vzhled týká,
na výběr je několik možných selektorů, těmi základními jsou:

Selektor univerzální

týká se úplně všeho, co se zobrazuje, zapisuje se symbolem hvězdičky,
avšak tento selektor se moc nepoužívá,

* {color: green}

Selektor značkový

týká se jen určitého HTML prvku (např.: odstavce, nadpisu či obrázku),

body {background-color: navy}
h2 {font-size: 16pt}
p {font-family: Tahoma, sans-serif}

Selektor vnořený

týká se vnořeného HTML prvku do jiného HTML prvku (např.: tabulky nebo oddílu), zapisuje v pořadí nadřízený - podřízený HTML prvek

h2 a {color: red}
table td {width: 100px}

Selektor složený

týká se více HTML prvků u kterých se používá jedna tatáž vlastnost se stejnou hodnotou, HTML prvky se oddělují čárkou

h1, h2, h3 {font-family: Arial, sans-serif}

Selektor třídy a identifikátorů

slouží pro definici vlastních stylů, třída se zapisuje tečkou před názvem stylu, identifikátor mřížkou,
například: pokud chcete různý styl pro jednotlivé odstavce,

.muj_styl_1 {background-color: black}
#muj_styl_2 {background-color: black}

Vlastnost

je klíčové slovo, které je přesně specifikované a vymezuje grafickou úpravu (např.: barva, šířka, velikost, atd.)
zapisuje se do složených závorek { a }
v závorkách může být několik vlastností najednou, jednotlivé vlastnosti se oddělují středníkem ;

Hodnota

vlastní hodnota pro danou vlastnost
odděluje se od vlastnosti dvojtečkou :

Zápis více vlastností

k jednomu selektoru lze zapsat nekonečně různých vlastností
jedinou podmínkou je, že se vlastnosti odděluje od sebe středníkem ;

h1 {color: blue; font-size: 24pt; font-family: Arial}

Psaní komentářů

Pro přehlednější kód lze do kódu vkládát tzv. komentáře. Podmínkou je, že text, který má být v komentáři musí být na začátku uvozen /* a na konci */.

Tři možnosti zápisu CSS

Styl lze nadefinovat trojím způsobem.

Přímým zápisem jako atribut u vybraného HTML prvku (tzv. přímý styl).
Zápisem tzv. stylopisu v hlavičce HTML souboru.
Zápisem do externího souboru s příponou *.css.

1. Přímý styl

používá se zřídka, protože popírá největší výhodu CSS, ale občas se využívá,
zapisuje se jako atribut style k vybranému HTML prvku.

Příklad zápisu v HTML:

<html>
  <head>
    <title>Titulek stránky</title>
  </head>
  <body>
    <p style="color: blue">Tento odstavec bude modrý.</p>
    <p>Tento už ne.</p>
  </body>
</html>

2. Stylopis v hlavičce HTML souboru

využívá se častěji, ale je nepraktický při práce s více HTML soubory (definuje vzhled pouze konkrétnímu HTML souboru),
zapisuje se mezi HTML značky <style> a </style> do hlavičky HTML souboru.

Příklad zápisu v HTML:

<html>
  <head>
    <title>Titulek stránek</title>
    <style type="text/css">
      p {color: blue}
    </style>
  </head>
  <body>
    <p>Tento odstavec bude modrý.</p>
    <p>Tento také, protože modré budou všechny.</p>
  </body>
</html>

3. Zápis v externím souboru

nejpoužívanější způsob
vytvoří se externí soubor (mimo HTML soubor) s příponou *.css, například: pokus.css,
tento soubor bude obsahovat pouze definici vzhledu

Příklad zápisu v CSS souboru:

p {color: blue}

v hlavičce HTML souboru je poté nutné "nalinkovat" tento soubor pomocí značky <link>

Příklad zápisu v HTML souboru:

<html>
  <head>
    <title>Titulek stránek</title>
    <link rel="stylesheet" type="text/css" href="cesta k CSS souboru">
  </head>
  <body>
    <p>Tento odstavec bude modrý.</p>
    <p>Tento také, protože modré budou všechny.</p>
  </body>
</html>

Důležité je i zmínit se o pořadí načítání stylů, což je dobré si uvědomit. Po otevření HTML souboru se nejprve načte styl z externího souboru, poté ze stylopisu v hlavičce a nakonec se načte přímý styl. (lidově řečeno poslední slovo má přímý styl).

9.2 CSS - základy syntaxe (cvičení)

Úkol

Vytvořte ve složce WWW novou složku CV09.
Ze složky CV08 zkopírujte všechny HTML soubory a složku IMG.
V HTML editoru si vytvořte nový CSS soubor a uložte je do složky CV09 pod názvem style.css.
Propojte soubor style.css se všemi HTML soubory.