CSS – vlastnosti textu text-align (vodorovné zarovnání)

Slides:



Advertisements
Podobné prezentace
Základy HTML – vkládání objektů
Advertisements

Technologie pro publikování na webu 1
TVORBA WEBOVÝCH STRÁNEK
Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
TVORBA WEBOVÝCH STRÁNEK
WWW stránky.
Referát č. 22 Tvorba webových stránek (Struktura webu, struktura HTML dokumentu, vytvoření webové stránky exportem z aplikačního programu, provázání.
ZÁKLADY HTML Číslo DUM: VY_32_INOVACE_04_11 Autor: Mgr. Ivana Matyášková Datum vytvoření: duben 2013 Ročník: tercie Vzdělávací obor: informační technologie.
Základy HTML.
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:
HTML HyperText Markup Language 4. část Ústav automatizace inženýrských úloh a informatiky FAST VUT v Brně 0U2 - Základy informatiky a výpočetní techniky.
Programování HTML stránek
TNPW1 Cvičení
Kaskádové styly (Cascading Style Sheets, CSS) slouží k formátování HTML prvků. Pomocí kaskádových stylů lze nastavit font, řez písma, velikost písma, zarovnání,
TAGY A STRUKTURA WEBOVÉ STRÁNKY. web – skupina webových stránek a dalších souborů (styly, obrázky, …), které na sebe navzájem odkazují jazyky pro psaní.
Návrh a tvorba WWW Cvičení 2 CSS 3. Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu.
TNPW1 Technologie pro publikování na webu
Jazyk HTML.
VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Třídy, generické třídy, pseudotřídy
Odkazy Pomocí odkazu se lze pohybovat mezi stránkami. Cílem může být další stránka nebo identifikátor na aktuální stránce. Pomocí odkazu se lze pohybovat.
Mgr. Vlastislav Kučera přednáška č. 8.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
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:
ZÁKLADY HTML – ODKAZY, SEZNAMY. - vodorovná čára atributy:  width – délka čáry – pixely nebo %  size - šířka ve smyslu tloušťky  align - zarovnání.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
Přehled dalších vlastností
Délkové jednotky v CSS Pro zápis délkových jednotek se používají jednotky: Absolutní Relativní Procenta Údaje se zapisují jako celá nebo desetinná čísla.
CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky.
Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1.
Textový procesor (MS Word)
Kaskádové styly - CSS.
KASKÁDOVÉ STYLY DÉLKOVÉ JEDNOTKY DÉLKOVÉ ÚDAJE SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA. DVOJICE PÍSMEN IDENTIFIKUJÍCÍ JEDNOTKY.
Pravidla a doporučení pro názvy souborů
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:
CSS – style Mgr. Lenka Švancarová. CSS – značka style (textstyle.html)
TNPW1 Cvičení
Kaskádové styly tvorba webových stránek
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
CSS Cascading Style Sheets Kaskádové styly
Cvičení 1 - Řešení příkladu Zadání viz: cv1_samostatne.doc.
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. Vlastislav Kučera přednáška č. 5.  transformace  přechody.
Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.
CSS – float a clear Mgr. Lenka Švancarová. CSS – float Vlastnost určuje obtékání prvku. Hodnoty:  right – prvek bude zarovnán vpravo, okolní obsah stránky.
XHTML – formátování textu, vodorovná čára Mgr. Lenka Švancarová.
CSS – Kaskádové styly IZI 228.
Obrázky v HTML dokumentech Druhy a použití. Obrázky + Zvyšují atraktivitu stránek. + Zvyšují vypovídací schopnost stránek. - Zvyšují dobu načítání stránky.
VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS.
Mgr. Vlastislav Kučera lekce č. 3
Základní pojmy (1) Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x),
HTML – TABULKY. - uzavírá celou strukturu tabulky atributy tabulky:  align - obtékání tabulky ostatním textem – right, left, center  cellpadding – vnitřní.
Mgr. Vlastislav Kučera přednáška č. 3
Mgr. Vlastislav Kučera lekce č. 5.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.
CSS – selektor class.tx { color: black; /* nastaví černou barvu písma */ } Selektor class (třída) použijeme pokud chceme určité vlastnosti definovat pro.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
VY_32_INOVACE_4.3.IVT1.07/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS formátování.
Styly CSS VýhodyDruhyZápis. Výhody CSS oddělení struktury od formátování oddělení struktury od formátování přilinkováním souboru styl.css lze formátovat.
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
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:
HTML pokračování. Co obsahuje každý html dokument? stránka stránka ahoj světe HTML.
Krátký úvodní kurz HTML Jenyk Obecně 1 - html  V HTML jazyce nezáleží na rozložení a délce řádku, extrémem je napsat celý program v jednom řádku.
Tvorba WEBOVÝCH stránek – základní TAGY
WORDPAD Textový dokument.
Kaskádové styly CSS.
CSS (4).
Formátování textu Logické členění textu
Tvorba webových stránek
Jazyk HTML (1) Jazyk HTML (Hypertext Markup Language) se používá pro vytváření Web Pages (www stránek) HTML používá text a sadu formátovacích značek, označovaných.
CSS – Kaskádové styly IZI 228.
Transkript prezentace:

CSS – vlastnosti textu text-align (vodorovné zarovnání) text-indent (odsazení první řádky) letter-spacing (mezera mezi znaky) word-spacing (mezera mezi slovy) text-decoration (dekorace textu) line-height (výška řádku) text-transform (transformace znaků)

CSS – text-align výchozí hodnotou je left (zarovnání doleva), alternativami jsou hodnoty right (doprava), center (doprostřed) a justify (do bloku) body { font-size: 12px; } .nadpis { text-align: center; font: 1.4em sans-serif; } .text { text-align: justify; }

CSS – text-indent odsazení prvního řádku lze nastavit buď v procentech (vzhledem k šířce bloku) nebo v jednotkách (např. px nebo em) div { text-indent: 2%; } .abc { text-indent: 1.5em; }

CSS – letter-spacing výchozí hodnotou je normal, alternativní hodnoty se zadávají v jednotkách využití především v nadpisech jako určitá forma zdůraznění h2 { letter-spacing: 0.7em; }

CSS – word-spacing výchozí hodnotou je normal, alternativní hodnoty se zadávají v jednotkách možné problémy při kombinaci se zarovnáním do bloku, kde už vznikají mezery automaticky p { word-spacing: 1.1em; }

CSS – text-decoration výchozí hodnotou je none, alternativní hodnoty jsou underline (podtržení), overline (linka nad textem), line-through (přeškrtnutí), blink (blikající text) prvek a (hypertextový odkaz) má na rozdíl od standardního textu jako výchozí hodnotu underline standardní text na webu by podle standardů tvorby webu neměl být podtržený, hypertextový odkaz naopak ano .preskrtnuti { text-decoration: line-through; }

CSS – line-height výška řádku má výchozí hodnotu normal, alternativní hodnoty lze udávat v procentech, jednotkách nebo číslem p { line-height: 300%; } .vradek { line-height: 15em; } div { line-height: 4.86; }

CSS – text-transform výška řádku má výchozí hodnotu none, alternativní hodnoty jsou capitalize (převede první znak každého slova na velký), uppercase (převede všechny znaky na velké), lowercase (převede všechny znaky na malé) div { text-transform: capitalize; } .velke { text-transform: uppercase; }

CSS – barvy a pozadí prvků color (barva popředí – písma) background-color (barva pozadí) background-image (obrázek na pozadí) background-repeat (opakování obrázku) background (sdružená vlastnost pozadí)

CSS – color (1) barvy lze v CSS zapisovat několika různými způsoby 1) barvy dané klíčovými slovy (16 barev) – black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua 2) hexadecimální zápis (obecný tvar #rrggbb), např. #b1f836 3) zkrácený hexadecimální zápis (obecný tvar #rgb) – můžeme použít, pokud jsou v základním zápise vždy 2 stejné číslice za sebou, např. #ff6633  #f63

CSS – color (2) 4) dekadický rgb zápis – hodnoty od 0 do 255, např. rgb(120,30,250) 5) procentní rgb zápis – např. rgb(50%, 5%, 100%) PSPad – levý ALT+C (nabídka barev) body { color: black; } .text { color: rgb(75,120,204); } h4 { color: rgb(10%,75%,20%); } p { color: #ffffff; }

CSS – background-color zápis stejný jako u color body { background-color: black; } p { background-color: rgb(115,67,211); }

CSS – background-image obrázek na pozadí pokud možno využívejte s citem, v opačném případě vede k nečitelnému textu formáty povolené pro web – GIF, JPG, PNG (nikoli BMP apod.) .obrpoz { background-image: url(photo/obrazek.jpg); }

CSS – background-repeat opakování obrázku na ploše pozadí – hodnoty repeat (pokrytí celé plochy), repeat-x (vodorovné opakování), repeat-y (svislé opakování), no-repeat (jediná kopie, tj. bez opakování) .obrpoz { background-repeat: no-repeat; }

CSS – background sdružená vlastnost umožňuje nastavit více dílčích vlastností do jedné můžeme ji použít, i když zadáváme pouze barvu pozadí .div { background: url(picture.jpg) no-repeat; } .div { background: #ffffff; }

XHTML – seznamy 3 typy – číslované, nečíslované, definiční je možno je dále stylovat v CSS využití definičních seznamů – např. slovníček zkratek apod.

XHTML – číslované seznamy <ol> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ol> XHTML – nečíslované seznamy <ul> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ul>

XHTML – definiční seznamy <dl> <dt>WTO</dt> <dd>World Tourism Organisation</dd> <dt>EU</dt> <dd>European Union</dd> </dl>