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 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

 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

 Mozilla Firefox  Mozilla Firefox ver  Mozilla Firefox  Mozilla Firefox ver. 4  Opera  Opera ver  Google Chrome  Google Chrome ver  Safari  Safari ver  Internet Explorer  Internet Explorer 8  Internet Explorer  Internet Explorer 9 4

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

 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

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

 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

 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

 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

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

 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

 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

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

 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

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

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

 CSS3 Previews  Webové služby  Seriál Webdesignérův průvodce po CSS3 po-css3/ po-css3/ 18

19