Home » Školení » Tvorba WWW – CSS » Umístění stylu

Umístění stylu

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


Externím stylopisem

Pokud chceme mít styl uložený v externím souboru (což je velmi výhodné při používání jednoho stylu pro více dokumentů), v nějakém textovém editoru uložíme námi definovaný styl do souboru s příponou css. Ten pak připojíme k dokumentu zápisem v hlavičce (tj. mezi tagy <head> a </head>) buď v tagu link:

<link rel=“stylesheet“ type=“text/css“ href=“styl.css“ />

nebo v tagu style

<style type=“text/css“>@import „styl.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.

Definování stylu uvnitř dokumentu

To můžeme provést opět v tagu style kam tentokrát místo odkazu na externí styl umístíme přímo definici stylu. CSS se zapisuje do hlavičky HTML dokumentu mezi tagy <style></style>

<html>
<head>
<title>Jméno webu</title>
<style>
div {width: 200px; align: center}
</style>

</head>

<body>
Obsah webu
</body>
</html>

Následně budou všechny bloky mít šířku 200px a budou zarovnané na střed.

Nebo můžeme definovat styl přímo nějakému elementu, což se hodí zvláště v případě, kdy máme definovaný jednotný styl, ale pro například jedno konkrétní slovo chceme použít jiné pravidlo. Potom použijeme v příslušném tagu atribut style.

<div style=“width: 200px; align: center“>Formátovaný blok</div>

Tento blok bude mít šířku 200px a bude zarovnaný na střed.

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}