Základy HTML/XHTML

Info: obsah těchto stránek byl vytvořen v roce 2018, takže některé informace již jsou zastaralé, i když všeobecné základy jsou stále platné

Kaskádové šablony stylů - CSS

Šablony stylů slouží k lepší správě vzhledu dokumentu. Zjednodušují a umožňují správu vzhledu jak jednoho tak celé skupiny dokumentů.

Styl je definice, která prohlížeči říká, jakým způsobem má zobrazit určitý tag. Definice určuje hodnotu vlastností tagu. Např. barva, písmo, proložení řádků, okraje apod.

Spojení stylu

Styl je možné s tagem spojit několika způsoby:

přímo vložený styl - atribut style
Tento (přímo vložený=řádkový=inline) styl je nejjednodušší způsob. Do tagu se napíše atribut style a do něj se uvede odpovídající popis. Styl platí jen pro obsah tagu, kde je uveden.

Modrý text na žlutém pozadí (font Arial, italic)
šablona stylů v dokumentu
Tento styl se píše do hlavičky mezi tag <head>. Pro zápis se použije počáteční tag <style> a koncový tag <style>. V tagu se použije atribut type="text/css", který prohlížeči říká, že obsahem tagu je CSS styl (existuje ještě styl jazyka JavaScript). Mezi tento tag se zapisují styly, které mají platnost v celém dokumentu.

Nadpis modrý 1

Poznámka: Pro prohlížeče které nepodporují styly je nutné styly zapsat jako poznámku. To znamená, použít na začátku .
externí šablona stylů
Celou část zapisovanou do tagu <style>, je možné umístit do souboru a pak se na něj odkazovat i v jiných dokumentech. Soubor má koncovku css (např. moje_styly.css). Propojení dokumentu a externího souboru stylů se provede zápisem tagu <link> do hlavičky dokumentu nebo příkazem @import v tagu <style>.

Nadpis modrý 1

Příkaz @import musí být v tagu <style> vždy jako první (může jich být zapsáno několik za sebou). A až potom muže být zapsán styl. Tento příkaz může být použit i ve vkládaném souboru stylů. Tím je možné vytvořit vnořené šablony stylů.

Poznámka: Poznámka (komentář) ve stylu se zapisuje mezi /* a */ (např. /* toto je poznámka ve stylu */).

Platnost stylu

Platnost stylu se mění dle jeho umístění. Nejvyšší má přímo vložený styl, pak styl v dokumentu a nakonec styl externí.

To znamená, že když bude v externím stylu pro tag <h3> zapsán styl color jako modrá, ve stylu v dokumentu bude pro tag <h3> zapsán styl color jako zelená a v přímo vloženém stylu u tagu <h3> bude styl color černá. Použije prohlížeč pro tento tag barvu černou a pro všechny ostatní tagy <h3> v dokumentu barvu zelenou.

Priorita stylů

dle umístění - styl definovaný blíže k tagu má prioritu před stylem "vzdálenějším" (přímo vložený styl má přednost před stylem v dokumentu a tento před externím stylem)
pokud je více stylů, seřadí se podle třídy - vlastnosti definované jako třída mají přednost před vlastností definovanou obecně
pokud je více stylů, seřadí se podle míry konkrétnosti - vlastnosti konkrétnějšího stylu maji přednost před méně konkrétním
pokud je více stylů, seřadí se podle pořadí definice - uplatní se vlastnost specifikovaná jaké poslední

Syntaxe stylů

nazev {vlastnost1:hodnota1; vlastnost2:hodnota2; vlastnost3:hodnota3; ... vlastnostN:hodnotaN; } nazev = tag nebo jeho třída vlastnost = vlastnost stylu např. color hodnota = hodnota vlastnosti např. blue příklad: h3 { color: blue; }

Pro zjednodušení se používá i vícenásobný zápis

vícenásobný zápis h1, h2, h3, h4 { text-align: center; } je stejný jako h1 { text-align: center; } h2 { text-align: center; } h3 { text-align: center; } h4 { text-align: center; }

Je možné definovat styl, který se na tag použije, jen tehdy pokud tag bude vnořen v jiném tagu.

p em { color: red; } pokud se použije tag <em> a tento bude vnořen v tagu <p>, bude text červený je možné použít i vícenásobný zápis h3 em, p em, address { color: blue; } text v tagu <em> vnořeném v tagu <h3> nebo <p> bude modrý a text v tagu <address> také

Definice univerzálních, synovských a sousedních stylů

* { font-family: Arial; } * = univerzální - styl platí pro všechny tagy dokumentu (př. všude bude použito písmo Arial) ol > li { color: blue; font-style: italic; } > = spojení mezi rodičovským a synovským elementem h3 + p { margin-top: +6pt; } + = spojení mezi následujícími tagy (př. mezi nadpisem <h3> a textem <p> bude zvětšena mezera o 6pt)

Pseudoelement umožňuje definovat speciální vztahy. Zapisuje se za název tagu a oděluje se dvojtečkou ":". Existují čtyři pseudoelemety - :first-line, :first-letter, :before, :after.

p:first-line { font-weight: bold; } první řádek textu bude zobrazen tučně p:first-letter {float: left; font-size: 200%; font-weight: bolder} první písmeno bude dvojnásobně velké tučné a text v prvních dvou řádcích je bude obtékat pseudoelemety :before a :after v současné době nepodporuje žádný prohlížeč ol { counter-reset: item} ol li:before { content: "Položka číslo " conter(item)"."; counter-increment: item; } tento zápis by nahradil klasické číslování uvedeným textem

Třídy stylů

Pro jeden tag, je možné vytvořit různé styly, které rozlišujeme jménem třídy, které se odděluje tečkou. Jméno třídy se zapisuje do atributu class.

Regulérní třídy - pro jeden tag více tříd.

p.zvyrazneni { font-family: Arial; font-size: 120%; font-weight: bold; margin-top: 6pt; margin-bottom: 0pt; } p.popis { font-family: Arial; margin-top: 0pt; margin-bottom: 0pt; } p.poznamka { font-family: times new roman; font-style: italic; margin-top: 0pt; margin-bottom: 6pt; } zápis v tagu <p> <p class="zvyrazneni">Zvýrazněný text</p> <p class="popis">Text popis</p> <p class="poznamka">Text poznánka</p>

Příklad:

Normální text

Zvýrazněný text

Text popis

Text poznánka

Normální text

Generické třídy - třídy, které nejsou spojeny s žádným tagem. Můžeme je použít v kterémkoli tagu.

.cerveny_tucny { color: red; font-weight: bold; } příklad použití v tagu <h1 class="cerveny_tucny">Celý nadpis bude červeně a tučně</h1> <p class="cerveny_tucny">Celý text bude červeně a tučně</p> <p>normální text <span class="cerveny_tucny">jen tento text bude červeně a tučně</span> normální text</p>

Atribut id jako třída - atribut <id>v tagu slouží k přiřazení identifikátoru, který musí být v celém dokumentu jedinečný. Tento identifikátor můžeme použít i při definici stylu, který je platný jen pro tento identifikátor. To znamená, že tag s tímto identifikátorem, může být v celém dokumnentu jen jeden = můžeme jej použít jen jednou.

#cervena { color: red; } h3#modra { color:blue; } příklad použití v tagu <h3 id="modra">Modrý nadpis</h3> <p>normální text s <b id="cervena">červeným a tučným slovem</b></p>

Pseudotřídy

Slouží k definici zobrazení určitých stavů tagu.

:link - zobrazení odkazu, který uživatel nevybral a ani nenavštívil
:active - momentálně zpracovávané odkazy (právě navštěvované)
:visited - již navštívený odkaz
:hover - (dynamický stav) - myš je nad tagem
:focus - (dynamický stav) - tag je aktivní (kleplo se na myš, přeplo se klávesou Tab, přesunul se kurzor apod.)

a:link { color: blue; } a:active { color: red; } a:visited { color: green; } a:hover { color: yellow; font-weight: bold; }

Dále existují pseudotřídy

:first-child - platí jen na první výskyt
:lang - platí jen na daný jakyk

Použití

Přímo vložený styl se používá jen vyjímečně, v jednom dokumnetu, protože později při změnách se špatně udržuje.

Styl v dokumetu se používá, pokud stejný styl je použit u menšího počtu dokumentů, protože jeho údržba je se zvyšujícím se počtem dokumentů obtížnější.

Styl externí se používá, když se stejný styl používá ve velkém počtu dokumentů, protože usnadňuje údřžbu.

Všechny styly se navzájme kombinují, aby se dosáhlo požadovaného efektu.

Všechny třídy je možné navzájem směšovat.

Tag SPAN

Pokud chceme použít styl jen na část obsahu tagu, používá se k tomu tag <span>. Implicitně tag nic nedělá, vše zůstává stejné. Až pozadání stylu, dojde ke změně. Tag se změnou stylu je možné použít všemy způsoby - přímo vložený styl, styl v dokumentu i externí styl.

obsah tagu <span>měněný obsah</span> pokračování obsahu např. bude definován styl, kde text bude největší tučný bílý na černém podkladu span.velky { font-size: larger; font-weight: bold; color: #ffffff; background-color: #000000; } pak v dokumentu: <p>text text <span class="velky">velký text velký text</span> text text</p> nebo přímo vložený: <p>text text <span style="font-size: larger; font-weight: bold; color: #ffffff; background-color: #000000 ">velký text velký text</span> text text</p>

Ukázka:
text text velký text velký text text text

Používané délkové jednotky

Delkové jednotky se používají u vlastností popisující mějaké rozměry (výška písma, šířka mezery mezi písmeny, okraje apod.). Hodnota je číselná, někdy i s desetinnou tečkou. Znaménka + a - říkají, že se má zadaná hodnota přičíst nebo odečíst od okamžité vlastnosti. Za zadanou delkou musí ihned (bez mezery) následovat dvoupísměnná zkratka měrné jednotky.

Merné jednotky jsou:

relativní - udávají relativní velikost, vzhledem k uvedené velikosti vlastnosti
- em - výška aktuálního písma (+50em)
- ex - výška písmene "x" v aktuálním písmu (2.5ex)
pixelové - velikost pixelu na displeji
- px - velikost pixelu na displeji konkrétního počítače (150px)
absolutní - hodnoty délkový jednotek
- in - inch, anglický palec (1in)
- cm - centimetry (2.5cm)
- mm - milimetry (25mm)
- pt - body (1 bod je 1/72 palce) (10pt)
- pc - pica (1 pc = 12 bodů (pt)) (5pc)

Procentní hodnota

Procentní hodnota popisuje procentní poměr vůči uvedené velikosti vlastnosti. Za číslem musí být znak % bez mezery - 120%.

Vlastnosti stylů

Všech vlastnosti stylů je velký počet, proto si dovoluji odkázat na:

domácí stránky CSS na W3C
specifikace pro CCS1 (popis a úkázky použití)
specifikace pro CCS2 (popis a úkázky použití)

Některé ukázky použití

Použití fontu, velikosti a barvy

.text { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color:#DDDDFF; }

Nastavení typu písma, velikosti, barvy a barvy pozadí pro všechny tagy

* { font-family : Arial, Verdana, Hevletica, sans-serif; font-size : 10pt; background-color : #fbfbf2; color : #000000; }

Odkaz po najetí myší změní barvu a podtrhne se

a.zmena:link { text-decoration : none; color : #0000ff; } a.zmena:visited { text-decoration : none; color : #ff0000; } a.zmena:archive { text-decoration : none; color : #ff00cc; } a.zmena:hover { text-decoration : underline; color : #0080c0; } v dokumentu v tagu <a> <a href="odkaz_na_stranku.html" class="zmena">Tady klikni</a>

Vytvožení odkazu, jako plochého tlačítka

a.tlac:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; background-color: #000099; padding: 3px; width: 75px; text-align: center; vertical-align: middle; text-decoration: none; } a.tlac:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; background-color: #000099; padding: 3px; width: 75px; text-align: center; vertical-align: middle; text-decoration: none; } a.tlac:archive { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; background-color: #000099; padding: 3px; width: 75px; text-align: center; vertical-align: middle; text-decoration: none; } a.tlac:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; background-color: #006633; padding: 3px; width: 75px; text-align: center; vertical-align: middle; text-decoration: none; } v dokumentu v tagu <a> <a href="odkaz_na_stranku.html" class="tlac">Tady klikni</a>

Nastavení barvy posuvníku

body { scrollbar-face-color: #5261a9; scrollbar-arrow-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #c0c0c0; scrollbar-shadow-color: #808080; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #e0e0e0; }

Změna okrajů stránky (funguje ve všech prohlížečích, které podporují CSS)

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }

Zadání poznámky ke zvýrazněnému slovu

<p>Text s popisem <span title="Nějaký text, jakýkoli popis ke zvýrazněnému slovu" style="color: #626299; background-color : #FFFF99;">aaaaaaaa</span> uvidíme po najetí myší nad zvýrazněné slovo.</p>

Text s popisem aaaaaaaa uvidíme po najetí myší nad slovo.