Blokový model v CSS:

Podobné dokumenty
CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size.

Kaskádové styly (CSS) Cascading Style Sheets

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

CSS - stručná reference kaskádových stylů

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Přehled vlastností stylů

Cascading Style Sheets CSS Selektory Selektory

1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11

Káskádové styly = CSS

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

TVORBA WEBOVÝCH STRÁNEK

Tvorba webu. Kaskádové styly (CSS) Martin Urza

Rozměry, okraje a rámečky

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1

Přehled základních html tagů

Historie. K čemu je to dobré? Začínáme. Úvod do CSS Historie K čemu je to dobré? Začínáme

Jak vytvořit jednoduché webové stránky.

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...

O CSS podrobněji. Box model Document flow Layout

TVORBA WEBOVÝCH STRÁNEK

CSS Cascading style sheet přehled vlastností selektory

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line)

SkautIS Remote Components absolventská práce

Tvorba webových stránek

KASKÁDOVÉ STYLY - CSS

Základy CSS (3. přednáška)

MODUL 7: TVORBA WEBOVÝCH APLIKACÍ

Ukázka knihy z internetového knihkupectví

Počítače přirozeně pracují pouze s čísly

12. Úvod do CSS (CSS styly)

CSS (Cascading Style Sheets) Jak se zapisují? externí soubory s koncovkou.css. přímo do www stránky

1. Přímo vložený styl

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)

Skripta ke školení. Autor: Tomáš Herout Telefon: (+420)

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Tvorba webových stránek

CSS Kaskádní styly. Založeno na přednášce Lukáše Bařinky

KASKÁDOVÉ STYLY - PÍSMO

Microsoft Office SharePoint Server 2007

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Všechny značky musí být vzájemně správně vnořeny <i><b>špatně</i></b> <i><b>správně</b></i>

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

Právní upozornění. Další servery s elektronickým obsahem. videoprírucky.cz

HTML. Verze Obsah:

Techniky rozvržení KAPITOLA 2

Káskádové styly = CSS

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>

Tvorba webových aplikací pomocí AJAX

Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy,

CSS kaskádové styly a jejich využití při tvorbě internetových stránek

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

Tvorba webových stránek

OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC

selektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2;}

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Manuál. pro tvorbu webu. HTML CSS JavaScript

3. Kompatibilita, použitelnost a základy typografie. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

CSS Stylování stránek. Zpracoval: Petr Lasák

Struktura stránek. <TITLE></TITLE>... text mezi tagy je zobrazen v názvu okna. <BODY></BODY> atributy:

2.8.1 Nejdůležitější a nejpoužívanější <meta /> elementy Ostatní Znakové entity kontejnery komentáře...

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

CSS Kaskádové styly. formátování webových stránek

Styl textu CSS 1. Pět obecných kategorií: Serif pátkova písma Pro text těla, zejména pro tisk, a hodí se i pro záhlaví. Times, Georgia,...

CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako

CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26

Název školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová

Tvorba www stránek v HTML a CSS

Vysoká škola báňská Technická univerzita Ostrava INTERNET A SÍTĚ. učební text. Marek Babiuch

Verze 2.1 MANUÁL. Redakční systém. REDAKTOR Junior

tvoříme web HTML/CSS

Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

Úvod do jazyka HTML (Hypertext Markup Language)

CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26

CSS. Internetové publikování

12. Základy HTML a formuláře v HTML

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Dokumentace k ročníkové práci

Tvorba webových stránek

Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti CSS pro pozicování Ing.

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

Ul, Ol, Li, Dl... Párové tagy Ul odrážkovy zoznam Ol číslovaný zoznam Li položka zoznamu Dl zoznam definícií

Fonty - praxe, obecné rodiny

.rohy-kulate { width: 250px; background: url(obr/rohy-spodni.gif) bottom no-repeat; border-top: 2px solid #AAA; }

KAPITOLA 5. Základní stylování seznamů

CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26

HTML Hypertext Markup Language

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag>

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem

absolutní (úplná) začíná lomítkem nebo pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru.

VYSOK ŠKOLA EKONOMICKÁ V PRAZE VYŠŠÍ ODBORNÁ ŠKOLA INFORMAČNÍCH SLUŽEB. Projekt

Soukromá vyšší odborná škola a Obchodní akademie s.r.o. České Budějovice Pražská 3. Absolventská práce Petra Pavlyková

Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení

Transkript:

Blokový model v CSS:

Blokový model v CSS:

Vlastnosti textu Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis word-spacing normal, délka normal o kolik se zvětší mezera mezi slovy letter-spacing normal, délka normal o kolik se zvětší mezera mezi písmeny text-decoration no, underli, overli, lithrought, blink no ozdoba textu, podtržení nadtržení, blikání vertical-align baseli. sub, super, top, texttop, middle, bottom, textbottom, procenta baseli inli vertikální zarovnání text-transform capitalize, uppercase, lowercase, no no zobrazení písma kapitálkami, malými a velkými písmeny text-align left, right, center, justify podle prohlížeče blokové zarovnání textu text-idented délka, procento 0 blokové velikost odstavcové zarážky li-height normal, délka, procenta, číslo normal výška řádky číslo udává násobek velikosti písma

Vlastnosti písma Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis font-family seznam písem podle prohlížeče rodina písma font-style normal, italic, oblique normal styl písma font-variant normal, smallcaps normal varianta písma font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 normal síla písma(tloušťka) font-size procenta, délky, xx-small, x-small, small, medium, large, x-large, xxlarge, larger, smaller medium velikost písma font výše uvedené vlastnosti standardní hodnoty všech vlastností písma kompletní nastavení písma

Vlastnosti barev a pozadí Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis color podle prohlížeče textu color, transparent trnsparent pozadí image URL, no no obrázek na pozadí repeat repeat, repeat-x, repeat-y, no-repeat repeat směr ve kterém se bude obrázek na pozadí stránky opakovat attachment scroll, fixed scroll scroll pozadí se pohybuje se stránkou, fixed pozadí se pohybuje position procenta, délky(1,2), top, center, bottom, left, center, right top left (0%0%) blokové a nahrazované umístění obrázku na pozadí uvádí se pozice x a y background výše uvedené vlastnosti standardní hodnoty všech vlastností barev a pozadí kompletní nastavení barev a pozadí

Vlastnosti boxů Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis margin-top délka, procento, auto 0 velikost horního vnějšího okraje margin-right délka, procento, auto 0 velikost pravého vnějšího okraje margin-bottom délka, procento, auto 0 velikost dolního vnějšího okraje margin-left délka, procento, auto 0 velikost levého vnějšího okraje margin délka, procento, auto standardní hodnoty velikostí vnějších okrajů kompletní nastavení vnějších okrajů padding-top délka, procento 0 velikost horního vnitřního okraje padding-bottom délka, procento 0 velikost dolního vnitřního okraje padding-left délka, procento 0 velikost levého vnitřního okraje padding-right délka, procento 0 velikost pravého vnitřního okraje padding délka, procento standardní hodnoty velikostí vnitřních okrajů kompletní nastavení vnitřních okrajů border-top -width thin, medium, thick, délka medium šířka horní části rámečku border-bottom -width thin, medium, thick, délka medium šířka dolní části rámečku border-left -width thin, medium, thick, délka medium šířka levé části rámečku border-right -width thin, medium, thick, délka medium šířka pravé části rámečku border-width thin, medium, thick, délka standardní hodnoty nastavení šířky rámečku kompletní nastavení šířky rámečku border-color hodnota vlastnosti color rámečku border-style border-top border-bottom border-left border-right border no, dotted, dashed, solid, double, groove, ridge, inset, outset border-top-width, border-style, border-bottom-width, borderstyle, border-left-width, border-style, border-right-width, borderstyle, border-width, border-style, no styl rámečku standardní hodnoty vlastností nastavení horní části rámečku standardní hodnoty vlastností nastavení dolní části rámečku standardní hodnoty vlastností nastavení levé části rámečku standardní hodnoty vlastností nastavení pravé části rámečku standardní hodnoty vlastností kompletní nastavení vlastností rámečku width délka, procento, auto auto blokové a nahrazované šířka height délka, auto auto blokové a nahrazované výška float left, right, no no clear left, right, both, no no umístění plovoucího objektu vlevo(left), vpravo(right) bo normálně(no) čekání na skončení plovoucích objektů : left=čeká na skončení vlevo, right=čeká vpravo, both=čeká na obou stranách

Klasifikační vlastnosti Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis display block, inli, listintem, no block druh elementu white -space normal, pre, nowrap normal blokové normal jsou normální mezery pre mezery a konce řádku se zachovají nowrap text se zalomí list-style -type disc, circle, square, decimal, lowerroman, lower-alpha, upper-alpha, no disc s vlastností druh odrážek v seznamech list-style -image URL, no no s vlastností obrázek místo odrážky v seznamu list-style -position inside, outside outside s vlastností outside=odrážka před textem, inside=odrážka v textu položky seznamu list-style list-style-type, liststyle-position, liststyle-image standartní hodnoty list- style... s vlastností kompletní nastavení vzhledu položek seznamu