Kaskádové styly tvorba webových stránek Jan Felger
Kaskádové styly (CSS) 10.4.2017 jazyk HTML nebyl původně navržen pro práci s grafikou a multimédii při vývoji jazyka se zjistilo, že by bylo výhodné oddělit obsah (zobrazovaný text) od formy (vzhledu stránky) výsledkem jsou právě Cascade Style Sheetings (kaskádové šablony stylů) 2
Obecná syntaxe CSS Objekt {vlastnost: nastavení} 10.4.2017 Objekt {vlastnost: nastavení} Zapíšeme-li například do našeho souboru řádku H1 {color: red} zajistíme tím, že všechny nadpisy 1.úrovně budou červené 3
CSS u tagu Vkládá se pomocí parametru style u tagu Aplikuje se pouze na tento jeden tag Má smysl používat pouze u vlastností, které nelze získat běžným HTML Příklad: <img src="obr.jpg" border="5" style="border-color: blue"> Nakreslí kolem obrázku červený rámeček o tloušťce 5 bodů.
CSS v dokumentu HTML 1 Vkládá se pomocí párového tagu <style> obvykle v hlavičce HTML Aplikuje se pouze na tento jeden dokument HTML Má smysl používat pro hromadnou změnu formátování nějakého tagu v této jedné webové stránce
CSS v dokumentu HTML 2 Příklad: <html> <head> <style>H1 {color: green}</style> </head> <body> <H1>První nadpis</H1> Normální text <H1>Druhý nadpis</H1> </body> </html> { levý Alt+123 } levý Alt+125
Jednotlivé vlastnosti stylu se oddělují středníkem CSS v dokumentu HTML 3 Samozřejmě je možné pomocí stylů nastavit více vlastností a u několika tagů najednou: <html> <head> <style> H1 {color: red; background-color: pink; border: thin solid black} H2 {color: blue; background-color: cyan} </style> </head> Atd. – zde uveden pouze začátek webové stránky Jednotlivé vlastnosti stylu se oddělují středníkem
CSS v externím dokumentu CSS je uložen v samostatném dokumentu Tento přístup umožňuje shodné formátování více dokumentů HTML pomocí jediného souboru se stylem Soubor se stylem musí mít příponu CSS Webová stránka si CSS "zavolá" pomocí řádky zapsané v hlavičce HTML
CSS v externím dokumentu Příklad: Externí soubor se stylem má název styl.css Má tento obsah: H1 {color: green} Webová stránka začíná takto: <html> <body> <head> <link rel = "stylesheet" type = "text/css" href = "styl.css"> </head> Atd. Tento název musí být stejný!
Vyzkoušejte si 1 <html> <body> Styl použitý u tagu <html> <body> <h1 style="background-color: gold">Tvorba webových stránek</h1> <h2 style ="color: red; border: thick solid red"> Kaskádové styly</h2> Pro oddělení obsahu webu od jeho vzhledu. </body> </html>
Styl použitý v dokumentu Vyzkoušejte si 2 Styl použitý v dokumentu <html> <head> <style> h1 {background-color: gold} h2 {color: red; border: thick solid red} </style> </head> <body> <h1>Tvorba webových stránek</h1> <h2> Kaskádové styly</h2> Pro oddělení obsahu webu od jeho vzhledu. </body> </html>
Styl v externím dokumentu Vyzkoušejte si 3 Styl v externím dokumentu Webová stránka: <html> <head> <link rel = "stylesheet" type = "text/css" href = "styl.css"> </head> <body> <h1>Hlavní nadpis</h1> <h2>Podnadpis</h2> </body> </html> Zde musí být soubor styl.css uložen ve stejné složce jako web
Vyzkoušejte si 3 – pokračování 10.4.2017 Obsah dokumentu styl.css: h1 {background-color: black; color: yellow} h2 {color: green; border: thick solid green} 13
Top Style 10.4.2017 Pro pohodlnější vkládání stylů do externích souborů použijeme program Top Style Požádej učitele o instalační kompakt Odhlas se a přihlas se jako spravce Požádej učitele o heslo k účtu spravce Nainstaluj program Top Style Spusť program Top Style Vol Skip Welcome (přeskočit uvítání) vpravo nahoře 14
Vzhled programu Top Style 10.4.2017 15
Popis programu Top Style 10.4.2017 V největším okně píšeme, nebo se zobrazuje kód CSS V okně Selectors vpravo dole klikneme na fialovou ikonu s názvem New selector Vyberme tag HTML, např. nadpis H1 Poklepeme nebo šípkou přesuneme do oblasti Selctors V okně Style inspector se objeví možné hodnoty nastavení zvoleného tagu H1 16
Atribut Border Rozbalme např. větev Border (rámeček) Zobrazí se tři možnosti, které nastavíme takto (výběrem vpravo, nic nepíšeme): border-width: medium (šířka rámečku) border-style: solid (druh rámečku) color: lime (barva rámečku) Nastavené vlastnosti tagu H1 se zobrazí v dolním okně – zelený rámeček střední tloušťky Vyzkoušejte si sami různé varianty nastavení rámečku (jiné druhy, šířky, barvy)
Budete v CSS umět používat tyto tagy: A odkazy B tučné BODY tělo stránky DIV obecný tag H1-6 nadpisy HR čára I kurzíva LI pol. seznamu OL seznam čís. UL seznam odr. P odstavec SPAN obecný tag SUB dolní index SUP horní index TABLE tabulka TD buňka tab. TH záhlaví tab. TR řádek tab. U podtržené
Které atributy tagů v CSS budete znát?
Background (pozadí objektu) 10.4.2017 Attachment: připevnění pozadí fixed – pevné, scroll – rolovatelné Color: barva pozadí Image: obrázek na pozadí Position: umístění obrázku na pozadí Repeat: opakování obrázku na pozadí repeat-x: opakování ve smeru osy x repeat-y: opakování ve smeru osy y 20
Border (rámeček) Width: tloušťka rámečku Style: typ rámečku 10.4.2017 Width: tloušťka rámečku Style: typ rámečku Color: barva rámečku Aby rámeček fungoval je nutno nastavit všechny tři atributy! Rámeček je možno nastavit jen částečný, např. border-top je horní část rámečku 21
Color (barva) Color: barva popředí. 10.4.2017 Color: barva popředí. Nastavení barvy objektů, obvykle písma. 22
Font (písmo) Font-family: rodina písma. Font-size: velikost písma 10.4.2017 Font-family: rodina písma. Pokud není nalezeno požadované písmo, zobrazí se písmo podobné. Font-size: velikost písma Font-style: kurzíva Font-variant: kapitálky Font-weight: tučné písmo 23
List (seznamy) List-style-image: List-style-position: pozice odrážky 10.4.2017 List-style-image: Obrázek jako odrážka seznamu o brázek má přednost před normální odrážkou List-style-position: pozice odrážky Inside: odrážka uvnitř textu Outside : odrážka vně textu List-style-type: druh odrážky pokud není odrážkou obrázek 24
Text Text-align: zarovnání textu 10.4.2017 Text-align: zarovnání textu Text-decoration: podtržené, nadtržené písmo aj. efekty None – bez efektu Text-indent: odsazení prvního řádku odstavce textu Text-transform: změna textu např. na malá či velká písmena 25
Další atributy textu Letter-spacing: mezery mezi znaky 10.4.2017 Letter-spacing: mezery mezi znaky Line-height: mezery mezi řádky Word-spacing: mezery mezi slovy 26
Okraje objektu Margin: vnější okraj objektu 10.4.2017 Margin: vnější okraj objektu Padding: vnitřní okraj objektu 27
Další atributy objektů 10.4.2017 Width: šířka objektu Height: výška objektu Vertical-align: vertikální (svislé) zarovnání objektu, např. obsahu buňky tabulky 28
Třídy CSS 10.4.2017 Pro formátování více variant jednoho tagu (např. stejné nadpisy H1, které se liší barvami) Oddělovačem tříd u stylu (v programu Top Style) je tečka. Např.: H1 {color: blue; font-family: Arial; font-size: 20} běžný styl nadpisu modrý, písmo Arial o velikosti 20 bodů H1.cerveny {color: red} třída stylu H1, barva nadpisu červená (ostatní vlastnosti stylu se zachovají) Ve zdrojovém kódu webové stránky je třeba třídu vyznačit atributem class, např. takto: <H1 class="cerveny"> 29
Cvičení Cvičení 1, 2 a 4 je nutno řešit pomocí tříd CSS 10.4.2017 Cvičení 1, 2 a 4 je nutno řešit pomocí tříd CSS Protože pouhým nastavením stylu pro <p> nastavíme všechny odstavce stejně (což zde není úkolem) 30
Cvičení 1 Vytvořte webovou stránku se třemi několikařádkovými odstavci textu. Nastavte pomocí CSS zarovnání odstavců textu takto: První doprava Druhý na střed Třetí doleva Úkol řešte všemi třemi způsoby – CSS u tagu, v dokumentu a v externím souboru
Cvičení 2 Vytvořte webovou stránku se třemi několikařádkovými odstavci textu. Nastavte pomocí CSS vlastnosti odstavců textu takto: První malým bezpatkovým písmem (např. Tahoma, Arial), červené na žlutém pozadí Druhý patkovým písmem střední velikosti (např. Times New Roman), modré na šedém pozadí Třetí libovolným obrázkovým písmem, velké písmo, bílé na tmavozeleném pozadí Úkol řešte všemi třemi způsoby – CSS u tagu, v dokumentu a v externím souboru
Cvičení 3 Vytvořte webovou stránku s nadpisem H1 Nastavte pomocí CSS nadpis H1 takto: modrý text žluté pozadí za textem rámeček kolem textu čárkovaný, pouze vpravo a dole Úkol řešte všemi třemi způsoby – CSS u tagu, v dokumentu a v externím souboru
Cvičení 4 Vytvořte webovou stránku se třemi několikařádkovými odstavci textu. První odstavec textu Odsaďte první řádek odstavce aspoň o 5 cm Druhý odstavec textu Nastavte mezery mezi řádky přibližně na dvojnásobek Třetí odstavec textu Nastavte velké mezery mezi slovy Úkol řešte všemi třemi způsoby – CSS u tagu, v dokumentu a v externím souboru
Cvičení 5 Vytvořte webovou stránku s odrážkovaným seznamem. Nastavte pomocí CSS vlastnosti seznamu takto: Jako odrážku nastavte obrázek, který sami nakreslíte Zajistěte, aby odrážka nebyla předsazena textu odstavce Nastavte dvojnásobné řádkování odstavců s odrážkami Úkol řešte všemi třemi způsoby – CSS u tagu, v dokumentu a v externím souboru
Cvičení 6 Vytvořte webovou stránku s tabulkou 3x4. Velikost tabulky nastavte 100% na šířku i na výšku stránky. Tabulku vyplňte libovolnými údaji (např. jméno, příjmení, věk) Nastavte pomocí CSS vlastnosti tabulky takto: Hlavičku tabulky bezpatkovým písmem na světle modrém pozadí Text ve všech buňkách tabulky vycentrujte vertikálně i horizontálně Orámujte buňky záhlaví tabulky dvojitou modrou čarou Úkol řešte všemi třemi způsoby – CSS u tagu, v dokumentu a v externím souboru
Příprava na test 1 Vytvořte webovou stránku s následujícími objekty: 10.4.2017 Vytvořte webovou stránku s následujícími objekty: 1x nadpis H1 3x podnadpis H2 3x odstavce několikařádkového textu 1x seznam s odrážkami 1x tabulku: hlavičkový řádek, pod ním 3 obyčejné řádky, 3 sloupce 4x odkaz 37
Příprava na test 2 10.4.2017 Vytvořte externí soubor s kaskádovým stylem, který použijete k formátování obsahu webu takto: Nadpis H1: tmavomodrý na světle modrém pozadí s tmavomodrým rámečkem Písmo Arial tučné o velikosti 20 bodů To znamená že všechny úkoly od tohoto snímku dále řešíte pouze pomocí CSS! 38
Příprava na test 3 Podnadpis H2: 10.4.2017 Podnadpis H2: červený na růžovém pozadí s červeným dvojitým rámečkem Písmo Courier tučné o velikosti 15 bodů První podnadpis H2 formátujte pomocí tříd takto: Stejné písmo, ale kurzíva Stejný rámeček, ale prostorový 39
Příprava na test 4 První odstavec textu: Druhý odstavec textu: 10.4.2017 První odstavec textu: Písmo Times New Roman o velikosti 10 bodů, barva bílá na černém pozadí Zarovnání vlevo První řádek odstavce odsadit o 5 cm Druhý odstavec textu: Písmo Times New Roman o velikosti 12 bodů, barva modrá na žlutém pozadí Zarovnání na střed Výrazně zvětšené mezery mezi slovy odstavce Třetí odstavec textu: Tahoma o velikosti 10 bodů, barva černá na bílém pozadí Zarovnání do bloku Výrazně zvětšené mezery mezi řádky odstavce U posledního slova odstavce zvětšete libovolný způsobem mezery mezi znaky 40
Příprava na test 5 Odrážky seznamu nastavte takto: Tvar: čtverec 10.4.2017 Odrážky seznamu nastavte takto: Tvar: čtverec Při víceřádkovém textu odrážky je odrážka před odstavcem odsazena Písmo za odrážkou Arial o velikosti 10 bodů tmavozelené 41
Příprava na test 6 Tabulku nastavte takto: Tabulka: Hlavička: 10.4.2017 Tabulku nastavte takto: Tabulka: Šířka i výška tabulky: 50 % Rámeček kolem tabulky: zelený prostorový široký Hlavička: Žluté písmo Arial o velikosti 14 bodů na bílém pozadí Ostatní buňky tabulky Modré písmo Arial o velikosti 10 bodů na světle modrém pozadí Třetí řádek tabulky Pomocí tříd upravte takto: barva pozadí šedá Poslední buňka tabulky: Pomocí tříd upravte takto: barva pozadí černá 42
Příprava na test 7 Odkazy nastavte takto: Žádný odkaz nebude podtržený 10.4.2017 Odkazy nastavte takto: Žádný odkaz nebude podtržený Odkaz: Černé písmo Arial o velikosti 10 bodů na žlutém pozadí Navštívený odkaz: Šedé písmo Arial o velikosti 10 bodů na žlutém pozadí Odkaz na kterém je právě kurzor myši: Žluté tučné písmo Arial o velikosti 12 bodů na černém pozadí 43