Your SlideShare is downloading. ×
Css 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Css 3

149
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
149
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. CSS31. CSS HTML code HTML2. code HTML3. style sheet HTML HTML tag
  • 5. CSS34. Web Browser5. PDA6. 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. engraveCELL TESTh2 { color: #444; background-color: #999; text-shadow: 0px 1px 0px#e7e7e7; }
  • 20. embossCELL TESTh2 { color: #ddd; background-color: #444; text-shadow: 0px 2px 1px #111 }
  • 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. 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• 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. CSS3• Examplediv {-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome*/column-gap:40px;} 40