Definice stylů mimo dokument
Styly použité na WWW stránce můžete definovat i mimo dokument. Vytvoříte externí soubor, do kterého uložíte definice všech používaných stylů. Tento soubor spojíte s hlavním dokumentem pomocí tagu < LINK>.
Tento způsob využijete při:
Změně a úpravách písma na stránce.
Otevřením externího souboru s definovanými styly můřete snadno a rychle měnit podobu písma na WWW stránce.
Tvorbě jednotného vzhledu webové prezentace.
Externí soubor se styly může využívat více WWW stránek současně. Tím získáte jednotný vzhed prezentace. Můžete tak provádět změny písma ve všech stránkách současně, aniž byste museli přepisovat styly v každé stránkce.
Definice stylů v externím souboru:
Vytvoříme externí soubor s názvem styly.css. Název můžete zvolit podle svého. V něm uvedeme definice jednotlivých stylů. Před každou definicí jména nového stylu můžeme uvést jméno tagu, ve kterém budeme písmo používat pomocí atributu CLASS:
V externí souboru uvedeme:
Text za // je vysvětlující komentář - ten do souboru NEPIŠTE!
P|DIV|SPAN // jeden tag, ve kterém bude použitelný definovaný styl
.jméno_stylu // jméno nového stylu
{ // začátek definice nového stylu
... // zde následují definice vlastností
} // konec definice nového stylu
... // zde následují definice dalších stylů

POZOR!
Určení tagu P|DIV|SPAN, pro který je styl určen, je možné VYNECHAT! Pak je definovaný styl použitelný ve všech těchto značkách.
Nezapomínejte na TEČKU před jménem stylu v definici nového stylu!
Nezapomínejte na STŘEDNÍK za každou definovanou vlastností stylu!
Při definování stylu můžete vynechat ty vlastnosti, které nepotřebujete!
V hlavičce dokumentu:
Spojíme soubor s definicemi stylů s hlavním dokumentem pomocí tagu < LINK> takto:
< LINK REL="StyleSheet" HREF=" jméno_externího_souboru ">
V těle dokumentu:
Použijeme definované styly v těch značkách, pro které byly definovány v externím souboru:
< P CLASS="jméno_P_stylu">
< DIV CLASS="jméno_DIV_stylu">
< SPAN CLASS="jméno_SPAN_stylu">
Příklad:
Tato stránka využívá sedm univerzálních stylů písma definovaných v externím souboru:
.textobyc { margin: 5pt; margin-bottom:10pt; font-family: Verdana, Arial, Helvetica; font-size: 12pt; line-height: 14pt; color: darkblue; }
.malynadpis { margin-top:5pt; font-family: Verdana, Arial, Helvetica; font-size:18pt; line-height:20pt; font-weight:bold; color: mediumblue; }
.velkynadpis { margin-top:5pt; margin-left:30pt; font-family: Verdana, Arial, Helvetica; font-weight: bold; font-size: 24pt ; color: indigo; }
.priklady { margin:10pt; font-family: Courier, Arial; font-weight:bold; font-size: 11pt ; line-height: 13pt; color:Black; }
.komentar { font-family: Courier, Arial; font-weight:normal; font-size: 11pt ; line-height: 13pt; color:Black; }
.textkurziva { font-family: Verdana, Arial, Helvetica; font-style: italic; font-size: 10pt ; line-height: 12pt; color: Blue; }
.cervenozluty { font-family: Verdana, Arial, Helvetica; font-size: 14pt ; line-height:14pt; font-weight:bold; BACKGROUND-COLOR:yellow; color: red; }
V těle stránky použijeme styly:
< div class=malynadpis>V externí souboru uvedeme:< /div>
< div class=textkurziva>Text za // je vysvětlující komentář - ten do souboru NEPIŠTE!< /div>
< div class=textobyc> P|DIV|SPAN < span class=komentar>// jeden tag, ve kterém bude použitelný definovaný styl< /span>
.< span class=textkurziva>jméno_stylu < /span> < span class=komentar>// jméno nového stylu< /span>
{ < span class=komentar>// začátek definice nového stylu< /span>
Začátek
Další
Předchozí