Internetov publikovn Doc Ing Petr Zmostn Ph D

  • Slides: 31
Download presentation
Internetové publikování Doc. Ing. Petr Zámostný, Ph. D. místnost: A-72 a tel. : 4222,

Internetové publikování Doc. Ing. Petr Zámostný, Ph. D. místnost: A-72 a tel. : 4222, 4167 (sekretariát ústavu 111) e-mail: petr. [email protected] cz

Internetové publikování kaskádové styly, CSS

Internetové publikování kaskádové styly, CSS

Graficky "dokonalé" stránky » Vznik graficky "dokonalých" stránek » požadavky firem "aby to bylo

Graficky "dokonalé" stránky » Vznik graficky "dokonalých" stránek » požadavky firem "aby to bylo jako na reklamním letáčku" » snaha začínajících tvůrců předvést "všechny elementy které znají" N 111031 Internetové publikování 1. Úvod do předmětu

Problémy » Spousta zbytečného kódu » Omezená podpora minoritních platforem, počítačů » Přemíra grafiky

Problémy » Spousta zbytečného kódu » Omezená podpora minoritních platforem, počítačů » Přemíra grafiky – dlouhá doba načítání » Závislost na rozlišení » Obtížná údržba dokumentů » Drobné změny v designu je třeba opravovat na mnoha místech najednou N 111031 Internetové publikování 1. Úvod do předmětu

Špatný příklad formátování » Proč je uvedený způsob špatný? » Pokyny pro formátování jsou

Špatný příklad formátování » Proč je uvedený způsob špatný? » Pokyny pro formátování jsou promíchány s informací » Kód je velmi špatně udržovatelný » TIP zkuste si změnit barvu zvýraznění na červenou N 111031 Internetové publikování http: //www. vscht. cz/kot/resources/studijni-materialy/ip-p-004/spatny-priklad. html 1. Úvod do předmětu

Lepší příklad formátování » Proč je uvedený způsob lepší než předchozí? » Pokyny pro

Lepší příklad formátování » Proč je uvedený způsob lepší než předchozí? » Pokyny pro formátování jsou oddělené od informace » Kód je dobře udržovatelný » Změnou stylu se změní formátování všech instancí http: //www. vscht. cz/kot/resources/studijni-materialy/ip-p-004/lepsi-priklad. html N 111031 Internetové publikování 1. Úvod do předmětu

Cascading Style Sheets » Formátování HTML dokumentu, které je více či méně oddělené od

Cascading Style Sheets » Formátování HTML dokumentu, které je více či méně oddělené od obsahu » Způsoby implementace » Specifikace stylu pro každý element zvlášť » Definice stylu v hlavičce dokumentu » Připojení stylu z externího souboru N 111031 Internetové publikování 1. Úvod do předmětu

Styl v hlavičce HTML » Definice stylu pro jediný HTML soubor » Vlastní definice

Styl v hlavičce HTML » Definice stylu pro jediný HTML soubor » Vlastní definice se uzavírá do komentářů, aby se zamezilo intrepretaci ve starších prohlížečích <head> <style type="text/css"> <!-. . . definice stylu. . . --> </style> </head> N 111031 Internetové publikování 1. Úvod do předmětu

Struktura pravidla v CSS selektor { vlastnost 1: hodnota; vlastnost 2: hodnota; . .

Struktura pravidla v CSS selektor { vlastnost 1: hodnota; vlastnost 2: hodnota; . . . vlastnost. N: hodnota } » Selektor » Nejjednodušší selektor je jméno objektu (např. elementu, kterého se definice týká) » Vlastnost » Jméno nastavitelné vlastnosti (> 90 v CSS 2. 1) » Hodnota na kterou se má daná vlastnost nastavit » Typ hodnoty je dán podle typu vlastnosti N 111031 Internetové publikování 1. Úvod do předmětu

Hodnoty vlastností v CSS » Délkové míry » URL » Řetězec » ‘řetězec’ »

Hodnoty vlastností v CSS » Délkové míry » URL » Řetězec » ‘řetězec’ » “řetězec” » Klíčové slovo » Barva N 111031 Internetové publikování 1. Úvod do předmětu

Jednotky délky v CSS » Relativní Jednotka Význam em Odpovídá velikosti písma v aktuálním

Jednotky délky v CSS » Relativní Jednotka Význam em Odpovídá velikosti písma v aktuálním elementu (pokud se používá pro nastavení velikosti písma, odpovídá velikosti písma mateřského elementu) ex Odpovídá výšce písmene x px pixel – jeden bod definovaný relativně vzhledem k rozlišení zařízení (bod na obrazovce) N 111031 Internetové publikování 1. Úvod do předmětu

Jednotky délky v CSS » Absolutní Jednotka Význam in Palec cm Centimetr mm Millimetr

Jednotky délky v CSS » Absolutní Jednotka Význam in Palec cm Centimetr mm Millimetr pt bod (1 pt = 1/72 inch) pc pica (1 pc = 12 point) » Tyto hodnoty má význam používat, pouze je-li známo fyzické rozlišení zařízení N 111031 Internetové publikování 1. Úvod do předmětu

Jednotky délky v CSS » Procenta Jednotka Význam % Určuje délku relativně vzhledem k

Jednotky délky v CSS » Procenta Jednotka Význam % Určuje délku relativně vzhledem k jiné délce Každá vlastnost která může přijmout hodnotu v procentech definuje tuto referenční délku N 111031 Internetové publikování 1. Úvod do předmětu

URL » url(text_url) » Text URL může být uzavřen do uvozovek, takže je správně

URL » url(text_url) » Text URL může být uzavřen do uvozovek, takže je správně obojí » background: url("http: //www. example. com/pinkish. png") » background: url(http: //www. example. com/pinkish. png) N 111031 Internetové publikování 1. Úvod do předmětu

Seskupování selektorů Selektory se stejnými deklaracemi je možné sloučit, takže následující zápis h 1

Seskupování selektorů Selektory se stejnými deklaracemi je možné sloučit, takže následující zápis h 1 { font-family: sans-serif } h 2 { font-family: sans-serif } h 3 { font-family: sans-serif } je ekvivalentní zápisu: h 1, h 2, h 3 { font-family: sans-serif } N 111031 Internetové publikování 1. Úvod do předmětu

Barvy v CSS Způspb zápisu Vysvětlivky color_name Jméno barvy (red, green, blue, magenta, .

Barvy v CSS Způspb zápisu Vysvětlivky color_name Jméno barvy (red, green, blue, magenta, . . . ) rgb(x, x, x) Složky palety RGB 0 -255 rgb(y%, y%) Procentuální složky palety RGB 0 -100% #rrggbb Hexadecimální číslo vyjadřující složky palety RGB 00 -ff Více o barvách N 111031 Internetové publikování 1. Úvod do předmětu

Vlastnosti písma Vlastnost Popis Hodnoty font-family seznam preferovaných rodin řezů písma family-name generic-family »

Vlastnosti písma Vlastnost Popis Hodnoty font-family seznam preferovaných rodin řezů písma family-name generic-family » family-name » » Čárkami oddělený seznam písem v sestupném pořadí priority Použije se první dostupné písmo Bezpečnější je vkládat názvy do uvozovek – jsou to řetězce Např. » font-family: "Franklin Gothic Book", "Arial"; » Je-li na klientském počítači dostupný font „Franklin Gothic Book“ použije se, jinak se použije Arial N 111031 Internetové publikování 1. Úvod do předmětu

Vlastnosti písma Vlastnost Popis Hodnoty font-family seznam preferovaných rodin řezů písma family-name generic-family »

Vlastnosti písma Vlastnost Popis Hodnoty font-family seznam preferovaných rodin řezů písma family-name generic-family » Generické rodiny písem – jsou vždy dostupné (i když nemusí vypadat vždy stejně » Možnosti » » » 'serif' (např. Times) 'sans-serif' (např. Helvetica) 'cursive' (např. Zapf-Chancery) 'fantasy' (např. Western) 'monospace' (např. Courier) » Výčet by měl vždy končit písmem z generické rodiny » font-family: "Franklin Gothic Book", "Arial", sans-serif; N 111031 Internetové publikování 1. Úvod do předmětu

Vlastnosti písma Vlastnost Popis Hodnoty font-style styl písma normal italic oblique font-varianta písma normal

Vlastnosti písma Vlastnost Popis Hodnoty font-style styl písma normal italic oblique font-varianta písma normal small-caps font-weight síla tahu písma normal bolder lighter 100 200. . . 900 N 111031 Internetové publikování 1. Úvod do předmětu

Vlastnosti písma Vlastnost Popis Hodnoty font-size velikost písma xx-small medium large x-large xx-large smaller

Vlastnosti písma Vlastnost Popis Hodnoty font-size velikost písma xx-small medium large x-large xx-large smaller larger délková jednotka % » Velikosti xx-small – xx-large jsou absolutní » Smaller / larger indikují o jednotku menší / větší písmo oproti rodičovskému elementu » Podobně se chovají % N 111031 Internetové publikování 1. Úvod do předmětu

Vlastnosti pozadí a barev Vlastnost Popis Hodnoty color Barva textu barva background-attachment nastavuje, zda

Vlastnosti pozadí a barev Vlastnost Popis Hodnoty color Barva textu barva background-attachment nastavuje, zda mají obrázky na pozadí rolovat se zbytkem stránky scroll fixed background-color barva pozadí elementu barva transparent background-image obrázek na pozadí url none background-position poloha obrázku na pozadí top left top center top right center left center right bottom left bottom center bottom right x-% y-% x-pos y-pos background-repeat N 111031 Internetové 1. Úvod do předmětu opakování obrázku na pozadí publikování repeat-x

Vlastnosti textu Vlastnost Popis Hodnoty letter-spacing Mezery mezi písmeny normal length text-align Zarovnání left

Vlastnosti textu Vlastnost Popis Hodnoty letter-spacing Mezery mezi písmeny normal length text-align Zarovnání left right center justify text-decoration Ozdoba písma none underline overline-through blink text-indent Odsazení 1. řádky length % text-transform Transformace velikosti písma none capitalize uppercase lowercase white-space Interpretace mezer a ostatních "bílých" znaků normal pre nowrap N 111031 Internetové publikování word-spacing 1. Úvod do předmětu Velikost mezer mezi slovy normal

Formátovací model margin (vnější okraj) border (rámeček) padding (vnitřní okraj) Obsah elementu N 111031

Formátovací model margin (vnější okraj) border (rámeček) padding (vnitřní okraj) Obsah elementu N 111031 Internetové publikování 1. Úvod do předmětu

Vlastnosti okrajů Vlastnost Popis Hodnoty margin Zkratka pro nastavení všech okrajů margin-top margin-right margin-bottom

Vlastnosti okrajů Vlastnost Popis Hodnoty margin Zkratka pro nastavení všech okrajů margin-top margin-right margin-bottom margin-left margin-bottom Spodní okraj auto length % margin-left Levý okraj auto length % margin-right Pravý okraj auto length % margin-top Horní okraj auto length % » Podobně pro vnitřní okraje se margin nahradí padding » Např. padding-left N 111031 Internetové publikování 1. Úvod do předmětu

Vlastnosti ohraničení Vlastnost Popis Hodnoty border-color Barva ohraničení color border-style Styl ohraničení none hidden

Vlastnosti ohraničení Vlastnost Popis Hodnoty border-color Barva ohraničení color border-style Styl ohraničení none hidden dotted dashed solid double groove ridge inset outset border-width Tloušťka ohraničení thin medium thick length » Možno též nastavovat vlastnosti každého ze 4 ohraničení zvlášť » Názvy vlastností mají vložené –top-, -bottom-, -left-, -right» Např. border-left-width N 111031 Internetové publikování 1. Úvod do předmětu

Vlastnosti seznamů Vlastnost Popis Hodnoty list-style-image nastaví zvolený obrázek jako odrážku seznamu none url

Vlastnosti seznamů Vlastnost Popis Hodnoty list-style-image nastaví zvolený obrázek jako odrážku seznamu none url list-style-position poloha odrážky inside outside list-style-type typ odrážky-číslování none disc circle square decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana N 111031 Internetové publikování 1. Úvod do předmětu

Dědění vlastností <head> <style type="text/css"> p { color: red } </style> </head> <body> <p>Červený

Dědění vlastností <head> <style type="text/css"> p { color: red } </style> </head> <body> <p>Červený <em>text<em></p> </body> » I slovo 'text' v příkladě se zobrazí červeně, protože tuto vlastnost zdědil od svého rodičovského elementu N 111031 Internetové publikování 1. Úvod do předmětu

Styl v externím souboru » Umožňuje využití jedné definice stylu mnoha HTML dokumenty <head>.

Styl v externím souboru » Umožňuje využití jedné definice stylu mnoha HTML dokumenty <head>. . . <link href="jméno_souboru_se_stylem. css" type="text/css" rel="Style. Sheet">. . . </head> N 111031 Internetové publikování 1. Úvod do předmětu

Styl u každého elementu » Atribut style » Odporuje filozofii CSS, používat vyjímečně .

Styl u každého elementu » Atribut style » Odporuje filozofii CSS, používat vyjímečně . . . <p style="definice stylu">Tento jediný odstavec bude formátován podle definice. </p>. . . N 111031 Internetové publikování 1. Úvod do předmětu

Příklady na serveru w 3 schools » http: //www. w 3 schools. com/css_examples. asp

Příklady na serveru w 3 schools » http: //www. w 3 schools. com/css_examples. asp N 111031 Internetové publikování 1. Úvod do předmětu

Nástroje pro snazší tvorbu CSS » Top. Style Lite 3. 10 » http: //www.

Nástroje pro snazší tvorbu CSS » Top. Style Lite 3. 10 » http: //www. bradsoft. com/download/index. asp N 111031 Internetové publikování 1. Úvod do předmětu