ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

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

24. února 2000
•
Miloslav Ponkrác

Související

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.

Předchozí článek WebSpeed Optimizer - na každého jednou dojde
Další článek Macromedia FLASH 4 - vyjíždějící menu
Štítky: Články
Miloslav Ponkrác

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ář

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