Od provozovatele projektu Rychlost.CZ

Stylování stránky - Začínáme s HTML

vydáno: 01.02.2016, seriál: Začínáme s HTML | komentářů: 0

Toto je 5. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Vlastnosti každého elementu v HTML dokumentu lze měnit pomocí kaskádových stylů. Definovat se dají buď přímo v HTML dokumentu nebo v externím CSS souboru.

Interní styly

Interní styly vzhledu elementů zadáváme přímo do daného HTML souboru. K tomuto účelu slouží tag <style>, který se umisťuje do hlavičky <head> dokumentu. Mezi tag <style></style> zapisujeme vlastnosti elemtentů dle specifikací CSS. V našem příkladu jsme definovali všem odstavcům <p> vlastnost color s hodnotou red. Všechen text umístěný v odstavci <p> bude mít červenou barvu.

Ukázka:
HTML
<head>
<title>HTML dokument s interními styly</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>Text v odstavci bude červený</p>
</body>
Použité tagy: <head>, <title>, <style>, <body>, <p>

Externí styly

Externí soubor s kaskádovými styly připojíme k HTML dokumentu pomocí tagu <link>, který rozšíříme o tři důležité atributy. Atributy rel="stylesheet" a type="text/css" oznamují prohlížeči, že se jedná o soubor s kaskádovými styly. Do atributu href zadáme relativní nebo absolutní cestu k CSS souboru. V našem příkladu je soubor styl.css ve stejné složce jako HTML soubor.

Veškeré úpravy vzhledu elementů pak píšeme přímo do souboru styl.css. V naší ukázce jsme opět definovali vlastnost color s hodnotou red všem odstavcům v HTML dokumentu. 

Výhodou použití externích souborů je nejen snížení velikosti HTML souboru a tím i rychlejší načítání dokumentu, ale také menší objem přenesených dat a v neposlední řadě snadnost následných úprav. Když budete mít 10 dokumentů a každý bude mít svoje interní styly, bude úprava každé vlastnosti elementů velmi časově náročná.

Pokud je to možné, využívejte externí styly.

Ukázka:
CSS
p {
color: red;
}
Použité vlastnosti: color
HTML
<head>
<title>HTML dokument s externími styly</title>
<link rel="stylesheet" type="text/css" href="styl.css">
</head>
<body>
<p>Text v odstavci bude červený.</p>
</body>
Použité tagy: <head>, <title>, <link>, <body>, <p>

<style>

Párovým tagem <style> určujeme vzhled elementů přímo v dokumentu bez nutnosti použití externích souborů.

<link>

Tag <link> slouží k propojení HTML dokumentů s externími soubory. V dnešním příkladu jsem propojili náš dokument s externím souborem s CSS stylem. Atributy rel a type označují, že se jedná o soubor s kaskádovými styly a atribut href odkazuje na umístění daného souboru.

HTML: návody jak psát html tagy