Tomáš Pijáček, PIJ006.  CSS – Cascading Style Sheets  Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML, XML  Oddělení vzhledu.

Prezentace na téma: "Tomáš Pijáček, PIJ006.  CSS – Cascading Style Sheets  Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML, XML  Oddělení vzhledu."— Transkript prezentace:

1 Tomáš Pijáček, PIJ006

2  CSS – Cascading Style Sheets  Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML, XML  Oddělení vzhledu dokumentu od jeho struktury a obsahu  Standard W3C  Vydány verze CSS 1 a CSS 2  Dokončuje se revize CSS 2.1 a pracuje se na v. CSS 3 2

3  Vyhlášen před několika lety, udává se rok 2005  Předpokládané dokončení 2015  Modularita  Hlavním přínosem jsou grafické efekty  průhlednost prvků  přechody, stíny  kulaté rohy  více sloupové rozvržení  nové selektory 3

4  Mozilla Firefox  Mozilla Firefox ver. 3.6.  Mozilla Firefox  Mozilla Firefox ver. 4  Opera  Opera ver. 11.01  Google Chrome  Google Chrome ver. 10.0  Safari  Safari ver. 5.0.4  Internet Explorer  Internet Explorer 8  Internet Explorer  Internet Explorer 9 4

5  Umožnění zaoblení objektu  Syntaxe border-radius: 100px; –moz-border-radius: 100px; –moz-border-radius: 100px;  Podporované prohlížeče 5

6  Umožňuje realizaci stínování ◦ 1. posunutí stínu horizontálně od objektu ◦ 2. posunutí stínu vertikálně od objektu ◦ 3. nastavení okraje stínu ◦ 4. nastavení barvy stínu  Syntaxe box-shadow:10px 5px 20px #000; -moz-box-shadow: 10px 5px 20px #000 -moz-box-shadow: 10px 5px 20px #000; -webkit-box-shadow: 10px 5px 20px #000 -webkit-box-shadow: 10px 5px 20px #000;  Podporované prohlížeče 6

7  Obdoba jako box-shadow  Využívá se pro stín textu  Syntaxe text-shadow: 5px 5px 5px #000000;  Podporované prohlížeče 7

8  Slouží k nastavení rotace a pohybu objektu  Translate  Translate – nastavuje 2D pohyb objektu po osách x a y, hodnoty: (x[em],y[em])  Syntaxe transform: translate(3em,1em); -moz-transform: translate(3em, 1em); -webkit-transform: rotate(3em, 1em); -o-transform: translate(3em, 1em); 8

9  Rotate  Rotate – otáčí objekt, hodnoty: (x[deg])  Syntaxe transform: rotate(100deg); -moz-transform: rotate(100deg); -o-transform: rotate(100deg); -o-transform: rotate(100deg); -webkit-transform:rotate(100deg); 9

10  Scale  Scale – pracuje s velikostí objektů, hodnoty: (x). x = nastavuje zvětšení objektu.  Syntaxe transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); 10

11  Dává objektům průhlednost  Interval kde 0 je 100% průhlednost  Syntaxe opacity:0.2;  Podporované prohlížeče 11

12  Rozšíření funkcionalitu stávajících selektorů  Jedná se většinou pseudotřídy  Funkcionalita podobná jak ji známe například u JQuery selektorů 12

13  CSS 2 E[att] - Element E, který obsahuje zadaný atribut E[att=”val”] -||- se zadanou hodnotou „val“  CSS 3 E[att^=”val”] - Element E, jehož hodnota atributu začíná „val“ E[att$=”val”] - Element E, jehož hodnota atributu končí „val“ E[att*=”val”] - Element E, jehož hodnota atributu obsahuje „val“ 13

14 E:empty - Vybere prázdný element. Např. tedy prázdný E::selection - Když vybíráte text myší, tak se nějakým způsobem zvýrazňuje. Typicky podbarvuje nějakou barvou E:checked - Vybere checkboxy, který jsou zaškrtnuté 14

15  E:nth-of-type(n) – n-tý element totožného typu (nεℕ)  E:nth-of-type(odd|even) – všechny liché| sudé elementy totožného typu. Vhodné pro rozlišení řádků  p:nth-of-type (5n+1) – výběr elementů podle matematické rovnice p:nth-of-type(2n+1) - liché elementy totožného typu p:nth-of-type(2n) - sudé elementy totožného typu 15

16  CSS 3.0 Maker ◦ Border Radius, Gradient, CSS Transform, CSS Animation, Rotation, … 16

17  Sancha Animator ◦ Transition and animations, 2D & 3D Transform, Layouts, Gradients, … 17

18  CSS3 Previews http://www.css3.info/  Webové služby http://zdrojak.root.cz/clanky/pi-oviny-s-css3/  Seriál Webdesignérův průvodce po CSS3 http://zdrojak.root.cz/serialy/webdesigneruv-pruvodce- po-css3/ http://zdrojak.root.cz/serialy/webdesigneruv-pruvodce- po-css3/ 18

19 19