Návrh a tvorba WWW Cvičení 3 Pokročilá práce s HTML5 a CSS 3

Box

Pozicování

Pokročilá práce se selektory vzor význam E F Selektor následníka – všechny elementy F, které jsou uvnitř elementu E E>F Selektor přímého následovníka – všechny elementy F, které jsou přímím následovníkem E E~F Selektor následných sourozenců – všechny elementy F, které jsou následnými sourozenci elementu E E+F Selektor následného sourozence – elementy F, který je následným (prvním) sourozencem elementu E

Selektory skrz atributy vzor význam E[foo] element E s atributem “foo” E[foo=“bar”] element E s atributem “foo” jehož hodnota se rovná “bar” E[foo~=“bar”] element E s atributem “foo” jehož jedna z hodnota se rovná “bar” E[foo^=“bar”] element E s atributem “foo” jehož hodnota začíná řetězcem “bar” E[foo$=“bar”] element E s atributem “foo” jehož hodnota končí řetězcem “bar” E[foo*=“bar”] element E s atributem “foo” jehož hodnota obsahuje subřetězec “bar” E[foo|=“bar”] element E s atributem “foo” jehož hodnota začíná řetězcem “bar”, po které následuje pomlčka

Pseudotřídy vzor význam E:link ještě nenavštívený odkaz E:visited již navštívený odkaz E:active aktivovaný odkaz E:hover zaměřený odkaz (myší) E:focus zaměřený odkaz (tab) E:lang(en) element E v jazykové mutaci en E:empty element, který nemá potomky E:first-child první potomek elementu E E:last-child poslední potomek elementu E

Pseudoelementy vzor význam E::first-line první řádka elementu E::first-letter První písmeno elementu

@ pravidla @charset @import @media @page @font-face definice znakové sady stylesheetu @import import stylu ze zadaného stylesheetu @media svazuje styly s konkrétním typem výstupu @page pravidlo pro stránková média @font-face umožňuje import vlastních fontů @charset "iso-8859-1" @import url("styl.css"); @media print {/* stylové vlastnosti pro tisk */} @page :first {margin-top: 10cm} @font-face {font-family: "Scarborough Light"; src: url("http://www.font.site/s/scarbo-lt");}

header zdrojový kód: blok_3/css/basic01.htm

navigation zdrojový kód: blok_3/css/basic02.htm

aside zdrojový kód: blok_3/css/basic03.htm

section middle zdrojový kód: blok_3/css/basic04.htm

section customers zdrojový kód: blok_3/css/basic05.htm

footer zdrojový kód: blok_3/css/basic06.htm

UML UML (Unified Modeling Language) je jazyk umožňující specifikaci, vizualizaci, konstrukci a dokumentaci artefaktů softwarového systému. Specifikace vyjadřuje zásadu vytvoření přesných, jednoznačných a úplných modelů softwarového procesu. Vizualizace znamená, že se jedná o grafický jazyk. Konstrukce odpovídá požadavku přímého napojení jazyka na širokou škálu programovacích jazyků. UML se skládá z řady diagramů umožňujících postihnout různé aspekty systému. Jedná se celkem o čtyři základní náhledy (funkční, logický, dynamický, implementační).

Příklad UML use case

Příklad UML activity diagram

Kontrolní otázky Jaké je výchozí zobrazovací schéma dokumentu? Co jsou to plovoucí elementy? Jaké máme formy pozicování elementů? Jak je možné v CSS řídit vykreslování překrývajících se elementů? Co to jsou „at“ pravidla?