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φ