V tomto díle seriálu o CSS si uvedeme k čemu slouží třídy a identifikátory a také co znamenají, co dělají a jak se definují elementy kódu HTML (XHTML) div a span.

Co to jsou třídy a identifikátory a proč jsou

Třídy a identifikátory existují proto, aby daný webdesigner si mohl nadefinovat vlastní styly a nemusel využívat jen dané elementy jazyka HTML (XHTML), jako jsou odstavce (element "p"), nadpisy (elementy "Hx"), seznamy (elementy "ul", "ol"), atd. ... Nadefinováním vlastních stylů se rozšiřuje možnost tvorby www a také jejich efektivnost. Vlastní styly se rozdělují mezi třídy a identifikátory. Rozdíl mezi nimi není skoro žádný, ale je.

Třídy

Teoretické vysvětlení, co je to třída, by vám asi nic nepřineslo a proto se to pokusím vysvětlit na příkladě.

Vlastní třída se definuje v CSS takto:
.text { text-align: center; font-family: Verdana;}

Důležité u této definice je tečka před názvem, která označuje, že se jedná o třídu. Poté následuje libovolný název. V názvu se vyvarujte mezer (lepší použít u dvojslovního označení podtržítko) a také českých znaků, lépe řečeno české interpunkce.

Poté stačí tento název přiřadit k danému elementu, který bude naformátovaný podle vlastností CSS, které jsou u třídy uvedeny. Přiřazení provedete takto:
<p class="text">tento text bude psán fontem Verdana a bude zarovnaný na střed</a>

Jak jste si již všimli, tak jsem použil atribut "class". Tento atribut slouží pro uvedení názvu třídy, podle které má být element formátován. Stejně tak jako u elementu "p", tuto definici můžete použít u elementu nadpisu, seznamu, řádku tabulky, a také u elementů div a span. Tyto dva elementy si podrobně vysvětlíme za okamžik. A jak už z toho vyplývá, můžete použít třídu na jedné stránce vícekrát, což je ten rozdíl mezi třídou a identifikátorem, který můžete použít na jedné straně pouze jednou. Takže když si někdo bude definovat vše jako třídu, tak se o nic nemusí starat, ale na druhou stranu, kdo si to definuje odděleně, se v tom poté lépe vyzná, takže záleží jen na vás jak se rozhodnete.

Identifikátor

Už tu byl zmíněn pojem identifikátor. Identifikátor nám slouží ke stejné funkci jako třída, dá se použít stejně tam, kde se používá třída, ale můžeme ho použít na jedné stránce pouze jednou. A takto se definuje:
#text { text-align: center; font-family: Verdana;}

Opět zde je důležitá mřížka, která nám vymezuje identifikátor a k danému elementu ho přiřadíme takto:
<p id="text">tento text bude psán fontem Verdana a bude zarovnaný na střed</a>

Přiřazení identifikátoru provedeme atributem "id", a takto pojmenovaný identifikátor na jedné straně nebudeme moci dále využít.

Elementy div a span

Jazyk HTML neměl žádné univerzální elementy a tak byly vymezeny elementy "div" a "span". Bez těchto dvou elementů se v dnešní době, pokud chcete tvořit rozvržení stránky pomocí CSS pozicování (CSS layoutu), neobejdete. Postupně budu v tomto seriálu ukazovat příklady jednotlivých CSS vlastností s využitím i těchto dvou elementů, pomocí kterých se dělá rozvržení stránky (k rozvržení se používá element "div").

Tyto dva elementy jsou univerzální, můžeme obsah uvnitř nich formátovat dá se říci jakoukoli vlastností CSS. Je mezi nimi jeden, ale velký rozdíl. Ten bude zdůrazněn u vysvětlení těchto elementů.

Element DIV

Tento, asi více využívaný element, nám ohraničí nějakou část stránky, která bude mít společné vlastnosti (ta část ohraničená elementem div) nadefinované v CSS pod nějakou třídou či identifikátorem. Lépe řečeno pokud budu mít více odstavců (element "p") a budu jim chtít dát společné vlastnosti, nemůžu je uzavřít do jednoho odstavce. A tak proč bych to nemohl udělat univerzálním elementem div. Element div je párový, takže má svůj začátek i konec a můžeme do něj vkládat další "div"y, ale musíme si dát pozor na dědičnost od nadřazeného divu (na toto téma bude příští díl). Lepší je si to uvést na příkladě.

Máme text v pěti odstavcích (element "p"), chceme si u odstavců nastavit odsazení od vrchu a u všech odstavců chceme mít použité písmo Verdana barvy červené a velikosti 12px.
Kód na stránce bude vypadat takto:
<div class="odstavce"> <p>text prvního odstavce</p> <p>text druhého odstavce</p> <p>text třetího odstavce</p> <p>text čtvrtého odstavce</p> <p>text pátého odstavce</p> </div>

A toto bude nadefinováno v CSS
.odstavce { font-family: Verdana; font-size: 12px; color: red;} p { margin-top: 5px;}

Že možná nerozumíte daným výrazům? Nezoufejte, formátování písma a všeho možného bude uvedeno postupně v tomto seriálu.
Daný příklad pak vypadá ve výsledku takto PŘÍKLAD1-CSS

Všechny elementy "p" mají uvedené vlastnosti třídy "odstavce" a jsou mezi sebou odsazeny shora o 5px.
Jak možná z tohoto vyplývá, tak element "div" je element blokový, oproti tomu element "span", který má podobné funkce jako element "div", je element řádkový (chcete-li "inline"), neboli dovede oproti elementu "div" naformátovat pomocí CSS určitou část textu na daném řádku.

Element SPAN

ELement "span", jak již už jsem uvedl, není element blokový tudíž můžeme podle něj formátovat např. jen určitou část textu. Asi rozumnější bude vám to uvést na příkladě.

Mějme element nadpisu např. "h2" a chceme, aby měl vrchní odsazení nastaveno na 3px, dolní odsazení na 3px, červené písmo Verdana 16px a první písmeno velikosti 20px tučné.
Toto budeme mít v těle HTML dokumentu
<h2><span class="prvni">W</span>ebdesign</h2> a toto budeme mít nadefinováno v CSS
h2 { margin-top: 3px; margin-bottom: 3px; font-family: Verdana; font-size: 16px; color: red;} .prvni { font-size: 20px; font-weight: bold;}
A takto to bude vypadat v prohlížeči PŘÍKLAD2-CSS

Tak doufám, že jste z tohoto pochopili podstatu elementů "div" a "span" a také rozdíl mezi třídou a identifikátorem. Pomocí elementů "div" se dá nahradit tabulkový layout (rozvržení) stránky. Tento seriál se tím bude zabývat a v příštích dílech si o tom povíme něco víc.

Pro dnešek je to vše a příště se těšte na vysvětlení priority zápisu CSS a dědičnosti.

Autor: in-spyder

Facebook Twitter Topčlánky.cz Linkuj.cz

Sdílet