Definice styl∙
KaskßdovΘ styly (CSS) jsou spasiteli OnLine webovΘ typografie. Mßte-li n∞jakΘ zkuÜenosti s pou₧itφm JavaScriptu, nebude pro vßs problΘm rychle pochopit, jak specifikovat a pou₧φt CSS.
Tuto techniku vyu₧ijete k:
Nastavenφ styl∙ ve vÜech odstavcφch textu.
Kaskßdov²ch styl∙ m∙₧eme vyu₧φt k nastavenφ urΦitΘ barvy, tlouÜ¥ky a velikosti vÜech odstavc∙ pφsma bez jak²chkoli omezenφ znaΦkou < FONT>.
Dosa₧enφ bohatÜφho ovlßdßnφ specifikace velikostφ fontu.
P°ekroΦte HTML omezenφ specifikace velikosti a vyu₧ijte zp∙sob∙ b∞₧n²ch pro Word Processing, Desktop Publishing a software pracujφcφ s vektorovou grafikou.
Vytvß°enφ styl∙:
Podobn∞ jako JavaScript, CSS mohou b²t definovßny bu∩ v hlaviΦce strßnky anebo p°φmo v t∞le strßnky. V tomto p°φpad∞ nadefinujeme CSS uvnit° znaΦek < HEAD> < /HEAD> k urΦenφ styl∙ pφsma. V CSS styly odkazujφ na sekce pφsem, kterΘ majφ specifick² vzhled, velikost, barvu nebo jin² atribut, p°id∞len² poΦßteΦnφ definicφ uvnit° znaΦek < HEAD>< /HEAD>.
V hlaviΦce strßnky uvedeme:
Text za // je vysv∞tlujφcφ komentß° - ten do k≤du NEPIèTE!
< STYLE type="text/css"> // deklarace syl∙
body { background: jmΘno nebo k≤d barvy } // definice barvy pozadφ strßnky
.jmΘno_stylu // jmΘno novΘho stylu
{ // zaΦßtek definice novΘho stylu
font-family: 1._font , 2._font , ... ; // definice fontu a jeho alternativ
font-size: Φφslo pt|mm|cm|in|pc|em|ex|px; // definice velikosti pφsma v jednΘ z uveden²ch jednotek
font-style: italic; // definice kurzφvy
font-weight:normal|bold; // definice normßlnφho nebo tuΦnΘho pφsma
line-height: Φφslo pt|mm|cm|in|pc|em|ex|px; // definice v²Üky °ßdku v jednΘ z uveden²ch jednotek
margin: Φφslo pt|mm|cm|in|pc|em|ex|px; // definice odsazenφ odstavce (z ka₧dΘ strany stejnΘ) v jednΘ z uveden²ch jednotek
margin-top:Φφslo pt|mm|cm|in|pc|em|ex|px; // definice odsazenφ odstavce shora v jednΘ z uveden²ch jednotek
margin-bottom:Φφslo pt|mm|cm|in|pc|em|ex|px; // definice odsazenφ odstavce zdola v jednΘ z uveden²ch jednotek
margin-left:Φφslo pt|mm|cm|in|pc|em|ex|px; // definice odsazenφ odstavce zleva v jednΘ z uveden²ch jednotek
margin-right:Φφslo pt|mm|cm|in|pc|em|ex|px; // definice odsazenφ odstavce zprava v jednΘ z uveden²ch jednotek
text-align:left|right|center|justify; // definice zarovnßnφ textu odstavce vlevo, vpravo, na st°ed, rovnom∞rn∞ na cel² °ßdek
text-indent:Φφslo pt|mm|cm|in|pc|em|ex|px; // definice odsazenφ prvnφho °ßdku odstavce v jednΘ z uveden²ch jednotek
text-decoration:none; // definice nepodtr₧enΘho textu (pro nepodtr°enΘ odkazy)
letter-spacing:Φφslo pt|mm|cm|in|pc|em|ex|px; // definice mezery mezi pφsmeny v jednΘ z uveden²ch jednotek
color:jmΘno nebo k≤d barvy ; // definice barvy textu
background-color:jmΘno nebo k≤d barvy ; // definice barvy pozadφ textu
} // konec definice novΘho stylu
... // zde nßsledujφ definice dalÜφch styl∙
< /STYLE> // konec deklarace styl∙

POZOR!
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 t∞le strßnky:
Text rozd∞lφme na odstavce pomocφ znaΦky < DIV> text < /DIV>. Pro p°i°azenφ stylu odstavci pou₧ijeme atribut CLASS takto:
< DIV CLASS=jmΘno_stylu_(bez teΦky) >
Pokud chceme n∞jak² text v rßmci odstavce psßt jin²m typem pφsma, pou₧ijeme tag < SPAN> text < /SPAN> s atributem CLASS stejn∞ jako u odstavce.
P°φklad:
Na tΘto strßnce jsme vytvo°ili sedm styl∙:
velkynadpis
font Verdana, tuΦn², velikost 24 bod∙, barva Indigo, odsazenφ shora 5pt a zleva 30pt
malynadpis
font Verdana, tuΦn², velikost 18 bod∙, v²Üka °ßdku 20pt, barva Mediumblue, odsazenφ shora 5pt
textobyc
font Verdana, velikost 12 bod∙, v²Üka °ßdku 14pt, barva DarkBlue, odsazenφ obecn∞ 5pt, odsazenφ zdola 20pt
textkurziva
font Verdana, kurzφva, velikost 10 bod∙, v²Üka °ßdku 12pt, barva Blue
priklady
font Courier, tuΦn², velikost 11 bod∙, v²Üka °ßdku 13pt, barva Black, odsazenφ obecn∞ 10pt
komentar
font Courier, normßnlφ, velikost 11 bod∙, v²Üka °ßdku 13pt, barva Black
cervenozluty
font Verdana, tuΦn², velikost 14 bod∙, v²Üka °ßdku 14pt, barva textu Red, barva pozadφ Yellow, odsazenφ obecn∞ 5pt, odsazenφ zdola 20pt
V hlaviΦce strßnky definujeme styly:
< STYLE type="text/css"> // deklarace styl∙
body { background: #F9F9F9} // barva pozadφ strßnky
.textobyc // nßzev stylu
{
margin: 5pt; // odsazenφ odstavce ze vÜech stran
margin-bottom:10pt; // odsazenφ odstavce zdola
font-family: Verdana, Arial, Helvetica; // tyl pφsma s dalÜφmi alternativami
font-size: 12pt; // velikost pφsma
line-height: 14pt; // vedenφ pφsma (v²Üka °ßdku)
color: darkblue; // barva pφsma
}
.cervenozluty //nßzev stylu
{
font-family: Verdana, Arial, Helvetica;
font-size: 14pt ;
line-height:14pt;
font-weight:bold; // tuΦnΘ pφsmo
background-color:yellow; // barva pozadφ pφsma
color: red;
}
.malynadpis //nßzev stylu
{
margin-top:5pt; // odsazenφ odstavce shora
font-family: Verdana, Arial, Helvetica;
font-size:18pt;
line-height:20pt;
font-weight:bold;
color: mediumblue;
}
.textkurziva //nßzev stylu
{
font-family: Verdana, Arial, Helvetica;
font-style: italic; // kurzφva
font-size: 10pt ;
line-height: 12pt;
color: Blue;
}
.velkynadpis //nßzev stylu
{
margin-top:5pt;
margin-left:30pt; // odsazenφ odstavce zleva
font-family: Verdana, Arial, Helvetica;
font-weight: bold;
font-size: 24pt ;
color: indigo;
}
.priklady //nßzev stylu
{
margin:10pt;
font-family: Courier, Arial;
font-weight:bold;
font-size: 11pt ;
line-height: 13pt;
color:Black;
}
< /STYLE>
V t∞le strßnky pou₧ijeme styly:
< div class=velkynadpis>Vytvß°enφ styl∙:< /div>
< div class=textobyc>
Podobn∞ jako JavaScript, CSS mohou b²t definovßny bu∩ v hlaviΦce strßnky anebo p°φmo v t∞le strßnky. V tomto p°φpad∞ nadefinujeme CSS uvnit° znaΦek < HEAD> < /HEAD> k urΦenφ < span class = cervenozluty >styl∙< /span> pφsma. V CSS styly odkazujφ na sekce pφsem, kterΘ majφ specifick² vzhled, velikost, barvu nebo jin² atribut, p°id∞len² poΦßteΦnφ definicφ uvnit° znaΦek < HEAD>< /HEAD>. < /div>
< div class=malynadpis>V hlaviΦce strßnky uvedeme:< /div>
< div class=textkurziva>Text za // je vysv∞tlujφcφ komentß° - ten do k≤du NEPIèTE!< /div>
ZaΦßtek
DalÜφ