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í