CSS Learning Farsi

www.txt.
ir
www.txt.ir
101 CSS
:
:
www.txt.ir
www.txt.ir
1

HTML CSS
CSS CSS

CSS
HTML
CSS
(CSS selectors) CSS

font CSS
ems point pixel :
> <h1

font
line-height

CSS
www.txt.ir
www.txt.ir
2

CSS

><body

CSS
) (
HTML CSS

CSS

) (scroll
scroll

CSS
CSS

CSS
CSS
CSS

CSS

rollover Javascript CSS

CSS

HTML
www.txt.ir
www.txt.ir
3
CSS

CSS

> <table CSS

CSS

. CSS

.

CSS Netscape 4
Netscape 4
www.txt.ir
www.txt.ir
4
4

CSS
6

) (bug CSS !
6 !
W3C
webtv

.

CSS

CSS
) (class ) (ID
) (inline ) (block-level

) (margins ) (padding CSS
align HTML
float
><table

CSS
CSS

CSS
CSS
www.txt.ir
www.txt.ir
5
) (thumbnail > <table

CSS

) (scroll

CSS
CSS

CSS

CSS

CD

www.txt.ir
www.txt.ir
6

edgeofmyseat.com.

.

.

.
.

. .
CSS CSS .
CSS.

.
.

.

CSS
. .

CSS

www.txt.ir
www.txt.ir
7
CSS CSS
CSS
HTML
CSS HTML CSS
CSS . :
><link rel="stylesheet" type="text/css" href="sheet1.css" /
CSS sheet1.css .
> <head .
CSS HTML :
>"<style type="text/css
XXXXXXX
></style
> <head CSS

X .
CSS .
-1 CSS
CSS .

) HTML
> <body (.

CSS .
.
www.txt.ir
www.txt.ir
8
> <h1
CSS
. > <h1 :
><h1>Amir Abbas Abdolali</h1

. HTML
> <font > <h1
> <font>, <i> ,<u .... .
CSS :
;h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline
} ;background: yellow
> <style
> <head .
> <h1
times new roman
. 1000 > <h1 .
HTML ><font
.
CSS HTML
background-image > <h1
HTML . :
;h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline
} ;background: yellow url(filename.png) repeat-x

...
-2

> <font
50 .
www.txt.ir
www.txt.ir
9
times
new roman Tahoma .
HTML 50 > <font
. CSS
. :
;h1 {color: maroon; font: italic 2em Tahoma, serif; text-decoration: underline
} ;background: yellow
> <h1 times

Tahoma .
.
-3
700 .
> <h1 > <h6 .
700 .
HTML 700
> <h1 > <h6 .
CSS 1 .
CSS . CSS
.
CSS > <h1> <h6
. 700 .
-4 HTML

700 > <h1> <h6
5 .
3500 . 3500
. 3500
CSS CSS .
CSS .
www.txt.ir
www.txt.ir
10
3500 HTML !!! CSS

-5
HTML HTML
. > <font>, <basefont> , <u> , <strike

. HTML XML
CSS
XML .

CSS HTML .

.
.
:
)File: listtype.html (excerpt
><ul
><li>list item one</li
><li>list item two</li
><li>list item three</li
></ul
) listtype.html (excerpt
listtype.html excerpt
listtype.html ) (.

.
listtype.html .

.
www.txt.ir
www.txt.ir
11

. CSS .

.
CSS CSS

" .
GIF CSS
".
. CSS CSS
.
CSS
CSS .

.
CSS .
CSS .

.

.
.

CSS .
.

. .
!

CSS .
www.txt.ir
www.txt.ir
12

CSS .
CSS CSS
.
.
CSS

CSS .

: CSS
.
CSS CSS .
CSS
.
:

...
CSS
.
CSS :
CSS .

)
(
.
www.txt.ir
www.txt.ir
13
: )(navigation

CSS . CSS
) (tab
CSS
.
)(

.
:

)(spreadsheet
.

CSS .
)(
spreadsheet
.
:

CSS .

.
:

) (bug
www.txt.ir
www.txt.ir
14
. CSS
) ( .
.
: CSS
CSS
. CSS

.
: CSS
.

.

.

http://www.sitepoint.com/books/cssant1/

http://www.persia-cms.com .
CSS . a.abdolali@gmail.com
.
www.txt.ir
www.txt.ir
15
CSS
CSS . CSS
CSS
. CSS
.
CSS
CSS
.
CSS
CSS
.
)(
CSS .
CSS

.
.
www.txt.ir
www.txt.ir
16
HTML
CSS .
. CSS
CSS .
HTML
.
sans-serif ) Arial
( TahomaVerdana .
serif ) Times New
( Roman sans-serif
> <font .
10 20 > <font
. 5
> <font 100 .
50 > <font
1000
.
: " verdana
tahoma
verdana " .
> <font
100 ) 1000 ( > <font
.
.
HTML > <basefont

.
.
HTML 4.01 XHTML 1.0
CSS
XHTML 1.0 Strict HTML 4.01 Strict .
transitional DOCTYPE . CSS
www.txt.ir
www.txt.ir
17
.
CSS HTML .
CSS HTML
CSS .
CSS
CSS )
(...
.
HTML :
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
>""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
>"<html xmlns="http://www.w3.org/1999/xhtml
><head
><title>A Simple Page</title
"<meta http-equiv="content-type
>content="text/html; charset=iso-8859-1" /
></head
><body
><h1><font face="sans-serif" color="#3366CC">First Title</font
></h1
><p></p
><h2><font face="sans-serif" color="#3366CC">Second Title</font
></h2
><p></p
><h2><font face="sans-serif" color="#3366CC">Third Title</font
></h2
><p></p
></body
></html
> <h1 > <h2 .

> <font
sans-serif )
arial (.
www.txt.ir
www.txt.ir
18

.
.
CSS :
><head
{ h1 h2
;font-family: sans-serif
;color: #3366CC
}
></style
></head
><body
><h1>First Title</h1
><p></p
><h2>Second Title</h2
><p></p
><h2>Third Title</h2
><p></p
></body
></html
> <style > <head

sans-serif
> <h1 > <h2 .
> <style . CSS
. CSS > <font
> <body .
3 .
CSS
CSS HTML . CSS
HTML css > <style .
. CSS
> <style .
www.txt.ir
www.txt.ir
19
:
CSS Styles here
></style
type .
CSS text/css .
> <style > <style
.
> <style .

) .CSS ( HTML .
HTML
. .
) CSS style.css(
> <link :
><link rel="stylesheet" type="text/css" href="styles.css" /

. ) CSS
(external CSS :
><head
><link rel="stylesheet" type="text/css" href="styles.css" /
></head
><body
><h1>First Title</h1
><p></p
><h2>Second Title</h2
><p></p
><h2>Third Title</h2
><p></p
></body
></html
www.txt.ir
www.txt.ir
20
style.css :
{ h1, h2
;font-family: sans-serif
;color: #3366CC
}
style.css
HTML .

.
(CSS selectors) CSS

CSS : ) (selectors

) (properties
. h1 h2
> <h1 > <h2 .
} { ...
. CSS
.
)(
.
www.txt.ir
www.txt.ir
21
)(tag selectors
.
HTML .
.
:
{ Body, p, td, th, div, blockquote, dl, ul, ol
;font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif
;font-size: 1em
;color: #000000
}
HTML
) ( . > <body
) > <body
> <body
(
.

.
) ( Pseudo-Class Selectors
> <a HTML .
) link ( ) vlink ( ) alink (
> <body )
... ( CSS .
4 .
:
} ;a:link { color: #0000FF
} ;a:visited { color: #FF00FF
} ;a:hover { color: #00CCFF
} ;a:active { color: #FF0000
www.txt.ir
www.txt.ir
22
CSS . link
. visited

.
.
active
.
)(Class Selectors
HTML
CSS
.
:
} ;p { color: #0000FF

!
CSS
:
} ;p { color: #0000FF
} ;.sidebar { color: #FFFFFF

sidebar . HTML
. sidebar
:
<p class="sidebar">This text will be white, as specified by the
>CSS style definitions above.</p
www.txt.ir
www.txt.ir
23

" class="sidebar
:
"<p class="sidebar">This text will be white, <a class="sidebar
>href="link.html">and so will this link</a>.</p

bold sidebar
. CSS
sidebar .
:
} ;p { color: #0000FF
} ;a.sidebar:link, a.sidebar:visited { font-weight: bold
:link :visited > <a

.
.
sidebar . )
:hover(
CSS
.
CSS
CSS . Cascading Style Sheets .
)(Contextual Selectors

" class="sidebar > <a .
sidebar
:
.
CSS :
www.txt.ir
www.txt.ir
24
} ;p { color: #0000FF
{ p.sidebar a:link, p.sidebar a:visited
;font-weight: bold
;color: #FFFFFF
}
HTML
<p class="sidebar">This text will be white
><a href="link.html">and so will this link</a>.</p
.
) p.sidebar a:link .
p sidebar a:link
( .
sidebar . .

CSS sidebar
.
)(ID Selectors

.
ID .
:
<p id="sidebar1">This paragraph is uniquely identified by the ID
>"sidebar1".</p
# CSS
.
:
} ;#sidebar1 { color: #FFFFFF
.
sidebar1 :
www.txt.ir
www.txt.ir
25
{ #sidebar1 a:link
;font-weight: bold
;color: #FFFFFF
}
.
) ( netscape 4 .
)(
.
CSS
http://forum.persia-cms.com.
CSS CSS Properties

CSS color
font-size font-family font-weight .
.

CSS .
CSS CSS
.
. CSS .
CSS
.
www.txt.ir
www.txt.ir
26

:
CSS

CSS . CSS
CSS
CSS
CSS .
CSS

CSS
.

.

.
www.txt.ir
www.txt.ir
27
font CSS
CSS 4
font CSS
font .
font
. :
"<p><font color="#800080
face="Verdana,Geneva,Arial,Helvetica,sans-serif">These
stuffed peppers are lovely as a starter, or as a side dish
for a Chinese meal. They also go down well as part of a
>buffet and even children seem to like them.</font></p
:
CSS ) color( > <p #800080
) font-family ( Geneva Verdana sons-serif Helvetica
Arial .
{p
;color: #800080
;font-family: Verdana,Geneva,Arial,Helvetica,sans-serif
}

> <p
) (markup .
Verdana Times 100
!
)(
font CSS
.
verdana
Geneva
.
www.txt.ir
www.txt.ir
28
ems point pixel :

CSS font-size :
;font-size: 12px
.
.

:
2.1 .
2.1

pt
pc
px
em
ex
%
Points
Picas
Pixels
Ems
Exes
Persentages
Point Pica
{p
;font-size: 10pt
}
Point Pica
. .
. Point pica .
www.txt.ir
www.txt.ir
29

Point Pica
.

Point
Pica
.
Pixel
{p
;font-size: 12px
}

.
.
.

.
.
.
point
.
www.txt.ir
www.txt.ir
30
Ems
Em Em ""M
" "M . CSS em

. Em

. CSS
> <p 1em :
{p
;font-size: 1em
}
Internet Explorer 6
Medium 2.1 .
2.1 font-size 1em medium .
) (Largest 1em
2.2 .
www.txt.ir
www.txt.ir
31
2.2 font-size 1em largest .

.
Ems .
10 ) (
:
{p
;font-size: 0.9em
}
%10
:
{p
;font-size: 1.1em
}
www.txt.ir
www.txt.ir
32
)(

HTML
> <p > <body > <body
> <p . CSS
. > <body
em1
> <p > <div
) > ( <body
.
.
> <html
. > <body > <head ><html
. > <p ><body
> <p > <strong > <em ....

CSS

www.txt.ir
www.txt.ir
33
CSS .
.

:hover :active
.
:
File: textdecoration3.css
{ a:link, a:visited, a:hover, a:active

;text-decoration: underline
;color: #6A5ACD
;background-color: transparent
}
#6A5ACD
2.7 .
- 2.7 .
:hover :active

www.txt.ir
www.txt.ir
34
.

. css ) : 2.8 (
File: textdecoration4.css
{ a:link, a:visited
;text-decoration: underline
;color: #6A5ACD
;background-color: transparent
}
{ a:hover, a:active
;text-decoration: underline overline
;color: #191970
;background-color: #C9C3ED
}
- 2.8 .

.
:visited .
www.txt.ir
www.txt.ir
35
.

.

Hover Visited Link :
.Active
. LoVe HAte
) (
www.txt.ir
www.txt.ir
36

) (

.

.

CSS . 3.1
.
3.1
{ img
;border-width: 1px
;border-style: solid
;border-color: #000000
}
www.txt.ir
www.txt.ir
37

{ img
;border: 1px solid #000000
}
3.2 .
3.2 .

. CSS
.
{ .imgborder
}
><img src="myfish.jpg" alt="My Fish" class="imgborder" /
) (
.
)File: imageborders.css (excerpt
{ #album img
}
www.txt.ir
www.txt.ir
38

. > <img #album
.
HTML
CSS
" border="0
. border
> <img HTML
. border
HTML XHTML.

. border
none .
{ img
;border: none
}
CSS
CSS background
> <body
HTML 4 CSS .

File: backgrounds.css
{ body
;background-color: #ffffff
;)background-image: url(peppers_bg.jpg
;background-repeat: no-repeat
}
www.txt.ir
www.txt.ir
39
peppers_bg.jpg CSS
3.3.
3.3 .
background-image
.
3.4
background-repeat
no-repeat . :
repeat

3.4
repeat-x

3.5
repeat-y

3.6
www.txt.ir
www.txt.ir
40
- 3.4 .
- 3.5 .
- 3.6 .
www.txt.ir
www.txt.ir
41

.
.
. 9.15
9.15
.
.
> <div :
File: corners3.html

><head
><title>Rounded corners</title
"<meta http-equiv="Content-Type
><link rel="stylesheet" type="text/css" href="corners3.css" /
></head
><body
>"<div class="rndbox
"<div class="rndtop"><img src="topleft.gif" alt="" width="30
>height="30" /></div
><p>Lorem ipsum dolor sit amet, consectetuer adipiscing </p
""=<div class="rndbottom"><img src="bottomleft.gif" alt
>width="30" height="30" /></div
></div
></body
></html

> <div rndtop rndbottom .
)File: corners3.css (excerpt
{ .rndbox
;background: #C6D9EA
;width: 300px
www.txt.ir
www.txt.ir
42
;font: 11px Verdana, Arial, Helvetica, sans-serif

;color: #000033
}
{ .rndtop
;background: url(topright.gif) no-repeat right top
}
{ .rndbottom
;background: url(bottomright.gif) no-repeat right top
}
{ .rndbox p
;margin: 0 8px
}
. 9.16.
9.16 .

visibility
.

9.17 .
www.txt.ir
www.txt.ir
43
. 9.17
CSS

.
File: translucent.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Translucency</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="translucent.css" />
</head>
<body>
<div id="container">
www.txt.ir
44
www.txt.ir
<div class="textblock">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
</div>
</div>
</body>
</html>
File: translucent.css
#container {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 300px;
background: url(limes.jpg) no-repeat;
}
#container .textblock {
filter: alpha(opacity=60);
opacity: 0.6;
margin-top: 50px;
margin-left: 50px;
width: 300px;
background: #ffffff;
border: 1px solid #007101;
padding: 0.5em;
font: 80%/1.6 Arial, Helvetica, sans-serif;
}
opacity [ 4] CSS3
.
. HTML
40 ) 60 textblock < div>
: (
File: translucent.css (excerpt)
opacity: 0.6;
:
File: translucent.css (excerpt)
filter: alpha(opacity=60);
_____________
[4] http://www.w3.org/TR/css3-color/#transparency
www.txt.ir
45
www.txt.ir

.

. 5
Safari
Konqueror Opera .

.
. 9.18 Konqueror 3.2
.
9.18 .

.
www.txt.ir
www.txt.ir
46
CD

CSS CSS
. style master
CSS

CD .

.

CD

40 CSS zengarden
40 CSS CSS zengarden CD
CSS
.
www.txt.ir
www.txt.ir
47

CSS Learning Farsi

Uploaded by

Copyright:

Available Formats

You might also like

CSS Learning Farsi

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Learning Farsi

Uploaded by

Copyright:

Available Formats

www.txt.

) (thumbnail > <table

> <head CSS

> <h1 times

3500 HTML !!! CSS

> <h1 > <h2 .

> <style > <head

(CSS selectors) CSS

:link :visited > <a

CSS CSS Properties

ems point pixel :

2.2 font-size 1em largest .

{ a:link, a:visited, a:hover, a:active

"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

;font: 11px Verdana, Arial, Helvetica, sans-serif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

You might also like