Kaskádové styly – umístění stylů v HTML
Do této chvíle jsem uvedl pouze jediný způsob, jak umístit styly do HTML stránky, a to pomocí značky „style“. Dnes se budu zabývati dalšími možnostmi.
První možností, a pro správu webových stránek velice často výhodnou možností, je umístit styly do samostatného souboru. Můžete si tak napsat styly, které budou společné třeba pro mnoho webových stránek. Pokud se rozhodnete změnit vzhled některých prvků na všech stránkách, třeba nadpisů, stačí vám změnit styly v tomto jediném souboru a změny se projeví ve všech stránkách. Já osobně tento způsob používám velice rád.
Pro příklad předpokládejme, že jsme se rozhodli, že všechny naše stránky budou mít nadpisy modrou barvou, tučně a vycentrované. Zároveň všechny odkazy na jiné stránky budou psány kurzívou. K tomu stačí vyrobit textový soubor, který se bude jmenovat mujstyl.css a jeho obsah bude tento:
|
V tomto souboru tedy jsou uloženy styly, kterým již dokážete porozumět. Dále je potřeba, aby do každé stránky, která se má podle těchto stylů řídit, byla přidána značka link:
|
Značka <link> má více významů, než pouze pro kaskádové styly CSS, ale to je pro náš seriál nepodstatné. V příkladu vidíte, jak se používá pro přidání souboru se styly. Pro jistotu dodávám, že v atributu href je potřeba uvést příslušnou cestu, pokud soubor mujstyl.css není ve stejném adresáři jako je HTML stránka. Značka <link> by měla být v hlavičce, tedy mezi značkami <head> a </head>.
Mnoho webových sídel používá právě uvedený způsob, kdy veškeré styly jsou v jednom souboru, a v každé stránce je jenom značka <link>. Pro úplnost dodám, že klidně můžete použít značku <link> pro natáhnutí stylů ze souboru a ještě si přidat své vlastní styly pomocí značky <style> přímo do stránky.
Samotné kaskádové styly CSS používají příkaz @import, který dělá v podstatě totéž, tedy natahuje styly ze souboru. Uvádím příklad stránky, která natáhne styly ze souboru mujstyl.css a ještě si k tomu navíc přebarví všechny texty uvnitř značky b namodro:
|
Pro snazší používání stylů byla do jazyka HTML ve verzi 4.0 přidána úprava, která říká, že většina značek v jazyce HTML může mít přidán svůj individuální styl, a to jako atribut s nečekaným názvem style:
|
Tento odstavec bude psán kurzívou
Přidávání stylů do každé značky je poměrně mocný nástroj, který vám umožňuje využít možnosti stylů uvnitř každé značky zvlášť. Jako příklad trochu "divočejšího" používání této možnosti uvádím příklad, který vám přiblíží tuto možnost (jenom doufám, že to v praxi nebudete takto přehánět):
|
Nadpis článku
Tento text je psán modře bezpatkovým písmem. A toto je nepodtržený odkaz
Obrovský význam má používání atributu style v dynamickém HTML. Je totiž možné měnit styly (třeba pomocí JavaScriptu) v závislosti na tom, co čtenář stránky dělá. Ačkoli je JavaScript už úplně jiná kapitola, připravil jsem pro vás alespoň ukázkovou stránku, která demonstruje využití spojení stylu a JavaScriptu. Bohužel tuto demonstraci uvidíte asi jenom v Internet Exploreru, v Netscape Navigatoru žádné efekty dynamického chování stránky neuvidíte.
A to je pro tento díl vše.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Co je to DNSSEC, jak funguje a jak si ho nastavit?
14. srpna 2024 -
Souboj na trhu s CPU pro servery: AMD vs. Intel
8. prosince 2023 -
ZONER Webmail jako první v Česku přináší BIMI s VMC
11. července 2024 -
Nepodceňte UX na vašem webu: Proč na něm záleží?
10. dubna 2024
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024
J.peschel
Led 13, 2011 v 19:35Bohužel nevím jaká znaková sada je v ukázkové stránce použita,avšak místo diakritiky se nachází pouze čtverečky