CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26
|
|
|
- Luboš Čermák
- před 7 lety
- Počet zobrazení:
Transkript
1
2
3
4
5 CSS 5 Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu...26 Základní syntaxe Komentáře Připojení stylopisu k dokumentu XHTML...27 Zápis přímo do dokumentu Načtení externího stylopisu Hodnoty...28 Klíčová slova <číslo>, <celé_číslo> <velikost>, <délka> Absolutní jednotky Relativní jednotky <procenta> <barva> <URI> <řetězec> <čas> Selektory...31 Selektory typu Univerzální selektor Selektory třídy Násobné třídy Selektory ID Selektory s atributy Existence atributu Atribut hodnoty Atribut obsahující hodnotu Atribut obsahující podhodnotu Vícenásobné selektory s atributy Selektory následníků... 33
6 6 CSS Selektory potomků Selektory sourozenců Pseudotřídy a pseudoprvky...34 Pseudotřídy :link a :visited Dynamické pseudotřídy :hover, :active a :focus Pseudotřída :first-child Jazyková pseudotřída :lang Pseudoprvek :first-line Pseudoprvek :first-letter Pseudoprvky :before a :after Kombinování a seskupování selektorů, pseudotříd a pseudoprvků...38 Kombinované selektory Seskupování selektorů Média...38 Typy médií Určení médií v dokumentu Určení médií přímo ve stylopisu Dědičnost...39 Klíčové slovo inherit Vypočítané hodnoty a kaskáda...40 Vypočítané hodnoty Kaskáda Konkrétnost selektorů Pravidlo!important Podpora vlastností v nejběžnějších prohlížečích CSS a JavaScript Připojení souboru JavaScriptu k dokumentu XHTML Identifikace prohlížečů JavaScriptem (příklady) Podstrčení vhodného stylu na základě identifikace prohlížeče Rozměry prvků a přetékání obsahu Výpočet rozměrů prvků...50 Výpočet rozměrů prvků podle Specifikace W3C (model pouze obsah ) Výpočet rozměrů prvků podle Microsoftu (model včetně rámečku a výplně )... 50
7 CSS 7 Hodnota auto Blokové (nenahrazované) prvky Řádkové (nenahrazované) prvky Nahrazované (blokové i řádkové) prvky Absolutně poziciované (nenahrazované) prvky Absolutně poziciované (nahrazované) prvky Šířka obsahu prvku vlastnost width...52 Problém chybného počítání rozměrů v Internet Exploreru Řešení Starší způsoby řešení Řešení pomocí CSS Minimální šířka prvku vlastnost min-width...61 Příklad Maximální šířka prvku vlastnost max-width Šířka prvku od hrany rámečku po hranu rámečku vlastnost box-width Výška obsahu prvku vlastnost height...68 Problém chybného počítání rozměrů v Internet Exploreru Možnosti řešení Starší způsoby řešení Řešení pomocí CSS Procentní výška prvku umístěného v <body> Minimální výška prvku vlastnost min-height Maximální výška prvku vlastnost max-height Výška prvku od hrany rámečku po hranu rámečku vlastnost box-height Výpočetní model rozměrů prvků vlastnost box-sizing Přetékání obsahu vlastnosti overflow, overflow-x a overflow-y.80 Přetékání v praxi Viditelná oblast vlastnost clip Viditelná oblast v CSS 3 vlastnost overflow-clip Viditelná oblast nahrazovaných prvků vlastnost crop Podpora vlastností v nejběžnějších prohlížečích...86
8 8 CSS 4. Barvy a pozadí Barva textu vlastnost color Styl pozadí vlastnost background...90 Barva pozadí vlastnost background-color Obrázek na pozadí vlastnost background-image Opakování obrázku na pozadí vlastnost background-repeat Umístění obrázku na pozadí vlastnost background-position Ukotvení obrázku na pozadí vlastnost background-attachment Sdružená vlastnost background Podpora vlastností v nejběžnějších prohlížečích Okraje, výplně a rámečky Základní koncepce rámů...95 Základní podpora v různých prohlížečích Okraje vlastnost margin Slučování okrajů Hodnota auto snadné centrování blokových prvků Stránka na střed v Mozille Výplně vlastnost padding Rámečky vlastnost border Šířka rámečku vlastnost border-width Barva rámečku vlastnost border-color Styl rámečku vlastnost border-style Sdružená vlastnost border Zaoblení rámečku vlastnost border-radius Složitější příklad Obrazy v rámečku vlastnosti border-image, border-corner-image, border-fit, border-image-transform, border-corner-imagetransform Obrázek v rámečku vlastnost border-image Obrázek v rohu rámečku vlastnost border-corner-image Opakování obrázků v rámečku vlastnost border-fit Natočení obrázku v rámečku vlastnosti border-image-transform, border-corner-image-transform Sdružená vlastnost border dle CSS
9 CSS Obrys prvku vlastnost outline Stín prvku vlastnost box-shadow Podpora vlastností v nejběžnějších prohlížečích Vlastnosti písma Typ písma font-family Písma pro starší verze Linuxu Písma pro Windows 3.x Písma pro Mac OS Písma pro moderní Linux Bezpatková písma Patková písma Psaná písma Písma pro Windows 95/98/ME/NT/2000/XP Bezpatková písma Ostaní písma Příklady definice písem Bezpatkové písmo malé Bezpatkové písmo střední Bezpatkové písmo velké Patkové písmo malé Patkové písmo větší Proložené písmo menší Proložené písmo větší Dekorativní písmo Psané písmo Dynamické vkládání fontů Velikost písma font-size Styl písma font-style Síla písma font-weight Kapitálky font-variant Výška řádek line-height Sdružená vlastnost font Hustota písma font-stretch Výška nízkých liter font-size-adjust Podpora vlastností v nejběžnějších prohlížečích...137
10 10 CSS 7. Vlastnosti textu Odsazení první řádky vlastnost text-indent Rozestup znaků vlastnost letter-spacing Rozestup slov vlastnost word-spacing Vodorovné zarovnání vlastnost text-align Svislé zarovnání vlastnost vertical-align Velikost písmen vlastnost text-transform Dekorace textu vlastnost text-decoration Stín kolem textu vlastnost text-shadow Rolování textu vlastnosti marquee Styl rolování textu vlastost marquee-style Směr rolování textu vlastnost marquee-direction Rychlost rolování textu vlastnost marquee-speed Opakování rolování textu vlastnost marquee-repetition Sdružená vlastnost marquee Efekty písma vlastnost font-effect Podpora vlastností v nejběžnějších prohlížečích Typ prvku a viditelnost Typ prvku vlastnost display block, inline, none inline-block run-in compact table, table-cell a inline-table Svislé centrování obsahu pomocí vlastnosti display Viditelnost prvku vlastnost visibility Podpora vlastností v nejběžnějších prohlížečích Pozice prvku Pozice prvku vlastnosti position, top, right, bottom, right, z-index Pozice prvku position Souřadnice prvku top, right, bottom, left
11 CSS 11 Pozice prvku ve třetím rozměru z-index Praktické příklady poziciování Kompletní rozvržení stránky pomocí position: absolute pevný třísloupcový layout Kompletní rozvržení stránky pomocí position: absolute pružný třísloupcový layout Kompletní rozvržení stránky pomocí position: absolute částečně pružný třísloupcový layout Kompletní rozvržení stránky pomocí position: absolute částečně pružný třísloupcový layout rozměry v em Kompletní rozvržení stránky pomocí position: fixed pružný třísloupcový layout s fixně poziciovaným ovládacím menu rozměry v em Relativní poziciování řádkových prvků Plovoucí vykřičník Pružné poznámky ve zdrojovém kódu Svislé centrování obsahu verze pro Internet Explorer Svislé centrování obsahu kompletní verze (pro všechny prohlížeče) Plovoucí prvky vlastnost float Praktické příklady použití vlastnosti float Plovoucí nadpisy Dva sloupce s obrázkem uprostřed Tři sloupce s obrázkem uprostřed Zrušení obtékání vlastnost clear Podpora vlastností v nejběžnějších prohlížečích Tabulky Tabulky a CSS Tabulkový formátovací model CSS Tabulkové prvky Přehled předdefinovaných hodnot display v XHTML Šířka tabulky Formátovací modely vlastnost table-layout Automatický model Fixní model Výška tabulky Vodorovné zarovnání obsahu buněk Teoretický výsledek:
12 12 CSS 10.8 Svislé zarovnání obsahu buněk vlastnost vertical-align Formátování sloupců Dynamické efekty skrytí či zobrazení řádků a sloupců vlastnost visibility Slučování rámů buněk vlastnost border-collapse Rozestup mezi rámy buněk vlastnost border-spacing Zobrazení prázdných buněk vlastnost empty-cells Pozice titulku tabulky vlastnost caption-side Praktické příklady formátování tabulek v CSS Příklad 1 jednoduchá tabulka Příklad 2 trochu složitější tabulka Celý kód opravné funkce Celé řešení Automatické nastavení barev v buňkách podle obsahu Základní řešení Podpora CSS v nejběžnějších prohlížečích Generovaný obsah Generování obsahu vlastnost content <řetězec> attr(x) <uri> Čítače a uvozovky Čítače vlastnosti counter-increment a counter-reset Uvozovky vlastnost quotes Podpora vlastností v nejběžnějších prohlížečích Vlastnosti seznamů Typ odrážky seznamu vlastnost list-style-type Obrázek jako odrážka seznamu vlastnost list-style-image Umístění odrážky seznamu vlastnost list-style-position Sdružená vlastnost list-style Podpora vlastností v nejběžnějších prohlížečích...285
13 CSS Uživatelské efekty Tvar kurzoru vlastnost cursor Průhlednost prvku vlastnost opacity Podpora vlastností v nejběžnějších prohlížečích Vlastnosti tisku Zalamování textu vlastnosti page-break-before, page-break-after, page-break-inside Minimální počet řádků na stránce vlastnosti orphans a widows Tisknutelná oblast 14.4 Velikost a orientace tisknutelné oblasti vlastnost size Pojmenované stránky vlastnost page Adresování první, levé a pravé strany pseudotřídy :first, :left a :right Další tipy k formátování pro tisk Zrušte tisk zbytečností Barvy a pozadí Tisk odkazů Podpora vlastností v nejběžnějších prohlížečích Odstřižení starých prohlížečů od stylů a skriptů, individualizace stylopisů Individualizace stylů Připojení externích stylů Link a import Podmíněné komentáře Příklad odříznutí starších prohlížečů od stylu Triky na úrovni pravidel stylů Triky se selektory Další CSS triky Individualizace skriptů Identifikace prohlížeče JavaScriptem příklady useragent Opera Opera
14 14 CSS Internet Explorer 5.5 a Konqueror Staré prohlížeče, Mozilla 0, Opera 6, IE Další tipy a řešení Režimy prohlížečů Zapsání stylu JavaScriptem Registrace ovladačů událostí Jak na onload Rozbalovací nabídky Svislá rozbalovací nabídka (změna výšky) Svislá rozbalovací nabídka (pomocí display) Víceúrovňová rozbalovací nabídka Několik poznámek Nejzákladnější styly pište přímo do dokumentu Rejstřík
15 CSS 15 Úvod Úvod CSS ( Tabulky kaskádových stylů, Cascading Style Sheets) jsou skutečným přelomem ve způsobu formátování webových prezentací. Protože CSS neovlivňuje obsah dokumentů samotných, umožňuje vytvářet čisté, přísně strukturované dokumenty, vyhovujíci logice i standardům, umožňující bezproblémovou práci s obsahem vašich stránek i jiným aplikacím, než jakými jsou běžné prohlížeče (včetně čtecích zařízení pro nevidomé, mobilních zařízení, XML aplikací, fulltextových vyhledávačů na webu, ale třeba i starých textových prohlížečů). Jak je tato kniha napsána Tato kniha je psána trochu jinak, než je u většiny podobných knih o CSS zvykem. Najdete tu jen velmi málo teorie, kniha je koncipována spíše jako praktický manuál pro tvůrce webových stránek. uje základní popis využití CSS, dále detailní popis vlastností s přihlédnutím k praxi, řešení problémů pomocí JavaScriptu, využití spojení CSS a JavaScriptu, kompatibilitu CSS v nejčastěji používaných prohlížečích a další témata. Úvod
16 16 CSS Další rozdíl je v tom, že zde nezatajuji žádné problémy, které vás při vytváření dokumentů za pomoci CSS mohou potkat. Většina publikací o CSS se spokojí s tím, že popíší teorii, popíší stručně jednotlivé vlastnosti a připojí test podpory v jednotlivých prohlížečích v základních konstrukcích, avšak chování prohlížečů ve složitějších situacích příliš nerozebírají, aby čtenáře neodradili od CSS zcela. V této knize je tomu jinak pokud jsem zjistil v určitých situacích nějaké nekorektní chování prohlížečů, neváhám na problém upozornit a nabídnu případně řešení. Rovněž se snažím nepreferovat žádný prohlížeč, nejsem ani stoupenec tzv. IE ONLY, ani bezvýhradný obdivovatel Mozilly, jsem zastáncem hesla padni komu padni, jen když to bude užitečné pro čtenáře. Co byste měli znát Studium této knihy předpokládá, že máte alespoň základní znalosti jazyka HTML či XHTML. Není nutná žádná znalost CSS (...to vás má tato kniha přece naučit...). Vítána je znalost jazyka JavaScript není však vůbec nutná, při jeho neznalosti se pouze připravíte o spoustu zajímavých možností. Struktura knihy Jak již bylo uvedeno výše, tato kniha má posloužit hlavně praktickým potřebám webových tvůrců, proto zde praxe vysoce převažuje nad teorií. Zájemce o studium teorie CSS odkazuji na jinou literaturu či ještě lépe přímo na stránky W3C ( kde naleznete přesné znění všech specifikací (CSS 1, CSS 2, CSS 2,1, jakož i stále ještě rozpracované CSS 3). Největší část obsahu knihy (kapitoly 3 až 14) proto tvoří popis jednotlivých vlastností, návody na jejich praktické použití (a využití), řešení případných problémů s nekompatibilitou v prohlížečích a zajímavé tipy. Na konci každé kapitoly je pak ještě tabulka s detailním popisem podpory vlastností popsaných v této kapitole, a to ve všech běžně používaných prohlížečích (novější verze prohlížečů Mozilla, Opera, Internet Explorer a Konqueror). Popisované vlastnosti jsou do jednotlivých kapitol zařazovány podle toho, v jakých situacích jsou nejčastěji využívány (např. vlastnost font-size spolehlivě najdete v kapitole Vlastnosti písma). Historie formátování (X)HTML Ve svých počátcích v roce 1990 byla jediným cílem jazyka HTML prezentace obsahu (především textu) v čisté, strukturované formě, pouze s několika značkami. Mělo být pouze zřejmé, co je nadpis, co odstavec apod. Již v těchto dobách se předpokládalo, že způsob zobrazení se bude řídit stylovými předpisy. První webový prohlížeč na světě NeXT byl navržen tak, že výsledné formátování dokumentu bylo řízeno jednoduchým stylovým předpisem. Další prohlížeč, Mozaic z roku 1993, však tuto koncepci zcela opustil a možnosti práce se styly dokumentu prakticky znemožnil. Později si začalo mnoho autorů stěžovat, že nemohou nikterak ovlivnit vzhled svých HTML stránek. Proto byl již v roce 1994 vypracován první návrh Cascading Style Sheets. Bohužel se však v téže době objevil webový prohlížeč Netscape 1, což s odstupem doby byla pro web katastrofa. Firma Netscape totiž místo podpory stylů zabudovala vlastnosti pro řízení vzhledu přímo do značek HTML. Toto řešení započalo éru nekompatibility webových stránek i prohlížečů, a hlavně zanesení původně čistého a strukturovaného kódu HTML dokumentu různým formátovacím balastem. Postupně přišli na trh webových prohlížečů další výrobci, kteří v tomto trendu pokračovali, a HTML kód se tak zanášel dalšími značkami a jejich atributy, které nesloužili ničemu jinému, Úvod
17 CSS 17 nežli k řízení vzhledu dokumentů. V jazyce HTML byly k dispozici i tabulky, a to výhradně k prezentaci tabulkových dat. Jenže autoři brzy přišli na to, že tabulky se dají využít k rozvržení stránek a nalili do buněk sloupce textu a dalšího obsahu. Autoři byli později obohaceni o tzv. rámce, pomocí kterých bylo možno vzhled prezentace na obrazovce (ale pouze na ní) zobrazit do té doby nevídaným způsobem. Tak bylo například možno zajistit, aby v jednom místě obrazovky byly ovládací prvky, které se nerolovaly s ostatní prezentací. Rámce však přinášely spoustu problémů (ukládání, záložky, tisk, čtečky pro nevidomé atd.). Později začalo být i výrobcům prohlížečů jasné, že tudy cesta nevede. Prvním novodobým prohlížečem, který začal styly částečně podporovat, byl Internet Explorer 3. Jelikož v té době CSS však ještě nebyly nikým standardizovány, implementace CSS se v tomto prohlížeči s pozdějšími standardy příliš neshoduje. První verze specifikace standardizačního konsorcia W3C (CSS 1) byla uvedena v roce 1996, těsně po příchodu Internet Exploreru 3. Za otce dnešních CSS je považován Híkon Wium Lie, vývojář (dnes šéfvývojář) Opery. Další prohlížeče firmy Microsoft verze 4 a 5.0 už měly zabudovánu poměrně slušnou podporu CSS (i když z dnešního pohledu naprosto nedostatečnou). Konkurenční Netscape byl zpočátku ke kaskádovým stylům velmi skeptický. První prohlížeč firmy Netscape, který začal CSS podporovat, byl Netscape 4. Podpora CSS v tomto prohlížeči je však minimální a velmi chybová. Podpora stylů v Netscape byla spíše důsledkem konkurenčního boje než touhy po standardech. V podstatě šlo jen o z nouze ctnost. Netscape 4 rozhodně nelze považovat za prohlížeč podporující CSS. Firma Netscape totiž v té době slavila velké úspěchy se svou velkou zbraní skriptovacím jazykem JavaScript. Velká část programového kódu pro formátování HTML dokumentů již byla v JavaScriptu k dispozici. Vývojářům ve firmě Netscape se tedy zdálo jen přirozené využít JavaScript k práci se styly. Tak vznikl JSS ( JavaScript Style Sheets). Tato alternativní technologie se však neujala a nikdy nebyla standarizována. Její podpora byla zabudována pouze do Netscape 4. Netscape později uvolnil svůj kód, který začali pod názvem Mozilla dále rozvíjet nezávislí tvůrci. Jádro Mozilly 0.6 poté zpětně firma Netscape implementovala do svého prohlížeče Netscape 6, a to přesto, že samotní tvůrci Mozilly upozorňovali na její přetrvávající chyby. Dá se říci, že ačkoliv je teoretická podpora standardů CSS, JavaScriptu i XHTML v Mozille 0 / Netscape 6 velmi rozsáhlá, v případě složitých konstrukcí zcela selhává. Další verze Mozilla 1 / Netscape 7 vrátila firmu Netscape opět na piedestal tvůrce nejlepšího prohlížeče a svého konkurenta Internet Explorer 6 s přehledem poráží. Přesněji však nejde ani tak o Netscape, jako spíše o Mozillu a ostatní open source prohlížeče s jádrem Gecko ( Phoenix, Firefox, Camino). O místo na slunci se však začíná hlásit další hráč Opera. Zatímco do verze 6 nebyla považována za nijak oslnivý prohlížeč (pro nás zvláště kvůli problémům se zobrazováním češtiny, slovenštiny a středoevropských jazyků vůbec), verze 6 se stala celkem oblíbenou. Vývojáři Opery však nelenili, a jejich další verze Opera 7 byla bomba. Atraktivní design, bohaté možnosti nastavení, výborná podpora webových technologií. Další verze Opera 7.5 již v podstatě mírně předehnala Mozillu v podpoře CSS, slabší je však v JavaScriptu, ale jedná se jen o pokročlejší funkce. Současné verze prohlížečů (Mozilla 1.5+, Opera 7.5+, Konqueror 3.2+, Safari 1.2+, s (většími) výhradami i Internet Explorer 6) jsou již z hlediska podpory CSS i JavaScriptu na velmi vysoké úrovni. Není problém vytvořit pro tyto prohlížeče jakkoliv složitý XHTML dokument zcela bez použití HTML formátovacích značek, a pochopitelně i bez použití tabulek a rámů. Úvod Úvod
18 18 CSS Co dokáže CSS Před nástupem CSS se HTML dokumenty formátovaly pomocí značek a jejich atributů (jmenujme například značky <font>, <b> či <center>, nebo atributy align či bgcolor). K rozvržení stránky se používaly výhradně tabulky (co se dříve nedělalo pomocí tabulek). S narůstající složitostí HTML dokumentů však narůstaly i problémy. Datový objem různých formátovacích značek a atributů byl často vyšší, než objem vlastního obsahu. Tím docházelo ke zpomalení načítání stránek, zbytečně narůstaly i nároky na servery (jakož i náklady). Formátování stránek pomocí skrytých tabulek pak přinášelo spoustu problémů pro jiná zařízení, nežli běžné prohlížeče. V podstatě byli vyřazeni zrakově handicapovaní, jejichž čtecí zařízení si s takovouto stránkou obvykle nedokáže poradit. Formátování dokumentů pomocí CSS tyto problémy odstraňuje. Umožňuje vytvořit čistý XHTML dokument, plně vyhovující současným standardům (např. velmi přísné normě XHTML 1.1), a hlavně 100% přístupný všem aplikacím od velmi starých textových prohlížečů, přes zvuková zařízení, až po nejmodernější mobilní telefony. Poznámka Pochopitelně zde záleží na obsahu a účelu prezentace např. e-obchod s rozsáhlou ukázkou zboží, formuláře řízené JavaScriptem apod., na mobilu či na papírovém výstupu z tiskárny asi nezprovozníte... Používání CSS vám však přinese mnoho dalších, praktických výhod: širší možnosti formátování, snadnou tvorbu a údržbu stylu, dynamickou práci se styly, dopřednou kompatibilitu, možnosti řízení tisku, formátování XML dokumentů. Širší možnosti formátování CSS nabízí mnohem širší možnosti formátování oproti HTML. Jeden příklad seznamy. V HTML se rozlišuje mezi uspořádanými <ol> a neuspořádanými <ul> seznamy. Neuspořádanému seznamu lze přiřadit jeden ze tří možných stylů odrážek, uspořádanému jeden z pěti. Pokud chcete změnit styl odrážek ze symbolů třeba na čísla (nebo naopak), musíte změnit i základní značky, a to včetně koncových. CSS mezi značkami <ol> a <ul> nerozlišuje, je možno nastavit více druhů odrážek, dále libovolný obrázek či none. Změna je dílem okamžiku. Některé potřebné vlastnosti klasický způsob formátování pomocí HTML ani realizovat neumožňuje (nebo jen ve značně omezené míře) např vlastnosti okrajů, výplní, orámování, pozadí jiných než tabulkových prvků, nebo poziciování (přesné nastavení polohy). V CSS lze přesně umístit nejen jakýkoliv prvek, ale třeba i obrázek na pozadí. Úvod
19 CSS 19 Snadná tvorba a údržba stylu Obtížnost tvorby a především změn patří mezi největší slabiny klasického HTML formátování. Všechny související stránky by měly by měly být formátovány shodně (tzv. zásada konzistentního stylu). Tedy např. barvy, písmo, ale i styl nadpisů, odstavců, odkazů, apod. Toho se při klasickém HTML formátování dociluje jen velmi obtížně. Ještě obtížnější je provést změnu vzhledu celého webu. Znamená to projít všechny HTML dokumenty, nalézt a změnit stovky značek a jejich atributů, či dokonce zcela překopat tabulky užité k poziciování prvků. Naproti tomu změna webu používajícího CSS je snadná a rychlá. Pokud se například rozhodnete změnit barvu nadpisů, stačí jednoduchá úprava v tabulce stylů. Pokud byste chtěli totéž provést u webu formátovaného postaru, bylo by třeba projít všechny HTML dokumenty, vyhledat v nich všechny nadpisy a ručně změnit jejich atributy ve značkách <font>. Pokud jsou tyto stránky vytvořeny dokonce pomocí WYSIWYG editoru, bývá balast několikráte se opakujících a vzájemně se přebíjejících formátovacích značek často tak neproniknutelný, že jediným východiskem je provést změny zase jen v tomto editoru. Úvod Dynamická práce se styly Pomocí kombinace CSS a JavaScriptu lze vaše stránky obohatit o spoustu efektů, lze však i zcela změnit chování prezentace. Například rozbalovací nabídky či automatické nastavení barvy pozadí tabulkových buněk v závislosti na jejich obsahu. Dopředná kompatibilita Dopředná kompatibilita znamená, že vaše dokumenty, vytvořené například podle standardu XHTML 1.1, budou zaručeně funční i v budoucích generacích webových prohlížečů, neboť současné verze standardů (XHTML, CSS, JavaScript) budou dozajista platit velmi dlouho, a prohlížeče je tedy budou podporovat, což se o formátování HTML tvrdit nedá. Normy HTML 4.01 a XHTML 1.0 již mnoho starších značek a atributů prohlásily za odmítnuté, a jejich užívání je povoleno pouze v tzv. přechodových verzích těchto norem (Transitional), verze XHTML 1.1 pak většinu formátovacích značek a atributů zakázala zcela. A nejde jen o jakési standardy, které stejně nikoho nezajímají, nejmodernější prohlížeče už nyní přestávají zvlášť zastaralé značky podporovat a tento trend bude dozajista pokračovat. Navíc, dokument vytvořený zcela bez formátovacích značek HTML dokáží zpracovat i další aplikace. Můžete sice namítnout, že vytváříte stránku určenou výhradně k prezentaci na počítačovém monitoru, nikoliv kód pro řízení mikrovlnné trouby, avšak: Nikdy nevíte, pro jaké zařízení budete v budoucnu chtít svůj dokument zpřístupnit (třeba mobilní telefon). Tím, že se naučíte vytvářet bezchybné dokumenty XHTML, bude pro vás budoucí přechod k jazyku XML mnohem snazší. Řízení tisku Pomocí CSS můžete též dokonale ovládat chování dokumentu při tisku. Můžete například určit, že na začátku každé vytištěné stránky bude logo vaší firmy, nebo můžete zakázat tisk ovládacích tlačítek a určit, že po celé šířce tištěné plochy bude pouze vlastní obsah. Úvod
20 20 CSS Formátování XML dokumentů Formátovat pomocí CSS lze nejen tradiční (X)HTML dokumenty, ale též dokumenty XML. Tato možnost je velmi důležitá, protože XML dokumenty sice současné prohlížeče již zobrazit dokáží, avšak bez jakéhokoliv formátování. Nepočítáme-li stylování pomocí XSL, je použití CSS jedinou použitelnou metodou, jak dokument vhodně zobrazit. Vlastnosti prohlížečů a jejich použitelnost Protože technologie CSS je poměrně nová, starší prohlížeče nedokáží dokumenty stylované pomocí CSS správně zobrazit. V zásadě je možné prohlížeče rozdělit do čtyř skupin: Archaické tyto prohlížeče používá minimum uživatelů. Žádná podpora CSS, žádná nebo jen symbolická podpora JavaScriptu. Těmto prohlížečům můžeme nabídnout pouze čisté XHTML, jinak se jimi nemusíme zabývat. Příklady těchto prohlížečů: textové prohlížeče, Netscape 1, 2, 3, Internet Explorer 1, 2, 3, Opera 1, 2, 3. Silně zastaralé tyto prohlížeče se občas ještě provozují, jejich podíl však (naštěstí) rychle klesá. Je pro ně charakteristická nízká podpora CSS i JavaScriptu (především standardní DOM). Také touto skupinou je zbytečné se zabývat, chceme-li, můžeme jim nabídnout pouze pár jednoduchých stylů a JavaScriptových efektů. Složitější styly a skripty by v nich napáchaly více škody než užitku. Příklady těchto prohlížečů: Netscape 4, Opera 4 a 5, Internet Explorer 4 a 5.0. Zastaralé tyto prohlížeče se vyznačují na jedné straně velmi vysokou podporou CSS i JavaScriptu, na straně druhé však také značnou chybovostí a mezerami. Vzhledem k jejich velkému zastoupení na webu však musíme s těmito prohlížeči vážně počítat, a prezentaci navrhnout tak, aby i těmto prohlížečům byla přístupná v plné parádě. Bohužel, chování Mozilly 0 a Opery 6 je však ve složitějších konstrukcích velmi problematické, někdy v nich takovouto složitější prezentaci ani nezprovozníme. O problémech Internet Exploreru se dají psát romány. Příklady těchto prohlížečů: Mozilla 0 / Netscape 6, Opera 6, Internet Explorer 5.5 a 6. Moderní současné verze kvalitních prohlížečů mají vysokou podporu CSS i JavaScriptu, není problém v nich zprovoznit jakkoliv složitou a efektní prezentaci zcela bez použití HTML formátování, tabulek a rámců. Příklady těchto prohlížečů: Mozilla 1 / Netscape 7, Opera 7, Úvod
Ukázka knihy z internetového knihkupectví www.kosmas.cz
Ukázka knihy z internetového knihkupectví www.kosmas.cz U k á z k a k n i h y z i n t e r n e t o v é h o k n i h k u p e c t v í w w w. k o s m a s. c z, U I D : K O S 1 8 0 6 5 9 U k á z k a k n i h
1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11
Obsah 3 1: Úvod 9 Dříve než začnete......................... 9 Co a kde v knize naleznete....................... 9 Zdroje............................... 10 Doporučení pro další studium.....................
CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26
CSS 5... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument...26 1.2 Vytvoření stylopisu...26 Základní syntaxe... 26 Komentá e... 27 1.3 Připojení stylopisu k dokumentu XHTML...27 Zápis p ímo do dokumentu...
CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26
CSS 5 Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument...26 1.2 Vytvoření stylopisu...26 Základní syntaxe... 26 Komentáře... 27 1.3 Připojení stylopisu k dokumentu XHTML...27 Zápis
Přehled základních html tagů
Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...
CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26
CSS 5 Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument...26 1.2 Vytvoření stylopisu...26 Základní syntaxe... 26 Komentáře... 27 1.3 Připojení stylopisu k dokumentu XHTML...27 Zápis přímo
Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování
Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie
Škola Střední odborná škola a Střední odborné učiliště, Hustopeče, Masarykovo nám. 1 Autor Ing. Jiří Tinka Číslo projektu CZ.1.07/1.5.00/34.0394 Číslo DUM VY_32_INOVACE_18_ICT_08.08a Název Tvorba webu
CSS Stylování stránek. Zpracoval: Petr Lasák
CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze
Blokový model v CSS:
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
TVORBA WEBOVÝCH STRÁNEK
TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML
Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek
Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek Označení: C8 Stručná charakteristika modulu Modul si klade za cíl seznámit detailněji s tvorbou webových stránek pomocí kódovacího jazyka
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
Tvorba webu. Kaskádové styly (CSS) Martin Urza
Tvorba webu Kaskádové styly (CSS) Martin Urza Motivace Proč používat kaskádové styly k formátování HTML? Dovolují více možností formátování než klasické HTML atributy a stále přibývají další (možnosti).
CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size.
Page 1 of 6 CSS vlastnosti - stručný prehľad Vlastnosti písma font-family rodina písma font-style styl písma font-variant varianta písma font-weight duktus písma font-size veľkosť písma font písmo
CSS - stručná reference kaskádových stylů
1. font a parametry písma font, font-family, font-size, font-style, font-variant, font-weight 1.1 font Nastavuje většinu parametrů textu najednou. Jednotlivé atributy naleznete v kapitolách 1.2-1.6 a line-height
Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)
Stránka č. 1 z 9 Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia
Cascading Style Sheets CSS Selektory Selektory
CSS JohanSebastianBachwasaprolificomposeṙ Bach'shomepage TITLE> BODY>Bach'shomepage H1> 1{color:red} h STYLE> HEAD>
Tvorba webových stránek
Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech
Kaskádové styly (CSS) Cascading Style Sheets
CSS verze 22.11. 2007 1 Kaskádové styly (CSS) Cascading Style Sheets Existují 3 druhy zápisu CSS do webové stránky a) Vložením tagu STYLE do hlavičky dokumentu ...definice stylu atributy: type...
Tvorba webových stránek
Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou
Vývoj Internetových Aplikací
2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info
PODPORA ELEKTRONICKÝCH FOREM VÝUKY
I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í PODPORA ELEKTRONICKÝCH FOREM VÝUKY CZ.1.07/1.1.06/01.0043 Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a
Pseudotřídy. 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.
Pseudotřídy Využití pseudotříd pro stylování odkazů ve webových dokumentech Pseudotřídy VY_32_INOVACE_01_03_01 Vytvořeno březen 2013 Žák se naučí smysluplně využívat pseudotříd pro stylování odkazů ve
Kaskádové styly (CSS)
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
Mgr. Vlastislav Kučera lekce č. 2
Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se
Mgr. Vlastislav Kučera přednáška č. 2
Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS
TNPW1 Cvičení
13.10.2015 aneta.bartuskova@uhk.cz Úvod do CSS 13.10.2015 aneta.bartuskova@uhk.cz Výchozí styly prohlížeče Pokud nepřiřadíme elementům žádný styl v CSS, formátují se výchozími hodnotami prohlížeče (v CSS
Část 1. Úvod. 1.1 Technické pozadí HTML a web HTML a XHTML Myšlenka CSS Další technologie 48
Předmluva...................................19 Část 1 Úvod 1 Historické pozadí a vývoj................... 25 1.1 Technické pozadí 27 1.2 HTML a web 32 1.3 HTML a XHTML 36 1.4 Myšlenka CSS 46 1.5 Další
Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci
Název modulu: Označení: C7 Stručná charakteristika modulu Modul vznikl za účelem úvodního seznámení zájemců o problematiku tvorby moderních webových stránek podle standardů W3C. Zahrnuje základní nezbytné
HTML - Úvod. Zpracoval: Petr Lasák
HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají
Stručný obsah Šablona CSS Pravidla CSS, selektory a deklarace vlastností Formátování textů, nadpisů a odkazů Efekty v textech a odkazech
Stručný obsah Šablona CSS 19 Pravidla CSS, selektory a deklarace vlastností 31 Formátování textů, nadpisů a odkazů 49 Efekty v textech a odkazech 65 Seznamy 83 Tabulky 95 Barvy, obrázky a obrázková pozadí
Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1
Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti
22. Tvorba webových stránek
22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči
Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)
Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia W3C Cascading
Káskádové styly = CSS
Návrh a tvorba WWW stránek 1/20 Káskádové styly = CSS CSS = Cascading Style Sheets = tabulky kaskádových stylů na začátku byl stylesheet soubor pravidel definující vzhled textu nezávisle na obsahu pomocí
Základy CSS (3. přednáška)
Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze
Mgr. Vlastislav Kučera Struktura stránky, hlavička,
Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to
CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.
Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s
O CSS podrobněji. Box model Document flow Layout
O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html
Rozměry, okraje a rámečky
Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned
ŠKODA Portal Platform
ŠKODA Portal Platform Struktura LESS stylů Jan Obrátil Účel dokumentu Účelem tohoto dokumentu je vysvětlit strukturu stylů v Portálové Platformě tak, aby bylo možné je správně použít a rozšířit je pro
Tvorba webových stránek
Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený
Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda
Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda Kaskadové styly CSS 1996 Cascading Style Sheets (tabulky kaskádových stylů) Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích
Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD
CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se
HTML Hypertext Markup Language
HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé
(X)HTML, CSS a jquery
Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje
Kaskádové styly základy grafiky
1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod
Úvod 1 ČÁST 1 HTML 1 Základy HTML a kaskádových stylů 5
Úvod 1 ČÁST 1 HTML 1 Základy HTML a kaskádových stylů 5 Struktura dokumentu HTML obsah a forma 5 Prvky dokumentu 7 Jméno prvku 7 Atributy prvku 8 Obsah prvku, hierarchie prvků 9 Zastupující jednotky (entity)
Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči
Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Autor: Mgr. Tomáš Javorský Datum vytvoření: 06 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: DUM seznamuje
Návrh stránek 4IZ228 tvorba webových stránek a aplikací
4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2013/12/12 20:40:58 $ Obsah Úvod... 3 Recept na dobré webové stránky... 4 Použitelnost... 5 Jak se pozná použitelný web...
Ukázka knihy z internetového knihkupectví www.kosmas.cz
Ukázka knihy z internetového knihkupectví www.kosmas.cz k á z k a k n i h y z i n t e r n e t o v é h o k n i h k u p e c t v í w w w. k o s m a s. c z, U I D : K O S 1 8 0 8 2 1 U k á z k a k n i h y
Š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
Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940
Ministerstvo školství, mládeže a tělovýchovy České republiky. Tematický plán Obor: Informační technologie. Vyučující: Mgr.
Tematický plán Vyučující: Mgr. Kijonková Jana 1. r o č n í k 3 h o d i n y t ý d n ě, c e l k e m 1 0 2 h o d i n Počet hodin Z á ř í 1. Operační systém Windows 6 1.1. Práce se soubory (vytvoření, uložení,
TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz
6 24.3.2015 aneta.bartuskova@uhk.cz Layout 24.3.2015 aneta.bartuskova@uhk.cz Layout stránky = strukturní i vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj
MS Word základy. Úvod do MS Word. Nový dokument. Vytvoření zástupce programu na ploše. Otevření dokumentu a popis prostředí: Ukládání souboru:
MS Word základy Úvod do MS Word. Vytvoření zástupce programu na ploše. Start Programy PK na Microsoft Word Odeslat Plocha Vytvořit zástupce Otevření dokumentu a popis prostředí: Spuštění programu Start
================================================================================ =====
Název: VY_32_INOVACE_PG4101 Základní struktura HTML stránky Datum vytvoření: 01 / 2012 Anotace: DUM seznamuje se základní strukturou a členěním HTML stránky, s jednotlivými složkami - HTML, CSS, externí
Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.
Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam
Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD
Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu
Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www
Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www Ing. Pavel BOHANES
1. Začínáme s FrontPage 2003 11
Úvod 9 1. Začínáme s FrontPage 2003 11 Instalace programu 12 Spuštění a ukončení programu 15 Základní ovládání 16 Hledání souborů 30 Najít a nahradit 31 Tisk 32 Schránka sady Office 34 Nápověda 36 Varianty
TVORBA WEBOVÝCH STRÁNEK
TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03b Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03b 1. Kaskádové styly (CSS) 2. Vazba CSS na (X)HTML dokument 3. Syntaxe CSS 4. Barva a
Úvod do tvorby internetových stránek v jazyce HTML
Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.
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
CSS Selektory tříd a ID, dědičnost, další vlastnosti Internetové publikování 1 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace
Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675
Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS
Ukazka knihy z internetoveho knihkupectvi
Ukazka knihy z internetoveho knihkupectvi www.kosmas.cz HTML začínáme programovat 3., aktualizované vydání Slavoj Písek Vydala Grada Publishing, a.s. U Průhonu 22, Praha 7 jako svou 3933. publikaci Odpovědný
CSS Kaskádové styly. formátování webových stránek
CSS Kaskádové styly formátování webových stránek Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení Význam tagy HTML významová vs. formátovací
TVORBA TEXTOVÉHO DOKUMENTU PROSTŘEDKY, PŘENOSITELNOST
TVORBA TEXTOVÉHO DOKUMENTU PROSTŘEDKY, PŘENOSITELNOST 1 Tvorba dokumentu - prostředky Psací stroj Od psaní na stroji pochází pojem normostrana Textové editory (např. T602) Slouží k tvorbě textu členěného
KAPITOLA 3 - ZPRACOVÁNÍ TEXTU
KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY textové editory formát textu tabulka grafické objekty odrážky a číslování odstavec CÍLE KAPITOLY Pracovat s textovými dokumenty a ukládat je v souborech různého
Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 3. část Vztahy mezi elementy»
Mgr. Vlastislav Kučera přednáška č. 1
Mgr. Vlastislav Kučera přednáška č. 1 jazyk HTML5 CSS3 HTML5 a CSS3: CASTRO, E. HTML5 a CSS3. Computer press, 2012 GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press,
Obsah. Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12
Obsah Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12 Kapitola 1 Než se pustíme do práce 15 Internet, web, WWW co to vlastně je? 15 Jak se tvoří internetové stránky 16
Webová grafika, struktura webu a navigace, použitelnost a přístupnost
Webová grafika, struktura webu a navigace, použitelnost a přístupnost Martin Kuna martin.kuna@seznam.cz Obsah Webová grafika Rozvržení stránky Typografické zásady Nejčastější chyby Struktura webu a navigace
OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC
OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC Charakteristika: soubor skriptů, obrázků a popisů k implementaci komunikace s API služby obalkyknih.cz, verze 3.0 pro ALEPH OPAC. Balíček souvisejících
Kapitola 1 První kroky v tvorbě miniaplikací 11
Obsah Úvodem 9 Komu je kniha určena 9 Kapitola 1 První kroky v tvorbě miniaplikací 11 Co je to Postranní panel systému Windows a jak funguje 12 Co je potřeba vědět před programováním miniaplikací 16 Vaše
POKROČILÉ ZPRACOVÁNÍ TEXTU
POKROČILÉ ZPRACOVÁNÍ TEXTU Hana Rohrová, Roman Rohr Cíle kurzu Po ukončení tohoto kurzu budete schopni: používat pokročilé formátování textu, odstavců, sloupců a tabulek, převádět text na tabulku a naopak,
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
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 Formátování HTML Každý text má obsah a formu. Když mluvím o formátu
Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border
Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border Prvky rozdělující obsah article, aside, nav, section Header Footer Boxy Vlastnosti width height padding border
Mgr. Vlastislav Kučera přednáška č. 1
Mgr. Vlastislav Kučera přednáška č. 1 jazyk (x)html kaskádové styly Castro, E.: HTML, XHTML a CSS. CPress, 2007 Písek, S.: HTML a XHTML, začínáme programovat. Grada Publishing, 2003 Wempen, F.: HTML a
APLIKACE XML PRO INTERNET
APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je
12. Základy HTML a formuláře v HTML
12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura
Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti CSS pro pozicování Ing.
Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Číslo: Anotace: Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových
1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce.
2. lekce Čtení dokumentů 1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce. 3. Přecházení mezi stránkami v dokumentu:
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)
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) Formátování HTML Každý text má obsah a formu. Když mluvím o formátu
13. Vytváření webových stránek
13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací
WORD 2007 grafický manuál
TLAČÍTKO OFFICE dříve známo jako nabídka Soubor umožňuje práci se souborem (otevřít nový nebo existující, uložit, vytisknou, odeslat, zavřít program, ) Mimo jiné zobrazuje názvy posledních otevřených dokumentů
Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení
Tématická oblast: dědičnost, kaskáda CSS a média Stylové předpisy pro různé typy zobrazovacích zařízení Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je ( Ing. Petr Měrka). VY_32_INOVACE_185
(X)HTML a CSS. VOŠ a SŠT Česká Třebová
(X)HTML a CSS Mgr. Petr Slívko VOŠ a SŠT Česká Třebová STRUKTURA WEBU Webová prezentace (anglicky website) je několik webových stránek provázaných hypertextovými odkazy. Tomu, které stránky web obsahuje
Název školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová
Název projektu: Podpora výuky v technických oborech Registrační číslo projektu: CZ.1.07/1.5.00/34.0458 Název šablony: V/2 Inovace a zkvalitnění výuky směřující k rozvoji odborných kompetencí žáků středních
Kaskádové styly 4IZ228 tvorba webových stránek a aplikací
4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2014/10/02 11:38:43 $ Obsah Úvod... 3 Důvody vzniku CSS... 4 Problémy s rádoby graficky dokonalými stránkami... 5 Řešení
1. Dříve než začneme... 11 1.1 Trocha historie nikoho nezabije... 11 1.2 Co budete potřebovat... 11 1.3 Microsoft versus zbytek světa...
Obsah Digitální fotografie tisk, úprava a prohlížení v ACDSee Úvod... 9 Co naleznete uvnitř této knihy... 9 Co nenaleznete v této knize... 9 Komu je kniha určena... 9 Příklady používané v knize... 10 Používané
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 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 absolutně pozicované bloky)
Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML
Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací
Kdy použít program Microsoft Publisher Desktop Publishing 12 Proces návrhu 12. Základy práce 15. Panely nástrojů 15
Obsah Úvod 11 Kdy použít program Microsoft Publisher 2003 11 Desktop Publishing 12 Proces návrhu 12 Scénář 12 Začínáme 13 KAPITOLA 1 Základy práce 15 Panely nástrojů 15 Záhlaví okna 15 Panel nabídek 15
Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.
Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s
Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML
Čtvrtek 11. dubna Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje
Tvorba stránek v HTML ve Wordu
Tvorba stránek v HTML ve Wordu HTML (hypertext markup language hypertextový značkovací jazyk). Internetová stránka jako soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o
Nová struktura souborů a složek
Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky
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)
Mimochodem, co je CSS? CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly". Kaskádové, protože