Jste zde

Domů » 1. sada: Základy HTML a CSS » 9. CSS - základy syntaxe

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.

  1. Přímým zápisem jako atribut u vybraného HTML prvku (tzv. přímý styl).
  2. Zápisem tzv. stylopisu v hlavičce HTML souboru.
  3. 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).