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.

Slides:



Advertisements
Podobné prezentace
Technologie pro publikování na webu 1
Advertisements

Technologie pro publikování na webu 1
TVORBA WEBOVÝCH STRÁNEK
TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek.
TVORBA WEBOVÝCH STRÁNEK
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í.
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
Layout stránky Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Určení polohy záhlaví, menu, textů, obrázků... Zachování polohy při změně.
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.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
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.
TNPW1 Technologie pro publikování na webu
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.
Centrování, Box model, Plovoucí fotogalerie Ing. Jiří Štěpánek.
Blokový model v CSS Obr. 1.
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.
Číslo šablony: III/2 VY_32_INOVACE_P4_3.13 Tematická oblast: Aplikační software pro práci s informacemi II. CSS - vlastnosti Typ: DUM - kombinovaný Předmět:
CSS – rámečky Mgr. Lenka Švancarová.
Přehled dalších vlastností
KASKÁDOVÉ STYLY SYNTAXE STYLŮ PRAVIDLO DEFINUJÍCÍ STYL SE SKLÁDÁ Z NEJMÉNĚ TŘÍ ZÁKLADNÍCH ČÁSTÍ: * SELEKTOR ZNAČKY * SLOŽENÉ ZÁVORKY A V NICH JE.
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.
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:
HTML, XHTML a CSS Základy jazyků značek.
CSS – vlastnosti textu text-align (vodorovné zarovnání)
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.
Návrh a tvorba WWW Cvičení 4
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 – 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
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.
CSS – Kaskádové styly IZI 228.
HTML 5 a CSS 3.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
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.
CSS Cascading Style Sheets. Výhody CSS Mohou ušetřit psaní zdrojového kódu Mohou ušetřit psaní zdrojového kódu Tvoření libovolných vzhledů Tvoření libovolných.
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.
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í.
KASKÁDOVÉ STYLY.
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)
Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek.
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.
CSS (4).
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.
ADOBE DREAMWEAVER CS6 CSS - Formátování textu
Chování blokových prvků v rámci HTML dokumentu
Úvod do CSS.
CSS.
Tvorba webových stránek
Tvorba webových stránek
CSS – Kaskádové styly IZI 228.
Transkript prezentace:

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 celý web najednou přilinkováním souboru styl.css lze formátovat celý web najednou lze dosáhnout dynamiky pohybu, zvláštních efektů lze dosáhnout dynamiky pohybu, zvláštních efektů bloky textu, obrázků, odkazů atd. lze jednoduše umístit do určité pozice bloky textu, obrázků, odkazů atd. lze jednoduše umístit do určité pozice

Druhy selektorů nastavení vlastností tagů nastavení vlastností tagů nastavení vlastností celých skupin tagů určením třídy (class) – společným pojmenováním nastavení vlastností celých skupin tagů určením třídy (class) – společným pojmenováním určení vlastností identifikátorem (jedinečným pojmenováním) určení vlastností identifikátorem (jedinečným pojmenováním)

Vlastnosti tagu XHTML: XHTML:<span> Stránka se stínovaným nadpisem Stránka se stínovaným nadpisem CSS: CSS: span { font-weight: bold; }

Vlastnosti třídy XHTML XHTML: XHTML: Popisek obrázku Popisek obrázku

Vlastnosti třídy CSS div.obrpopis { div.obrpopis { float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em; background-color: Silver; }

Vlastnosti identifikátoru XHTML Stránka se stínovaným nadpisem Stránka se stínovaným nadpisem Stránka se stínovaným nadpisem Stránka se stínovaným nadpisem</span>

Vlastnosti identifikátoru CSS #titulek { font: bold 45px serif, 'Times New Roman', Georgia, Times; font: bold 45px serif, 'Times New Roman', Georgia, Times; position: relative; position: relative; top: 5px; top: 5px; left: 5px; left: 5px;} #text{ #text{ color: Blue; position: relative; z-index: 2; top: 0; left: 0; } #stin{ #stin{ color: #999999; color: #999999; position: absolute; position: absolute; z-index: 1; z-index: 1; top: 3px; top: 3px; left: 3px; } left: 3px; }

Vlastnosti CSS pseudotřídy a:hover { a:hover { background-color: Navy; color: White; }