Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Čí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á
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.
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í)
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
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í
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í
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)
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é)