Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
Kaskádové styly tvorba webových stránek
Jan Felger
2
Kaskádové styly (CSS) 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
3
Obecná syntaxe CSS Objekt {vlastnost: nastavení}
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
4
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ů.
5
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
6
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
7
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
8
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
9
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ý!
10
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>
11
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>
12
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
13
Vyzkoušejte si 3 – pokračování
Obsah dokumentu styl.css: h1 {background-color: black; color: yellow} h2 {color: green; border: thick solid green} 13
14
Top Style 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
15
Vzhled programu Top Style
15
16
Popis programu Top Style
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
17
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)
18
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é
19
Které atributy tagů v CSS budete znát?
20
Background (pozadí objektu)
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
21
Border (rámeček) Width: tloušťka rámečku Style: typ rámečku
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
22
Color (barva) Color: barva popředí.
Color: barva popředí. Nastavení barvy objektů, obvykle písma. 22
23
Font (písmo) Font-family: rodina písma. Font-size: velikost písma
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
24
List (seznamy) List-style-image: List-style-position: pozice odrážky
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
25
Text Text-align: zarovnání textu
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
26
Další atributy textu Letter-spacing: mezery mezi znaky
Letter-spacing: mezery mezi znaky Line-height: mezery mezi řádky Word-spacing: mezery mezi slovy 26
27
Okraje objektu Margin: vnější okraj objektu
Margin: vnější okraj objektu Padding: vnitřní okraj objektu 27
28
Další atributy objektů
Width: šířka objektu Height: výška objektu Vertical-align: vertikální (svislé) zarovnání objektu, např. obsahu buňky tabulky 28
29
Třídy CSS 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
30
Cvičení Cvičení 1, 2 a 4 je nutno řešit pomocí tříd CSS
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
31
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
32
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
33
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
34
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
35
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
36
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
37
Příprava na test 1 Vytvořte webovou stránku s následujícími objekty:
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
38
Příprava na test 2 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
39
Příprava na test 3 Podnadpis H2:
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
40
Příprava na test 4 První odstavec textu: Druhý odstavec textu:
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
41
Příprava na test 5 Odrážky seznamu nastavte takto: Tvar: čtverec
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
42
Příprava na test 6 Tabulku nastavte takto: Tabulka: Hlavička:
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
43
Příprava na test 7 Odkazy nastavte takto: Žádný odkaz nebude podtržený
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
Podobné prezentace
