CSS

CSS neboli Cascading style sheet (kaskádové styly) jsou jednoduchým ale výkonným jazykem pro úpravu vzhledu webových stránek. Kaskádové styly přidávají nebo upravují vlastnosti jednotlivých elementů ve webové stránce. Element může být nadpis h1, tabulka table, kontejner div, výčet ul apod., což jsou vlastně HTML tagy, z kterých je stránka poskládána.

Existují tři základní způsoby přidělení stylů elementům:

  • řádkové styly, kdy jsou styly přímo vepsány v HTML tagu (např. table style="border:1px solid #111; background:yellow" )
  • styly v hlavičce dokumentu (webové stránky)
  • styly v externím souboru

Všechny tři způsoby si ukážeme v 1. lekci. CSS umí rozlišovat i výstupní medium - monitor, tisk, braillovo písmo... kdy můžeme pro zvolené výstupní medium připravit odpovídající vzhled (pravidlo @media). Šablona kaskádových stylů se skládá z pravidel. Každé pravidlo má dvě části - selektor a vlastnosti. Vlastnosti pro dané pravidlo se uzavírají do složených závorek. Teoreticky to vypadá následovně:

selektor {vlastnost1; vlastnost2 ... }

Za selektor si můžeme dosadit např. HTML tagy body, h1p, table, ul apod.
Vlastností může být např. pozadí background, rámeček border, vnitřní odsazení padding.
Vlastnosti mají hodnoty zapisované za dvojtečkou, např. background:url(./design/bg.gif) 0 0 no-repeat ; border: 1px solid red; padding:5px 10px 5px 15px; vlastnosti se oddělují mezerami a může jich být za dvojtečkou více. Celkově to vypadá asi takto:
body {background:url(./design/bg.gif) 0 0 no-repeat; margin:0;  padding:0 10px; font-size:11px; }

Jednoduchá a vícenásobná deklarace

Vlastnosti CSS můžeme přiřadit buď jenomu nebo i více selektorům (vícenásobná deklarace) např.:
h1, h2, h3, h4 {font-weight:bold; color:#edfee1; }

Univerzální selektor

Univerzálním selektorem (*) můžeme přiřadit vlastnost všem elementům v dokumentu. Je nejvýše v hierarchii.
Př.: * {border:none; }

Typový selektor

Odpovídá typu HTML elementu např.:
p {padding:10px; } (všechny odstavce v dokumentu budou mít vnitřní odsazení 10px)

Selektor následníka

Vybere druhý definovaný element (následníka), který je vnořen do prvně definovaného elementu bez ohledu na hloubku vnoření. Např.:
div.napoveda img {float:left; width:200px; } (všechny obrázky v divu s třídou napoveda budou pozicovány vlevo s šířkou 200px, přičemž ještě mohou být umístěny v odstavci p)

Selektor sousedícího sourozence

Vybere k formátování pouze druhý definovaný element. který je sourozencem prvně definovaného elementu, např.:
h1 + p {font-weight:bold; } (tučným písmem budou pouze odstavce, které bezprostředně následují po nadpisu h1, na jiné se pravidlo neuplatní)

Selektor obecného sourozence

Vybere k formátování pouze druhý definovaný element, který je sourozencem prvně definovaného elementu. Oba elementy musí být v hierarchii na stejné úrovni (musí mít steného rodiče), ale druhý element nemusí bezprostředně následovat po prvním elementu, např.:
h1 ~ p {color:red; } (pravidlo se použije na všechny odstavce následující po nadpisu první úrovně, s nímž jsou v sourozeneckém stavu - mají společného rodiče, např.: div s třídou sekce.)

Selektor třídy

Vybírá element označený třídou (deklaruje se tečkou a názvem třídy)
.content {float:left; width:400px; height:auto; }

Selektor identifikátoru

Vybírá element označený identifikátor (deklaruje se # a názvem identifikátoru)
#content {float:left; width:400px; height:auto; }

Existuje ještě mnoho dalších vychytávek, ale s tímhle bohatě vystačíte. Nejčastěji se používá selektor třídy a typový selektor. Bez ostatního se nejspíš obejdete, nicméně, pokud zvládnete i ostatní typy selektorů, budete některé vyjímky ve stylech řešit čistě a elegantně.

Obsah on-line kurzu

Lekce 1 - opáčko na rozehřátí

  • Náš první PHP skriptík
  • Tabulkový layout
  • XHTML layout
  • Kouzlo CSS
  • CSS styly v hlavičce
  • CSS styly v externím souboru
  • Použití funkce, identifikátor

Lekce 2 - stavíme fotogalerii

  • MySQL databáze a některá základní nastavení
  • Struktura a návrh databáze, cizí klíče
  • Zobrazení alb fotogalerie
  • Zobrazení všech miniatur v albu
  • Zobrazení detailu fotografie

Lekce 3 - složíme to dohromady

  • Zobrazování textů a dynamické menu pomocí CSS
  • Nastavení menu a přidání sekcí typu text
  • Kauza Explorer
  • Čisté URL a soubor .htaccess

Lekce 4 - administrace pro správu obsahu

  • Administrace pro správu sekcí typu text
  • Implementace CK Editoru
  • Zaheslování administrace