Tento odstavec bude červený.
je značka vymezující odstavec; z anglického paragraph. Atribut "style" je obecný atribut použitelný u každého prvku. Color znamená barva a red je červená.
cz y.
ba
@
ng s
tra nk
Pomocí "stylopisu stylopisu" stylopisu ("stylesheet") v hlavičce stránky. Stylopis je jakýsi seznam stylů. Obecný zápis, co má být jak zformátováno. Z hlediska optimalizace méně nevhodné. Do stránky se stylopis píše mezi tagy <style> a Příklad
ne s
va d
Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style>: <style> p {color: red; background-color:yellow}
cz y.
ne s
va d
ba
@
ng s
tra nk
Použitím externího stylopisu -- to je soubor *. *.css css, css na který se stránka odkazuje tagem . V souboru je umístěný stylopis. Hlavní výhoda je v tom, že na jeden takový soubor se dá nalinkovat mnoho stránek, takže pak všechny vypadají podobně. Příklad: Vytvoří se soubor, který se pojmenuje třeba styly.css p {color: red} Do hlavičky html dokumentu, který chci stylem ovlivnit, musím napsat odkaz na tento soubor:
cz y. tra nk
Pro položky seznamu nastavit v externím
va d
ba
◦ Přeškrtnuté
@
◦ Výška řádku 150%
ng s
stylopisu styly.css následující vlastnosti:
◦ Velikost textu 13px
ne s
◦ Font Verdana
cz
styl_a.css
tra nk
y.
priklad06_1.html
Ve složce web/06 vytvořte soubor
ng s
priklad06_1.html a složku styly, styly do které
ne s
va d
ba
@
vytvořte externí stylopis styl_a.css styl_a.css
cz y.
ne s
va d
ba
@
ng s
tra nk
div se nejčastěji překládá jako oddíl. oddíl Zahrnuje v sobě libovolně velkou oblast textu včetně nadpisů, obrázků a tabulek. Před a za oddílem se zalomí řádek. Podobné u tagu
Příklad:
Obyčejný odstavec s obyčejným odkazem
| typ | název | počet přepravených osob za den | ||
|---|---|---|---|---|
| dlouhodobý přepravní průměr | pondělí | úterý | ||
| čtyřsedačka | Skalka | 1200 | 2230 | 1976 |
| Černý vrch | 1000 | 1567 | 1454 | |
| dvousedačka | Nové pláně | 500 | 876 | 450 |
| dvojkotva | Pod lany F10 | 600 | 765 | 675 |
| Na hřeben | 600 | 997 | 520 | |
| Staré pláně | 600 | 189 | 196 | |
| jednokotva | Bucharka | 320 | 498 | 315 |
modrý odstavec kurzívou normální červený odstavec kurzívou Tento text bude na monitoru zobrazen normálním stojatým písmem, ale při tisku vyleze kurzívou.
Třída žlutá
cz y.
která má nějaké vlastnosti.
tra nk
Kromě definice vlastností tagů, lze tag zařadit do třídy,
ng s
Element se stejnou class se v dokumentu může vyskytovat mnohokrát a mají stejné vlastnosti.
ba
elementu (tagu).
@
Atribut class (třída) se může použít u libovolného
va d
Symbolicky
ne s
Deklarace vlastností třídy začíná tečkou! .jmeno_tridy { vlastnost1:hodnota; vlastnost2:hodnota; …}
cz
y.
nk ra
st
ng
a@ db
a sv ne
cz y.
ne s
va d
ba
@
ng s
tra nk
Třídy modry a zluty zluty budeme moci použít pouze u tagů
cz
tra nk
y.
http://hyperweb.chytrak.cz/texty/priklad10.html
va d
ba
styly
@
priklad10.html
ng s
priklady
ne s
styl10.css
Stylování tabulky
typ název počet přepravených osob za den dlouhodobý
přepravní průměrpondělí úterý čtyřsedačka Skalka 1200 2230 1976 Černý vrch 1000 1567 1454 dvousedačka Nové pláně 500 876 450 dvojkotva Pod lany F10 600 765 675 Na hřeben 600 997 520 Staré pláně 600 189 196 jednokotva Bucharka 320 498 315
cz y.
ng s
tra nk
Když potřebuji, aby nějaký prvek stránky přebral formátování dvou tříd, pak je prostě stačí uvést obě v atributu class a oddělit je mezerou. Styl může například vypadat takto:
ba
@
.zlutepozadi {background-color: yellow;} .vlevo {float: left; width: 150px;}
ne s
va d
Prvek dostane obě třídy: třídy obsah prvku
@
ng s
tra nk
y.
cz
styl_tabulka.css
ne s
va d
1. Sloupec Barva pozadí rgb(55,96,145) Vnitřní okraj 10px, barva textu bílá, zarovnání střed
H1
ba
Hlavička Barva pozadí rgb(23,55,93), Vnitřní okraj 10px, barva textu bílá, zarovnání střed
Tabulka na střed, rámeček 5px bílý, font Calibri velikost 13px, barva textu černá
Řádky Barva pozadí rgb(219,229,241) Vnitřní okraj 10px, barva textu černá
cz y.
@
ng s
tra nk
Pseudotřídy jsou speciálním typem tříd (class class), class které jsou aktivovány obvykle nějakou speciální událostí nebo speciálním stavem. Narozdíl od pseudoelementů jsou aplikovány vždy na celý obsah elementu, nikoli pouze na jeho část. Pseudotřídy odkazů
ne s
va d
ba
Nejvíce pseudotříd je definováno pro odkazy. :link - třída aplikovaná na ještě nenavštívený odkaz :visited - značí již navštívený odkaz :active active - daný odkaz byl uživatelem aktivován :hover - tato třída je aktivovaná, pokud uživatel přejede kurzorem nad odkazem :focus - odkaz byl "zaměřen" (např. pomocí klávesy TAB)
cz y. tra nk
ng s
a:link {color: black; text-decoration: none; font-weight: bold;}
va d
ba
@
a:hover, a:focus {color: red; text-decoration: underline;}
ne s
a:visited {color: blue;}
cz y. tra nk
Ve specifikaci CSS1 se vyskytují pseudoelementy :firstfirst-line a :first :firstfirst-letter. letter.
@
Například zápis:
ng s
Znamenají první řádek a první písmeno.
ba
◦ p:first-line {color: blue}
◦ p:first-letter {font-size: 200%}
va d
by měl způsobit, že odstavce budou mít první
ne s
řádek modrý a první písmeno dvakrát větší.
cz y.
@
ng s
tra nk
DIV je element blokový SPAN je element řádkový Jinak řečeno tag před sebou a za sebou udělá konec řádku. <span> se bez problému může vyskytovat v jednom řádku.
ne s
va d
ba
text text text obsah divu text text text <span> span>obsah spanu span> stále v jednom řádku.
200px
hlavicka
@
stredni
ne s
paticka
pravy
50px
va d
ba
levy
600px
ng s
menu
80px 50px
tra nk
y.
150px
cz
600px
cz y.
ng s
tra nk
Všechny prvky na stránce, které nemají uvedeno jinak, budou mít vlastnosti definované níže.
@
Příklad zápisu v externím stylopisu
ba
*{
ne s
va d
padding:0px; margin:0px; }
cz y.
ng s
tra nk
Pro jednoznačný popis nějakého elementu (zejména pro potřeby skriptů) existuje univerzální atribut ID. V těle dokumentu by se element s jedním identifikátorem měl vyskytovat jenom jednou.
ba
@
Symbolicky
ne s
va d
Deklarace identifikátorů začíná # #identifikator{ vlastnost1:hodnota; vlastnost2:hodnota; …}
cz
y.
nk ra
st
ng
a@ db
a sv ne
y.
cz ne s
va d
ba
@
ng s
tra nk
www.ngstranky.cz/web2
cz y. 2. Dědičnost
@
3. Pozdější vyhrává
ng s
1. Přednastavený vzhled
tra nk
Pravidla kaskádování
ba
4. Podrobnější selektor
va d
5. !important
ne s
6. Priorita vnitřního elementu
cz y.
ne s
va d
ba
@
ng s
tra nk
Kaskádové styly respektují původní vzhled html elementů. Pokud styly něco nemění, tak to zůstane. Například když u tagu H2 změním barvu h2 {color: green} tak se sice změní barva, ale zůstane původní velikost písma. Prostě co styly výslovně neupravují, to zůstává.
cz y.
ne s
va d
ba
@
ng s
tra nk
Podřízený element přejímá formátování nadřazeného elementu. Například když se nastaví barva písma těla dokumentu na červenou, body {color {color: color: red} red} tak budou červené i všechny odstavce, prostě všechno. Některé vlastnosti se nedědí (například border). Ve specifikaci je to u každé vlastnosti napsáno. Některé prohlížeče v dědičnosti chybují (např. obsah tabulky nedědí nastavení body).
cz y.
ng s
tra nk
Pokud se zapisuje vlastnost nějakého elementu vícekrát za sebou (a třeba různě), tak platí ten zápis, který je uveden nejpozději. To se stává hlavně tak, že něco deklaruji ve stylopisu stránky a pak to potřebuji na určitém místě změnit.
ne s
va d
ba
@
<style> p {color: red; font-style: italic}
cz y.
ng s
sto bodů priority za zápis identifikátoru (zápisů s #) deset bodů priority za zápis třídy (začínajících tečkou) jeden bod priority za název tagu půl bodu za pseudotřídu (u odkazů)
@
◦ ◦ ◦ ◦
tra nk
Pravidlo pozdější vyhrává neplatí v případě, když je nějaký zápis uveden podrobnějším selektorem. Podrobnost selektoru se počítá takto:
ba
Nejvyšší řádky vyhrají, i když jsou v zápisu první:
ne s
va d
h1#logo {color: blue;}/* 101 bodů priority*/ div.hlavni h1 {color: red;} /* 12 bodů priority*/ div h1 {color: black;} /* 2 body priority */ h1 {color: green;} /* 1 bod priority */
cz y.
ng s
tra nk
Dá se nastavit, aby vlastnost nebyla později přepsána. Dělá se to klauzulí !important za zápisem CSS vlastnosti. Např.
ne s
va d
ba
@
h1 {color: red !important} h1 {color: blue}
cz y.
tra nk
Bližší košile než kabát znamená, že v případě
ng s
konfliktu vyhrává ten element, který je "vnitřnější", je blíže formátovanému obsahu. Když mám třeba zápis
ba
@
<span style="color: red"><span style="color: green">obsah,
ne s
va d
tak obsah bude zelený, nikoliv červený. Přebíjí to i dědičnost (s výjimkou vlastnosti display: none).
cz y.
va d
ba
@
ng s
tra nk
Media=“print Media=“print“ print“ Uvedu-li v tagu <style> atribut media s hodnotou print, print říkám tím, že se instrukce tohoto stylopisu budou vztahovat jenom na tisk. <style media="print"> /* zápis stylu */ Další hodnoty atributu media
ne s
◦ screen pro monitor ◦ page pro papírovou stránku
cz y.
ne s
va d
ba
@
ng s
tra nk
cz y.
va d
ba
@
ng s
tra nk
Alternativní zápisy Vztahuje-li se k tisku celý externí stylopis odkazovaný tagem , prostě se také přidá media=print, stejně jako do <style>: print"> Stylopis přiřazený všem médiímmedia=“all“
ne s
◦
cz y.
ng s
tra nk
@Media Horší situace nastává, pokud chci pro tisk určit část stávajícího stylopisu nebo když styl zadávám přímo. Pak musím využít formule @media print.
ba
@
p {color: blue}/* Normální stylopis */ @media print {
p {text-indent: 10%}
ne s
va d
} /* Pokračování normálního stylopisu*/
cz y.
@
ng s
tra nk
Internet Explorer od verze 4 umí určitým způsobem změnit vzhled obrázku. Říká se tomu filtry. Bohužel většina jiných prohlížečů filtry nepodporuje.
ne s
va d
ba
Příklady na: http://www.jakpsatweb.cz/css/css-filtrypriklady.html
80px
Hlavička
tra nk
120px
y.
cz
/web/index.php
Menu
ba
@
ng s
Tělo Výška je závislá na obsahu divu. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Patička
va d
40px
ne s
Hlavní
600px
Text Text Text Text Text
Text Text Text Text Text
Text Text Text Text Text