Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
145
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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