Css 3

CSS
• CSS Cascading Style Sheet
CSS

• CSS

CSS

CSS
• CSS 2513
• CSS
web browser

• 2539 CSS1

• 4 2540
CSS2 W3C 12
2541
• CSS3 2541
2552 2548 CSS
CSS

CSS 3
• CSS Level
WC3
•

IE , Firefox , Safari , Chome Opera
CSS3

CSS3

CSS3
1. CSS
HTML
code HTML

2. code HTML

3.
style sheet HTML

HTML tag

CSS3
4.
Web Browser
5.

PDA
6.
attribute HTML
W3C CSS
CSS HTML

•
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>

• 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>

CSS
Selectors
• CSS3 Selectors
W3C

CSS2.1
• Selectors CSS3
Selectors

• 1. Group of selectors
• 2. Simple Selectors
• 3. Pseudo-elements

Group of Selectors
• Selectors CSS

Comma ( , )

• a class
strong
RGB , ,
• Selector

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

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

Attribute“
Attribute"

[attribute]
• h1[id] {} a[rel]
{color: red;}
Attribute
• [attribute="value"]
• Element attribute

• blockqoute title
rgb , ,

HTML

• CSS

• hue
= , saturation= , lightnes=
img alt attribute

Pseudo-elements
• ::first-line
• ::first-letter
• ::before x)
• ::after x)
• Selectors

Printer
• CSS Selectors

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

text-shadow
• text-shadow CSS3

Horizontal
Offset , Vertical Offset , Blur Color
•

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

engrave

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

emboss

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

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;
}

CSS3 Transitions
• CSS

Flash JavaScripts

• CSS

• 2
• 1. CSS

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; }

• HTML CSS
•
• Aqua,

, ,
• Blue #0000FF
Brown #A52A2A
Orange #FFA500
YellowGreen #9ACD32

CSS

• % •
• In •
• Mm •
• em • 1em
2em
element
em
'em' CSS

• px
• pixel

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

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

Css 3

More Related Content

What's hot

Similar to Css 3

Css 3