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

Skripta ke školení Základy HTML a CSS vypracoval: Tomáš Herout e-mail: herout@helpmark.cz tel: 739 719 548 2015

Obsah HTML... 4 STRUKTURA DOKUMENTU WEBOVÉ STRÁNKY... 4 CO JE TO HTML... 4 Jak se nazývají části kódu HTML... 5 ZNAČKY PRO TEXTY, OBRÁZKY A ODKAZY... 5 <p> </p>... 5 <br>... 5 <a> </a>... 6 <img>... 6 <h1> </h1>... 6 <strong> </strong>... 7 <cite> </cite>... 7 <blockquote> </ blockquote >... 7 <code> </code>... 7 ZNAČKY PRO SEZNAMY... 7 <ul> </ul>... 7 <ol> </ol>... 7 <li> </li>... 8 ZNAČKY PRO TABULKY... 8 <table> </table>... 8 <thead> </thead>... 8 <tbody> </tbody>... 8 <tr> </tr>... 8 <td> </td>... 9 <th> </th>... 9 <caption> </caption>... 9 <colgroupe>... 9 ZNAČKY PRO FORMULÁŘE... 9 <form> </form>... 9 <select> </select>... 10 <textarea> </textarea>... 11 <button> </ button>... 11 <fieldset> </ fieldset>... 11 <legend> </legend>... 11 ZNAČKY PRO OHRANIČOVÁNÍ... 11 <div> </div>... 11 <span> </span>... 11 <hr>... 11 <iframe> </iframe>... 12 <object> </object>... 12 ZNAČKY DO <HEAD>... 12 <title> </title>... 12 <link>... 12 2015 Tomáš Herout 1

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 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 <!DOCTYPE html> Starší deklarací je XHTML 1.1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 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 <html> a končí </html>. 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á <head> a končí </head> b. Tělo HTML je určeno pro samotný obsah stránky, který se zobrazuje návštěvníkovi Ukázka struktury dokumentu: <!DOCTYPE html> <html> <head>... </head> <body>... </body> </html> 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: <p> a 2. z uzavírací značky, jež má v sobě lomítko, ukázka </p>. 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 <br>, 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: <body> <p>  <a> href="stranka.html"> </a>  </p> </body> 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: <p id="nazev" class="prvnitrida druhatrida tretitrida">... </p> 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. <p> </p> Označuje začátek a konec odstavce textu. Může mít následující potomky (obklopovat je) <a>, <img>, <br>, <strong>, <abbr>, <citate>, <code>, <address>, Ukázka: <p>obsah odstavce...</p> <br> Značka, která označuje místo, na kterém má být zalomen obsah na nový řádek. Ukázka: <p>obsah odstavce <br>text na novém řádku</p> 2015 Tomáš Herout 5

<a> </a> Slouží pro ohraničení odkazu, nebo vytvoření kotvy. Měl by být uvnitř jiné obsahové značky (tedy potomkem) např. odstavce <p>, který by se stal jeho rodičem. Ukázka odkazu: <a href="helpmark.html#nazev-kotvy" title="titulek">odkaz</a> Ukázka označení místa kotvy: <a name="nazev-kotvy"></a> href="url" slouží k zadání URL adresy. Povinné! Ukázka absolutní URL: <a href="http://helpmark.cz/stranka.html">... </a> ukázka relativní URL: <a href="../stranka.html">... </a> 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 <img> Značka pro vložení obrázku. Ukázka odkazu: <img src="../image/obrazek.jpg" alt="popis obrázku" title="titulek"> 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. <h1> </h1> Značka označující nadpis. Nadpisy mají max. šest úrovní. Nadpis <h1> 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ů: <h1>nadpis první úrovně</h1> <h2>nadpis druhé úrovně</h2> <h3>nadpis třetí úrovně</h3> <h4>nadpis čtvrté úrovně</h4> <h2>znovu nadpis druhé úrovně</h2> 2015 Tomáš Herout 6

<strong> </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 <b>, která však znamená pouze tučné, ale ne důležité. Ukázka: <p>obsah odstavce <strong>důležité</strong>...</p> <cite> </cite> 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. <blockquote> </ blockquote > Používá se také k citaci, avšak jako velký blok, který v sobě může obsahovat značky jako je <p>, <table> cite="url" označuje URL adresu, ze které je citováno <code> </code> 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ů: <ol>  <li>první položka uspořádaného seznamu</li> <li>druhá položka uspořádaného seznamu <ul>  <li>položka vnořeného neuspořádaného seznamu</li> </ul>  </li> </ol>  <ul> </ul> 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. <ol> </ol> 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 2015 Tomáš Herout 7

<li> </li> Značka určená pro ohraničení začátku a konce položky uspořádaného i neuspořádaného seznamu. Ukázka tabulky: Značky pro tabulky <table> <thead> <tr> <th>záhlaví prvního sloupce na prvním řádku</th> <th>záhlaví druhého sloupce na prvním řádku </th> </tr> </thead> <tbody> <tr> <td>první sloupec na druhém řádku</td> <td>druhý sloupec na druhém řádku</td> </tr> <tr> <td clospan="2">sloučení dvou sloupců na třetím ř.</td> </tr> </tbody> </table> <table> </table> 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. <thead> </thead> Ohraničí nadpis tabulky. Musí být vnořen do <table>. <tbody> </tbody> Ohraničí tělo tabulky. Musí být vnořen do <table>. <tr> </tr> Určuje řádek tabulky. Je vždy vnořen do <table> a do něj jsou vnořeny značky <td>, nebo <th>. Dříve používal atributy na vzhled, ale ty jsou dnes zastaralé. Doporučuji stylovat pomocí CSS. 2015 Tomáš Herout 8

<td> </td> Určuje buňku tabulky. Je vždy vnořen do <tr>. 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. <th> </th> Určuje buňku tabulky, která slouží jako hlavička sloupce, nebo řádku. Je vždy vnořen do <tr>. 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. <caption> </caption> Může být použit pro titulek tabulky. Umisťuje se hned za značku <table>. <colgroupe> 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: <form action="/cesta-ke-zpracovani-formulare.php" method="post"> <label for="jmeno"> Jméno: </label> <input id="jmeno" type="text" name="jmeno"> <label for="ano"> Ano: </label> <input type="radio" name="vyber" id="ano"> <label for="ne"> Ne: </label> <input type="radio" name="vyber" id="ne"> </form> <form> </form> 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 2015 Tomáš Herout 9

<input> 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> </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. 2015 Tomáš Herout 10

<textarea> </textarea> 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) <button> </ button> 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). <fieldset> </ fieldset> 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. <legend> </legend> Pokud použijete <fieldset>, tak pomocí této značky můžete vložit nějaký nadpis. Značky pro ohraničování <div> </div> 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> </span> Také nemá konkrétní význam a slouží k ohraničení liniových prvků, jako je část textu. Ukázka: <p>obsah odstavce <span>označený text</span>... </p> <hr> 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. 2015 Tomáš Herout 11

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. <base> Značka určující základní URL adresu dokumentu, vůči které jsou ve stránce uvedeny relativní URL. <base href="http://www.helpmark.cz/"> <script> </script> Slouží pro ohraničení skriptovacího kódu, převážně JavaScriptu. Nemusí být nutně v záhlaví dokumentu, ale i <body>. 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. 2015 Tomáš Herout 13

Co je to CSS 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: <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;... } Jak se nazývají části kódu CSS 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 <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ě. 2015 Tomáš Herout 15

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) 2015 Tomáš Herout 16

Hodnoty používané v CSS Značka px pc pt mm cm in em ex Popis Pixel jeden obrazový bod Pica 1pc = 12px Typografický bod 1pt = 0,376 mm Milimetr Centimetr Palec 1in = 2,54 cm Šířka velkého M Šíř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() rgba() s ms 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);} 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);} Sekunda 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. 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; 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. 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. 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. 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. 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. 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. 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; 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í. 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; no-repeat = 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. 2015 Tomáš Herout 21

background Souhrnný zápis hodnot: color image position repeat attachement Ukázka: list-style: circle outside; 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 width Stylování boxů 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. 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. 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: 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: vnější okraj okolo elementu margin rámeček okolo elementu border vnitřní odsazení od okraje elementu padding obsah elementu width a height 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: 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: 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í. 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í 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 <p> má display: block, text uvnitř odstavce má display: inline. 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 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. 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. float Pozicování layout 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. Nadřazený element např. <div> width:800px; padding: 30px 10px float: left; width: 45%; float: right; width: 45%; 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. 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 2015 Tomáš Herout 26