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ší