Css 31. 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
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
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
•
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;
}
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