Css 3

354 views

Published on

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
354
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Css 3

  1. 1. CSS• CSS Cascading Style Sheet CSS• CSS CSS
  2. 2. CSS• CSS 2513• CSS web browser• 2539 CSS1• 4 2540 CSS2 W3C 12 2541• CSS3 2541 2552 2548 CSS CSS
  3. 3. CSS 3• CSS Level WC3• IE , Firefox , Safari , Chome Opera CSS3 CSS3
  4. 4. CSS31. CSS HTML code HTML2. code HTML3. style sheet HTML HTML tag
  5. 5. CSS34. Web Browser5. PDA6. attribute HTML W3C CSS CSS HTML
  6. 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. 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. 8. CSS Selectors• CSS3 Selectors W3C CSS2.1• Selectors CSS3 Selectors• 1. Group of selectors• 2. Simple Selectors• 3. Pseudo-elements
  9. 9. Group of Selectors• Selectors CSS Comma ( , )• a class strong RGB , ,• Selector
  10. 10. 1. Type Selectors• Type Selectors Element CSS Xhtml h {font-size: px;} h type selector• Element CSS CSS HTML• CSS SVG XML
  11. 11. Universal Selector• Universal Selector Selector U+ A]• Reset CSS {padding: ;} padding Attribute Selectors• Attribute Selectors CSS Attribute“ Attribute"
  12. 12. [attribute]• h1[id] {} a[rel] {color: red;} Attribute• [attribute="value"]• Element attribute• blockqoute title rgb , ,
  13. 13. HTML• CSS• hue = , saturation= , lightnes= img alt attribute
  14. 14. Pseudo-elements• ::first-line• ::first-letter• ::before x)• ::after x)• Selectors Printer• CSS Selectors
  15. 15. ::first-line
  16. 16. • CSS2 pseudo- classes pseudo-elements• CSS3 pseudo- elements• CSS3 foo pseudo-classes bar pseudo-elements
  17. 17. text-shadow• text-shadow CSS3 Horizontal Offset , Vertical Offset , Blur Color•
  18. 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. 19. engraveCELL TESTh2 { color: #444; background-color: #999; text-shadow: 0px 1px 0px#e7e7e7; }
  20. 20. embossCELL TESTh2 { color: #ddd; background-color: #444; text-shadow: 0px 2px 1px #111 }
  21. 21. CCS3 Background•• CSS3••Example 80x60pxdiv {background:url(img_flwr.gif);-moz-background-size:80px 60px; /* Old Firefox */background-size:80px 60px;background-repeat:no-repeat;}
  22. 22. CSS3 Transitions• CSS Flash JavaScripts• CSS• 2• 1. CSS
  23. 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. 24. • HTML CSS•• Aqua, , ,• Blue #0000FF Brown #A52A2A Orange #FFA500 YellowGreen #9ACD32
  25. 25. CSS• % •• In •• Mm •• em • 1em 2em element em em CSS• px • pixel
  26. 26. CSS3 Multiple Columns• CSS3• Examplediv {-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome*/ Lorem tincidunt ut exerci tationcolumn-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. 27. CSS3• Examplediv {-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome*/column-gap:40px;} 40
  28. 28. • dasdasdasdas

×