V dnešním článku si povíme něco o technologii CSS - technologii pro formátování webových stránek.
Tak jako normální stránka má formu a obsah, webová stránka má podobně také
formu (vizuální vzhled stránky) a obsah (samotné texty uvedené na webové
stránce). Samotný jazyk HTML má pro formátování textu vlastní, i když
místy dost neobratné prostředky, jak jednoduchého formátování dosáhnout. To jsou
například značky <i> pro skloněné písmo nebo <b> pro písmo tučné. Styly CSS
naopak tomu používají úplně jiný způsob formátování, který se zapisuje do
samostatné definice. Je to sice oproti HTML složitější, ale při větším
počtu stránek rozhodně lepší.
A co vlastně vše jde v CSS dělat?
- Zformátovat nadpisy pro všechny stránky najednou
- Nastavit pozadí stránky, tabulky, buňky a všeho ostatního, co může mít
pozadí
- Nastavit si vlastní vzhled rolovacích lišt
- Všemožně formátovat písmo - o mnoho více než v HTML
- Zvýrazňovat odkazy při přejetí kurzorem myši
- Vytvořit vlastní odrážky pro odrážkový seznam
- Zprůhlednit, zviditelnit a naopak zneviditelnit části stránky
- A ještě mnoho a mnoho dalších vychytávek
Jak je vidět, dokáží toho CSS styly daleko více, než obyčejné HTML.
A jak se takové styly ve stránce používají a odkud se berou? Jsou tři možnosti,
jak na webovou stránku CSS styly dostat:
- Pomocí tzv. sylopisu přímo v hlavičce stránky. Píše se do sekce <head>
mezi značky <style>
- Přímo v elementu pomocí atributu style="..."
- Použitím externího stylopisu, který je uložen v souboru styly.css
1. Styly pomocí stylopisu v hlavičce stránky
Do sekce <head> vložíte mezi značky <style> a </style>
např. toto: (modré tučné písmo):
{
p {color: blue;
font-weight:bold;
}
2. Pomocí atributu style v elementu
<p style="color:blue; font-weigth:bold;">Modrý tučný text</p>
3. Pomocí externího stylopisu
Do souboru styly.css (soubor si můžete pojmenovat podle sebe, přípona
však musí být css) napíšete:
p {
color: blue;
font-weight:bold;
}
a pak do stránky stylopis naimportujete pomocí odkazu:
<link rel="stylesheet" type="text/css" href="styly.css ">
Ve všech třech případech bude text mezi značkami <p> a </p> modrý a tučný
A to je o CSS stylech pro dnešek vše. Příště si ukážeme názorně, jak pomocí
stylů formátovat text a elementy na webové stránce