Tvorba WWW – CSS

  Home » Školení » Tvorba WWW – CSS » Zápis stylu

Zápis stylu

CSS se skládá ze selectoru a definice neboli deklarace nebo více definicí.

Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek. Celé to zapisujeme takto:

selektor {vlastnost: hodnota_vlastnosti}

A konkrétně:

h1 {color: blue}

Selektorem, tedy elementem, který formátujeme je zde h1 (nadpis 1. úrovně). Deklarací je {color: blue}. Ta určuje, že vlastnost color bude mít hodnotu blue. Celé dohromady to tedy znamená, že všechny nadpisy 1. úrovně v dokumentu budou mít modrou barvu.

Pokud budeme chtít určit elementu více než jednu vlastnost, jednotlivé vlastnosti od sebe oddělíme středníkem. Takto můžeme definovat libovolné množství vlastností.

selektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2;}
Samozřejmě je možný i zápis každé vlastnosti zvlášť, ale to je zbytečné.

Pokud budeme chtít určit dvěma elementům jejich společnou vlastnost, oddělíme od sebe jednotlivé selektory čárkou.

selektor1, selektor2 {vlastnost: hodnota_vlastnosti;}

Externí soubor

Externí soubory obsahující styly mají obvykle příponu css a jsou to stejně jako html soubory naprosto obyčejné „texťáky“. Tedy můžete používat pořád ten samý editor, jak pro HTML tak pro CSS. Soubor se styly vložíte do stránky následujícím způsobem.

<head>
<title>Titulek</title>
<link href=“styly.css“ rel=“STYLESHEET“ type=“text/css“>
</head>

Je to jednoduchý tag link a pomocí parametru href určíte cestu k externímu souboru. Externích souborů si můžete ke stránce připojit kolik chcete a nemusí se ani nacházet na vašem serveru. Jak vypadá takový soubor uvnitř?

styly.css

body {font-family:arial, verdana; color:red;}
h1 {font-size:30px;color:yellow;}

V zásadě nadefinujete tag a za něj do složených závorek vpisujete jednotlivé CSS vlastnosti. Tagy nemusí být uvedeny velkým písmem, záleží na zvyku, někomu se t o zdá přehlednější psané velkým písmem.

H1, H2, A {color:red;}

Jak vidíte na tomto příkladu, definovat se dá i pro více tagů najednou. V tomto případě bychom měli všechny odkazy a nadpisy prvních dvou úrovní červenou barvou. Pokud nadefinujete určitou vlastnost v externím souboru i v tagu pomocí style, tak přednost má parametr style.

styly.css

DIV {font-size:20px;}

uvnitř HTML souboru

<div style=“font-size: 15px“></div>

Text v uvedeném odstavci by byl veliký 15px, nikoliv 20. Priorita jednotlivých vlastností se dá ovlivnit pomocí kouzelného slovíčka !important, uvedeného hned za vlastností.

styly.css

DIV {font-size:20px !important; }

uvnitř HTML souboru

<div style=“font-size:15px“></div>

V tomto případě už by text byl veliký 20px. Na !important je dobré dát si pozor. Pokud ho někde použijete a pak na to zapomenete, může vám to způsobit pěkné trápení. Proto je ho lepší využívat pouze jako krajní možnost.

V rámci HTML souboru

Někdy je zbytečné uchylovat se k externímu souboru. Od toho tady máme tag style, který se umístí do hlavičky HTML souboru.

<style type=“text/css“>
body {font-family: arial, verdana;color: red;}
</style>

Do tagu style můžete psát jednotlivé styly zcela úplně stejně jako do externího souboru.

Importujeme

Existuje ještě jedna možnost, jak vložit externí soubor. A to přímo z jiného externího souboru, tedy nikoliv z HTML (i když lze samozřejmě také).

styly.css

i@import url(„dalsi_styly.css“);