13 - Formátování výstupu pomocí CSS

Article Index

Page 1 of 3

Jednou z hlavním myšlenek značkovacích jazyků je oddělení formátu od obsahu (dat). Formátování je tedy nutné zajistit jiným nástrojem - velmi používané jsou Kaskádové styly (Cascading Style Sheet) - CSS. Aktuálně přesněji CSS3. Principem je zápis formátovacího předpisu pouze jedenkrát. Z tohoto jednoho místa je pak formátován celý web.

 Umístění CSS

Kaskádový styl může být umístěn v hlavičce HTML souboru - uvnitř párové značky <head></head>. Zápis je uvnitř značky <style></style>.

<html>
  <head>
    <style>
    body
    {
      background-color: lime;
    }

    h1
    {
      color: black;
    }
   </style>
  </head>
...

Tento zápis je obvykle použit pouze pro testování designu. Pokud by byl takto realizován celý web, pak by šel proti smyslu CSS - tedy jeden zápis pro celou webovou prezentaci.

Zápis v externím souboru a jeho nalinkování je výhodnější. Veškeré předpisy CSS jsou umístěny na serveru v dedikovaném souboru. Tento je pak připojen ke každému HTML souboru. Opět v hlavičce.

<head>
...
<link rel="stylesheet" type="text/css" href="styly.css" />
...
</head>

Nemusíme se limitovat pouze na jeden soubor se styly, nicméně pro jednodušší web to je běžné. Soubor s CSS není nijak uvozen (například jako xml nebo HTML soubor).

V případě "nouze" zle umístit styl i přímo do formátované značky jako atribut, ale přicházíme tak o jednoduchou správu stylování - vracíme se k problémům z HTML3.2 a značkou <font>.

<h1 style="color:blue;text-align:center;">Nadpis zarovnaný na střed stylem přímo ve značce</h1>

Priorita stylů

Styly se mohou "překrývat" - pak nastupuje v podstatě přepisování stylů během zpracování. Ukázka je nejlepší - budeme formátovat nadpis.

<head>
 <link rel="stylesheet" type="text/css" href="/styly.css"/> <!-- Zde je nastaveno h1{color:blue;}
  <style>
  h1{color:red;}
  </style>
</head>
<body>
 <h1 style="color:green">Nadpis</h1>
...

Zjednodušeně lze říci, že priorita je dle "vzdálenosti" od formátované značky. Vždy je následovně:

  1. inline zápis
  2. zápis v hlavičce
  3. zápis v externím souboru

Navíc, pokud v externím souboru bude konfliktní zápis:

h1{color:red;}
...
h1{color:blue;}

Pak platí hodnota na řádku s vyšším pořadovým číslem. V podstatě je nadpis napřed zbarví červeně a pak hned modře - z textového souboru je čten zápis po řádcích - poslední platí.