Kaskádové štýly
Z Wikipédie
Kaskádové štýly alebo CSS (skratka z angl. Cascading Style Sheets) je všeobecné rozšírenie HTML o možnosti opisu vzhľadu textu základnymi parametrami bežného DTP. Štýly umožnili oddeliť štruktúru HTML alebo XHTML od vzhľadu.
Obsah |
[úprava] Čo je CSS ?
CSS je skratka anglického výrazu Cascading Style Sheets, teda Kaskádové štýly. Konzorcium W3 (www.w3c.org) označuje CSS ako jednoduchý mechanizmus na vizuálne formátovanie internetových dokumentov.
Prvá verzia CSS (CSS level 1) vznikla už v roku 1996 a umožňovala prácu s písmami, okrajmi, farbami a pod. V roku 1998 bola doplnená a vznikla špecifikácia CSS level 2. V súčasnosti je špecifikácia CSS level 2 široko podporovaná a jej podporu nájdeme v novších verziách takmer všetkým prehliadačov (Internet Explorer, Opera, Mozilla, Netscape, Safari ... ). Konzorcium W3 práve pracuje na špecifikácií CSS level 3.
[úprava] Výhody CSS
Pomocou Kaskádových štýlov je možné vytvárať štruktúrované dokumenty, teda oddeliť obsah dokumentu (HTML) od jeho vzhľadu (CSS). Získame tým najmä prehľadný a pomerne jednoduchý kód a použitím CSS v externých súboroch zmenšíme aj dátovú veľkosť jednotlivých dokumentov, uľahčíme si prácu pri prípadnej zmene vzhľadu www stránky, zmenením jediného súboru úplne zmeníme jej vzhľad. Ak Kaskádové štýly využijeme na formátovanie stránky namiesto zastaralého a nevhodného spôsobu využívajúceho tabuľky, vyhneme sa tak tzv. ladeniu www stránky v rôznych prehliadačoch, pretože ak je www stránka napísaná presne podľa špecifikácie a s využitím CSS, je zaručené, že vo všetkých prehliadačoch a na všetkých platformách bude vyzerať rovnako.
[úprava] Úvod do použitia CSS
Prejdime teraz od teórie k praxi. Začneme jednoduchým dokumentom podľa špecifikácie HTML 4.01 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Skúšobná www stránka</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
</HEAD>
<BODY>
<H1>Skúšobná www stránka</H1>
<P>Na tejto www stránke si vysvetlíme základy práce s CSS.</P>
</BODY>
</HTML><
Farbu nadpisu tohto dokumentu teraz zmeníme na červenú použitím nasledujúceho pravidla pre nadpis prvej úrovne (element H1) :
H1 {
color: red;
}
Toto CSS pravidlo pozostáva z dvoch častí – selektora (H1) a deklarácie (color: red). Deklarácia má dve časti, a to vlastnosť (color) a hodnotu (red). Uvedené pravidlo môžeme dokumentu vložiť dvoma spôsobmi. Prvá možnosť je vložiť ho priamo do hlavičky dokumentu použitím elemmentu STYLE :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Skúšobná www stránka</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
<STYLE type="text/css">
H1 {
color: red;
}
</STYLE>
</HEAD>
<BODY>
<H1>Skúšobná www stránka</H1>
<P>Na tejto www stránke si vysvetlíme základy práce s CSS.</P>
</BODY>
</HTML>
Druhou možnosť je použitie externého súboru (napr. style.css) a jeho vloženie do dokumentu pomocou elementu LINK :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Skúšobná www stránka</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>
<H1>Skúšobná www stránka</H1>
<P>Na tejto www stránke si vysvetlíme základy práce s CSS.</P>
</BODY>
</HTML>
Teraz pridáme ďalšie pravidlo :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Skúšobná www stránka</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
<STYLE type="text/css">
BODY {
color: blue;
}
H1 {
color: red;
}
</STYLE>
</HEAD>
<BODY>
<H1>Skúšobná www stránka</H1>
<P>Na tejto www stránke si vysvetlíme základy práce s CSS.</P>
</BODY>
</HTML>
Náš dokument teraz obsahuje dve pravidlá. Prvé určuje, že farba elementu BODY bude modrá, druhé, že farba elementu H1 bude červená. Keďže farba elementu P nie je určená, zdedí ju po predkovi, ktorým je element BODY, bude teda modrá. Aj element H1 je potomkom elementu BODY, ale druhé pravidlo preváži zdedenú hodnotu.
Pridajme do kódu prvého pravidla ešte niekoľko hodnôt :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Skúšobná www stránka</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
<STYLE type="text/css">
BODY {
font-family: "Verdana", sans-serif;
font-size: 12px;
margin: 20px;
}
H1 {
color: red;
}
</STYLE>
</HEAD>
<BODY>
<H1>Skúšobná www stránka</H1>
<P>Na tejto www stránke si vysvetlíme základy práce s CSS.</P>
</BODY>
</HTML>
Prvá deklarácia pri elemente BODY nastavuje druh písma na písmo Verdana. Ak toto písmo nie je dostupné, použije sa písmo sans-serif, ktoré patrí medzi päť základných písiem a obsahujú ho všetky prehliadače. Túto hodnotu zdedí element H1 aj element P.
Druhá deklarácie pri tomto elemente nastavuje veľkosť písma na 12 pixelov. Túto hodnotu zdedí iba element P.
Posledná deklarácia pri elemente BODY nastavuje okraje na 20 pixelov. Túto hodnotu nezdedí ani element H1, ani element P.
[úprava] Externé odkazy
Značkovacie jazyky