…

…

… ........................................................................................................ 7 … .............................................................................................................................. 7 ZNAČKY PRO SEZNAMY .............................................................................................................................. 7

…

....................................................................................................................................... 7

…

....................................................................................................................................... 7

…

.......................................................................................................................................... 8 ZNAČKY PRO TABULKY ............................................................................................................................... 8 … ............................................................................................................................. 8 …........................................................................................................................... 8 … ........................................................................................................................... 8 … ........................................................................................................................................ 8 …....................................................................................................................................... 9 …....................................................................................................................................... 9 … ..................................................................................................................... 9 ...................................................................................................................................... 9 ZNAČKY PRO FORMULÁŘE .......................................................................................................................... 9

…

.............................................................................................................................. 9 <select>… ......................................................................................................................... 10 … ................................................................................................................ 11 … ..................................................................................................................... 11

… ................................................................................................................... 11

…

...................................................................................................................... 11 ZNAČKY PRO OHRANIČOVÁNÍ .................................................................................................................... 11

…

.................................................................................................................................. 11 <span>… ............................................................................................................................ 11

---

................................................................................................................................................ 11 <iframe>… ...................................................................................................................... 12 ....................................................................................................................... 12 ZNAČKY DO ............................................................................................................................... 12 ............................................................................................................................... 12 .............................................................................................................................................. 12 HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

1

<meta> ........................................................................................................................................... 12 ............................................................................................................................................ 13 <script>….......................................................................................................................... 13 CSS............................................................................................................................................. 14 CO JE TO CSS......................................................................................................................................... 14 Druhy selektorů ............................................................................................................................. 15 Pseudotřídy – nejpoužívanější z nich ............................................................................................ 15 Dědičnost, kaskádovost a specifičnost .......................................................................................... 15 HODNOTY POUŽÍVANÉ V CSS ................................................................................................................... 17 STYLOVÁNÍ PÍSMA ................................................................................................................................... 18 font-family ...................................................................................................................................... 18 font-size .......................................................................................................................................... 18 font-style ........................................................................................................................................ 18 font-variant .................................................................................................................................... 18 font-weight..................................................................................................................................... 19 font ................................................................................................................................................. 19 color................................................................................................................................................ 19 line-height ...................................................................................................................................... 19 letter-spacing ................................................................................................................................. 19 word-spacing .................................................................................................................................. 19 text-align ........................................................................................................................................ 19 text-decoration............................................................................................................................... 19 text-overflow .................................................................................................................................. 20 vertical-align .................................................................................................................................. 20 STYLOVÁNÍ SEZNAMŮ A ODKAZŮ ............................................................................................................... 20 list-style-type .................................................................................................................................. 20 list-style-position ............................................................................................................................ 20 list-style-image ............................................................................................................................... 20 list-style .......................................................................................................................................... 20 cursor.............................................................................................................................................. 21 VZHLED POZADÍ ...................................................................................................................................... 21 background-color ........................................................................................................................... 21 background-image ......................................................................................................................... 21 background-position ...................................................................................................................... 21 background-repeat......................................................................................................................... 21 background-attachement .............................................................................................................. 21 background .................................................................................................................................... 22 opacity ............................................................................................................................................ 22 STYLOVÁNÍ BOXŮ.................................................................................................................................... 22 width .............................................................................................................................................. 22 min-width ....................................................................................................................................... 22 max-width ...................................................................................................................................... 22 height ............................................................................................................................................. 22 min-height ...................................................................................................................................... 22 max-height ..................................................................................................................................... 22 margin ............................................................................................................................................ 23 padding .......................................................................................................................................... 23 HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

2

border-width .................................................................................................................................. 23 border-style .................................................................................................................................... 23 border-color.................................................................................................................................... 24 border ............................................................................................................................................. 24 border-radius.................................................................................................................................. 24 overflow ......................................................................................................................................... 24 display ............................................................................................................................................ 24 visibility........................................................................................................................................... 24 VZHLED TABULEK .................................................................................................................................... 25 border-spacing ............................................................................................................................... 25 empty-cells ..................................................................................................................................... 25 table-layout .................................................................................................................................... 25 caption-side .................................................................................................................................... 25 POZICOVÁNÍ – LAYOUT ............................................................................................................................ 25 float ................................................................................................................................................ 25 clear ................................................................................................................................................ 26 position ........................................................................................................................................... 26 z-index ............................................................................................................................................ 26

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

3

HTML Struktura dokumentu webové stránky Dokument webové stránky se skládá z následujících stavebních bloků: 1. Deklarace – podle jakého standardu je dokument napsán, aby prohlížeč věděl jak jej interpretovat (rozuměj, jak jej zobrazit). Nejmodernější deklarací je HTML5 – Starší deklarací je XHTML 1.1. – Poz.: XHTML je v porovnání s HTML přísnější, dovoluje značky pouze malým písmem a nepárové značky se musejí ukončovat lomítkem ve značce. 2. HTML dokumentu, začíná značkou a končí . Dále dělí na: a. Hlavička HTML obsahuje doprovodné informace týkající se stránky samotné, ale i odkazy na externí soubory. Umí toho však více, např. přesměrovat uživatele na jinou stránku. Hlavička začíná a končí b. Tělo HTML je určeno pro samotný obsah stránky, který se zobrazuje návštěvníkovi Ukázka struktury dokumentu: ... ...

Co je to HTML HTML je značkovací jazyk sloužící jako nosná kostra webové stránky, mající za úkol přenášet obsah stránek a odkazovat na jiné části stránky jako jsou externí CSS styly, externí JavaScriptové soubory a knihovny, flashové soubory apod. Existují dva druhy HTML značek. Párové značky ohraničují nějaký obsah a skládají se 1. z otevírací značky, která může obsahovat i nějaké atributy (rozuměj, doprovodné informace), ukázka značky otevírající odstavec:

a 2. z uzavírací značky, jež má v sobě lomítko, ukázka

. Nepárové značky se používají v těch případech, kdy neohraničují žádný obsah. Jako příklad lze uvést značku
, která má za úkol zalomit text, a tudíž logicky nic ohraničuje. HTML značky se v praxi do sebe vnořují a tím mezi sebou vytvářejí vztahy. Vnořená značka se stává potomkem předka, tedy značky, do které je vnořena. Ukázka předka a potomka:

href="stranka.html"> …

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

4

Každou HTML značku můžete pojmenovat tak, aby se na ni dal použít styl CSS nebo aplikovat pravidla JavaScriptu. Pojmenovávají se dvěma způsoby: 1. Identifikátorem id="text" identifikátor stejného jména může být použit jen jednou v jednom dokumentu 2. Třídou class="text" jeden název třídy lze opakovaně používat v jednom dokumentu Název identifikátoru a třídy nesmí začínat číslicí a nesmí obsahovat mezeru. Na jednu značku může být současně použit jeden identifikátor a neomezené množství tříd. Ukázka označení značky:

...

Poz.: HTML zná jen jednu mezeru. Pokud při zápisu v HTML kódu uděláte více mezer, tak zobrazena bude pouze jedna. Pokud vytvoříte nový řádek kliknutím na ENTER, tak to se nezobrazí vůbec.

Jak se nazývají části kódu HTML

Značky pro texty, obrázky a odkazy Nenajdete zde všechny značky a všechny jejich atributy, ale hlavně ty nejčastěji používané. Úmyslně jsou vynechány zastaralé značky a atributy. Všechny značky mohou mít atribut id a class.

…

Označuje začátek a konec odstavce textu. Může mít následující potomky (obklopovat je) , ,
, <strong>, , , ,

, Ukázka:

Obsah odstavce...

Značka, která označuje místo, na kterém má být zalomen obsah na nový řádek. Ukázka:

Obsah odstavce
text na novém řádku

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

5

… Slouží pro ohraničení odkazu, nebo vytvoření kotvy. Měl by být uvnitř jiné obsahové značky (tedy potomkem) např. odstavce

, který by se stal jeho rodičem. Ukázka odkazu: Odkaz Ukázka označení místa kotvy: 

 



href="URL" – slouží k zadání URL adresy. Povinné! Ukázka absolutní URL: ... ukázka relativní URL: ... title="text" – může sloužit k zadání titulku, který se bude zobrazovat nad odkazem v případě, že na něm bude kurzor myši name="text" – se používá k označení a pojmenování místa v HTML dokumentu, na které bude směřovat odkaz s kotvou ve tvaru #nazev-kotvy. V názvu nesmějí být mezery a nepoužívejte ani diakritiku. target="hodnota" – jedná se o zastaralý atribut, ale stále používaný. Specifikuje to, v jakém okně se odkaz zobrazí: target="_blanc" – otevře se v novém okně / záložce

Značka pro vložení obrázku. Ukázka odkazu:     

src="URL" – označuje cestu k místu, na kterém je obrázek uložen. Povinné! alt="text" – má obsahovat alternativní text, který by se zobrazil v případě, že se nezobrazí obrázek, ať z důvodu závady, nebo pro nevidomé a roboty vyhledávačů. Povinné! title="text" – zobrazí se návštěvníkovi, když ukáže kurzorem myši na obrázek. widht="číslovka" – určí šířku zobrazovaného obrázku. Pozor, nejedná se o zmenšení velikosti obrázku, pouze o rozměr jeho zobrazení. height="číslovka" – určí výšku zobrazovaného obrázku.

…

Značka označující nadpis. Nadpisy mají max. šest úrovní. Nadpis

smí být použit pouze jednou v dokumentu. Ostatní úrovně lze používat neomezeně, ale pouze v sestupném pořadí vůči dokumentu. Ukázka správného řazení nadpisů:

Nadpis první úrovně

Nadpis druhé úrovně

Nadpis třetí úrovně

Nadpis čtvrté úrovně

Znovu nadpis druhé úrovně

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

6

<strong>… Značka, označující slovo, nebo více slov, která mají být důležitější, než ostatní. Tuto značku prohlížeče obvykle zobrazí tučným písmem, ale to lze pochopitelně změnit v CSS. Obdobou je značka , která však znamená pouze tučné, ale ne důležité. Ukázka:

Obsah odstavce <strong>důležité ...

… Ohraničuje citaci. Pozor, zde dochází k zásadnímu rozdílu mezi HTML 4.01, ve které se tak označuje celý citovaný obsah, kdežto v HTML 5 se touto značkou označuje pouze název díla. Prohlížeče takto označený text zobrazí kurzívou, pokud CSS nestanoví jinak.

… Používá se také k citaci, avšak jako velký blok, který v sobě může obsahovat značky jako je

,

… 

cite="URL" – označuje URL adresu, ze které je citováno

… Používá se k ohraničení části, která obsahuje kód. Prohlížeč takovou část obvykle zobrazí neproporcionálním písmen většinou „Courier“, nezmění-li to CSS.

Značky pro seznamy Uspořádané a neuspořádané seznamy se používají buď k původnímu účelu, tedy jako seznamy, avšak na webech se běžně užívají i k tvorbě menu, jelikož menu jsou ve své podstatě seznamy odkazů. Seznamy lze do sebe libovolně vnořovat. Ukázka použití seznamů:

1. První položka uspořádaného seznamu
2. Druhá položka uspořádaného seznamu
   • Položka vnořeného neuspořádaného seznamu

…

Značka určená pro ohraničení začátku a konce neuspořádaného seznamu. Neuspořádaný seznam znamená, že nezáleží na pořadí položek. Grafické provedení lze nastavit v CSS, byť existují atributy, kterými se dá omezeně nastavit vzhled přímo v HTML, ale je to zastaralá technika a nedoporučuje se.

…

Značka určená pro ohraničení začátku a konce uspořádaného seznamu. Uspořádaný seznam znamená, že záleží na pořadí položek. Značení je možné: 1, A, a, I

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

7

…

Značka určená pro ohraničení začátku a konce položky uspořádaného i neuspořádaného seznamu.

Značky pro tabulky Ukázka tabulky:

Záhlaví prvního sloupce na prvním řádku	Záhlaví druhého sloupce na prvním řádku
První sloupec na druhém řádku	Druhý sloupec na druhém řádku
Sloučení dvou sloupců na třetím ř.

… Značka určená pro ohraničení začátku a konce tabulky. Dávejte veliký pozor na ukončovací značku, protože její opomenutí může způsobovat značné problémy.    

border="číslice" – určuje počet pixelů, které budou tvořit rámeček každé buňky tabulky. Prohlížeče je většinou sami nastavují na 1px, pokud není border určen webdesignerem. width="číslice" – určuje minimální šířku celé tabulky. Pokud určena není, tak se přizpůsobuje obsahu tabulky. cellpadding="číslice" – definuje vnitřní okraj jednotlivých buněk tabulky, tedy vzdálenost obsahu od rámečku. Prohlížeče jej většinou nastavují sami na 1px, není li definován. cellspacing="číslice" – určuje vnější okraj buněk tabulky, čímž vytváří vzdálenost rámečků sousedních buněk. Prohlížeče jej většinou nastavují sami na 2px, není li definován.

… Ohraničí nadpis tabulky. Musí být vnořen do .

… Ohraničí tělo tabulky. Musí být vnořen do .

… Určuje řádek tabulky. Je vždy vnořen do a do něj jsou vnořeny značky Určuje buňku tabulky. Je vždy vnořen do . Nemá-li buňka definovánu šířku, tak se přizpůsobuje obsahu, ale podle nejdelšího obsahu v příslušném sloupci.  

clospan="číslice" – slouží ke sloučení buňky do více sousedních buněk sloupců. Číslicí se určuje počet sloupců, se kterými se sloučí. rowspan="číslice" – slouží k přesahu buňky do sousedních řádků. Číslicí se určuje počet řádků, do kterých bude přesahovat.

Určuje buňku tabulky, která slouží jako hlavička sloupce, nebo řádku. Je vždy vnořen do . Nemá-li buňka definovánu šířku, tak se přizpůsobuje obsahu podle nejdelšího obsahu v jejím sloupci.  

clospan="číslice" – slouží ke sloučení buňky do více sousedních buněk sloupců. Číslicí se určuje počet sloupců, se kterými se sloučí. rowspan="číslice" – slouží k přesahu buňky do sousedních řádků. Číslicí se určuje počet řádků, do kterých bude přesahovat.

Může být použit pro titulek tabulky. Umisťuje se hned za značku

…

, nebo	. Dříve používal atributy na vzhled, ale ty jsou dnes zastaralé. Doporučuji stylovat pomocí CSS. HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout 8	…
…

.

Někdy užitečná značka, která sdruží jeden, nebo více sloupců a usnadňuje tak jejich stylování. span="číslice" – číslicí se určuje počet sousedících sloupců, které se sdružují.

Značky pro formuláře Ukázka formuláře:

Jméno: Ano: Ne:

… Tato značka ohraničuje začátek a konec formuláře, který bude v jeden okamžik odeslán. Má dva povinné atributy, a sice action a method.  

action="URL" – tento atribut předává cestu k souboru, který formulář po odeslání zpracuje. method="hodnota" – určuje metodu, která bude použita k odeslání formuláře. Existují: o "get" – obsah se ukládá a přenáší prostřednictvím URL adresy, a to tak, že se do URL zapíše za znak otazníku „?“. Výhodou této metody je to, že ji lze kopírovat spolu s URL, nevýhodou je bezpečnostní riziko způsobené viditelností a omezený počet znaků k přenosu. Používá se např. pro vyhledávání. o "post" – obsah se ukládá a přenáší pomocí tzv. metaproměnné a není vidět v URL. Výhodou je možnost přenášet větší objem dat a díky tomu, že není vidět v URL je to

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

9

bezpečnější. Nevýhodou je nemožnost odkazování pomocí URL a problémy s vracením se o stránku zpět. Používá se pro přenos rozsáhlejších dat a hesel. Asi nejčastěji používaná značka ve formulářích, protože toho umí opravdu hodně. Znamená vstupní pole a má více typů. Tyto atributy jsou povinné: name a type.  

    

name="text" – zde uvedené klíčové slovo bude připojeno k odeslaným datům, aby jej bylo možné identifikovat na straně příjemce formuláře. type="hodnota" – určuje, o jaký druh vstupního pole se jedná. Níže naleznete soupis typů: o "text" – obyčejné textové pole. o "password" – textové pole, které vložená písmena zobrazuje jako tečky z důvodu bezpečnosti. o "checkbox" – zobrazí zaškrtávací pole, ve kterých můžete zaškrtnout neomezené množství polí. o "radio" – také zaškrtávací pole, ale můžete zvolit jen jednu z možností. o "file" – tlačítko otevírající dialogové okno určené pro výběr souboru určeného k odeslání. o "hidden" – skryté pole se používá pro přenesení informace, kterou uživatel nezadává. o "submit" – slouží jako tlačítko pro odeslání formuláře. o "reset" – slouží jako tlačítko pro smazání obsahu formuláře. o "image" – používá se také jako tlačítko pro odesílání formuláře, rozdíl je v tom, že sleduje souřadnice místa, kam uživatel klikl. Je to tedy obdoba obrázkové mapy. o "button" – opět tlačítko, ale neodešle formulář automaticky, nýbrž může být spojeno se skriptem, který formulář zkontroluje a pak teprve odešle. o "email" – totéž, co text, ale pokud mu přidáte atribut required, pak prohlížeč sám ještě před odesláním provede ověření, že vložený obsah má tvar e-mailu. Platí jen pro HTML5. o "date" – prohlížeč umožní návštěvníkovi zobrazit kalendář pro vložení data. Platí jen pro HTML5. size="číslice" – udává velikost zobrazeného pole. maxlength="číslice" – povoluje maximální počet znaků zapsaných do pole. value="text" – umožní vložit předefinovanou hodnotu. Hodí se např. u jazykových mutací. accept="type" – používá se jen v případě type="file" a určuje povolené přípony souborů. Jednotlivé přípony se oddělují čárkou. accesskey="znak" – přiřadí vstupnímu poli klávesovou zkratku, kterou lze použít s kl. Alt (CMD u MAC).

<select>… Pole formuláře, které umožní návštěvníkovi vybrat z předdefinovaných možností. Používané atributy: name="text" – zde uvedené klíčové slovo bude připojeno k odeslaným datům, aby jej bylo možné identifikovat na straně příjemce formuláře. size="číslice" – udává velikost pole. Pokud je hodnota 1, tak se zobrazí jeden řádek s roletkou, ve které budou nabízené možnosti k výběru. V případě vyšší hodnoty než 1, zobrazí se větší pole s postníkem. multiple – umožní návštěvníkovi vybrat více, jak jednu možnost z výběru, a to za pomoci tlačítka Ctrl.

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

10

… Používá se jako velké vstupní textové pole s více řádky. Jeho atributy: name="text" – zde uvedené klíčové slovo bude připojeno k odeslaným datům, aby jej bylo možné identifikovat na straně příjemce formuláře.   

rows="číslovka" – určuje výšku vstupního pole. Číslovka určuje počet zobrazených řádků. Pokud obsah překročí daný počet řádků, tak se vpravo objeví posuvník. cols="číslovka" – určuje šířku vstupního pole. Číslovka určuje počet viditelných znaků na řádku. Nemá vliv na odesílaná data. accesskey="znak" – přiřadí vstupnímu poli klávesovou zkratku, kterou lze použít s kl. Alt (CMD u MAC)

… Tlačítko používané pro spouštění skriptů.   

name="text" – zde uvedené klíčové slovo bude připojeno k odeslaným datům, aby jej bylo možné identifikovat na straně příjemce formuláře. value="text" – Text, který se vypíše na tlačítku accesskey="znak" – přiřadí vstupnímu poli klávesovou zkratku, kterou lze použít s kl. Alt (CMD u MAC).

… Jedná se o alternativní značku, kterou můžete ohraničit formulářové prvky, které spolu souvisí. Nemusíte ji však použít vůbec.

…

Pokud použijete

, tak pomocí této značky můžete vložit nějaký nadpis.

Značky pro ohraničování

…

Značka, která nemá konkrétní význam a používá se jen pro ohraničení bloků HTML kódu. Přirozeně se jí přiřazují id="" a class="", aby se s ní dalo pracovat v CSS a JavaScriptu.

<span>… Také nemá konkrétní význam a slouží k ohraničení liniových prvků, jako je část textu. Ukázka:

Obsah odstavce <span>označený text ...

---

Značka, která od sebe odděluje různá témata obsahu. Pokud není nijak vystylována, tak ji prohlížeče vykreslují jako vodorovnou šedivou čáru.

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

11

<iframe>… Vytváří blok o definovaných rozměrech, ve kterém je možné zobrazit libovolný kus dokumentu z jiné stránky. Pozor! Pro vyhledávače je to jakoby prázdné místo.   

src="URL" – odkaz na dokument, který má být zobrazen. width="číslice" – udává šířku prostoru. height="číslice" – udává výšku prostoru.

Značka slouží pro vložení různých objektů, jako např. flash. Může být doplněna o značky param, které poslouží k doplňujícím informacím daného objektu. Mezi značky by měl být umístěn alternativní obsah (např. obrázek), který se zobrazí v případě nezobrazení obsahu objektu.     

data="URL" – odkaz na soubor, který má být zobrazen. codetype="specifikace" – informuje prohlížeč o druhu objektu. width="číslice" – udává šířku objektu. height="číslice" – udává výšku objektu. name="text" –identifikuje objekt pro odkazy a skripty.

Značky do Titulek je takový hlavní nadpis celé stránky, který se zobrazí v záhlaví prohlížeče, je použit jako návrh na název záložky a hlavně z něj čerpají klíčová slova vyhledávače, jako jsou Google a Seznam. Neměl by být příliš dlouhý a obsahovat nic neříkající slova. Délka cca od 15 do 60 znaků.

Odkazuje na externí soubory v drtivé většině na externí CSS.   

href="URL" – odkaz na externí soubor. rel="vztah" – definuje vztah mezi HTML dokumentem a externím souborem. V případě CSS se používá "stylesheet" type="specifikace" – informuje o obsahovém typu. Např.: "text/css"

<meta> 



name="specifikace" – určení o jaký druh metaznačky se jedná. o "description" – popis stánky, který doplňuje titulek. Nezobrazuje se sice nikde na stránce, ale slouží vyhledávačům pro zobrazení ve výsledcích vyhledávání. Měl by obsahovat cca od 100 do 155 znaků. o "keywords" – určen pro definování klíčových slov stránky. Google a Seznam je však ignorují vzhledem k častému zneužívání. Na stránce se nikde nezobrazuje. o "robots" – informuje roboty vyhledávačů (Seznam, Google…) zda mohou indexovat a následovat odkazy (content="index, follow") , či nikoli (content="noindex, nofollow") o " author" – můžete určit autora obsahu http-equiv="specifikace" – používá se na místo name o "content-type" – užívá se převážně pro znakovou sadu stránky, např.: <meta http-equiv="content-type" content="text/html; charset=utf-8"> HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

12

o



"Refresh " – zařídí přesměrování stránky na jinou URL <meta http-equiv="Refresh" content="2; URL=http://helpmark.cz"> content="text" – obsah meteznačky v závislosti na použití name nebo http-equiv.

Značka určující základní URL adresu dokumentu, vůči které jsou ve stránce uvedeny relativní URL.

<script>… Slouží pro ohraničení skriptovacího kódu, převážně JavaScriptu. Nemusí být nutně v záhlaví dokumentu, ale i . Může také obsahovat jen odkaz na externí soubor.  

type="specifikace" – identifikuje typ použitého jazyka (např.:"text/javascript"). src="URL" – odkaz na externí soubor skriptu.

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

13

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 tkz. in-line styl:

Červené písmo ...

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:

...

Ukázka CSS kódu: .cervena { color:red;... } Jak se nazývají části kódu CSS

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

14

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ř.: #nazev-identifikatoru 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

Pseudotřídy – nejpoužívanější z nich :hover Dynamická pseudotřída, která ovlivňuje elementy, na nichž je zrovna kurzor myši. :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-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í…

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 (odkazy), ale pouze v tom případě, že se budou nacházet ve značce

(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ě.

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

15

Příklad selektoru přímého potomka: li > a { ... } Vysvětlení přikladu: vztahuje se pouze na případ, kdy je přímím potomkem

. Pokud by bylo vnořeno hlouběji, (např. ještě v

)tak se tato pravidla již nevztahují. Příklad selektoru sousedícího sourozence: h1 + p { ... } Vysvětlení přikladu: vztahuje se pouze na

, které přímo sousedí s

. Na všechny ostatní

v dokumentu se nevztahuje. Příklad selektoru obecného sourozence: h2 ~ p { ... } Vysvětlení přikladu: vztahuje se na všechna

, která mají sourozenecký vztah s

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



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)

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

16

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.

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

17

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; Verze CSS 1 a vyšší, dědičnost: ano Druhy fontů se dají do počítače návštěvníka nahrát. Jednou z metod je import z Google fonts: @import url(cesta) Další možností je nahrání pomocí: @font-face { font-family: jmenofontu; src: url("souborFontu.ttf"); }

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. Verze CSS 1 a vyšší, dědičnost: ano

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. Verze CSS 1 a vyšší, dědičnost: ano

font-variant Varianta použitého písma vyhrazenými slovy: normal = normální písmo; small-caps = kapitálky; inherit = zdědí se. Verze CSS 1 a vyšší, dědičnost: ano

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

18

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. Verze CSS 1 a vyšší, dědičnost: ano

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. Verze CSS 1 a vyšší, dědičnost: ano

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. Verze CSS 1 a vyšší, dědičnost: ano

letter-spacing Velikost mezer mezi písmeny. Určuje se jednotkami délky, nebo normal = velikost se nemění. Verze CSS 1 a vyšší, dědičnost: ano

word-spacing Velikost mezer mezi slovy. Určuje se jednotkami délky. Verze CSS 1 a vyšší, dědičnost: ano

text-align Horizontální zarovnání textu. Určuje se vyhrazenými slovy: left = vlevo; right = vpravo; center = na střed; justify = do bloku. Verze CSS 1 a vyšší, dědičnost: ano

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. Verze CSS 1 a vyšší, dědičnost: ne

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

19

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. Verze CSS 1 a vyšší, dědičnost: ne

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

. Verze CSS 1 a vyšší, dědičnost: ano

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. Verze CSS 1 a vyšší, dědičnost: ano

list-style-image Obrázek na místo předdefinovaných typů. Hodnota: url()= cesta k danému obrázku Verze CSS 1 a vyšší, dědičnost: ano

list-style Souhrnný zápis hodnot: type position image Ukázka: list-style: circle outside; Verze CSS 1 a vyšší, dědičnost: ano

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

20

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

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í. Verze CSS 1 a vyšší, dědičnost: ne

background-image Obrázek zobrazovaný na pozadí. Určuje se pomocí URL: url()= cesta k danému obrázku Verze CSS 1 a vyšší, dědičnost: ne

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; Verze CSS 1 a vyšší, dědičnost: ne

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; no-repeat = neopakuje se; inherit = zdědí se od nadřazeného elementu. Verze CSS 1 a vyšší, dědičnost: ne

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. Verze CSS 1 a vyšší, dědičnost: ne

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

21

background Souhrnný zápis hodnot: color image position repeat attachement Ukázka: list-style: circle outside; Verze CSS 1 a vyšší, dědičnost: ne

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

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. Verze CSS 1 a vyšší, dědičnost: ne

min-width Minimální šířka elementu. Určuje se jednotkami délky, nebo procenty. Verze CSS 1 a vyšší, dědičnost: ne

max-width Maximální šířka elementu. Určuje se jednotkami délky, nebo procenty. Verze CSS 1 a vyšší, dědičnost: ne

height Přesná výška elementu. Určuje se jednotkami délky, procenty nebo vyhrazeným slovem: auto = šířka se přizpůsobí obsahu. Verze CSS 1 a vyšší, dědičnost: ne

min-height Minimální výška elementu. Určuje se jednotkami délky, nebo procenty. Verze CSS 1 a vyšší, dědičnost: ne

max-height Maximální výška elementu. Určuje se jednotkami délky, nebo procenty. Verze CSS 1 a vyšší, dědičnost: ne

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

22

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: … Verze CSS 1 a vyšší, dědičnost: ne

padding

vnější okraj okolo elementu margin

Vnitřní odsazení od okraje elementu. V této oblasti se bude zobrazovat background. Určuje se jednotkami délky, nebo procenty.

rámeček okolo elementu border vnitřní odsazení od okraje elementu padding obsah elementu width a height

Syntax zápisu je stejná jako u margin. Lze také zapisovat jako paddig-left: … Verze CSS 1 a vyšší, dědičnost: ne

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. Syntax zápisu je stejná jako u margin. Lze také zapisovat jako border-top-width: … Verze CSS 1 a vyšší, dědičnost: ne

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: … Verze CSS 1 a vyšší, dědičnost: ne

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

23

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í. Verze CSS 1 a vyšší, dědičnost: ne

border Souhrnný zápis hodnot: width style color Ukázka: border: 1px solid #FF0000; Verze CSS 1 a vyšší, dědičnost: ne

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í Lze také zapisovat jako border-top-right-radius: … 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. Lze také zapisovat jako overflow-x a overflow-y. Verze CSS 2 a vyšší, dědičnost: ne

display Způsob zobrazení elementu. Určuje se vyhrazenými slovy: inline = řádkový; block = blokový; list-item = položka seznamu; none = nezobrazí se, ani nebude zabírat žádné místo; list-item = chování seznamu; table-cell = chování jako buňka tabulky; atd… Každý element má své přirozené display. Např. odstavec

má display: block, text uvnitř odstavce má display: inline. Verze CSS 1 a vyšší, dědičnost: ne

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

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

24

Vzhled tabulek 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

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. Verze CSS 1 a vyšší, dědičnost: ne

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. Verze CSS 1 a vyšší, dědičnost: ano

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. Verze CSS 1 a vyšší, dědičnost: ne Nadřazený element např.

width:800px; padding: 30px 10px float: left; width: 45%;

float: right; width: 45%;

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

25

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. Verze CSS 1 a vyšší, dědičnost: ne

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

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

HelpMark www.helpmark.cz |email: [email protected] | tel.: 739 719 548 © 2015 Tomáš Herout

26

×

Report "Skripta ke školení. Základy HTML a CSS. vypracoval: Tomáš Herout. tel:"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close