Kaskádové styly

Formátování HTML

• HTML tagy
  • Starší způsob používaný přímo v kódu.
  • Pomocí tagů : <i> kurzíva </i>.
  • Pomocí tagů se některé věci nedají udělat.
• CSS styly
  • Novější způsob
  • Používá tag <style> a obecný atribut „style“,kterému se přiřazuje nějaká definice.
  • Vlastnosti: složitější, ale užitečnější a všeobecné.

Kaskádové styly (CSS)

• Cascading Style Sheets, česky „kaskádové styly“
• Vznikly někdy kolem roku 1997
• Kolekce metod pro grafickou úpravu webových stránek
• Cílem oddělit vzhled dokumentu od jeho struktury a obsahu
• V současností existují vylepšené formy CSS2 a CSS3

Přehled vlastností CSS

• font
• text a odstavec
• barvy a pozadí
• velikost a obtékání
• okraje
• rámečky
• seznamy
• pozicování
• tabulky
• další vlastnosti IE
• další vlastnosti
• příklady zápisu (selektory)

Aplikace CSS

• Přímo v textu pomocí atributu style=„…“.

  •  <p style="color: red">Tento odstavec bude červený.</p> 

• Pomocí stylopisu („stylesheet“) v hlavičce stránky.
  • Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například barva nadpisů.

  • <style>
      p {
        color: red;
        }
    </style>

• Použitím externího stylopisu - soubor *.css
  • na který se stránka odkazuje tagem <link>.
  • V souboru je umístěný stylopis.
  • Hlavní výhodou snadná duplicita a editace.

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

Syntax CSS

• CSS nejsou součástí HTML – odlišnost zápisu!
• Mezery a konce řádků, velikost písmen nehrají roli.
• Hodnoty, které prohlížeč nezná, ignoruje.
• Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky.