Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Kaskádové styly tvorba webových stránek Jan Felger.

Podobné prezentace


Prezentace na téma: "Kaskádové styly tvorba webových stránek Jan Felger."— Transkript prezentace:

1 Kaskádové styly tvorba webových stránek Jan Felger

2 Kapitola 0: Základní tagy Základy HTML © Jan Felger 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ů)

3 Kapitola 0: Základní tagy Základy HTML © Jan Felger Obecná syntaxe CSS 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é

4 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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: Nakreslí kolem obrázku červený rámeček o tloušťce 5 bodů.

5 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 CSS v dokumentu HTML 1 Vkládá se pomocí párového tagu 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 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 CSS v dokumentu HTML 2 Příklad: H1 {color: green} První nadpis Normální text Druhý nadpis Normální text {levý Alt+123 }levý Alt+125

7 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 CSS v dokumentu HTML 3 Samozřejmě je možné pomocí stylů nastavit více vlastností a u několika tagů najednou: H1 {color: red; background-color: pink; border: thin solid black} H2 {color: blue; background-color: cyan} Atd. – zde uveden pouze začátek webové stránky Jednotlivé vlastnosti stylu se oddělují středníkem

8 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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: Atd. Tento název musí být stejný!

10 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Vyzkoušejte si 1 Tvorba webových stránek Kaskádové styly Pro oddělení obsahu webu od jeho vzhledu. Styl použitý u tagu

11 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Vyzkoušejte si 2 h1 {background-color: gold} h2 {color: red; border: thick solid red} Tvorba webových stránek Kaskádové styly Pro oddělení obsahu webu od jeho vzhledu. Styl použitý v dokumentu

12 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Vyzkoušejte si 3 Webová stránka: Hlavní nadpis Podnadpis Styl v externím dokumentu Zde musí být soubor styl.css uložen ve stejné složce jako web

13 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Vyzkoušejte si 3 – pokračování Obsah dokumentu styl.css: h1 {background-color: black; color: yellow} h2 {color: green; border: thick solid green}

14 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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

15 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Vzhled programu Top Style

16 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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 H

17 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Budete v CSS umět používat tyto tagy: Aodkazy Btučné BODYtělo stránky DIVobecný tag H1-6nadpisy HRčára Ikurzíva LIpol. seznamu OLseznam čís. ULseznam odr. Podstavec SPANobecný tag SUBdolní index SUPhorní index TABLEtabulka TDbuňka tab. THzáhlaví tab. TRřádek tab. Upodtržené

19 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Které atributy tagů v CSS budete znát?

20 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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

21 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Border (rámeček) 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

22 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Color (barva) Color: barva popředí. Nastavení barvy objektů, obvykle písma

23 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Font (písmo) 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

24 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 List (seznamy) 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

25 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Text 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

26 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Další atributy textu Letter-spacing: mezery mezi znaky Line-height: mezery mezi řádky Word-spacing: mezery mezi slovy

27 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Okraje objektu Margin: vnější okraj objektu Padding: vnitřní okraj objektu

28 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Další atributy objektů Width: šířka objektu Height: výška objektu Vertical-align: vertikální (svislé) zarovnání objektu, např. obsahu buňky tabulky

29 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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:

30 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Cvičení Cvičení 1, 2 a 4 je nutno řešit pomocí tříd CSS Protože pouhým nastavením stylu pro nastavíme všechny odstavce stejně (což zde není úkolem)

31 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Příprava na test 1 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

38 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 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!

39 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Příprava na test 3 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ý

40 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Příprava na test 4 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

41 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Příprava na test 5 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é

42 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Příprava na test 6 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á

43 Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Příprava na test 7 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í


Stáhnout ppt "Kaskádové styly tvorba webových stránek Jan Felger."

Podobné prezentace


Reklamy Google