CSS – umístění stylu

  • Home   /  CSS  /  
  • CSS – umístění stylu

Máme hned několik možností jak zapisovat CSS do HTML.

1. Externím stylopisem

Nejpoužívanějším způsobem je připojení externího CSS souboru k HTML pomocí prvku link. Zde je nejvíce vidět oddělení struktury HTML od CSS. K tomuhle si budeme muset vytvořit nový soubor, který bude obsahovat styly. Pojmenujeme si ho klasicky jako style s koncovkou .css a přesuneme jej do nově vytvořené složky s názvem css/, která je na stejné úrovni jako náš HTML dokument. Nyní již můžeme oddělit CSS od HTML úplně.

Kód v souboru style.css bude vypadat následovně:

h1, h2 { color: blue; font-size:50px; }

V hlavičce HTML dokumentu musíme tento soubor ještě připojit:

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

<body>     
  <h1>Učím se na ITnetworku</h1>     
  <h2>A je to super!</h2> 
</body>

<link /> je nepárový tag k určení vztahu mezi dvěma dokumenty. Nejčastěji se používá právě pro připojení CSS dokumentu. Elementu jsme dále vyplnili následující atributy:

  • rel je atribut, který definuje vztah (relationship) mezi HTML dokumentem a připojeným dokumentem. Hodnota stylesheet je v překladu všeříkající „šablona stylů“.
  • href je zkratka pro hypertextový odkaz (Hypertext REFerence), do kterého vkládáme cestu k připojovanému souboru. V našem případě musíme jít ve struktuře složek o jednu úroveň níže. Kdybychom jsme potřebovali jít o úroveň výše, tak se před cestu přidají dvě tečky takto: href="../css/style.css"
  • type určuje typ dokumentu, který připojujeme. Zde říká, že obsah připojovaného dokumentu je typu CSS.

Nyní se bude tato stránka stylovat podle toho, co napíšeme do CSS

Příklad importování stylového souboru:

<style type=“text/css“>
@import url(„styly.css“);
</style>

Pokud je styl umístěn na jíném serveru, tak můžeme použít zápis:
<style type=“text/css“>
@import url(„http://www.neco.cz/styl.css“);
</style>

Zápisem @import „styl.css“; můžeme také vložit jeden styl do druhého stylu.

2. Definování stylu uvnitř dokumentu

Druhým způsobem vložení CSS je zápisem stylů do hlavičky v HTML dokumentu (mezi prvky <head> a </head>). Nejdříve musíme prohlížeči říct, že se jedná o kaskádový styl. Toho docílíme tak, že vložíme styly mezi tagy <style type="text/css"> a </style>, kde nám atribut type s hodnotou text/css říká, že se jedná o CSS:

<head>     
<style type="text/css">         
  h1{ color: blue; font-size:50px; }     
</style> 
</head> 

<body>     
  <h1>Učím se na ITnetworku.</h1> 
</body>

Všechny nadpisy první úrovně jsou modré a mají velikost 50px. Nemusí to být pouze nadpisy první úrovně. Ty stejné vlastnosti můžeme třeba přidat samozřejmě i dalším nadpisům. Pro vyzkoušení si přidáme pod nadpis první úrovně i nadpis druhé úrovně h2 a do stylů jej připíšeme také:

<head>     
<style type="text/css">         
  h1, h2{ color: blue; font-size:50px; }     
</style> 
</head>
 
<body>     
  <h1>Učím se na ITnetworku</h1>     
  <h2>A je to super!</h2> 
</body>

3. Přímé připojení

Způsob přímého připojení (také známé jako inline styly) je nejméně používaný, ale to neznamená, že se vůbec nepoužívá. Vždy je lepší se tomuto způsobu vyvarovat kvůli oddělení struktury HTML od stylů, čímž můžeme zvýšit přehlednost kódu. Taktéž se trošku snižuje rychlost načítání webu (cachování).

Pro inline styl přidáme atribut style k HTML prvku a vložíme konkrétní styl. Jedná se o úpravu HTML souboru, žádný další externí css soubor není připojen.

<h1 style="color: blue;">Učím se na ITnetworku.</h1>

Vytvořili jsme tak nadpis první úrovně a přidali jsme k němu atribut stylee, za kterým následuje rovná se a uvozovky, do kterých se vloží CSS vlastnost a její hodnota, která je poté zakončená středníkem. V našem případě vlastnost color a hodnota blue, která říká, že nadpis bude mít modrou barvu. Když budeme chtít přidat další vlastnost, tak musíme pamatovat na středník na konci zápisu a pouze připíšeme další vlastnost, např. budeme chtít zvětšit velikost písma pomocí font-size na hodnotu 50px:

<h1 style="color: blue; font-size:50px;">Učím se na ITnetworku.</h1>

Váha stylů

Pokud ve stylu definujeme pro stejný element stejnou vlastnost dvakrát, vyšší váhu má ta deklarace, která byla definovaná později (myšleno na pozdějším řádku) a ta se také provede. Pokud bychom chtěli některé deklaraci přiřadit větší důležitost, použijeme !important

.h1 {color: blue !important}

Cvičení

C1 – externí připojení CSS stylu

Ve složce C1 si vytvořte jednoduchý HTML soubor, který bude obsahovat 4 odstavce a 4 nadpisy první úrovně – tedy <h1>. Text je libovolný. Název souboru index.html. Vytvořte soubor pro CSS, ten nazvěte style.css a umístěte jej do složky css. Navzájem propojte HTML soubor a externí CSS soubor. Pozor na správnou relativní cestu k css souboru.

Do hlavičky html souboru vložte propojení s externím css souborem.

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

V souboru style.css definujte následující vlastnost pro odstavce a nadpisy h1:

p {color: green;}
h1 {color: blue; font-size: 200%;}

Zobrazte si výslednou stránku v prohlížeči.

C2 – definování stylu uvnitř dokumentu

Do html souboru z předchozího cvičení vložte do hlavičky html souboru následující css definici. Propojení s externím css souborem, tak jak jste definovali ve cvičení C1 ponechte.

<style type="text/css">         
  h1 {color: red; font-size: 400%;}     
</style>

Jakou barvou budou zobrazeny h1 elementy v prohlížeči? Který stylopis bude mít větší váhu?

C3 – definování stylu uvnitř dokumentu

Do html souboru z předchozího cvičení vložte do těla html souboru následující kód. Css definici v hlavičce a propojení s externím css souborem, tak jak jste definovali ve cvičení C1 ponechte.

<h1 style="color: black;">.....</h1>

Jakou barvou budou zobrazeny h1 elementy v prohlížeči? Který stylopis bude mít větší váhu?

Zdroje: