css 3
Post on 31-Jul-2015
38 Views
Preview:
TRANSCRIPT
CSS3
Co je CSS3
Jazyk pro popis způsobu zobrazení elementů na stránkách napsaných v jazycích HTML, XHTML nebo XML.
Rozdělení specifikace na jednotlivé moduly
Vývoj zahájen 2005
Dokončení 2015
CSS3 moduly
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
Selektory
[att^=val] – začíná
a[href^=“https://“]
[att$=val] – končí a[href^=“.pdf“]
[att*=val] – obsahuje
div[id*=“text“]
elm1 ~ elm2
checkbox:checked ~ div{ … }
:first-child, nth-of-type(3n),
:last-child
Image Valuesbackground-image: image();
Image fallback
background-image: image("wavy.svg", 'wavy.png' , "wavy.gif " , #000000 );
Image Fragments
background-image: image('sprites.svg#xywh=40,0,20,20');
User interfacebox-sizing: content-box|border-box|initial|inherit;
div{
box-sizing:content-box;
width:100px; background:#ff0000;
border:5px solid #ffffff;
}
div{
box-sizing:border-box;
width:100px; background:#ff0000;
border:5px solid #ffffff;
}
100px 100px
CSS4
Cascading Scriptsheets
#hello-world:hover {
script: script(alert('hello world'));
}
Proper Email Styling Support
Použitelnost tagů <div>, <article>, <section>, …
Externí css soubor
New and Old Properties
text-decoration: marquee | blink ;
retina: true;
background-music: muzak
top related