seznam
Přímo vložený styl
Přímo vložený styl
Šablona stylu v dokumentu
Externí šablony stylů
Přímo vložený styl

1. Přímo vložený styl
2. Šablona stylu v dokumentu
3. Externí šablony stylů
4. Syntaxe stylů
5. Třídy stylů
6. Vlastnosti písma
7. Vlastnosti barvy a pozadí
8. Vlastnosti textu
9. Vlastnosti obdelníku
10. Vlastnosti seznamů
11. Značky <style>, <span> a <div>
12. Vlastnosti zobrazení

1. Přímo vložený styl

Zapisujeme přímo do značky a platí tedy pouze pro tuto značku.

Příklad použití:

Zápis:

<h3 style="color: red"> červený nadpis </h3> 

Se zobrazí jako:

červený nadpis

Úkol: vložte zelený nadpis: ZDE

2. Šablona stylu v dokumentu

Šablonu zapisujeme do záhlaví.

Příklad použití:

<style type="text/css">
<!--
    h3 { color: blue;}
    h5 { color: green;}
-->
</style>

Potom v tělu dokumentu stačí napsat:

<h5> zelený nadpis </h5>

který zobrazí jako:

zelený nadpis

Úkol: vložte modrý nadpis <h3>: ZDE

3. Externí šablony stylů

Šablonu zapisujeme do textového souboru s příponou css .

Příklad použití:
1. Nejdříve vytvoříme soubor pokus.css :

samp {color:hotpink;}

2. Do hlavičky napíšeme:

<link rel="stylesheet" type="text/css" href="pokus.css">

nebo

<style>
<!--
    @import url(pokus.css);
-->
</style>

3. Potom stačí v těle dokumetu napsat:

<samp>ahoj</samp>

což se zobrazí jako ahoj
Poznámka: rozdíly při použití jednoho stylu v dokumentu nejsou.

---

4. Syntaxe stylů

• Komentáře zapisujeme podobně jako v jazyce C /* komentář */.
  

---

• Styl zapisujeme následovně:
  

selektor {vlastnost1: hodnota1; vlastnost2: hodnota2; vlastnost3: hodnota3; ...}

Příklad:

h3 { color: blue}

---

• Vícenásobné selektory

h1 { color: blue}
h2 { color: blue}
h3 { color: blue}

můžeme zapsat:

h1, h2, h3 { color: blue}

---

• Styly pro vnořené značky

Definice:

ul li {color:black}
ul ul li {color:red}
ul ul ul li {color:green}
ul ul ul ul li {color:blue}

bude zobrazovat seznam následovně:

• Škola
• • 1. ročník
  • 2. ročník
  • 3. ročník
  • 4. ročník
    • 4. G
      • studenti
    • 4. H
      • studenti

Úkol: vytvořte následující styly (modrá barva pro značku <i> a červená pro značku <i> uvnitř značky <p>)
toto bude modré
a

toto bude červené

---

• Univerzální selektor

Zápis:

* {color: red}

způsobí, že všechny značky budou mít červené písmo.

---

• Synovský selektor

Zápis např:

ol > li {color: red}

určuje selektor pro značky se vztahem "otec syn".
Úkol: definujte tento styl v tomto dokumentu.

---

• Selektor sousedních značek

Zápis:

p + b {color: red}

určuje selektor pro bezprostředně sousedící značky.
Úkol: definujte tento styl v tomto dokumentu. (v IE nemusí fungovat)

Vidím

červeně

---

• Pseudoelement :first-line
• Pseudoelement :first-letter

Zápis např:

p:first-line {font-style : italic}
p:first-letter {font-size: 300%}

Úkol: definujte tyto styly v tomto dokumentu.

Lákamí vůněhulás úmyval rohlivý jednovod lek obolekno lva umí ří úmyvaleka. Tobselad onověď mělý božkat čníky bicí ří alem ští jítkem Umírně. Podlo neumysl je Obsely čin Tor úmyslupný ští nim leda nucký. Napný lekajakko umí autní Umraburdí Básněžný ští ční čuvalemi úmyvadiát řícipádní. Úmyvaledn parcipádn řícit ří nemi drásníky lválně ačít Záprazy umyvačkod kytanesiv. Lák.

---

• Pseudoelement :before
• Pseudoelement :after

určují místo pro vygenerovaný obsah (před nebo za).

---

5. Třídy stylů

• Styl značky
  

Příklad:

p {color: violet}

---

• Styly pro stejnou značku rozlišíme následovně (regulérní třídy)
  

p.cerveny {color: red}
p.modry {color: blue}
p.zeleny {color: green}

Potom stačí zapsat:

<p>fialový odstavec</p>
<p class="cerveny">červený odstavec</p>
<p class="modry">modrý odstavec</p>
<p class="zeleny">zelený odstavec</p>

Úkol: definujte tyto styly v tomto dokumentu.

fialový odstavec

červený odstavec

modrý odstavec

zelený odstavec

---

• Generické třídy

.velky {font-size: 200%}

Potom stačí například zapsat:

<p class="velky">Velký odstavec</p>

Úkol: definujte tento styl v tomto dokumentu.

Velký odstavec

---

• Hypertextové odkazy

Pro hypertextové odkazy můžeme nadefinovat styly pro tyto stavy:

• nenavštívený odkaz a:link
• pravě navštívený odkaz a:active
• navštívený odkaz a:visited

Příklad:

a:link {color: blue}
a:active {color: red}
a:visited {color: green}

Úkol: definujte tyto styly v tomto dokumentu.

---

• Interakce

Můžeme nadefinovat styly pro tyto akce:

• přejetí kurzorem :hover
• aktivace např. klávesou TAB ve formuláři :focus

Příklad:

a:hover {color: yellow}

Úkol: definujte tento styl v tomto dokumentu.

---

6. Vlastnosti písma

• font-family (s ohledem na české stránky)

Například:

bezpatkové
	font-family: sans-serif;
patkové
	font-family: serif;
neproporciální
	font-family: monospace;
Arial
	font-family: "Arial CE", "Helvetica CE", Arial, helvetica, sans-serif;
Verdana
	font-family: "Verdana CE", "Arial CE", "Lucida Grande CE", "Helvetica CE", Verdana, Arial, lucida, sans-serif;
Tahoma
	font-family: "Tahoma CE", "Arial CE", "Helvetica CE", Tahoma, Arial, lucida, sans-serif;
Times New Roman
	font-family: "Times New Roman CE", "Times New CE", "Times CE", "Times New Roman", times, serif;
Courier New
	font-family: "Courier New CE", "Courier CE", "Courier New", courier, monospace;
Comic Sans MS
	font-family: "Comic Sans MS CE", "Arial CE", "Sand CE", "Helvetica CE", "Comic Sans MS", lucida, fantasy;	

Jestliže je definováno více druhů písem prohlížeč vyber první dostupné.

Příklad:

.pismo1 {font-family: "Comic Sans MS CE", "Arial CE", "Sand CE", "Helvetica CE", "Comic Sans MS", lucida, fantasy}

Potom stačí napsat:

<span class="pismo1">nové písmo</span>

Úkol: definujte tento styl v tomto dokumentu.
nové písmo

---

• @font-face

CSS pravidlo @font-face umožňuje vložit do stránky vlastní font.

@font-face {
    font-family: mujFont;
    src: url(muj_font.ttf);
}

div {
    font-family: mujFont;
}

---

• font-size

Výška písma může být určena více způsoby:

Příklad:

.velikost1 {font-size: 20pt}     /*20 bodů*/
.velikost1 {font-size: +2pt}     /*o 2 body více než rodič (nemusí fungovat) */
.velikost1 {font-size: 200%}     /*o 100% více než rodič*/
.velikost1 {font-size: xx-small} /*nebo x-small, small, medium, large, x-large, xx-large*/
.velikost1 {font-size: smaller}  /*nebo larger*/

Úkol: vyzkoušejte ZDE
Jiné délkové jednotky: px (pixel), mm, cm, in (palec), pt (typografický bod), pc (pica nebo cicero), em (šířka M), ex (výška x).

---

• font-stretch

Nemusí fungovat

Hodnoty: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, wider, narrower

---

• font-size-adjust

Nemusí fungovat, nebudeme probírat.

---

• font-style

Příklad:

.sklon1 {font-style: italic}
.sklon2 {font-style: oblique} /*téměř totéž co italic*/
.sklon0 {font-style: normal}

---

• font-variant

Příklad:

.malapismena {font-variant: small-caps}
.normalpismena {font-variant: normal}

---

• font-weight

Příklad:
.tucnepismo {font-weight: bold} nebo .tucnepismo {font-weight: 700}
.normalpismena {font-weight: normal}

Můžete vyzkoušet násobky 100 a také hodnoty lighter a bolder (ty ale asi fungovat nebudou0.

---

Všechny vlastnosti může také kombinovat do jednoho stylu:
Například:

.pokuspismo {
    font-size: x-large;
    font-family: "Verdana CE", "Arial CE", "Lucida Grande CE", "Helvetica CE", Verdana, Arial, lucida, sans-serif;
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
}

Úkol: definujte vlastní styl písma pojmenovaný mojepismo.

---

7. Vlastnosti barvy a pozadí

• background-attachment

Určuje zda obrázek přidělený elemetu se bude rolovat scroll nebo bude fixní fixed .

---

• background-image

Příklad: .pozadi01 {background-image: url(gradient.gif)}

---

• background-repeat

Hodnoty:

repeat pozadí se opakuje
no-repeat pozadí se neopakuje
repeat-x pozadí se opakuje pouze horizontálně
repeat-y pozadí se opakuje pouze vertikálně

---

• background-position

Určuje pozici obrázku. Pozici můžete určit v pixelech nebo v procentech.

Příklad: .pozadi02 {background-repeat: no-repeat; background-image: url(skola.jpg); background-position: 200px 10px}

---

• background-color (barva pozadí)
• color (barva textu)

Barvu můžeme zadat těmito způsoby (všechny příklady určují červenou):

color: red 
color: rgb(255, 0, 0) /*(červená, zelená, modrá) */
color: rgb(100%, 0%, 0%) /*(červená, zelená, modrá) */
color: #FF0000 stejné jako color: #F00 /*(červená, zelená, modrá) */
    

Úkol: definujte vlastní styl pozadi pojmenovaný mojepozadi .

---

8. Vlastnosti textu

• letter-spacing

Mezery mezi písmeny. Implicitní hodnota je normal .
Příklad:
.rozklad {letter-spacing: 20px}
rozložené písmo
Jiné délkové jednotky: px (pixel), mm, cm, in (palec), pt (typografický bod), pc (pica nebo cicero), em (šířka M), ex (výška x).

---

• word-spacing

Mezery mezi slovy. Implicitní hodnota je normal .
Příklad:
.mezery {word-spacing: 40px}
Lákamí vůněhulás úmyval rohlivý jednovod lek obolekno lva umí ří úmyvaleka.
Jiné délkové jednotky: px (pixel), mm, cm, in (palec), pt (typografický bod), pc (pica nebo cicero), em (šířka M), ex (výška x).

---

• line-height

.vyska {line-height: 30px} Můžete použít i procenta.

Řádkování. Implicitní hodnota je normal .
Příklad:

---

• text-align

Zarovnání textu.
Příklad:
.zarovnani {text-align: center}
vycentrovaný text
Další hodnoty jsou: left , right a justify .

---

• text-decoration

Úpravy textu.
Příklad:
.dekorace {text-decoration:line-through overline underline blink}
text s efeky
Implicitní hodnot je: none . V příkladu byly použity všechny efekty.

---

• text-indent

Odsazení prvního řádku.
Příklad:
.odsazeni {text-indent: 25px}

---

• text-transform

Převod textu.
Příklad:
.velkapismena {text-transform: uppercase}
Povolené hodnoty: uppercase velká písmena, lowercase malá písmena, capitalize první písmeno velké. Implicitní hodnota je none .

---

• text-shadow

Efekt stínu. Parametry jsou posuv, poloměr a barva. Probírat nebudeme.

---

• vertical-align

Svislé zarovnání.
Hodnoty: baseline , middle , sub , super , text-top , text-bottom , top , bottom
Příklady:

---

baseline text

---

middle text

---

sub text

---

super text

---

text-top text

---

text-bottom text

---

top text

---

bottom text

---

baseline

---

middle

---

sub

---

super

---

text-top

---

text-bottom

---

top

---

bottom

---

text-top text

---

text-bottom text

---

top text

---

bottom text

---

Je možno zadat i procenta.

---

Úkol: definujte vlastní styl textu pojmenovaný mujtext .

---

9. Vlastnosti obdelníku

---

• width a height

Šířka a výška objektu. Příklad:
.rozmery {width: 350px; height: 180px}

---

• border-width

Šířka ohraničení.
Můžete zadat až čtyři hodnoty oddělené mezerami.
1 hodnota - všechny hrany stejné;
2 hodnoty - 1. hodnota (horní a dolní), 2. hodnota (levá a pravá);
3 hodnoty - 1. hodnota (horní), 2. hodnota (levá a pravá), 3. hodnota (dolní);
4 hodnoty - horní, pravá, spodní, levá;

Je možno zadávat i jednotlivě

• border-top-width
• border-bottom-width
• border-left-width
• border-right-width

Délkové jednotky: px (pixel), mm, cm, in (palec), pt (typografický bod), pc (pica nebo cicero), em (šířka M), ex (výška x).
Nebo thin , medium , thick .

---

• border-color

Barva ohraničení.
Můžete zadat až čtyři hodnoty oddělené mezerami. (Podobně jako u šířky)

---

• border-style

Styl ohraničení.
Povolené hodnoty jsou none , dotted , dashed , solid , double , groove , ridge , inset a outset .
Příklad:
.stylokraje {border-width:1px 2px 3px 4px; border-color: red blue green yellow; border-style: groove ridge inset outset}

---

Vlastnosti ohraničení lze provést i zkráceně:
.horni {border-top: thin red solid} (nebo můžete použít border-top , border-bottom , border-left , border-right )

---

.vsechno {border: thick blue double}

---

• margin

Nastavení okrajů margin-left , margin-right , margin-top a margin-bottom určují volný prostor kolem prvku. Hodnoty jsou délkové, procentní nebo auto . Hodnoty zadáváte podobně jako u ohraničení

---

• padding

Nastavení výplně padding-left , padding-right , padding-top a padding-bottom . Hodnoty jsou délkové, procentní. Hodnoty zadáváte podobně jako u ohraničení

---

• float
• clear

Vlastnost float určuje obtékání prvku.
Hodnoty jsou none , left a right .
None - implicitní hodnota, prvek ho nebude obtékat.
Left - prvek se přisune k levému okraji, následující text ho bude obtékat.
Right - prvek se přisune k pravému okraji, následující text ho bude obtékat.

Prvek, který má hodnotu nastavenou na left nebo right se nazývá plovoucí. Vlastnost clear můž mít hodnoty none , left , right nebo both .
None - implicitní hodnota, umístí obsah značky, kde je misto.
Left - zabrání umístění obsahu značky z levé strany plovoucího objektu.
Right - zabrání umístění obsahu značky z pravé strany plovoucího objektu.
Both - obsah značky nebude sousedit s plovoucím objektem.

Příklad 1: (obrázek_left text obrázek_left)









Příklad 2: (obrázek_right text obrázek_right)









Příklad 3: (obrázek_none text obrázek_none)

---

Úkol: definujte vlastní styl obdelníku pojmenovaný mujbox .

---

10. Vlastnosti seznamů

• list-style-image

Nastaví obrázek jako položku seznamu.
Příklad:

.odrazka {list-style-image: url(https://02f29cb30d.cbaul-cdnwnd.com/b7cf6eb4638ce79a72777ad9a85fa782/200000058-c1f08c1f0a/450/kolecko1.gif?ph=02f29cb30d)}

• 1. ročník
• 2. ročník
• 3. ročník
• 4. ročník

---

• list-style-position

Umístění značky seznamu.
Dva způsoby inside nebo outside .

Příklady:

.odrazkauvnitr {list-style-position: inside; list-style-image: url(https://02f29cb30d.cbaul-cdnwnd.com/b7cf6eb4638ce79a72777ad9a85fa782/200000058-c1f08c1f0a/450/kolecko1.gif?ph=02f29cb30d)}

• Lákamí vůněhulás úmyval rohlivý jednovod
  lek obolekno lva umí ří úmyvaleka.

.odrazkavne {list-style-position: outside; list-style-image: url(https://02f29cb30d.cbaul-cdnwnd.com/b7cf6eb4638ce79a72777ad9a85fa782/200000058-c1f08c1f0a/450/kolecko1.gif?ph=02f29cb30d)}

• Lákamí vůněhulás úmyval rohlivý jednovod
  lek obolekno lva umí ří úmyvaleka.

---

• list-style-type

Definuje značky seznamu .
U neuspořádaného seznamu jsou povolené hodnoty disc , circle , square a none .
U uspořádaného seznamu jsou povolené hodnoty decimal , lower-roman , upper-roman , lower-alpha , upper-alpha a none .
Příklady:

.ctverec {list-style-type: square}

• 1. ročník
• 2. ročník
• 3. ročník
• 4. ročník

.rimske {list-style-type: upper-roman}

• 1. ročník
• 2. ročník
• 3. ročník
• 4. ročník

---

• list-style

Všechny předchozí vlastnosti lze zapsat.
Příklad:

.vse {list-style: url(kolecko1.gif);list-style-type: circle; list-style-position: outside;}

Pokud nebude obrázek v cestě prohlížeč nastaví značku kolečka.

---

Úkol: definujte vlastní styl seznamu pojmenovaný mujseznam .

• 1. ročník
• 2. ročník
• 3. ročník
• 4. ročník

---

11. Značky <style>, <span> a <div>

• značka <style>

Definuje šablonu stylů.
Atributy:
type určuje typ, my budeme používat <style type="text/css">. JavaScript má vlastní styly <style type="text/javascript">.
media určuje zařízení pro které je stránka určena např. mobilní telefon. Implicitní hodnota je screen .
Další atributy jsou lang , dir a title .

---

• značka <span>

Vymezuje část textu.
Nejdůležitější atribut je class , který už jsme se naučili používat.
Další atributy jsou lang , dir , title , lang , style a atributy událostí ( onClick , onDblClick , onKeyDown , onKeyPress , onKeyUp , onMouseDown , onMouseMove , onMouseOut , onMouseOver , onMouseUp ).

---

• značka <div>

Definuje blok textu .
Nejdůležitější atribut je class , který už jsme se naučili používat.
Další atributy jsou lang , dir , title , lang , style a atributy událostí ( onClick , onDblClick , onKeyDown , onKeyPress , onKeyUp , onMouseDown , onMouseMove , onMouseOut , onMouseOver , onMouseUp ).

---

12. Vlastnosti zobrazení

• vlastnost display

Změní původní nastaví zobrazení prvku .
Hodnoty jsou: block (blok, prvek se zobrazí s řádkovým zlomem na konci), inline (řádek, prvek se zobrazí s bez řádkovýho zlomu na konci), list-item (položka seznamu) a none (prvek se nezobrazí).

Příklad:
<a class="blok" href="https://www.jakpsatweb.cz/" target="_blank">https://www.jakpsatweb.cz/</a><a class="blok" href="https://interval.cz/" target="_blank">https://interval.cz/</a><a class="blok" href="https://www.kosek.cz" target="_blank">https://www.kosek.cz</a><a class="blok" href="https://www.sovavsiti.cz" target="_blank">https://www.sovavsiti.cz</a><a class="blok" href="https://www.tvorba-webu.cz/" target="_blank">https://www.tvorba-webu.cz/</a>

Se zalomí do bloku:
https://www.jakpsatweb.cz/https://interval.cz/https://www.kosek.czhttps://www.sovavsiti.czhttps://www.tvorba-webu.cz/

---

Bez změny zobrazení:

<p class="vradku" >1. odstavec</p> 
<p class="vradku" >2. odstavec</p>

Se nezalomí do bloku:

1. odstavec

2. odstavec

---

Zajímavé nastavení je:
display: none
Tímto prvek úplně skryjete.
Poznámka: visibility: hidden pouze zneviditelní.

Příklad:
.neni {display: none}
začátek <span class="neni">Toto tu není</span> konec
začátek Toto tu není konec

.nevidim {visibility: hidden}
začátek <span class="nevidim>Toto tu je, ale nevidíte</span> konec
začátek Toto tu je, ale nevidíte konec

---

• vlastnost white-space

Definuje způsob práce prohlížeč s "bílými znaky" (mezer, tabulátory a CR).
Povolené hodnoty jsou normal (kde je potřeba, zalomí se řádek), pre (řádky se lámou pouze tam, kde ve zdroji) a nowrap (text bude na jednom řádku).

---