Kaskádové styly (CSS)

Podobné dokumenty
CSS V DIGITÁLNÍ KARTOGRAFII

Vývoj Internetových Aplikací

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

Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda

APLIKACE XML PRO INTERNET

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

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

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

CSS styly. Cascading Style Sheets kaskádové styly

(X)HTML, CSS a jquery

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

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

Základy XML struktura dokumentu (včetně testových otázek)

Přehled základních html tagů

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

Rozměry, okraje a rámečky

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

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera přednáška č. 2

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

HTML Hypertext Markup Language

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

Tvorba WWW stránek. Mojmír Volf

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

Internet 1 vývoj, html, css

13. Vytváření webových stránek

Tvorba webových stránek

Předmluva k druhému vydání 13. Úvod 17. ČÁST 2 Vytváření dokumentů XML 65

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

Prezentace XML. XML popisuje strukturu dat, neřeší vzhled definice vzhledu:

Tvorba webových stránek

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Úvod do jazyka HTML (Hypertext Markup Language)

TNPW1 Cvičení

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Inovace bakalářského studijního oboru Aplikovaná chemie

Tomáš Herout

Kaskádové styly 4IZ228 tvorba webových stránek a aplikací

Úvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.

HTML - Úvod. Zpracoval: Petr Lasák

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

tvoříme web HTML/CSS

Syntaxe XML XML teorie a praxe značkovacích jazyků (4IZ238)

Uspořádání klient-server. Standardy pro Web

M M S. Značkovací jazyky

Mgr. Vlastislav Kučera přednáška č. 1

Káskádové styly = CSS

Vývoj Internetových Aplikací

Mgr. Vlastislav Kučera přednáška č. 1

Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9.

HTML. HyperText Markup Language Josef Steinberger

Základy HTML (2. přednáška)

Inovace bakalářského studijního oboru Aplikovaná chemie

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy

Použití CSS v dokumentech HTML

Úvod do aplikací internetu a přehled možností při tvorbě webu

Kaskádové styly základy grafiky

Úvod do tvorby internetových stránek v jazyce HTML

WWW a HTML. Základní pojmy. Ivo Peterka

Káskádové styly = CSS

Logický datový model VF XML DTM DMVS

TRANSFORMACE OBJEKTOVÉ PETRIHO SÍTĚ Z JAZYKA OPNML DO GRAFU TRANSFORMATION OF OBJECT-ORIENTED PETRI NET FROM OPNML LANGUAGE TO GRAPH

Úvod do tvorby internetových aplikací

Pokročilé techniky tvorby sestav v Caché. ZENové Reporty

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

TVORBA WEBOVÝCH STRÁNEK

CO je to? WWW, HTML, CSS

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,...

Stručný obsah Šablona CSS Pravidla CSS, selektory a deklarace vlastností Formátování textů, nadpisů a odkazů Efekty v textech a odkazech

Vývoj Internetových Aplikací

selektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2;}

NSWI096 - INTERNET. Úvod do HTML

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

Kartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita

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

Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal. Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni

<link> - definuje vztah k jiným XHTML dokumentům, typicky

Ukázka knihy z internetového knihkupectví

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

1. Přímo vložený styl

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

Vektorový formát SVG

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

Jazyky pro popis dat

Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

HTML. PIA 2012/2013 Téma 1. P. Brada, O. Rohlík, J. Tichava, Západočeská univerzita

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

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

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy)

XML terminologie a charakteristiky. Roman Malo

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)

4. Rozdíly v interpretaci CSS moderními prohlížeči. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

Standardní šířka sloupce je průměrná šířka číslic 0-9 standardního písma.

Zobrazovací jednotky a monitory

Internet 2 css, skriptování, dynamické prvky

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


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

Transkript:

Kaskádové styly (CSS) Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar ČERBA Západočeská univerzita v Plzni Vznik dokumentu: 20.11.2007 Poslední aktualizace: 5.11.2009

Cascading Style Sheets Kaskádové styly Patří do skupiny stylových jazyků (XSL, FOSI, DSSSL... Základní myšlenkou je striktní oddělení obsahu dokumentu od jeho vzhledu součástí dokumentu mají být pouze logické elementy (v případě digitální kartografie především souřadnice a obsah jednotlivých prvků mapy); definice způsobu zobrazení (volba barev, průhlednost, velikost a typ písma, síla a typ čáry, průběh animace apod.) obsahuje dokument zapsaný v nějakém stylovém jazyku Kaskádové styly jsou technikou, která je známá především z oblasti tvorby webových stránek

Cascading Style Sheets Kaskádové styly Jednoduché Poměrně dobrá implementace Malá velikost souborů Dědičnost Dobré spojení s (X)HTML Vizuální pravidla pro zobrazování XML Neumožňují měnit strukturu dokumentu Různorodá implementace Nestandardní forma zápisu

Garant CSS - World Wide Web Consortium 1996 CSS1 W3C Recommendation 1998 CSS2 W3C Recommendation 2007 CSS2.1 W3C Candidate Recommendation CSS3 Trocha historie a současnosti...

CSS3 - novinky Nové selektory řídící se stromem dokumentu Průhlednost Kulaté rohy Vícesloupcové rozvržení Složená pozadí...

Základní princip Zápis = selektor (prvek dokumentu) + deklarace (vlastnost a její hodnota) SELEKTOR {DEKLARACE} SELEKTOR {VLASTNOST: HODNOTA} SELEKTOR {VLASTNOST: HODNOTA1 HODNOTA2 HODNOTA3} SELEKTOR { VLASTNOST1: HODNOTA1; VLASTNOST2: HODNOTA2; VLASTNOST3: HODNOTA3;} odstavec {font-family: Arial; font-size: 11pt; color:black;} /* komentář */

Připojení stylu k dokumentu K jednotlivým prvkům Na začátek dokumentu Připojení stylu k dokumentu <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="styl.css" type="text/css" title="jméno stylu" rel="stylesheet"?> <?xml-stylesheet href="styl.css" type="text/css" title="styl" rel="alternate-stylesheet"?>

Selektory * seznam, odstavec seznam odstavec seznam > odstavec odstavec:first-child seznam + odstavec odstavec[zarovnani] odstavec[zarovnani="dobloku"] odstavec[zarovnani~="blok"] odstavec[zarovnani ="blok"] odstavec#para1 odstavec.blok.blok CSS2

Pseudoelementy a pseudotřídy :first-line :first-letter :before :after :link :visited :active :hover :focus :lang(jazyk) :first-child

Délkové jednotky Relativní Absolutní em (čtverčík) ex px (pixel) mm cm in (inch, palec) pt (point, bod) pc (pica, tiskařský bod) 1 mm = 3,78 px 1 cm = 0,39 in 1 cm = 28,35 pt 1 pc = 12 pt 1 cm = 2,36 pc

Barvy Klíčové slovo 16 barev RBG (komplexně, hexadecimálně) #RRGGBB RGB (zkráceně, hexadecimálně) #RGB RGB (decimálně) rgb(r,g,b) RGB (procentuálně) rgb(r%,g%,b%) blue #0000ff #00f rgb(0,0,255) rgb(0%,0%,100%)

Vlastnost display Způsob zobrazení prvku Hodnoty: inline block none list-item table table-row table-cell...table column, table row group, table column group Řádkový prvek Blokový prvek Prvek se nezobrazí Položka seznamu Tabulka Řádek tabulky Buňka tabulky...

CSS & SVG XML prezentační atributy <rect x="10" y="10" width="70" height="40" fill="blue" stroke="red" stroke-width="2px"/> Inline styly <rect x="10" y="10" width="70" height="40" style="fill:blue; stroke:red; stroke-width:2px"/>

CSS & SVG Interní styly <defs> <style type="text/css"> <![CDATA[ ]]> rect </style> </defs> {fill:blue; stroke:red; stroke-width:2px;} Externí styly /* příklad extern. stylu*/ /* styl je uložený v souboru styl.css ve stejném adresáři jako soubor SVG */ rect {fill:blue; stroke:red; stroke-width:2px;}

Externí styly <?xml version="1.0"?> <?xml-stylesheet href="styl.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/tr/2001/rec-svg- 20010904/DTD/svg11.dtd"> <svg width="300" height="200"> <!-- SVG dokument dále pokračuje </svg>

Externí styly Povinné atributy: href URI (Uniform Resource Identifier) cesta ke stylovému souboru. type MIME (Multipurpose Internet Mail Extensions) typ stylu. Volitelné parametry. title název připojeného stylu. media označení výstupního média. charset znaková sada použitá ve stylovém souboru. alternate může nabývat pouze dvou hodnot yes a no, které určují, zda je o alternativní styl.