O webu
Základy CSS

CSS (anglicky Cascading Style Sheets) je velmi rozšířený způsob, jak upravovat visuální vzhled dokumentů na internetu. V češtině se CSS běžně nazývá spojením kaskádové styly.

Pomocí CSS pravidel se nejčastěji upravuje podoba HTML značek.

Zápis CSS

Jednoduché použití CSS na HTML značku pro nadpis <h1> může vypadat následovně:

h1 {
  color: red;
}

Tento kód způsobí, že obsah následujícího HTML kódu:

<h1>Text</h1>

Bude červený. Proč to tak bude?

  • h1 je tzv. CSS selektor, kterým se zaměří prvek na stránce (selektorů je velké množství), tento selektor zaměří všechny značky <h1>, které se na stránce vyskytují

  • { a } jsou složené závorky a obalují všechny předpisy pro daný selektor (na české klávesnici je lze zapsat jako Pravý Alt + B/N)

  • color je CSS vlastnost – všech vlastností je obrovské množství – konkrétně color slouží pro nastavení barvy

  • : – pomocí dvojtečky se odděluje název vlastnosti od její hodnoty

  • red – CSS hodnota přiřazená k vlastnosti před dvojtečkou

  • ; – středník odděluje více párů vlastnost – hodnota, za poslední dvojicí se psát nemusí, ale je to docela dobrý zvyk

  • Mezery a odřádkování jsou v předchozí ukázce CSS pouze pro přehlednost. Zápis „h1{color:red;}“ povede ke stejnému výsledku.

Živá ukázka – nejjednodušší použití CSS na HTML dokument

Připojení CSS

Aby se mohly kaskádové styly v HTML stránce projevit, musí se nějak připojit.

Značka <style>

Nejrychlejší a nejsnazší je vložit CSS předpisy do HTML značky <style>, která se obvykle přidává před samotný obsah do hlavičky stránky (volitelná značka <head>).

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<h1>Červený text</h1>

U vícestránkového webu by se ale muselo CSS se značkou <style> kopírovat na všechny podstránky. Velké weby navíc mají styly značně rozsáhlé a datově objemné, takže by se totéž CSS muselo znovu a znovu stahovat s každou stránkou.

Proto se CSS ve značce <style> moc nepoužívá. Případně jen pro menší množství pravidel.

Atribut style

Psát CSS jde i přímo k jednotlivým HTML značkám do atributu style.

<h1 style="color: red">Červený text</h1>

Tento postup nazývaný jako inline zápis se ale používá jen výjimečně, protože je obtížnější takový kód spravovat. Navíc se obvykle CSS předpisy používají opakovaně, takže by neustálé opakování kódu nebylo moc elegantní.

Měli-li by být všechny nadpisy <h1> červené, musela by mít každá tato značka style="color: red". Při vyčlenění CSS a zaměření pomocí selektorů to stačí napsat jednou.

Externí CSS

Asi nejčastěji se používá externí CSS soubor. Někde v adresáři s webem se vytvoří soubor s příponou *.css (třeba styl.css) a jednotlivé CSS předpisy se píší přímo do něj.

Tento soubor se potom připojí ze všech stránek, kde je potřeba, značkou <link> (před obsahem v části <head>):

<link rel="stylesheet" href="styl.css">

Pomocí rel="stylesheet" se prohlížeč dozví, že se jedná o soubor se styly.

Občas se je možné setkat s připojením stylů vypadajícím následovně:

<link rel="stylesheet" type="text/css" href="styl.css">

Uvádění typu je zbytečné, protože „text/css“ je výchozí typ pro rel="stylesheet".

CSS vlastnosti

Pro základní ovládnutí CSS je dále nutné znát asi deset CSS vlastností.

Vzhled textu

Vzhled bloků

  • margin – vytváření rozestupů mezi bloky
  • background – pozadí
  • border – rámeček
  • display – různá podoba zobrazení (řádkové/blokové)
  • float – obtékání je základní způsob, jak něco dostat vedle sebe
  • position – posicování elementů