CSS – rámečky Mgr. Lenka Švancarová.

Slides:



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

TVORBA WEBOVÝCH STRÁNEK
TVORBA WEBOVÝCH STRÁNEK
WWW stránky.
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.
Základy HTML.
Mgr. Vlastislav Kučera přednáška č. 5.  Seznamy  CSS – vlastnosti seznamů ◦ list-style-type, list-style-image, list-style-position  Tabulky  CSS –
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:
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í,
TVORBA WEBOVÝCH STRÁNEK
GWEB2 MGR. VLASTISLAV KUČERA 3. PŘEDNÁŠKA. Obsah přednášky  CSS3  barvy  border-radius  box-shadow  text-shadow.
Formátování textu. Odstavce  tvoříme párovou značkou  text bude od ostatního textu oddělen Konec řádky  nepárová značka způsobuje ukončení řádku a.
Jazyk HTML.
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.
KASKÁDOVÉ STYLY 4.
Mgr. Vlastislav Kučera přednáška č. 8.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Blokový model v CSS Obr. 1.
Mgr. Vlastislav Kučera 4. přednáška.  vícenásobná pozadí  velikost pozadí  zobrazení pozadí  gradienty.
Seznam - menu Seznam a jeho položky lze použít například i na vytvoření vysouvacího menu. Seznam a jeho položky lze použít například i na vytvoření vysouvacího.
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í
XHTML – tabulky Mgr. Lenka Švancarová Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Lenka Švancarová. Dostupné z Metodického portálu.
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.
Kaskádové styly - CSS.
CSS – style Mgr. Lenka Švancarová. CSS – značka style (textstyle.html)
TNPW1 Cvičení
TNPW1 Technologie pro publikování na webu Cvičení č. 7 Menu Martin Adámek.
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_259 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
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.
Kaskádové styly tvorba webových stránek
CSS – selektory Mgr. Lenka Švancarová. CSS – selektory Hromadná deklarace slouží ke zkrácení zápisu.  Místo h1 { color: #996666; background-color: rgb(255,255,102);}
CSS Cascading Style Sheets Kaskádové styly
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:
XHTML – obrázky Mgr. Lenka Švancarová Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Lenka Švancarová. Dostupné z Metodického portálu.
Obchodní akademie a Střední odborná škola, gen. F. Fajtla, Louny, p.o. Osvoboditelů 380, Louny Číslo projektuCZ.1.07/1.5.00/ Číslo sady29Číslo DUM16.
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.
Mgr. Vlastislav Kučera lekce č. 6.  Polohování ◦ normální řazení ◦ plovoucí boxy  Vlastnosti ◦ float ◦ clear.
Obrázky Obrázky se používají pro oživení stránek. Obrázky se používají pro oživení stránek. Obrázky se do stránek vkládají nepárovou značkou. To znamená,
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.
TNPW1 Technologie pro publikování na webu Cvičení č. 9 Boxmodel Martin Adámek.
Číslo šablony: III/2 VY_32_INOVACE_P4_3.11 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - odkazy, obrázky Typ: DUM - kombinovaný.
Párová a nepárová značka, atributy a jejich hodnoty
VY_32_INOVACE_4.3.IVT1.13/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.
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 lekce č. 5.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
VY_32_INOVACE_4.3.IVT1.06/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 pozicování.
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.
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.
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í.
KASKÁDOVÉ STYLY.
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.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
NSWI096 - INTERNET CSS – kaskádové styly Mgr. Petr Lasák.
1 Kurz XHTML a CSS Část 2: Popis vzhledu dokumentu za pomocí CSS - kaskádových stylů.
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.
Kaskádové styly CSS Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu ISSN.
Chování blokových prvků v rámci HTML dokumentu
Tvorba WEBOVÝCH stránek – obrázky
Tvorba webových stránek
CSS – základné princípy
CSS – Kaskádové styly IZI 228.
Transkript prezentace:

CSS – rámečky Mgr. Lenka Švancarová

CSS – rámečky <h1 style="border-width: 10px; border-color: rgb(51,102,0); border-style: solid;"> Nadpis s rámečkem okolo </h1> <h1 style="border-left-width: medium; border-left-color: rgb(51,102,0); border-left-style: double;"> Nadpis s rámečkem vlevo </h1>

CSS – rámečky Vlastnost border-width určuje tloušťku orámování. Slovně thin – slabý rámeček medium – středně silný rámeček thick – tlustý rámeček V px (pixel) border-width: 5px; Další jednotky http://www.jakpsatweb.cz/css/css-jednotky.html

CSS – rámečky Vlastnost border-color určuje barvu rámečku. Vlastnost border-style určuje styl rámečku. solid – plná čára double – dvojitá plná čára dashed – čárkovaná čára dotted – tečkovaná čára groove, ridge, inset, outset none – bez rámečku (výchozí hodnota)

CSS – rámečky Rámečky lze vykreslovat i jen po jednotlivých stranách. Vlevo – left border-left-width: medium; border-left-color: rgb(51,102,0); border-left-style: double; Vpravo – right Nahoře – top Dole – bottom

CSS – left, right, top, bottom Stejně tak si lze navolit různé vnější (a vnitřní) okraje prvku. margin – všechny vnější okraje prvku margin-left margin-right margin-top margin-bottom padding – všechny vnitřní okraje prvku padding-left padding-right padding-top padding-bottom

CSS – zkrácené zápisy <h1 style="border: 10px rgb(51,102,0) solid; margin: 20px 50px 10px 30px;"> Nadpis s rámečkem okolo </h1> style="border-left: medium rgb(51,102,0) double; padding: 20px 50px 10px 30px;"> Nadpis s rámečkem vlevo </h1>

CSS – rámečky U vlastností margin a padding z předchozího příkladu zjisti, kterých okrajů se týkají jednotlivé hodnoty, a svůj závěr si zapiš do sešitu. V PSPadu si otevři soubor komponenta.html. Pomocí CSS orámečkuj ze všech stran obrázky na stránce. U všech nadpisů druhé úrovně zobraz pouze horní část rámečku.