Kaskádové styly – umístění stylů v HTML

24. února 2000

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:

h1, h2, h3, h4, h5, h6 {
  color: blue;
  font-weight: bold;
  text-align: center;
}
a {
  font-style: italic;
}

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:

<html>
<head>
<title<titulek</title>
<link rel="stylesheet" type="text/css" href="mujstyl.css">
</head>
<body>
 …
</body>

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:

<html>
<head>
<title<titulek</title>
<style type="text/css"><!–
  @import url(„mujstyl.css“);
  b {color:blue;}
–></style>
</head>
<body>
 …
</body>

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:

<p style=“font-style:italic;“>Tento odstavec bude psán kurzívou</p>

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):

<html>
<head>
<title>titulek</title>
</head>
<body>
<h1 style=“font-size:150%;“>Nadpis článku</h1>
<p style="font-family:sans-serif;color:blue;">
Tento text je psán modře bezpatkovým písmem. A toto je
<a style="text-decoration:none;" href="http://www.interval.cz">nepodtržený odkaz</a>
</p>
</body>
</html>

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.

Štítky: Články

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. J.peschel

    Led 13, 2011 v 19:35

    Bohuž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

    Odpovědět

Napsat komentář: J.peschel Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *