Css 3

1. CSS • CSS Cascading Style Sheet CSS • CSS CSS

2. CSS • CSS 2513 • CSS web browser • 2539 CSS1 • 4 2540 CSS2 W3C 12 2541 • CSS3 2541 2552 2548 CSS CSS

3. CSS 3 • CSS Level WC3 • IE , Firefox , Safari , Chome Opera CSS3 CSS3

4. CSS3 1. CSS HTML code HTML 2. code HTML 3. style sheet HTML HTML tag

5. CSS3 4. Web Browser 5. PDA 6. attribute HTML W3C CSS CSS HTML

6. • HTML <html><body> <h1><font color="red" face="Arial"> • font></h1> <p><font color="black" face="Arial"><b> • b></font></p> <h1><font color="red" face="Arial"> • font></h1> <p><font color ="black" face="Arial"><b> b></font></p>

7. • style sheet code HTML code • html><head> <style type="text/css"> h1{color:red; font-family:Arial; } p{color:black; font-family:Arial; font-weight:bold } </style> </head> <body> <h1> h1> <p> p> <h1> h1> <p> p>

8. CSS Selectors • CSS3 Selectors W3C CSS2.1 • Selectors CSS3 Selectors • 1. Group of selectors • 2. Simple Selectors • 3. Pseudo-elements

9. Group of Selectors • Selectors CSS Comma ( , ) • a class strong RGB , , • Selector

10. 1. Type Selectors • Type Selectors Element CSS Xhtml h {font-size: px;} h type selector • Element CSS CSS HTML • CSS SVG XML

11. Universal Selector • Universal Selector Selector U+ A] • Reset CSS {padding: ;} padding Attribute Selectors • Attribute Selectors CSS Attribute“ Attribute"

12. [attribute] • h1[id] {} a[rel] {color: red;} Attribute • [attribute="value"] • Element attribute • blockqoute title rgb , ,

13. HTML • CSS • hue = , saturation= , lightnes= img alt attribute

14. Pseudo-elements • ::first-line • ::first-letter • ::before x) • ::after x) • Selectors Printer • CSS Selectors

15. ::first-line

16. • CSS2 pseudo- classes pseudo-elements • CSS3 pseudo- elements • CSS3 foo pseudo-classes bar pseudo-elements

17. text-shadow • text-shadow CSS3 Horizontal Offset , Vertical Offset , Blur Color •

18. text-shadow <head> <meta charset='UTF- '> <style> tr:first-child { background-color: blue; color: white; } h { text-shadow: px px px ; } </style></head> </html> 3px 4px 5px

19. engrave CELL TEST h2 { color: #444; background-color: #999; text-shadow: 0px 1px 0px #e7e7e7; }

20. emboss CELL TEST h2 { color: #ddd; background-color: #444; text-shadow: 0px 2px 1px #111 }

21. CCS3 Background • • CSS3 • • Example 80x60px div { background:url(img_flwr.gif); -moz-background-size:80px 60px; /* Old Firefox */ background-size:80px 60px; background-repeat:no-repeat; }

22. CSS3 Transitions • CSS Flash JavaScripts • CSS • 2 • 1. CSS

23. CSS3 Transitions • div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } Note : - div:hover { width:300px; }

24. • HTML CSS • • Aqua, , , • Blue #0000FF Brown #A52A2A Orange #FFA500 YellowGreen #9ACD32

25. CSS • % • • In • • Mm • • em • 1em 2em element em 'em' CSS • px • pixel

26. CSS3 Multiple Columns • CSS3 • Example div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ Lorem tincidunt ut exerci tation column-count:3; ipsum dolor laoreet sit amet, dolore ullamcorper suscipit } 3 consectetue magna lobortis nisl r adipiscing aliquam erat ut aliquip ex elit, sed volutpat. Ut ea diam wisi enim ad commodo 3 nonummy nibh euismod minim consequat. veniam, quis Duis nostrud

27. CSS3 • Example div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } 40

Css 3

Esté a ler uma amostra.

Confira estes a seguir

Css 3

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (8)

Semelhante a Css 3 (20)

Css 3