Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/21.2769 Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:

Prezentace na téma: "Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/21.2769 Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:"— Transkript prezentace:

1 Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/21.2769 Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a: Mgr. Jana Presová Ověřil/a: Mgr. Jana Presová

2 Název výukového materiálu: Vyváříme www stránky Vzdělávací obor: výpočetní technika Tematický okruh: tvorba jednoduché webové stránky Téma: III. Formátování pomocí kaskádových stylů Stručná anotace: Prezentace shrnující zásady při formátování základních prvků webové stránky pomocí kaskádových stylů, a to u písma, pozadí, nadpisů a odstavců přes nastavení stylů v hlavičce stránky.

3 Základní struktura: pokusy s formátováním … mezi tyto tagy píšeme příkazy pro nastavení formátů prvků na stránce … obsah webové stránky (co se na ní objeví)

4 formátování jednotlivých tagů do stylu v hlavičce napíšeme tag, jehož vzhled chceme změnit, do složené závorky pak napíšeme pomocí příkazů jeho formát to, co napíšeme v hlavičce, pak platí pro všechny tyto tagy použité na celé webové stránce

5 formátování jednotlivých tagů k jednomu tagu můžeme připsat i více nastavení, jednotlivé příkazy se oddělují středníkem např.: body  {color:  blue;  background-color:  pink} barva písmabarva pozadí

6 jednotlivé příkazy: BARVY: barva písma … color:  yellow barva pozadí … background-color:  black TEXT: podtržení … text-decoration:  underline – další možnosti: – overline – nadtržení – line-through – přeškrtnutí – none – zákaz podtržení

7 jednotlivé příkazy: PÍSMO: font … font-family:  Arial … musí být uvedený přesný název písma kurzíva … font-style:  italic tučné písmo … font-weight:  bold kapitálky … font-variant:  small-caps velikost písma … font-size:  24px zarovnání textu … text-align:  left (nebo right, center, justify … do bloku)

8 body  {color:  navy;  background-color:  yellow} h1  {font-variant:  small-caps;  text-decoration:  underline} h2  {font-family:  Times New Roman,  serif} h3  {font-style:  italic;  font-family:  Arial,  sans-serif} p  {font-size:  20px;  background-color:  pink} příklad zadávání formátů – pomocí css: font - typ písma (bezpatkové) font - typ písma (patkové)