Skripta ke školení. Autor: Tomáš Herout Telefon: (+420)
|
|
|
- Antonín Rohla
- před 5 lety
- Počet zobrazení:
Transkript
1 Skripta ke školení Autor: Tomáš Herout Telefon: (+420)
2 Obsah CSS... 3 Co je to CSS... 3 Druhy selektorů... 4 Pseudotřídy a pseudoelementy nejpoužívanější z nich... 4 Dědičnost, kaskádovost a specifičnost... 5 Hodnoty používané v CSS... 7 Stylování písma... 7 font-family... 7 font-size... 8 font-style... 8 font-variant... 8 font-weight... 8 font... 8 color... 8 line-height... 8 letter-spacing... 9 word-spacing... 9 text-align... 9 text-decoration... 9 text-overflow... 9 vertical-align... 9 text-shadow... 9 Stylování seznamů a odkazů list-style-type list-style-position list-style-image list-style cursor Vzhled pozadí background-color background-image background-position Stránka 1 z 18
3 background-repeat background-attachement background opacity box-shadow Vzhled tabulek border-collapse border-spacing empty-cells table-layout caption-side Stylování boxů width min-width max-width height min-height max-height margin padding border-width border-style border-color border border-radius border-image overflow display visibility Stránka 2 z 18
4 CSS Co je to CSS CSS je jazyk určený k ovlivňování zobrazení HTML dokumentu. Každý prohlížeč má uvnitř sebe nastaveno, jak má reagovat na HTML značky, a jak zobrazit obsah umístěný mezi nimi. Webdesigneři pochopitelně nechtějí, aby se všechny stránky zobrazovaly stejně, a právě k tomu jim slouží CSS, aby návštěvníkovi mohli přinést poutavý design. CSS je možné psát přímo do HTML dokumentu, ale není to správné řešení, protože tím zaprvé narůstá velikost HTML kódu a zadruhé následná údržba takového webu by se stala noční můrou. Špatně to také hodnotí vyhledávače, tudíž to neprospívá SEO. Ukázka stylu vloženého do HTML tzv. in-line styl: <p style="color:red">červené písmo... </p> Správným řešením je CSS psát odděleně do HTML. Nezvětšuje se tím velikost HTML kódu, zrychluje se načítání jednotlivých stránek webu a údržba se stává snadnější. Ukázka HTML kódu: <body> <p class="cervena">... </p> </body> Ukázka CSS kódu:.cervena { color:red;... } Stránka 3 z 18
5 Jak se nazývají části kódu CSS: Druhy selektorů Univerzální selektor hvězdička * Obecné selektory se zapisují značkou html elementu např.: a, p, h1, ul, li, table, tr, th, td, div, span... Identifikátory se zapisují tak, že se před ně napíše mřížka # např.: #nazevidentifikatoru Třídy se zapisují tak, že se před ně napíše tečka. např.:.nazev-tridy Pseudotřídy mají své zvláštní postavení a píší se tak, že se před ně dává dvojtečka např.: a:hover Pro určitou skupinu deklarací vlastností můžete použít více selektorů, které od sebe oddělíte čárkou a mezerou. Výjimkou jsou pseudotřídy. Např.: #nazev-identifikatoru,.nazev-tridy, a:hover, p :hover Pseudotřídy a pseudoelementy nejpoužívanější z nich Dynamická pseudotřída, která ovlivňuje elementy, na nichž je zrovna kurzor myši. :link Používá se pro stylování již nenavštívených odkazů <a>. :visited Používá se pro stylování již navštívených odkazů <a>. Stránka 4 z 18
6 ::nth-child() Pseudotřída, která ovlivňuje určitý dceřiný prvek podle pořadí uvedeném v závorce. Např. pokud napíšete (odd), tak ovlivníte liché prvky, pomocí (even) zase sudé, zápisem (3n+1)každý třetí ::nth-last-child() Totéž, co nth-child(), ale počítá se zezadu. ::nth-of-type() Pseudotřída, která ovlivňuje určitý sourozenecký prvek podle pořadí uvedeném v závorce. Např. pokud napíšete (odd), tak ovlivníte liché prvky, pomocí (even) zase sudé, zápisem (3n+1)každý třetí ::nth-last-of-type() Totéž, co nth-of-type(), ale počítá se zezadu. ::before Nastyluje prostor před elementem. Může se použít v kombinaci s vlastností content, která umí vložit nějaký text, obrázek apod. ::after Totéž, co before, ale vloží za element. Dědičnost, kaskádovost a specifičnost Již jsme se dozvěděli, že HTML se do sebe vnořuje a vytváří vztahy předků a potomků. CSS jazyk s tím počítá a některá pravidla se dědí z předků na potomky. Např. definujete-li použití určitého fontu písma pro nadřazený prvek, tak se font zdědí i do jeho potomků. Tuto dědičnost lze změnit konkrétním značkám, rodinám značek, třídám a identifikátorům. Ne každé pravidlo se dědí. Při vytváření selektorů můžete využít kaskády jazyka CSS, respektive HTML. Příklad využití kaskády bez sledování hloubky vztahu: p.cervena a { color:red;... } Vysvětlení přikladu: deklarace vlastnosti color:red (barva písma červená) se bude aplikovat jen na značky <a> (odkazy), ale pouze v tom případě, že se budou nacházet ve značce <p> (odstavci), který má současně atribut class="cervena". V tomto případě není sledována hloubka vnoření. Takový selektor tedy popisuje, jak má vypadat kaskáda HTML, aby se deklarace vlastností na ně aplikovala. Aplikuje se vždy jen na poslední prvek v kaskádě. Stránka 5 z 18
7 Příklad selektoru přímého potomka: li > a {... } Vysvětlení přikladu: vztahuje se pouze na případ, kdy <a> je přímím potomkem <li>. Pokud by <a> bylo vnořeno hlouběji, (např. ještě v <p>) tak se tato pravidla již nevztahují. Příklad selektoru sousedícího sourozence: h1 + p {... } Vysvětlení přikladu: vztahuje se pouze na <p>, které přímo sousedí s <h1>. Na všechny ostatní <p> v dokumentu se nevztahuje. Příklad selektoru obecného sourozence: h2 ~ p {... } Vysvětlení přikladu: vztahuje se na všechna <p>, která mají sourozenecký vztah s <h2>, ale nemusejí být hned po něm. Příklad selektoru vybraného podle parametrů: a[title="text"] {... } Vysvětlení přikladu: vztahuje se na <a>, která mají v titulku daný text. Specifičnost slouží k rozhodnutí, která pravidla stylů budou prohlížečem aplikována v případech, kdy se na jednu značku bude vztahovat více CSS pravidel. Ukázka, jak se počítá specifičnost: Selektor Hodnota specifičnosti <img style=""...> 1,0,0,0 (1000) #rodic-id #potomek-id{} 0,2,0,0 (200) #rodic-id.potomek-trida{} 0,1,1,0 (110) #id img{} 0,1,0,1 (101) #id{} 0,1,0,0 (100).trida{} 0,0,1,0 (10) img{} 0,0,0,1 (1) Stránka 6 z 18
8 Hodnoty používané v CSS Značka Popis px Pixel jeden obrazový bod pc Pica 1pc = 12px pt Typografický bod 1pt = 0,376 mm mm Milimetr cm Centimetr in Palec 1in = 2,54 cm em Šířka velkého M ex Šířka malého x % Procenta proporcionální hodnota relativní vůči jiné hodnotě. Např. body{font-size:12pt;} h2{font-size:150%;} # Hexadecimální zápis barvy, který má mřížku a 6 znaků od 0 do FF Např. *{color:#ff0000;} rgb() Zápis barvy r = červená, g = zelená, b = modrá. Hodnoty se od sebe oddělují čárkou. Možné zapisovat čísli od 0 do 255, nebo procenty Např. *{color:rgb(100%, 0, 0);} rgba() Zápis barvy obdobný jako výše. Rozdíl je v poslední číslovce, která určuje průhlednost. Např. *{color:rgba(255, 0, 0, 0.5);} s Sekunda ms Milisekunda Krom značek se někdy mohou používat také reálná čísla, např. line-height: 1.5 znamená, výška řádku jeden a půl. Stylování písma font-family Typ písma, které má být použito pro zobrazení. Problém s fonty je ten, že prohlížeče používají fonty z operačního systému, takže pokud byste použili font, který v OS není, tak se font nezobrazí. Nemusí být použito jen jedno písmo, ale třeba celá rodina. V případě víceslovných názvů fontů je nutné obalit tyto názvy do uvozovek. Ukázka: font-family: Arial, Verdana, sans-serif; Ukázka víceslovného jména fontu: font-family: "Times New Roman", serif; Druhy fontů se dají do počítače návštěvníka nahrát. Jednou z metod je import z Google url(cesta) Další možností je nahrání { font-family: jmenofontu; src: url("souborfontu.ttf"); } Stránka 7 z 18
9 font-size Velikost písma. Určuje se buď jednotkami délky, procentuálně k rodičovské hodnotě, nebo vyhrazenými slovy: large = písmo o jeden stupeň větší; smaller = písmo o jeden stupeň menší; small = cca 9px medium = cca 16px; large = cca 18px; inherit = zdědí se od předka. font-style Styl použitého písma, určuje se vyhrazenými slovy: normal = normální písmo; italic = kurzíva; oblique = skloněné; inherit = zdědí se. font-variant Varianta použitého písma vyhrazenými slovy: normal = normální písmo; small-caps = kapitálky; inherit = zdědí se. font-weight Síla (tučnost) písma, určuje se číselnou hodnotou od 100 do 900, přičemž 400 odpovídá normální hodnotě nebo vyhrazenými slovy: normal = normální písmo; bold = tučné; bolder = tučnější; lighter = zeslabené; inherit = zdědí se. font Souhrnný zápis hodnot: family size style variant weight Ukázka: font: Arial 12px italic small-caps bold; Verze CSS = 1 a vyšší, dědičnost: ano color Barva textu a efektů jako je podtržení apod. Určuje se hexadecimálně, pomocí rgb(),rgba()nebo vyhrazenými názvy barev. line-height Výška řádku určená typem písma. Určuje se reálným číslem, kdy 1 je normál, či procenty vůči rodiči nebo jednotkami délky. Stránka 8 z 18
10 letter-spacing Velikost mezer mezi písmeny. Určuje se jednotkami délky, nebo normal = velikost se nemění. word-spacing Velikost mezer mezi slovy. Určuje se jednotkami délky. text-align Horizontální zarovnání textu. Určuje se vyhrazenými slovy: left = vlevo; right = vpravo; center = na střed; justify = do bloku. text-decoration Dekorace textu, určuje se vyhrazenými slovy: none = bez dekorace; underline = podtržení; overline = nadtržení; line-through = přeškrtnutí; blink = blikání; inherit = zdědí se od nadřazeného elementu. text-overflow Chování textu přesahujícího okraj svého elementu. Určuje se vyhrazenými slovy: clip = bez označení na konci; ellipsis = s označením na konci pomocí výpustky. Verze CSS 3, dědičnost: ano vertical-align Vertikální zarovnání textu. Určuje se jednotkami délky, procenty a vyhrazenými slovy: baseline = text leží na řádku; sub = dolní index; super = horní index; top = nahoře; middle = střed; bottom = dole. text-shadow Stínování textu. Zadává se jednak v číselných hodnotách určujících 1. posun po ose x, 2. posun po ose y, 3. rozostření a nakonec se zadá barva stínu Ukázka: text-shadow: 2px 2px 1px #cccccc; Verze CSS 3 a vyšší, dědičnost: ne Stránka 9 z 18
11 Stylování seznamů a odkazů list-style-type Typ označení položky seznamu. Určuje se vyhrazenými slovy: disc = plné kolečko; circle = prázdné kolečko; square = čtvereček; decimal = celé číslo; decimal-leading-zero = celé číslo začínající nulou; lower-roman = malé římské číslo; upper-roman = veklé římské číslo; lower-alpha = malé písmeno; upper-alpha = velké písmeno; lower-latin = malé písmeno; upper-latin = velké písmeno; georgian = hebrejské číslo; armenian = arménské číslo; none = žádné zobrazení. Tato deklarace se používá u značky <ul>. list-style-position Umístění označení položky. Určuje se vyhrazenými slovy: outside = umístí vně položky seznamu, zalomený text bude pokračovat vedle označení; inside = umístí uvnitř položky seznamu, zalomený text bude pokračovat pod označením. list-style-image Obrázek na místo předdefinovaných typů. Hodnota: url()= cesta k danému obrázku list-style Souhrnný zápis hodnot: type position image Ukázka: list-style: circle outside; cursor Vzhled kurzoru myši nad daným elementem. Určuje se vyhrazenými slovy a vlastní pomocí URL url()= cesta k danému obrázku Verze CSS 2 a vyšší, dědičnost: ano Stránka 10 z 18
12 Vzhled pozadí background-color Barva pozadí. Určuje se hodnotou psanou v hexadecimálních číslech, RGB, RGBA, názvem barvy, nebo vyhrazeným slovem transparent = průhledné pozadí. background-image Obrázek zobrazovaný na pozadí. Určuje se pomocí URL: url()= cesta k danému obrázku background-position Pozice obrázku na pozadí. Určuje se jednotkami délky, procenty nebo vyhrazenými slovy: top = zarovná se k hornímu okraji; center = zarovná se na střed; bottom = zarovná se k dolnímu okraji; left = zarovná se k levému okraji; right = zarovná se k pravému okraji; inherit = zdědí se od nadřazeného elementu. Syntax zápisu: background-position: hodnota hodnota pro osu x a y Ukázka: background-position: top left; background-repeat Způsob opakování obrázku. Určuje se vyhrazenými slovy: repeat = opakuje se do vyplnění celé oblasti po ose x i y; repeat-x = opakuje se po ose x; repeat-y = opakuje se po ose y; norepeat = neopakuje se; inherit = zdědí se od nadřazeného elementu. background-attachement Posouvání obrázku na pozadí. Určuje se vyhrazenými slovy: scroll = pozadí se posouvá se stránkou; fixed = pozadí zůstává na místě a nepohybuje se; inherit = zdědí se od nadřazeného elementu. background Souhrnný zápis hodnot: color image position repeat attachement Ukázka: list-style: circle outside; Stránka 11 z 18
13 Od CSS3 se do background-image dá zapsat také stínování. CSS rozlišuje a) lineární gradienty (vodorovné nebo svislé), b) radiální gradienty. Hodnoty se v principu uvádějí tak, že vypíšete barvy, které budou provádět přechody. Minimálně se musí jednat o dvě barvy, ale může jich být i více. Lze definovat také směr přechodu (gradientu), případně délka přechodu barvy. Lze použít i více gradientů současně. Ukázka jednoduchého gradientu nahoře červená, dole žlutá: background: linear-gradient(red, yellow); Ukázka gradientu zprava doleva, vpravo červená, vlevo žlutá: background: linear-gradient(to right, red, yellow); opacity Průhlednost. Určuje se číslem v rozmezí 1.0 (neprůhledné) až 0.0 (zcela průhledné). Verze CSS 3, dědičnost: ne box-shadow Vytváří stín vržený boxem (DIVem). Zadává se jednak v číselných hodnotách určujících 1. posun po ose x, 2. posun po ose y, 3. rozostření a nakonec se zadá barva stínu. Ukázka: box-shadow: 10px 10px 5px #888888; Vzhled tabulek border-collapse Nastavuje rozestupy mezi jednotlivými buňkami. Určuje se vyhrazenými slovy: collapse = mezery budou vypuštěny, to se hodí třeba u pruhovaných tabulek; separate = standardní chování, kdy je mezi buňkami rozestup. border-spacing Velikost mezer mezi buňkami, v případě viditelných rámečků mezery mezi rámečky buněk mezi sebou a případně rámečku celé tabulky. Určuje se jednotkami délky. Syntax zápisu: border-spacing: horizontální vertikální border-spacing: horizontálníavertikální Verze CSS 2 a vyšší, dědičnost: ano empty-cells Definice, zda se rámeček zobrazí i kolem buněk bez obsahu. Určuje se vyhrazenými slovy: show = rámeček se zobrazí i v prázdných buňkách; hide = rámeček se nezobrazí v prázdných buňkách; inherit = zdědí se od nadřazeného elementu. Verze CSS 2 a vyšší, dědičnost: ano Stránka 12 z 18
14 table-layout Způsob výpočty šířky tabulky. Určuje se vyhrazenými slovy: auto = přizpůsobí se obsahu; fixed = pevně uzamknutá šířka. caption-side Umístění titulku tabulky. Určuje se vyhrazenými slovy: top = nad tabulkou; bottom = pod tabulkou; left = zleva vedle tabulky; right = zprava vedle tabulky; inherit = zdědí se od nadřazeného elementu. Stylování boxů width Přesná šířka elementu. Určuje se jednotkami délky, procenty nebo vyhrazeným slovem: auto = šířka se přizpůsobí obsahu. min-width Minimální šířka elementu. Určuje se jednotkami délky, nebo procenty. Stránka 13 z 18
15 max-width Maximální šířka elementu. Určuje se jednotkami délky, nebo procenty. height Přesná výška elementu. Určuje se jednotkami délky, procenty nebo vyhrazeným slovem: auto = šířka se přizpůsobí obsahu. min-height Minimální výška elementu. Určuje se jednotkami délky, nebo procenty. max-height Maximální výška elementu. Určuje se jednotkami délky, nebo procenty. margin Šířka vnějšího okraje. Tedy oblasti, ve které nebude background. Určuje se jednotkami délky, procenty, nebo vyhrazeným slovem auto = okraj se přizpůsobí obsahu tak, že se dopočítá k nejbližšímu nadřazenému elementu. Syntax zápisu: margin: nahoře vpravo dole vlevo margin: nahoře vpravoavlevo dole margin: nahořeadole vpravoavlevo margin: všechnystrany Lze také zapisovat jako margin-left: padding Vnitřní odsazení od okraje elementu. V této oblasti se bude zobrazovat background. Určuje se jednotkami délky, nebo procenty. Syntax zápisu je stejná jako u margin. Lze také zapisovat jako paddig-left: border-width Šířka rámečku okolo elementu. Nefunguje bez border-style. Určuje se jednotkami délky, nebo vyhrazenými slovy: medium = střední rámeček; thin = slabý rámeček; thick = silný rámeček; inherit = zdědí se od nadřazeného elementu. Stránka 14 z 18
16 Syntax zápisu je stejná jako u margin. Lze také zapisovat jako border-top-width: border-style Styl rámečku okolo elementu. Určuje se vyhrazenými slovy: solid = spojitý; double = dvojitý; groove = zařízlý; ridge = vyvýšený; inset = vmáčknutý dovnitř; outset = vystouplý ven; dotted = tečkovaný; dashed = čárkovaný; none = žádný; inherit = zdědí se od nadřazeného elementu. Syntax zápisu je stejná jako u margin. Lze také zapisovat jako border-top-style: border-color Barva rámečku. Určuje se hodnotou psanou v hexadecimálních číslech, RGB, RGBA, názvem barvy, nebo vyhrazeným slovem transparent = průhledné pozadí. border Souhrnný zápis hodnot: width style color Ukázka: border: 1px solid #FF0000; border-radius Zakulacení (rádius) rohů. Určuje se jednotkami délky. Syntax zápisu: border-radius: horizontální vertikální border-radius: horizontálníavertikální border-radius: praváhorní leváhorní levádolní pravádolní Verze CSS 3, dědičnost: ne border-image Vytvoří rámeček z obrázků. Určuje se url adresa obrázku, způsob vykreslení, který může být: round obrázek opakovaný okolo elementu, stretch obrázek protažený okolo elementu Verze CSS 3, dědičnost: ne overflow Zacházení s obsahem, který se nevejde do elementu. Určuje se vyhrazenými slovy: virble = přetékající obsah se zobrazí i mimo element; hidden = přetékající obsah se nezobrazí vůbec; scroll = zobrazí se posuvné lišty vždy, i kdyby obsah nepřetekl; auto = pokud obsah přeteče, tak se zobrazí posuvná lišta a obsahem bude možné rolovat; inherit = zdědí se od nadřazeného elementu. Stránka 15 z 18
17 Lze také zapisovat jako overflow-x a overflow-y. Verze CSS 2 a vyšší, dědičnost: ne display Způsob chování elementu. Pomocí display lze ovlivnit opravdu hodně. Určuje se vyhrazenými slovy: inline = řádkové chování, kterému často nelze určit šířku a výšku, protože si ji vypočítává sám, defaultně třeba <a>, <span> ; block = blokový element, kterému je možné definovat šířku a výšku. Pokud nemá šířku určenou, snaží se vyplnit šířku do nadřazeného elementu. Výšku si standardně určuje podle množství obsahu, defaultně: <div>, <h1>, <p> ; list-item = položka seznamu; none = nezobrazí se, ani nebude zabírat žádné místo; table = standardně se tímto display nastavuje tabulka. Šířku mu lze pevně nastavit, ale pokud mu ji nenastavíte, tak zabírá do šířky jen tolik místa, kolik zabere obsah. Na rozdíl od block se nesnaží vyplnit celu šířku nadřazeného elementu table-cell = chování jako buňka tabulky. Svou šířku a výšku přizpůsobuje obsahu, ale dalšímu elementu table-cell dovolí vykreslení vedle sebe; flex = používá se na obal (nadřazený element), elementy umístěné uvnitř se zarovnají vedle sebe obdobně, jako by byly obtékané (float). visibility Viditelnost elementu. Určuje se vyhrazenými slovy: visible = zobrazený; hidden = skrytý, ale stále zabírá svou pozici v HTML toku; inherit = zdědí se od nadřazeného elementu. Verze CSS 2 a vyšší, dědičnost: ano Stránka 16 z 18
18 Pozicování layout float Pozice elementu v rámci obtékání. Obtékání prakticky způsobí vynětí kódu z přirozeného toku dokumentu. Určuje se vyhrazenými slovy: left= umístí element při levém okraji nadřazeného elementu; right = umístí element při pravém okraji nadřazeného elementu; none = běžný tok dokumentu; inherit = zdědí se od nadřazeného elementu. clear Ukončí obtékání float. Obtékaní sice není dědičné, ale prakticky vyjme takto označené elementy z přirozeného toku dokumentu. Clear zruší toto vyjmutí. Určuje se vyhrazenými slovy: left = ukončí obtékání z levé strany; right = ukončí obtékání z pravé strany; both = ukončí obtékání z obou stran; inherit = zdědí se od nadřazeného elementu. position Pozice elementu v toku dokumentu. Určuje se vyhrazenými slovy: static = zobrazení v rámci běžného toku; relative = posunutí vzhledem k původnímu umístění, výchozí bod pro posunutí je tedy ten, kde by se element nacházel normálně, původní místo elementu zůstane jako by obsazené, nové místo posunutého elementu nijak neovlivní ostatní elementy, mohou se tedy překrývat; absolute = absolutní vyjmutí z toku dokumentu, nové umístění se bude počítat k nejbližšímu elementu v toku dokumentu, který je označen jako relative, nebo není-li žádný takto označen, tak k dokumentu HTML. Původní místo absolutně vyjmutého elementu bude obsazeno částmi dokumentu v toku pod ním. Ovlivní tedy ostatní elementy. Nové umístění může překrývat jiné elementy; fixed = pevně umístěn na určenou pozici okna prohlížeče, je zcela vyjmut z toku dokumentu, stejně jako absolute, jen s tím rozdílem, že se nepohybuje společně se stránkou, protože se drží okna a nikoli dokumentu. Verze CSS 2 a vyšší, dědičnost: ne Stránka 17 z 18
19 z-index Pořadí zobrazení vrstev elementů, které se určuje v případě, že se elementy překrývají při pozicování. Určuje se číslem. Vyšší číslo znamená menší pravděpodobnost překrytí jiným elementem. Čísla nemusejí tít popořadě a mohou být i mínusová. Verze CSS 2 a vyšší, dědičnost: ne box-sizing Určuje způsob výpočtu rozměrů blokových elementů. Standardně se rámečky (border) a vnitřní odsazení (padding) připočítává k rozměrům. Pokud třeba máte pro <div> určené width 50px + 10px padding + 1px rámeček (border), a to na všech stranách, tak skutečná šířka bude 72px. To může box-sizing změnit. Určuje se vyhrazenými slovy: border-box = nastavuje režim, kdy se padding a border se nepřipočítává k width (šířce) a height (výšce). Určená šířka nebo výška jsou definitivní včetně padding a border. content-box = běžné chování, defaultní. V tomto režimu se k šířce a výšce navíc připočítává padding i border Stránka 18 z 18
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
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
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
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
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
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í
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
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...
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
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ý
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í
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...
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
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
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
CSS styly. Cascading Style Sheets kaskádové styly
CSS styly Cascading Style Sheets kaskádové styly Kaskádové styly Jednotný vzhled publikovaných www stránek Rozsáhlé změny jdou provést snadno Široká podpora (prohlížeče + WYSIWIG) Standard CSS byl představen
CSS kaskádové styly a jejich využití při tvorbě internetových stránek
Základní škola Dr. E. Beneše, Praha 9 Čakovice, nám. J. Berana 500 Ročník 9. A CSS kaskádové styly a jejich využití při tvorbě internetových stránek Školní rok: 2010 / 2011 Vypracoval: Michal Kolář Vedoucí
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
Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy,
Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy, Nadpisy Odstavce, zalamování řádku Zvýraznění textu Obrázky Odkazy Bloky, označené části řádku Komentáře Vlastnosti textu color, font-family, font-size,
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
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
Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou
Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány
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é...
Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. CSS 1 blokové To je blokové Zde je dlouhý text v kterém nachazí vložené... vložené Vnější okraje umožňují nastavovat
tvoříme web HTML/CSS
tvoříme web HTML/CSS 22. 4. 2018 Zlín HTML/CSS Co s načatou nedělí Pochopíme k čemu slouží HTML a CSS Naučíme se pár nových slovíček Vytvoříme webovou stránku v HTML Dáme jídlo Pomocí CSS dodáme stránce
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
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
Úvod do jazyka HTML (Hypertext Markup Language)
Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření
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
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
CSS Kaskádní styly. Založeno na přednášce Lukáše Bařinky
CSS Kaskádní styly Založeno na přednášce Lukáše Bařinky Obsah Základní principy Syntaxe Selektory Dědičnost Formátovací model Generovaný obsah Média, UI Co se nevešlo... Základní principy Dopřená i zpětná
1. Přímo vložený styl
CSS 1. Přímo vložený styl 2. Šablona stylu v dokumentu 3. Externí šablony stylů 4. Syntaxe stylů 5. Třídy stylů 6. Vlastnosti písma 7. Vlastnosti barvy a pozadí 8. Vlastnosti textu 9. Vlastnosti obdelníku
Káskádové styly = CSS
1/31 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í CSS lze nadefinovat společný
<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
mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění
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é
INTERSTENO 2015 Budapest World championship professional Word Processing
OPERAČNÍ SYSTÉM WORD PROCESSING SOFTWARE (TEXTOVÝ PROCESOR) ID SOUTĚŽÍCÍHO Úloha A-1 Instrukce pro účastníky Otevřete dokument YEAROFLIGHT, ihned ho uložte/převeďte do YEAROFLIGHTXXX.DOC NEBO DOCX, kde
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)
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
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í
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)
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
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
Základy HTML. Autor: Palito
Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení
Tvorba webových stránek
Tvorba webových stránek Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok
(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
Rozvržení stránky. Co se v modulu dozvíte? Pozicování
Rozvržení stránky Co se v modulu dozvíte? jakým způsobem je možné uspořádat prvky na stránce jak lze prvky překrývat jak fungují plovoucí prvky Pozicování Pro rozmístění prvků na stránce je možné použít
Zobrazování bannerů podporují pouze nově vytvořené šablony motivů vzhledu.
Bannerový systém ProEshop od verze 1.13 umožňuje zobrazování bannerů na popředí e-shopu. Bannerový systém je přístupný v administraci e-shopu v nabídce Vzhled, texty Bannerový systém v případě, že aktivní
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 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).
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,...
Styl textu CSS 1 Volba písmap 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,... Styl textu CSS 2 Volba písmap Serifs mají 3 základní
INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu
POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro účastníky Otevřete dokument TRANSPORT.DOC, ihned uložte jako TRANSPORTXXX.DOCneboDOCX,kde XXX je Vašesoutěžní
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
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
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
Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: 3. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.
Webové stránky 5. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 3. 10. 2012 Webové Strana: 1/11 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM
Č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
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
Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>
Tabulky Přehled tagů z oblasti tabulek Tag Význam Párový Výskyt table tabulka ano tr řádek tabulky nepovinně , , , td buňka tabulky nepovinně th hlavičková buňka tabulky
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
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
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
DESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA:
1 DESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA: Obsah CSS... 1 VKLÁDÁNÍ CSS DO HTML DOKUMENTU + MEDIA... 1 ADRESOVÁNÍ ČÁSTÍ HTML POMOCÍ SELEKTORŮ A JEJICH PRIORITA... 2 RESETOVÁNÍ CSS... 3 BARVY... 3 STYLOVÁNÍ
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
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
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í
CSS. Internetové publikování
CSS Internetové publikování 1 Problémy Spousta zbytečného kódu Omezená podpora minoritních platforem, počítačů Přemíra grafiky dlouhá doba načítání Závislost na rozlišení Obtížná údržba dokumentů Drobné
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
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í
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
KAPITOLA 5. Základní stylování seznamů
KAPITOLA 5 Stylování seznamů a vytváření navigačních lišt Je naší přirozeností dávat světu kolem nás nějaký řád. Vědci vytváří seznamy zvířat, rostlin a chemických prvků. V časopisech jsou seznamy deseti
Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585
Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace
Ú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.
Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce
Styly odstavců V textu, který přesahuje několik stránek a je nějakým způsobem strukturovaný (což znamená, že se dá rozdělit na části (v knize jim říkáme kapitoly) a jejich podřízené části (podkapitoly),
KASKÁDOVÉ STYLY - PÍSMO
KASKÁDOVÉ STYLY - PÍSMO Název školy Obchodní akademie, Vyšší odborná škola a Jazyková škola s právem státní jazykové zkoušky Uherské Hradiště Název DUMu Kaskádové styly písmo Autor Zdeněk Hrdina Datum
Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se.
Úvod do tvorby www stránek Tvorba www 3 Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. Odkaz (hyperlink)
Tvorba fotogalerie v HTML str.1
Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné
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.....................
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
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
INTERSTENO 2017 Berlin World championship professional Word Processing
OPERAČNÍ SYSTÉM SOFTWARE POUŽITÝ PRO WORD PROCESSING ID SOUTĚŽÍCÍHO A-1 A Instrukce pro soutěžící Otevřete si připravený soubor TOURISM, uložte/převeďte jej ihned na TOURISMXXX.DOC NEBO DOCX, přičemž XXX
Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_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_92_IVT_HTML_12_nase_www Ing. Pavel BOHANES
Child selektory. Adjacent sibling selektory. Pseudoelementy. Atributové selektory. Tabulky. Obtékané elementy. »!!!
CSS 3. část Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Vztahy mezi elementy Vztahy mezi elementy» Parent» An element A is called
Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014
Tvorba webových stránek pomocí HTML kódu v příkladech podpůrný text pro výuku M. Seménka, 2014 na příkladech se studenti seznámí se základními postupy tvorby www stránek Příklady je třeba důkladně prostudovat
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í
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
Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného
Š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
SkautIS Remote Components absolventská práce
MUŠKA Moravská úřednická škola SkautIS Remote Components absolventská práce Martin Jašek Jedlík středisko Prof. Skoumala Přerov MUŠKA 2010/11 Obsah Úvod... 3 1. Seznámení se SkautIS komponentami... 3 1.1.
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
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
Přehled vlastností stylů
Přehled stylů Styly jsou ds jefektivnějším způsobem, jak ovládat grafický vzhled strák. Definují přes padesát, které slouží k vizuálních atributů elementů. V následujících tematicky rozčleněných tabulkách
Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS
Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr
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
Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017.
Beamer - Elektronické publikování - VŠB - TUO 23. dubna 2009 Obsah 1 2 3 4 5 6 Obsah 1 2 3 4 5 6 schémata barvy písma změna fontu vnitřní schémata vnější schémata Obsah Prezentace bez navigace e stromovou
.rohy-kulate { width: 250px; background: url(obr/rohy-spodni.gif) bottom no-repeat; border-top: 2px solid #AAA; }
246 Jak na dva kulaté rohy bloku s pevnou šířkou začátečník Chcete na svoje stránky umístit blok s rámečkem, jehož dva horní či dva spodní rohy budou kulaté a zbylé dva hranaté? Jestliže má váš blok neměnnou
52 nd INTERSTENO congress Cagliari, July 2019
www.intersteno.org www.intersteno2019.org 52 nd INTERSTENO congress Cagliari, 13-19 July 2019 OPERAČNÍ SYSTÉM SOFTWARE POUŽITÝ PRO WORD PROCESSING SOUTĚŽNÍ ID A-1 A Instrukce pro soutěžící Otevřete si
. Grafika a plovoucí prostředí. Zpracování textů na počítači. Ing. Pavel Haluza, Ph.D. ústav informatiky PEF MENDELU v Brně haluza@mendelu.
Grafika a plovoucí prostředí Zpracování textů na počítači Ing Pavel Haluza, PhD ústav informatiky PEF MENDELU v Brně haluza@mendelucz Kreslení vektorových obrazů Příklad \unitlength=1mm \begin{picture}(50,30)(10,20)
Kapitola 5 Tvoříme tabulky
Kapitola 5 Tvoříme tabulky 5 V předchozích kapitolách jsme získali potřebný základ k tomu, abychom mohli úspěšně tvořit části i celé WWW stránky. Pojďme si tedy na chvíli oddechnout. Podíváme se na projekt
Obsah: 1. Vytváření upravitelného textu 2. Výběr textu 3. Úpravy stylu textu 4. Odstavec 5. Rastrování textu
Obsah: 1. Vytváření upravitelného textu 2. Výběr textu 3. Úpravy stylu textu 4. Odstavec 5. Rastrování textu V této kapitole se naučíme pracovat s textem vodorovným, svislým, naučíme se text transformovat,
6. Formátování: Formátování odstavce
6. Formátování: Formátování odstavce Obrázek 1: Formát / Odstavec Odstavec je text mezi dvěma znaky konce odstavce. Konec odstavce je skrytý znak a vkládáme jej během psaní při každém stisknutí klávesy