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

Prezentace na téma: "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í,"— Transkript prezentace:

1 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.

2 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á: Styl pro jeden prvek Nadpis se stylem

3 Styl pro jeden prvek Nadpis se stylem

4 Styl pro jeden prvek Nadpis se stylem

5 Styl pro jeden prvek Nadpis se stylem

6 Styl pro jeden prvek Nadpis se stylem 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

7 Styl pro jeden prvek Nadpis se stylem Odstavec se stylem. 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:

8 Styl pro jeden prvek Nadpis se stylem Odstavec se stylem. Další odstavec. Vložený styl pro jeden prvek neovlivní formátování ostatních prvků na stránce. Přidejme další odstavec:

9 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ě.

10 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:

11 Styly pro celý dokument se definují v hlavičce do následujícího bloku: Styly pro celý dokument h1 { text-align: center; color: white; background-color: darkblue; font-family: Verdana, sans-serif; font-size: 14pt; } Nadpis... Zase nadpis...

12 Styly pro celý dokument se definují v hlavičce do následujícího bloku: Styly pro celý dokument h1 { text-align: center; color: white; background-color: darkblue; font-family: Verdana, sans-serif; font-size: 14pt; } Nadpis... Zase nadpis...

13 Nyní budeme definovat styl pro odstavce. Uděláme je kurzivním písmem v cihlové červené: Styly pro celý dokument h1 { text-align: center; color: white; background-color: darkblue; font-family: Verdana, sans-serif; font-size: 14pt; } p { font-style: italic; color: firebrick; } Nadpis Odstavec. Zase nadpis Zase odstavec.

14 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: Třída jako selektor 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; } Odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec odstavec. 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

15 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ů: Identifikátor jako selektor #tabulkaPoctuJablek { background-color: beige; color: crimson; border: ridge orange 2px; text-align: center; } #tabulkaPoctuJablek th { background-color: royalblue; color: white; } Den Počet snězených jablek Pondělí 5 Úterý 7 Středa 4 Čtvrtek 3 Pátek 8

16 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: Sdružování selektorů h1, h2, h3, h4, h5, h6 { font-family: Verdana, sans-serif; color: brown; text-align: center; font-weight: bold; } Nadpis 1. úrovně Nadpis 2. úrovně Nadpis 3. úrovně Nadpis 4. úrovně Nadpis 5. úrovně Nadpis 6. úrovně

17 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: Sdružování selektorů s upřesněním 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; } Nadpis 1. úrovně Nadpis 2. úrovně Nadpis 3. úrovně Nadpis 4. úrovně Nadpis 5. úrovně Nadpis 6. úrovně

18 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.css body { 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í.

19 Jeden z dokumentů využívající styly může vypadat takto: Stylový dokument 1 Nadpis Odstavec.

20 Jeden z dokumentů využívající styly může vypadat takto: Stylový dokument 2 Nadpis Odstavec. Podnadpis Odstavec. 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ě.

21  http://www.jakpsatweb.cz/css/css- vlastnosti-hodnoty-prehled.html