Článek: AN0002380Aktualizováno:: 13.12.2018
Kaskádové styly (CSS = Cascading Style Sheets) se používají k formátování HTML textu. Původní způsob formátování HTML textu využíval HTML tagy. Dnes se původní HTML formátování používá minimálně - přetrvává např. u vyjádření tučného písma nebo kurzívy - tagy <b> a <i>.
Veškeré další formátování se řeší pomocí CSS. Existují tři způsoby použití CSS:
1. Přímý styl
Formátování je definované přímo ve zdrojovém textu v atributu style.
Příklad:
<p style="margin-left: 40px;">Odstavec bude odsazen 40 px zleva.</p>
Odstavec bude odsazen 40 px zleva.
Pokud používáte ObjectGears HTML editor a zvolíte např. typ nebo barvu písma, HTML editor vygeneruje tag <span> a opět použije vlastnost style.
2. Stylesheet definovaný v hlavičce dokumentu
Tímto způsobem si můžete na začátku stránky definovat např., jak mají vypadat všechny nadpisy. Získáte tak konzistentní vzhled v celé stránce.
<style>
p {color: blue}
</style>
Výše uvedený kód v hlavičce stránky způsobí, že text všech odstavců ve stránce bude mít modré písmo.
3. Externí soubor
Použijete externí stylesheet (soubor s koncovkou .css), který vám umožní použít jednou definovaný styl na více stránkách. Stránka se na soubor odkáže pomocí tagu <link>. Pokud se takto odkážete ve všch stránkách, všechny stránky pak budou vypadat konzistentně.
Vytvoříte si soubor, který se pojmenuje například moje_styly.css. V něm bude pouze tento text:
p {color: blue}
Ve stránkách, kde budete chtít použít tento styl, pak uvedete:
<link rel="stylesheet" type="text/css" href="moje_styly.css">
Výhody použití CSS v externím souboru:
- Styly v souboru se stáhnou jen jednou pro celý web. Uživatel se pak na webu pohybuje rychleji.
- Zmenší se velikost HTML stránky. Stránka pak má pouze vlastní informační obsah.
- Změnu vzhledu provedete v jednom souboru najednou bez nutnosti zásahovat do ostatních stránek. Dokumentace, kterou si právě prohlížíte, obsahuje více než tisíc stránek a změnu jejich stylu v případě potřeby již není možné měnit ručně jednu po druhé.
V ObjectGears můžete CSS použít na několika místech:
Více informací k CSS doporučujeme získat na Wikipedii a ve w3schools. Stránek o CSS je velké množství - doporučujeme např. i český web jakpsatweb.cz.