Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek.

Prezentace na téma: "Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek."— Transkript prezentace:

1 Ing. Jiří Štěpánek

2 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

3

4

5 div.paticka { /* definice stylu pro paticku */ } div.paticka a { /* definice stylu odkazu, ktery je v paticce */ color: Red; } V tomto případě se odkaz naformátuje červeně a to pouze v patičce. Druhý selektor říká: Odkazy umístěné v divu s třídou „paticka“ budou červené. Nezáleží, jak hluboko je odkaz zanořen, stačí aby byl někde uvniř. Je jedno, zda bude přímo v divu, nebo ještě obalen např. odstavcem. Odkaz v tomto případě není třeba opatřovat atributem class nebo id – protože je deklarován styl pro „čísté“ a

6 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

7 #paticka p a.nepodtrzeny { text-decoration: none; } V tomto případě je nutné odkaz opatřit atributem class s hodnotou „nepodtrzeny“

8 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek div#paticka a, p.mujodstavec a, span.podtrzenytext { text-decoration: underline; /* spolecna definice stylu pro 3 ruzne selektory */ /* jedina spolecna vlastnost je podtrzeny text */ }

9 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

10 Tabulka převzata z http://www.w3schools.com/css/css_pseudo_elements.asp SelektorPříkladFunkce :linka:linkVybere všechny nenavštívené odkazy :visiteda:visitedVybere všechny navštívené odkazy :activea:activeVybere aktivní odkazy :hovera:hoverVybere odkazy nad kterými je kurzor myši :focusinput:focusVybere vstupní prvek na kterém je fokus (je vybrán) :first-letter:first-letter *p:first-letterVybere první písmeno každého odstavce :first-line:first-line *p:first-lineVybere první řádek každého odstavce :first-child:first-child *p:first-childVybere prvního potomka každého odstavce :before:before *p:beforeVloží obsah před každý odstavec :after:after *p:afterVloží obsah za každý odstavec :lang(language)p:lang(it) Vybere každý odstavec, jehož atribut lang začíná hodnotou it

11 :nth-last-child(n) p:nth-last-child(2)Vybere všechny odstavce, které jsou druhé od konce ve výčtu potomků předka. :nth-of-type(n) p:nth-of-type(2)Vybere všechny odstavce, které jsou druhé v pořadí ve výčtu potomků předka :nth-last-of-type(n) p:nth-last-of-type(2)Vybere všechny odstavce, které jsou druhé od konce ve výčtu potomků předka. :last-child p:last-childVybere všechny odstavce, které jsou posledním potomkem svého předka :root Vybere kořenový element dokumentu :empty p:emptyVybere všechny odstavce, které nemají žádné potomky :target #news:targetVybere právě aktivní #news element (kliknutí na kotvu obsahující news) :enabled input:enabledVybere všechny enabled elementy :disabled input:disabledVybere všechny disabled elementy :checked input:checkedVybere všechny zaškrtnuté elementy :not(selector) :not(p)Vybere všechny elementy, které nejsou odstavce ::selection Vybere uživatelský výběr (označení kurzorem)

12 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek a { color: Black; text-decoration: underline; } a:hover { text-decoration: none; }

13 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek h1:before { content:url(smiley.gif); } Pro další příklady viz reference na www.w3schools.com

14 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek SelektorPříkladPopis [atribut][title]Vybere všechny elementy s atributem title [atribut=hodnota][title=titulek]Vybere všechny elementy které mají title s hodnotou titulek (element|třída|id)[atribut=hodnota]Img[width=120]Vybere všechny obrázky s šířkou nastavenou na 120 (element|třída|id)[atribut=~hodnota]Img[title=~flower]Vybere obrázky s atributem title který obsahuje flower Kompletní přehled na http://www.w3schools.com/cssref/css_selectors.asp

15 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

16

17

18

19

20

21

22 X Z pohledu modrého boxu je X margin, z pohledu červeného boxu se jedná o padding

23 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek