Domů › Přidělení stylů

Přidělení stylů

Způsob jakým se stránka zobrazí na výstupním zařízení (počítač , tiskárna, hlasový výstup atd.) je možné definovat:

  • atributem style
    • vysoká priorita – přepíše všechny ostatní styly přiřazené témuž elementu jiným způsobem
  • elementem <style>
    • střední priorita – přepíše styly definované v externím souboru (případně styly připojené pravidlem @import)
  • připojením externího souboru elementem <link>
    • nízká priorita
  • import externího souboru pravidlem @import
    • nejnižší priorita – přepíší je všechny později deklarované styly

Atribut style

Slouží k definici stylu elementu ve kterém je definován.

Pokud se rozhodnete u elementů používat tyto atributy, je nutné v hlavičce dokumentu definovat typ stylového jazyka.

  ...
  <meta http-equiv="content-style-type" content="text/css" />
</head>
<body>
  ...
  <h2 style="color: red;">Červený nadpis</h2>
  <p style="color: blue;">Modrý text odstavce</p>
  ...

Poznámka: V případě HTML dokumentu element meta na konci lomítko nemá.

Element <style>

  • slouží k definici stylu dokumentu ve kterém je definován
  • může se vyskytovat pouze v hlavičce dokumentu <head>

HTML

Uzavřením stylu do komentáře znepřístupníme styly pro prohlížeče, které kaskádové styly (CSS) ještě neznají (CSS je podporováno až od HTML 3.2).

  ...
  <style type="text/css">
    <!--
      h2 {color: red;}
      p {color: blue;}
    -->
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

XHTML

V samotném obsahu elementu nejsou rozeznávány znakové entity.

Uzavřením stylu mezi <![CDATA[ a ]]> zajistíte rozeznávání znakových entit. Protože se ale nejedná o prvky stylu je vhodné je uzavřít do komentářů daného stylového jazyka.

  ...
  <style type="text/css">
    /* <![CDATA[ */
      h2 {color: red;}
      p {color: blue;}
    /* ]]> */
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

Element <link>

  • slouží k definování vztahů dokumentu s jinými dokumenty
    • připojení definice stylu dokumentu
    • navigace dokumentu
  • může se vyskytovat pouze v hlavičce dokumentu <head>
    • k popisu zdroje je možné využít atribut title
    • parametr rel určuje typ šablony
      • stylesheet – základní (výchozí) šablona
      • alternate – alternativní šablona (umožňuje uživateli nabídnou jiný vzhled)
    • vždy uvádějte atribut type
  ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

Připojený soubor style.css obsahuje:

h2 {color: red;}
p {color: blue;}

Pravidlo @import

Pravidlo @import je doporučeno uvádět v CSS vždy jako první.

Hlavička dokumentu

HTML
  ...
  <style type="text/css">
    <!--
      @import url("style.css");
      h2 {color: red;}
      p {color: blue;}
    -->
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...
XHTML
  ...
  <style type="text/css">
    /* <![CDATA[ */
      @import url("style.css")
      h2 {color: red;}
      p {color: blue;}
    /* ]]> */
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

Externí soubor

Příklad pravidla @import v externím CSS souboru:

@import url("style.css")
h2 {color: red;}
p {color: blue;}

 Doporučení:

  1. Používejte externí soubory se styly.
    • do stylu se mohou bez problémů zapisovat libovolné znaky (<, >, & atd.)
    • na styly uvedené v externím souboru je možné se odkazovat ze všech dokumentů webu
    • při úpravě vzhledu dokumentu stačí upravit pouze soubor se styly
    • styly se načtou pouze pro zařízení (média), která je podporují
    • prohlížeče si externí soubor uloží do cache paměti a nemusí je znovu stahovat
  2. Nepoužívejte "tabulkové" rozložení (layout) stránky.
  3. Nepoužívejte rámce:
    • vyhledávače mohou odkazovat pouze na hlavní rámec s obsahem (chybí navigace, hlavička stránky atd.);
    • problémy při tisku atd.
Způsoby přidělení stylů
Způsob Podpora prohlížečů Poznámka
<link> všechny prohlížeče  
<style>   IE 5.5 nerespektuje atribut media
@import url("ie4.css") dodatky pro IE4 odřízne NN4
@import "moderni_prohlizece.css" moderní prohlížeče (od IE5+, NN6/Moz, Opera) odřízne IE4

NN4 a IE4 z kaskádových stylů spolehlivě podporují pouze styl a barvu písma.

PřílohaVelikost
prideleni-stylu.zip1.04 KB