Embed Size (px)
DESCRIPTION
Kaskádové styly (Cascading Style Sheets, CSS) slouží k formátování HTML prvků. Pomocí kaskádových stylů lze nastavit font, řez písma, velikost písma, zarovnání, ohraničení, odrážky seznamu a mnoho dalšího. Styly lze definovat pro: 1) jeden konkrétní HTML prvek, například pro jeden odstavec, - PowerPoint PPT Presentation
Citation preview
Kaskádové styly (Cascading Style Sheets, CSS) slouží k formátování HTML prvků. Pomocí kaskádových stylů lze nastavit font, řez písma, velikost písma, zarovnání, ohraničení, odrážky seznamu a mnoho dalšího. Styly lze definovat pro:
1) jeden konkrétní HTML prvek, například pro jeden odstavec, 2) celý HTML dokument, 3) celou řadu HTML dokumentů, které mají mít jednotný vzhled.
Každému způsobu budeme věnovat samostatnou kapitolu.
Styl pro jeden prvek (Inline Style, vložený styl) umožňuje formátovat pouze jediný konkrétní HTML prvek - odstavec, tabulku a podobně. K definování takového stylu slouží atribut style. Následující HTML kód například bude obsahovat nadpis nejvyšší úrovně, jehož barva bude červená:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styl pro jeden prvek</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body> <h1 style="color:red">Nadpis se stylem</h1> </body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styl pro jeden prvek</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body> <h1 style="color:red">Nadpis se stylem</h1> </body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styl pro jeden prvek</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body> <h1 style="color:red; text-align:center">Nadpis se stylem</h1> </body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styl pro jeden prvek</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body> <h1 style="color:red; text-align:center; text-decoration:underline">Nadpis se stylem</h1> </body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styl pro jeden prvek</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body> <h1 style="color:red; text-align:center; text-decoration:underline">Nadpis se stylem</h1> </body></html>
Už asi tušíte, jak vypadá hodnota atributu style. Vždy je uveden název stylu, dvojtečka, hodnota stylu, středník, název dalšího stylu, dvojtečka, hodnota tohoto stylu, středník atd.
Formátovací řetězec tedy vypadá takto: název stylu 1:hodnota stylu 1; název stylu 2:hodnota stylu 2; ...; název stylu N:hodnota stylu N
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styl pro jeden prvek</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body> <h1 style="color:red; text-align:center; text-decoration:underline">Nadpis se stylem</h1> <p style="font-family: Verdana, sans-serif; font-style:italic"> Odstavec se stylem. </p> </body></html>
Přidejme odstavec a zformátujme ho kurzívou a fontem Verdana, přičemž pokud nebude na klientském počítači tento font k dispozici, použije se libovolné bezpatkové písmo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styl pro jeden prvek</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body> <h1 style="color:red; text-align:center; text-decoration:underline">Nadpis se stylem</h1> <p style="font-family: Verdana, sans-serif; font-style:italic"> Odstavec se stylem. </p> <p> Další odstavec. </p> </body></html>
Vložený styl pro jeden prvek neovlivní formátování ostatních prvků na stránce. Přidejme další odstavec:
Odtud vyplývá, že vložený styl není vhodné používat, pokud bychom požadovali mít všechny odstavce stejným formátem. Jednak bychom se upsali, co je však daleko horší, představte si změnu formátu takových odstavců. Bylo by potřeba změnit styl vložený v každém odstavci. Lepší by bylo mít definice stylů samostatně a pouze se na ně odkazovat. Výhodné je však použit vložený styl, pokud je potřeba daný prvek jen nepatrně pozměnit. V tom případě je vložený styl velmi rychlé řešení. Je to stejné jako v textových procesorech. Pokud budete mít v dokumentu stále se opakující důležitá slova nějak zvýrazněna (například jiným fontem, či řezem), asi si vytvoříte styl znaku a ten přiřadíte jednotlivým slovům. Nebudete u každého slova označovat, vybírat font, řez a podobně.
Styly pro celý dokument se definují v hlavičce do následujícího bloku:
V tomto bloku je vždy uveden selektor, který udává (vybírá), pro které prvky je daný styl definován, za tímto selektorem pak následuje formátovací řetězec ve složených závorkách. Dejme tomu, že v našem dokumentu chceme všechny nadpisy nejvyšší úrovně vycentrované, bílým písmem, Verdanou, s tmavě modrým pozadím a velikostí 14 bodů. To lze definovat takto:
Styly pro celý dokument se definují v hlavičce do následujícího bloku:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styly pro celý dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <style type="text/css"> h1 { text-align: center; color: white; background-color: darkblue; font-family: Verdana, sans-serif; font-size: 14pt; } </style> </head> <body> <h1>Nadpis</h1> <p> ... </p> <h1>Zase nadpis</h1> <p> ... </p> </body></html>
Styly pro celý dokument se definují v hlavičce do následujícího bloku:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styly pro celý dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <style type="text/css"> h1 { text-align: center; color: white; background-color: darkblue; font-family: Verdana, sans-serif; font-size: 14pt; } </style> </head> <body> <h1>Nadpis</h1> <p> ... </p> <h1>Zase nadpis</h1> <p> ... </p> </body></html>
Nyní budeme definovat styl pro odstavce. Uděláme je kurzivním písmem v cihlové červené:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Styly pro celý dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <style type="text/css"> h1 { text-align: center; color: white; background-color: darkblue; font-family: Verdana, sans-serif; font-size: 14pt; } p { font-style: italic; color: firebrick; } </style> </head> <body> <h1>Nadpis</h1> <p> Odstavec. </p> <h1>Zase nadpis</h1> <p> Zase odstavec. </p> </body></html>
Uvažujme případ, kdy v dokumentu budou dva druhy odstavců. Jeden druh budou normální odstavce, druhým budou odstavce typu poznámka. Ty budou menším kurzivním písmem a budou odsazeny od okrajů. V tom případě lze druhé odstavce umístit do společné třídy a této třídě přiřadit vlastní styl:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Třída jako selektor</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <style type="text/css"> p { color: navy; } p.poznamka { font-style: italic; font-size: smaller; margin-left: 3em; margin-right: 3em; margin-top: 1em; margin-bottom: 1em; border-top: solid 1px navy; border-bottom: solid 1px navy; padding: 1em; background-color: lightgrey; } </style> </head> <body> <p> Odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec. </p> <p class="poznamka"> Poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka poznámka </p> </body></html>
V některých případech je pouze jeden prvek, pro něhož chceme definovat styl, avšak nechceme tento styl vkládat přímo do prvku. V tom případě je dobré ho identifikovat pomocí atributu id a použít odpovídající selektor. V následujícím příkladu je jedinečná tabulka, kterou zformátujeme pomocí kaskádových stylů:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Identifikátor jako selektor</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <style type="text/css"> #tabulkaPoctuJablek { background-color: beige; color: crimson; border: ridge orange 2px; text-align: center; } #tabulkaPoctuJablek th { background-color: royalblue; color: white; } </style> </head> <body> <table id="tabulkaPoctuJablek" cellspacing="0" cellpadding="5"> <tr> <th>Den</th> <th>Počet snězených jablek</th> </tr> <tr> <td>Pondělí</td> <td>5</td> </tr> <tr> <td>Úterý</td> <td>7</td> </tr> <tr> <td>Středa</td> <td>4</td> </tr> <tr> <td>Čtvrtek</td> <td>3</td> </tr> <tr> <td>Pátek</td> <td>8</td> </tr> </table> </body></html>
Dejme tomu, že všechny nadpisy libovolné úrovně chceme mít fontem Verdana (případně nějakým jiným bezpatkovým fontem), tučně, hnědě a centrovaně. Není potřeba psát pro každou úroveň samostanou definici. Definice lze sdružit pomocí operátoru čárka:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Sdružování selektorů</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <style type="text/css"> h1, h2, h3, h4, h5, h6 { font-family: Verdana, sans-serif; color: brown; text-align: center; font-weight: bold; } </style> </head> <body> <h1>Nadpis 1. úrovně</h1> <h2>Nadpis 2. úrovně</h2> <h3>Nadpis 3. úrovně</h3> <h4>Nadpis 4. úrovně</h4> <h5>Nadpis 5. úrovně</h5> <h6>Nadpis 6. úrovně</h6> </body></html>
Pokud však přece požadujeme nějak odlišit jednotlivé prvky, jejichž společnou definici jsme sdružili, lze dodatečné styly definovat v samostatných definicích pro jednotlivé prvky:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Sdružování selektorů s upřesněním</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <style type="text/css"> h1, h2, h3, h4, h5, h6 { font-family: Verdana, sans-serif; color: brown; text-align: center; font-weight: bold; } h1 { font-size: 18pt; } h2 { font-size: 16pt; } h3 { font-size: 14pt; } h4 { font-size: 12pt; } h5 { font-size: 11pt; } h6 { font-size: 10pt; } </style> </head> <body> <h1>Nadpis 1. úrovně</h1> <h2>Nadpis 2. úrovně</h2> <h3>Nadpis 3. úrovně</h3> <h4>Nadpis 4. úrovně</h4> <h5>Nadpis 5. úrovně</h5> <h6>Nadpis 6. úrovně</h6> </body></html>
Nyní nastává okamžik, ve kterém přiřadíme jednu definici stylů, kterou jsme v předcházející kapitole definovali pouze pro jeden dokument, celé řadě dokumentů - každé stránce tvořící náš web. Díky tomu budou veškeré stránky vypadat jednotně, návštěvník bude mít neustále napaměti, že setrvává na našem webu.
Veškeré styly umístíme do jednoho textového souboru s příponou .css. Obsah souboru může vypadat například takto:
styly.cssbody{ background-color: Navy; color: White; font-family: Verdana, Sans-Serif;}
h1, h2, h3, h4, h5, h6{ text-decoration: underline; }
p{ font-style: italic; }
Nyní v každém dokumentu, do kterého chceme tyto styly vložit, umístíme v hlavičce následující: !
Adresa v atributu href se formuluje podle pravidel relativní URL. V tomto případě je soubor se styly ve stejné složce jako dokument, do kterého se styly vkládají.
Jeden z dokumentů využívající styly může vypadat takto:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Stylový dokument 1</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <link href="Styly.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Nadpis</h1> <p> Odstavec. </p> </body></html>
Jeden z dokumentů využívající styly může vypadat takto:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Stylový dokument 2</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <link href="Styly.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Nadpis</h1> <p> Odstavec. </p> <h2>Podnadpis</h2> <p> Odstavec. </p> </body></html>
Definice stylů v souboru .css jsou samozřejmě mnohem bohatší. Tvoří celou řadu stránek pro pozadí, nadpisy, odstavce, záložky, menu, tabulky a podobně.
http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html
