Большая книга CSS

css
Second Edition
David Sawyer McFarland
POGUE PRESS'"
O'REILLY@
Beijing Cambridge Farnham Kln Paris Sebastopol Taipei Tokyo
css
~nnTEP
--
2012
32.988.02
004.738.5
17
.
17
CSS.
O'Reilly ).
2- .- .: ,
2012.-560
.: .- ( ((
ISBN 978-5-459-01560-7
- .

HTML,
CSS
, .
CSS
)- ~ ,
-.
((:
CSS,
( ).
- ,
.
-,
CSS.
32.988.02
004.738.5
.
.
, , ,
. , ,

, .
ISBN 978-5-459-01560-7
ISBN 978-0596802448 (.)
2009 David
Sawye
McFarland
000 <<,
,
000
<<,
2012
2012
.............................................. . 12

&
................................... 13
......................................... 14
......................................- ........ 15
........................................28
1.
CSS
1. CSS -
2.
3.
4. .......................96
5. : ..... 106
2.
HTML .........................30
.................... .44
............ 63
CSS
6.
............................ 126
7.
, ,
............................ 165
8.
....... / ......... 203
9.
................. 243
10.
........... : ........ 290
3.
11. CSS .......................... 318

12. ..... 329
13. - ......... 376
14. CSS - ............... 417
15. CSS ...................... 437
16. CSS 3 - .......................... 460
1.
2. CSS
3.
CSS ..................... 482
Dreamweaver CS4 ...................... 510
CSS ............................ 541
................................. 549
................................................. 12

&r
.................................... 13
............................................ 14
.................................................. 15

CSS ...........................................
CSS ............ -..............................
.......................................
HTML: ......................................
L- .....................................
XHTML: HTML ...................................
HTML 5 - ......................................
CSS .............................
.............................................
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . .
MissigMauals.com ...................................
......................................
................................................
, .....................
Safari ...................... : . ..................
15
16
16
17
17
19
20
21
22
24
24
25
25
26
26
27
. .......................................... 28
1.
CSS.
1. CSS - HTML ........................ 30
HTML:
..................................
L- CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
doctype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Iteret Explorer 8 ..............................
2.
.................... 44
............................................
....................................
...................................
.....................................
: ........................

3.
30
33
40
42
45
47
48
49
52
........ 63
: ............................. 63
..........................
ID-: - .................
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
..................................
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: ...............
:
65
67
70
71
75
80
85
4. rn ...................... 96
? .....................................
96
.................... 98
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
: ........................... ; . . 100
5. rn :
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
........................................
..
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
...................................
: ...............
:
106
111
114
117
119
6.
2.
............................ 126
..............
. . . . . . .
. .
. . .
. . . . . . . . . . . . .

........
........
........
........
........
7.
, ,
CSS
.
.
.
.
.
..................
..................
..................
..................
..................
. . . . . . . . . . . . . .
............................ 165
....................................
........................
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
......................................
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . .
: , , ..............
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS
8.
<img> ..........................................
.....................................
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
background . . . . . . . . . . . . . . . . . . . . . .
1: . . . . . . . . . . . . . . . . .
2: ......................
3: ...........
.........................................
9.
165
167
175
179
180
185
191
202
............... 203
126
133
138
142
149
154
203
204
209
210
216
218
224
231
241
............... 243
............................ ~
....
. . . . . . . . . . . . . . . . . . . .. : . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
1: ............ : ............
2: ..................
243
246
253
263
272
278
10
10.
...................
290
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
1: . . . . . . . . . . . . . . . . . . 304
2: ................... 311
11.
3.
SS-

12.
CSS .........................
318
......... , ....................... 318
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
........................................ 323
.............................................
329
. . . . . . . . . . . . . . . . 332
. . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . 353
1: . . . . . . . . . . . . . . 360
2: ............ 368
13.
........................................
376
. . . . . . . . . . . . . . . . . . . . . . . 376

. . . . . . . . . . . . . . . . . . . . . . . . . . 390
: . . . . . . . . . . . 403
14. CSS
- ............. 417
- ............... 417
- .............. 420
............................ 421
: ............. 429
15.
CSS ....................
437
...................................
437
........................... 438
11
..................... 446

Iternet
16. CSS 3 -
. . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Explorer . . . . . . . . . . . . . . . . . . . . . . . . . 455
.........................
460
CSS 3 .............................................. 461

CSS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
RG-
............................................ 467
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
........................................... 472
...................................... 474

........................... 477
1.
2. CSS
3.
CSS ....................
482
Dreamweaver CS4 .....................
510
CSS ............................
541
. .................................. 549

(David Sawyer McFarland)
Sawyer McFarland Media, Inc.,
- ,
.
1995 :
- -
. -

(Berkeley Multimedia
Research Center),
-
Macworld.com.
, , .
- ,

(Electronic Art),
.
Practical Web
Design, Developer's]ournal Macworld,
CreativePro.com.
Dreamweaver: h Missing Manual ]avaScript:
Missing Manual.
missing@sawmac.com
( , ,

3).
(Nan Barer)
() 9
Missing Manual
Macintosh G4. : nanarer@oreilly.com.

(Nellie McKesson) ( )-
r. , Dr. & Mrs. Van
der Trampp (http://mysapce.com/drmrsvandertrampp)
J
(http://mattsaundersbynellie.etsy.com). : nellie@oreilly.com.

(Marcia Simmons) ( ) -
. -.

(Angela Howard)
(www.smartkitty.org).
( )-
10 ,
, :
, .
, .
(Tony Ruscoe)
( )- -.
, .
Spectrum BASIC
1980- .
ZX
1997
-,
. http://ruscoe.net/ ,
: http://ruscoe.name/.
(Christopher Schmitt) ( )-
,

CSS Cookbook.
New Architect List Apart, Digital W W
Reference. ,
. ,
Adobe Task F orce - (W aSP, W
Standards Project). : http://www.cristopherschmitt.com/.

, ,
, .
, ,
, (Zoe Gillenwater)-
. , -
, ,
CSS
, -.
, (David
Pogue),
-
; (Scholle) -
; (Graham), ,
;
, --!~;
(Kate), , :
, (Doug), (), (David), (Marisa), (Tessa),
(Phyllis), (Les), (Del),
(Patricia)
(Mike).
Cascading Style Sheets (CSS),
-. ,
, , ,
.
,
, .
, ? !
CSS
, .

CSS.
CSS
, Microsoft
W ord, -, Adobe InDesign, CSS
.
- ,
-.
- .
CSS HTML , . HTML
, , ,
. .,
CSS
L- . ,
HTML ,
CSS -
-.
HTML,
, ,
CSS
, ,

50
CSS
HTML.
.
, -
, ,
50 .
, ,
, .
, , ,
.
L- , ,
, ( <hl>)
, , .
16
CSS
.]
CSS -
HTML.
1995 , CSS HTML.
, , HTML ,
. , HTML

, ,
. ,
, - .

CSS, ,
HTML.
CSS
(,
)
( ).
CSS ,
.
, . .
CSS ,
HTML. , <font>. CSS,
-.
.
.
.
,
, .

.
-----------------------------------------------
L
- Wold Wide Web Cosortium (W),

WWW, ,
HTML (
<fot>, ), .
www.codehelp.co.uk/html/
depecated.html.
CSS).
HTML (,
( -) ,

<html>, <>, <hl>, <t> . .,

CSS HTML, , -
17
L-
CSS,
, -
L-.
HTML,
, .
-----------------------------------------------
HTML ,
:
HTML Dog
(www.htmldog.com/guides/htmiegier/) WSchools (www.
wschools.com/html/). ,
: Creatig
Web Sites: h Missig Maual (Matthew MacDoald)

Head First HTML with CSS & XHTML (Eiisaeth Freema) (Eric
Freema) O'Reilly.
HTML:
HTML ,
- .
HTML -:
<!
HTML PUBLIC
html4/strict.dtd">
<html>
<head>
"-//WC//DTD
HTML 4.01//EN"
"http://www.w.org/R/
<title>o -</titl>
</head>
<body>
<> </>
</Pody>
</html>
, , ,
-. ,
,- DOCTYPE, html (
-< >),
head (~. ), body (~. ),
-.
</html >.
L-
, L- -,
- , -
.
, ,
, -.
, ,
- .
(/) (<).
18
-
.
D.
- L-:
, L- .
XHTML -
, XML. XHTML
. , ,
. , ,
DOCTYPE -
, , ,
SS- .
<htm l > - ( ) .
,
L.
, ,

<html >.
- , <html> .
-
.
-, <head>, .
,
( . .),
.
, ,
-
. , , ,
jvSit, , .
-,
<body>, , : ,
, . .
<> -
<body>,
, :
, </> -
<strong>- ; ,
<strong>Warni ng! </strong> , Warning!
;
<>, (), - ,
-
( m <>, ,
< href="http: 1/www.mi ssingmanual s. m/"> !</>).
,
http://
www.missingmanuals.com. - href- , URL
19
XHTML: HTML
( ,
,
URL)
http: 1lwww .mi ssi ngmanual s. com-
href.
XHTML: HTML

.
HTML 4.01, ,
10 , , , . HTML
: (
, <body>, <BODY>, <BoDy> ),
(, ,
<>, </ > ). ,
,
, -.
XHTML 1.0-
HTML,
HTML, : XHTML -
, .

XML.
HTML
XML
HTML,
,
,
HTML XHTML
. XML '
, . XML
, RSS-

, -
iTunes.
HTML 4.01 XHTML 1.0,-
. ,
, .
HTML 4.01
, .
,
, .
1.
HTML,
L-, SS-
. ,
(
HTML),
, .
L-,
. , L-
DOCTYPE , XHTML .
-----------------------------------------------
XHTML,
WSchools L www.wschools.com/xhtml/default.asp.
20
HTML,
XHTML
<!D html PUBLIC "-//WC//DTD XHTML 1.0 Tran5itional//EN"

TR/xhtmll/DTD/xhtmll-tran5itional .dtd">
<html xmln5="http://www.w3.org/1999/xhtl">
<head>
"http://www.w.org/
<title>o -.</titl>
<t
http-equiv="Content-Type"
content="text/htl:
char5et=utf-8" />
</head>
<body>
<> -.</>
</body>
</htl>
, L-. L-

XML,
J ii i (D).
. ,
~, : XHTML 1.0
Transitional L-. ,
CSS . 1.
Tem 1 m.
<body>.
. , < href=http: 11
www. mi 55 i nganua l 5. > HTML, XHTML.
href : < href="http: 11
www. i ssi nganua l s. ">.
m ( i) 1 . , XHTML
<> </>. ,
(), . ,
, . , ,
, :
HTML 5 -
<br/>.
XML
XHTML.
2006
, W (
, World Wide Web Consortium) XHTML
2-
, XHTML,
, -.
: , , ,
-
. , ,
Mozilla (Firefox) Apple (Safari), ,

XHTML 2, W
, HTML 5.
21
CSS
HTML . , ,
2022 . , , :
HTML XHTML.
HTML 4.01,
XHTML 1.0. . . 1
, HTML ( XHTML) CSS.

-----------------------------------------------
-,
. , . 1 , W
Validator, , XHTML. ,
, .
CSS
- HTML
CSS,
Macintosh.
HTML CSS , ,
, Windows Text Edit
, -.
. , .
-----------------------------------------------
, -,
. ,

CSS

- .
,
jEdit (Windows, , Linux, http://jedit.org/). ,

jv, .
, ,
CSS.
Notepad++ (Windows, http://notepad-plus.sourceforge.net/).
. ,
,
HTML-
SS-, ,
HTML CSS.
L-it (Windows, www.chami.com/html-kit/). HTML/
XHTML -.
: -
(
), L- . .
22
TextWrangler (Macintosh, www.barebones.com/products/textwranglerl).

-
BBEdit Macintosh. TextWrangler ,
HTML,
( ,
' ),

FTP
( ) .

:
.
EditPlus (Windows, www.editplus.com)-
FTP,
skEdit (Macintosh, www.skti.org)- -,

FTP/SFTP, .
Coda (, www.panic.com/codal).
-. ,
,
FTP-
SF-
SS-.
Dreamweaver (Macintosh Windows, www.macromedia.com/software,ldreamweaver) -. ,

.

(,
CSS.
Dreamweaver: The Missing Manual, O'Reilly)
Expression Web 2 (Windows, www.microsoft.com/expression)-

Microsoft -. FrontPage
-,
CSS.
-------------------------------------------------
, , L/L
55. -.

HTML/XHTML, ,
55, (55- .

3.

- . , ,
, .
, ,
,
. www.w3.org{R/CSS21/, ,
.
23
CSS. ,
, , , .
- CSS.
, .
HTML CSS.
-, ,
.
, ,
, .
-,
~ ~. ,
-,
. , n
, .
CSS

- CSS 2.1 CSS 2,
iPods, CSS n n
n n. CSS 1, n
n n .
1996 ,
n n -
CSS
n CSS 2.1 .
lnternet Explorer 6, n
lnternet Explorer 7
n :
, n (. . 3)
n n
CSS.
, lntemet Explorer 8
n n CSS 2.1 .
CSS 2 ,
CSS 3 n.
World Wide Web (W) ,
n n
n n
n n
-.
. Safari
CSS 3 n.n
n n CSS 2.1,
, CSS 3 <r
, 16
. ,
CSS 1.
, n
n .
CSS.info (http://www.css.info).
CSS 3,
------------------------------------------------
CSS,
24

, .
1.
CSS.
, u,
, .
CSS
HTML/XHTML.
2. CSS. -.
CSS
-,
. ,
- q.
3.
. ,
CSS:
. (
) , .
:
.
, -,
,
CSS.
CSS,
CSS 3,
, ,

.
CSS
, .
,
CSS.
Dreamweaver
CSS
CSS
,
-.
z
, , (
-),' www.sawmac.com/
css2e/. , ,
-. ,
25
, ,
- -.
URL ,
. ,
, - , .
MissingManuals.com
www.missingmanuals.com
, ,
. , ,
, , .
-, ,
, , .
,
.
_

.
m. ~>.>
, . ,
..r - ,
, , .
, ,
, - .
.
, Macintosh
tl- , ,
Ctrl ( Ctrl
).
100. , :
(),
Edit ()
File
. . ,
( ),
.
iI . , ,
, , .
, Windows - Macintosh,
Windows Macintosh OS.
,
,

CSS,
26
ti
n
:
System ~ Library ~ Fonts (~ ~ )~.

, n, n
. :
System (). . nn n
Library (); , .
n Fonts (). n
~ .

, .
0.1.
Page S!turce
CtrliU
E<J!Sal!en
F11
XieW Sooxce O>art
. 0.1. n n
, View ~
Text Size ~ Increase (
~ ~
)- : n View ()
Text Size ( ), Inaease ()~.
, .

URL,

, , .
, :
/Oeve 1oper 1 1i cat i ons.
27
Safari
)'ll w w
, .
,
.
-----------------------------------------------
, , . n n
.
no
---------------------------------------------------
, , .
,
.
----------------------------------------------------- . no ,
.
Safari
Salari
ONLINE
ENABLED
SafariEnaed
, ,

O' Reilly Safari.

Safari ,
. , n
, , ,
,
.

http://my.safa riooksonline.com.
halickaya@minsk.piter.com
( ~!>, ).
http://www.piter.com
CSS
1. CSS-
2.
3.
4.
5.
HTML
css -
- L-,
, ,
CSS.
CSS.
, L-,
CSS, ?:
L-. L
(, HTML ). ,
, CSS.
, -
HTML
CSS,
, L-,
, . , ,
, .
1.1. ,
CSS, - HTML.
L- 4 ,
, HTML, -
(14 ). -
HTML ,
: 213 L- 71
CSS.

HTML:
HTML XHTML
- .
CSS HTML .
L-,
. L-
.
<font>.
------------------------------------------------
8 , HTML, XHTML.
HTML XHTML. , -
,
-. ,
-, .
CSS
HTML/XHTML,
HTML:
31
......, .........
8 Saucy Succutents to Splce Up Your ledroom

loem ipsum dolor sit omet,lorem ipsum dolor slt omet.
sed dlom nonummy nJh eulsmod tfncldunt ut.
lfADIE08Y
Lorem ipNm dolor ~i t e

o"...t.
Lorem ipsum dotor ~i1e

omei,
lrtdoor urwt.s: sod or

sd?
8 Saucy Succulents to Splce Up Your Bedroom

lorem fpsum dolo s!t amet,lorem ipsum dolor sll amet, sed
DolorSAmet
IIUDnt8SCIY
L'O'f'm' ipsum dolor site
2!!l!1
Lorem iotvi' dolor site
1.1. - CSS L-
HTML:
rpynna
, '
,
, .
HTML
32
1. CSS- L
<hl>.
<h2>
. -< 1> ( ordered list -
~) - :
: ,
~.
HTML ,
, , - .
-

. ,
< 1ockquote> (
) , .
,
, , .
<tab 1> -
, ,
.
,
, . .,
<tab 1>
, ,
.

,
-. ,
<font> , Ir
( 100
, Microsoft Word).
, ,
. ,
-
, .

, . .
L- .
HTML:
CSS
, -
,
, - ,
.
, , .
, -
HTML
CSS
HTML -
. HTML -
, .
. ,
L-
33
CSS
<hl>
.

HTML
CSS.
, ,
CSS-
L-
CSS
, -, ,

HTML.
-, L-,
. .
L-
CSS.

HTML
-: ,
<hl>-
-, .
, . .
, . -,
, , .
(, ,
<hl>),
, , (,
<h2>),
, ,
. , ,
, , , ,
, . .
-----------------------------------------------

HTML./XHTML
HTML & XHTML: h Defiitive Guide (Chuck Musciao) (Bill d),
O'Reilly, - www.wschools.com.
HTML./XHTML www.wschools.
com/tags/.
,
HTML
-,
. : <>
, <ul>- () .
, ,
<abbr> -
, ,
L-
CSS,
<code> -
, ,
-, ,
(.

1.2).
, .
34
1. CSS-
n.<
HTML
. ,
<ul >.
, ,
. .
CSS
, .
9.
The Urban Agrarian Lifestyle
Revolutiort in Indoor Agriculture
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed

diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nosttud exerci tation ullamcorper suscipit loortis nisl ut aliquip
commodo consequat. Duis autem vel eum iriure.
.
1.2.
CSS
CSS
HTML
<font>
<>
<strong>
<font color="#0066FF" size="5" face="Verdana.
Arial. Helvetica. sans-serif">Urban Agrarian
Lifestyle</font></strong>
<br />
<font color="#FFOO" size="4" face="Georgia.
Times New Roman. Times. serif">
<em>
<strong>A Revolution in Indoor Agriculture
<br /></strong></em></font>
Lorem ipsum dolor sit amet ...
</>
CSS,
( )
L- (. .
1.2):
<hl>The Urban Agrarian Lifestyle</hl>

<h2>A Revolution in Indoor Agriculture</h2>
<p>Lorem ipsum dolor sit amet ... </>
,
CSS
-,
HTML
, -
, .
L-
L- -:
-. , <code> -
n L-
35
CSS
, - ,
<rec i > ( ) . , , .
,
HTML
, -.
-
, ,

CSS.

HTML-
t L- , t
n n
CSS
HTMl, ,
, 3,
3 ,
<hl:>
HTMl. , t n
( t
- n ,
) -
Google,
, n
Yahoo!, MSN .
, ,
L- - n
. L-
Google -
<font ")
guldellnes.html.
www.googte.com{webmasters/
R l-,
L-
www.digital-we.oom/artides/seo_and_your_
L- ,
we_sit.
<di v> <span> , .

,
SS-, ,
. <di v> ( )
, .
,
, , . .,
<div>. <div>- -
, , , ettiO . .
,
CSS,
- , <..'
(.
3).
36
<span>
1. CSS -
n L
(inline) ,
, , .
, L-,
<> ( ) <strong> (
). <span>,
, CSS,
, . . .
id cl ass,
.
<di v id="footer''>
<p>Copyright 2006. <span class="izName">CosmoFarmer.com</span></p>
<p>Call customer service at 555-555-5501 for more information</p>
</div>
-. . (! :
~ .
3 ,
CSS, -
HTML
CSS
L-.
HTML
-. <font> - .
, , .

.
HTML,
, SS-.
<font> .
( .
CSS
6).
<> <i >,

.
CSS
HTML. ,
<strong> ( ,
, ).
, <em> (
).
----------------------------------------------------
, n <cite> -
. n
n . n , n.
<tab l > .
(, ,
L-
37
CSS
, ).
3 , CSS
-
,
<ta l >.
<body>,
-: background, bgcol or, text, l i nk, al i nk vl i nk
, , ,
.
CSS
(. .
SS- ). -
, :
marginheight. CSS

leftmargin, topmargin, marginwidth,
(. .
7).
<br />.
, ,
(
, <>;
. : ,
, <>

<font>, ).
margi n CSS
, ,
(. . ~
~ .
7).
------------------------------------------------
, .
, .
, , ,
, , , ,
L-.
, .
CSS, (. ~
~ . ~ ~ . 6),
(. . ~ ~ . 7), (. . ~
~ . 7), (. . ~
~ .
8).
:
.
, HTML
-,

<hl>,
. , :
.
<hl>
(.
~ ~ ).
38
1. CSS- L
, .
,
, ,
. ,
<h> (.
<h2>
1.3).
, ,
<h2>
<h5> .
...
ChJ.a Vet e<

<h1>
BOARDING YOUR CHlA
\<!;' ,,,,:J'JI.,;
<h2>
........ ,,ch...., ....... ch;.v.,
v.tltUI.Imvt.l1.. c.. .. ",. .. t\.llpl&lialgiltiluoollt
t...ar,.t...,..-a.,
~eg.<UI'U.Ii!rmsl.umut~.
Creature Cmforts
! ~:~.,.,..~~d* Pra!!!e'111110o8n.~
<h>
f'10tft* AtoQoy
DIJWJ
L!Jre'n II)Urldo'tltam8. ~adisOnpdt.. ~~.~
~.ucltrull\lrll\-nulll~....,.,.~"'*"---~
===~=-':=-==::...~
11
8taNI.urnllpu!Ut. ~
111.
rnoAe!Itii'I,CICIIICIOQ ~.-. f81n~
.... ~ ... ~.
_." ,.". . . Ooi
<h4>
1'
~~-=-~~-.~::~.
............... p.II'U8.~1d.~8\~~.--N8'1'1..dl:
! ===~~~==:...~
ln.~.adtD.
1.3. n
i
1
1
11
: n n
<> .
,
, , , .
.
(. . :
>> .
6) .
, <dl>
( )
<dt> ( )
<dd> ( ).
t www.wschools.com/tags/tryit.
asp?filename=tryhtml_list_definition.
,
., < l ockquote>
(),
<q>-
, <cite>,
, 3 , <address> -
( ).
n L-
39
CSS
CSS.
HTML-era, ,

, <div> <span>.
(, . ~ :
.
3).
<div>. , <div> , , ,
. .
<div> .
: ,
.
. <>
r </ >, ,
,
<br/>
<i mg/>.
-u W- (.
. 1 .4 ). L-,
, i
.
n -
HTML n n: n,
<htm1> -
, L
<head>.
n, l-
, e<tttle>
XHTML r. ~
npoao n llaope n
n.
, ! L- n
n (n, -
n -
n-). ,
Consortium
n n SS-
n -
n, HTML, XHTMl, XMl.
HTMl. , n
(W) -
World Wide Web
n l-.
- W
l-- n
()
Firefox ,
W http://valictator.w.org/ (. . 1.4).
r n n
<
- n , n
Firefox, Web Developer

http://chrispederick.com/
W. nn
'WOfk/we-developer/. n
n n W-
no http://users.skynet.e/mgueury/
mozilla/. Safari
n caewww.zappatic.net,/safaritk!y/.
40
1. CSS- L
00
WS hltjr/..idltoo.w3'"'g'""l!d<t<./>)',.O _
~--
.. :. j)Gt-- I!)Gt---!
Jw;r;;~v.r.......--
Val1datn
fvlarkLIP
Velldate
/>
i)G<t-.-
!) lii\ ;, ,jio
-~...- 19<
Sllctp
...,
" ,
Servtce
URI
Valodlte docvment on1ine
More Optlons
his vakdator cnecks lhe mati(\JO Vfidi!v d W doct.me~ in L, L, SIJ.., MathL, etc. W
you WISII to vaidate speofic content soch as RSS!A!om !ee<Js 01 CSS sty!eshee!s. MoIIeOK C9!'!1en!.
or to find <!<n inks lhere are athervadatQ!S n(j tools avarlaie
h W vaidators rely on c0011111ity )111 for hosting and development.

Q2!! and hejp us ufld et!er tools for etter w.
lu$ ""109 NnS tllo W3C Mldcup V..dator
19JA.
=~~20Ct~~~~S:~=~==~W:=v
YOUR lf1'tAAC.1'1Q.11r$ Wtl'1'l ntiS Sl7t ARl
OUR
tiAC.COIAIIOf ;,m
UN'R flfWAr:Y SA"nUENS
1.4. HTML- W3C n
PUlCANO
doctype
HTML , n
(Document Definition ()). L-
, , ,

HTML. HTML .
CSS? . ,
,
, HTML XHTML ,
- - -.
HTML ( HTML4.01 Transitional),
- . DOCTYPE ,
() .
-
,
1999 (Netscape 4, lnternet Explorer 5).
, n , ~,
41
doctype
HTML -,
, .
DOCTYPE SS- -, ,
, . ,
- ,
, , .

DOCTYPE,
HTML CSS.
-----------------------------------------------

www.quir1<smode.org/index.html?/css/quirksmode.html
http://hsivonen.iki.fi/
doctype/.

DOCTYPE .
HTML. , -
HTML 4. , XHTML
(. ).
HTML XHTML - HTML 4.01 Transitional

1.0 Transitional.
XHTML
HTML XHTML,
<font>,
HTML
, , ,
(trasitional) .
-.
HTML XHTML
.
------------------------------------------------
HTML XHTML ,.
<font> .
-,
(,
).
doctype
HTML 4.01 Transitional,
-:
<!DOCTYPE HTML PUBLIC
"-//WC//DTD
HTML 4.01 Transitional//EN"
"http://Wv.w3.org/R/html4/loose.dtd">
DTD.
doctype
XHTML 1.0 Transitional
<html >.
XHTML.
<!D
, -
html PUBLIC
XML ,
"-1/WC//DTD
XHTML 1.0 Transitional//EN"

.dtd">
<html xml ns="http: 1IWv. w. org/l999/xhtml xml: l ang="en" l ang="en">
"http://Wv.w3.org/R/xhtml1/DTD/xhtml1-transitional
-----------------------------------------------
- ,
.
www.w3.org/QN2002/04/valid-dtd-list.html.
doctype
doctype,
42
1. CSS-
, ,
doctype ,
L- ( <html>).
,
, .
- L-
doctype.
-.
HTML/XHTML -
http://www.sawmac.com/missing/css2e/.
-------------------------------------------------
-
Web)
doctype
(Dreamweaver,
Expressio
. L-
doctype.
Internet Explorer 8
Microsoft
lnternet
Explorer 8
;,
IE 8
, .
IE 6 IE 7,
CSS 2.1. ,
(IE 8, Firefox, Safari Opera)
. , , IE 6
IE 7, , ,

IE 8 .
. , ,
, . , ,

(DOCTYPE). ,
DOCTYPE . Internet
Exploer 8, , Internet
Explorer 5 (!!!).
! IE 8 IE 7. -,
IE 8, r, lE 8 lE 7
, CSS 2.1. ,
Microsoft (Compatibllity View
List). , Microsoft IE 7,
IE 8. ,
, .
,
mt-,
IE 8
IE 8
IE 8.
<meta http-equi v="X -UA-Compat i " content=" IE =edge">
43
Intemet Explorer 8
<head> , <t i t 1>.

Internet Explorcr.
" IE;edge" , r
i} , . . r
-!
n ,
. Windows,
i 6
lternet
Explorer,
,
n
Firefox, Safari, Opera Google Chrome.
IE 7 .
, .
- n ( ) Windws-.
Windows
n n Boot Camp (www.apple.
Safari n
Firefox 3 Google Chrome 1.
com/macoSX/features/ootcamp.html},
n r n
OS n
-
lntel.
-,
VMWae Fusion Parallels Desktop. n
CSS, lntemet Explorer 6,
n Windows
OS ,
. IE 7 .
n Windows OS ,
n.
n,
, Boot Camp n Windows.
n . n

. .
. n, n
n Windows, OS,
Windows. n n
n Windows n
IE,
n IE , IE 7 IE 8
. ,
n .
n n. n
- r
. n ,
, ,
, n
IEester
n.
Utmus (http://litmusapp.com/)
IE 5.5, IE 6, IE 7
IE 8 .
CrossBrowserTesting.com (www.aossrowsertestng.com)
www.my-debugar.com/wiki/IEester/HomePage.
n n.
, :
o,
Firefox, Safari, Opera Chrome. ,
n n n
, Apple n Safai
, , n
, Windows-a
Windows-a.
IE, Firefox Safari.
, n, n
JavaScript . Browsercam (www.

OS. n
rowsercam.com) - , n
. n
n lntemet Explorer-
Utmus, n
n .
, CrossBrowserTesting.
( , n
.
2.1)
- n SS-.
n, ,
. ,
CSS
-,
CSS
, n
......,.,. "
....
'
. . . . ......
'""'?'r
,.-;...
"'1
.._".._........-.,.,.,.. . . ...
.... ..........
__
_. _.. ____..---....
-..._......_... ....
,.... _ _ :_to..l . .
,.,,_:;
, .._
_ff~-
~----~ ....
_.".,,_,_
_ , \....,. . . . .... ..... .. lloo1 _ _, ._ _ _
______
~----
. ,. _ """
,..._ .... .......... ...................
=:=::::.::.::-::::;.--..... ,. , __. ...._ ..............".
__
_.,.,...... _. ..tm .. ~--.... " , _ - .... ~-> ~.... -
..._..
..,.._.._.._
......
-.. ..........
'"'"- -~
...~
.........
..... .......... . ,..~-- ---..... ~..-\'00, .. - ........- .

~ .. --~ hc -. . ......-.....
-~~ ----.,..-~
...
,._ .. .,._."_, .... ,. ....
'"....__ .........
. . ........... ................... .,....
. 2.1. SS- - SS-
2.1
CSS,
-. .
45
-----------------------------------------------
, ,
.
, , ,
, .
CSS,
() -, - , ,
: ,
,
150
. , : ~, ,
-~.
: -,
. , , . .
, , ,
() ,
.
-----------------------------------------------
W, - SS- .
.
, SS- , ,
, . . ,
-,
:
{ color: red; font-size: 1.5em: }

: ~ -,
<>,
em ( em -
m,
Cicero, -
,
, . .
(.
6). , ,
2.2). , ,
, , ,
, .

2.2.
( )
46
2.
. , ,
- : , ,
. . 2.2 <>,
, <> ,
, . ,
CSS,
- (
).
. , ,
, .
( {)
(} ).

. -
, .
. CSS ,
.
, .
,
,
font-si ze, margi n-top, background-col or . . (
: , , ).

CSS.
------------------------------------------------
8 1
CSS.
. ,
, SS-:
, , , , , . .
, SS-
-
5em), URL (images/

(top, center, bottom).
, . 2.2.
background. gi f),
(red
#FFOOOO),
(18,
200%
, ,
- , -
. :
{
color: red:
font-size: 1.5em:
{ color:red: font-size:l.5em: }
47
,
CSS. ,

.
, , ,
.
, . , 1or:
1or:
red -
red.
1or:
red
-----------------------------------------------
n - 'n:
color: red;
n n, ,
- .
n
n n, n n
, n SS-, .

, - .
, ,
, .
SS- .
- : , - ,
: -
, -.
t: UUI ?
CSS
-. , .
,
, .

, , , 1 .
- .
- .
, -
L-, ,
<font>, CSS. ,
,
- ( , )
. -
, ,
.
L- ,
.
48
2.
-----------------------------------------------
,
. .
. -

n -.
CSS.
, -,
, ,
n n ,
n! ,
. ,
-.
n - n
, . ,
CSS ,
. ,
) n
, -,
n SS-
, n -<
. ,
, .
n n:
(J( n
-.
n
CSS,
, r
, n n
. n, -
nr (<
, ,
), Orf, ,
n , lm>,
, n Reload () .
r, .
lntemet Exploer n
, , SS-
Cbl+FS, Firefox- Orf+Shift:+R.
r - , -,

</style> L-, <head> - .
<style type="text/css">
hl {
color: #FF7643:
font-family: Arial:
}
color: red :
font-size: 1.5em:
<style>
49
</sty1e>
</head>
<body>
/*
... */
-----------------------------------------------
n <style> n <title>, -
n n
</head>,
n n .
n JavaScript , n . n
JavaScript n CSS, n, n, ,
JavaScript n n .
<sty 1> - HTML,
CSS, , ,
CSS, HTML.
, ,
,
<sty1e>,
, -.
-,
L- -.

, . -,

, , .
.
. -,
.
, (
<hl> ),
. ,

Courier
. ,
. -
? ,
---------------------------------------------------
n n n
L- n .
n, n , n .

- , ,
CSS. L-,
<sty 1>.

CSS.
, ,
. , ,
50
2.
g1oba1.css, si t e.css mai n.css, ,

, form .css,
.
n n L- -,
. -
n L W (.
, SS-, ,
lntemet
)} .
Explorer 8~t . 1), SS- .
W 1J! n
CSS: http://jigsaw.w.org/css-validator/.
SS-n W-
-.
, L-:
URL-apec - ( -
SS-),
SS-,
SS-, ,
Firefox.
Tools () Error
Console (
w). n wamlngs (
ss-
), n n,
n , n ,
Firefox.
--------------------------------------------------- - , n
., n , n
<style>
( ). SS-.
CSS,
n gloal.css, -r, r
, n .
, -,
. -
L-era <1i nk> CSS @i mport,
.
. -,
- .
-----------------------------------------------
@import , <llnk> n,- n
. m n n n
~ . .
15.
L-
~
- L-
<1 i nk>.
51
, - HTML
XHTML..

HTML:
<link rel="stylesheet" type="textlcss" href="css/global .CSS">

L:
<link rel="stylesheet" type="textlcss" href="css/global .css" />

, <l i nk> .
HTML
</ l i nk>.

XHTML
(!).
HTML XHTML
re l =" sty l esheet" -
type="text/css"-
, ;
href-
, SS-.
SS- .
- URL-apec, ,
SS-. , s

href ,
-.
(08~--------------------------------------------------- - , <link>,
. -
SS- -. . . 15.
CSS
CSS HTML @import. L- <style>. :

<style type="textlcss">
@import url(css/global.css);
</style>
L- <l i nk> @import -
CSS,
HTML .

href
css/gl l. css - SS-. ,

URL, . , url (css/global.css)
url ( "css/gl obal. css") .
CSS, url
SS- . ,
52
2.
@import,
<l i nk>, :
<style type;"text/css">
@import url(css/global.css):
@import url(css/forms.css);
</style>

@import
SS-, , ,
, -
, ,
.
------------------------------------------------
, n , , ,
-, . n .
SS-, n
@import,
5.
n n
. n n
(. n n .
.
15).
<style type;"textlcss">
@import url(css/global .css);
@import url(css/forms.css):
{ color:red: }
</style>

@import
SS
, , , ,
. ,
SS-.
-.
? ,
<l ink>
@import
( , ,
www.stevesouders.com/og/2009/04/09/dont-use-import). ,
,
<l i nk>, .
:
SS-,
, .
SS-,
SS-
-.
53
: n
,
www.sawmac.com/rss2e/. ZI
(
). ,
02 (
),
03 ( )
. .
----------------------------------------------------
n nn n , n
. , n ,
.
-,
, (
Text Edit)
(Dreamweaver Microsoft
Expression Web Designer) (

).
-----------------------------------------------
n
Dreamweaver,
n n n
, n
2. Dreamweaver,
L, n L- , n
n. n .
CSS
(. . ~ )
L- , cmpoe1t1tt .
-, ,
.
,
-, . (,
L- ,
. , , CSS
Gmail.) - ,
,
, . ,
, .
1.
02\basic. HTML.
L-
, ,
<address>.
2.
<hl>.
<hl> style="color: #C7M8D: ".
<hl style="color: #C7M8D: ">
54
sty1
HTML,
CSS -
CSS,
2.
=,
CSS -
, .
1or, ,
#C7M8D,
, -
(
. >> .
6).
. .
3.
bas i . HTML
File ~ Open (~
) Qri+O basic. htm1 02
(
, - ). L-
Preview in Browser ( ),

HTML: ,
, .
, , -.

CSS.
4.
L-.
font-size:
#C7M8D
m;.
<hl>
<hl sty1e="co1or: red:font-size:

5.
m:">
. Reload (),
, L-.
. ,
<h 1> - .
L-.
6.
<hl>
, .
- (
i n1i ne. htm 1
02_finished).
CSS,
. , ,
55
1.
s i
. htm l,
<hl>
-.
</title>, Enter <style
type="text/css ">.
L- (,
, ):
CSS <style type="text/css">

<titl>
2</title>
</head>
<sty l > .
, , ,
,

2.
<style> ,
Enter
CSS.
CSS.
</style>.
CSS,
3.
<styl >
hl {.
hl
, 11
hl .
SS- . ,
. , ,
,
- .
4.
Enter
}.
,
, , SS- :
.
5.
,
lr: #780:.
, ,
--
l or #7 MBD.
.
-----------------------------------------------

CSS,
, .
. , ,
SS-,
-
( ).
, (
hl)
.
56
2.
6. Enter ,
:
font-size: m:
font-family: "Arial Black". Arial. sans-serif:
margin: 0:
,
,
CSS .
.
,
( ) .

2 .
. ,
-, ,
:
<titl> -</titl>
hl {
color: #7D;
font-size: m;
font-family: "Arial
margin: ;
-lack".
Arial, sans-serif;
}
</style>
</head>
7. .
, , ,
(Reload
()).
.
-------------------------------------------------

</style>
CSS,
-r , ,
-.
8.
hl,
Enter :
{
l :
#616161:
line-height: 150%:
margin-top: lOpx:
margin-left: 80:
57
-. ,
, CSS.
.
, -
CSS .
9. .
, . 2.3.
, i
? n,
i nterna 1 . htm1 02_flnished.
CSS: The Missing Manual

s~4 ut perspicialis IIIXk ocnois iste oatus n'< sit voluptatem
accusantium doloremque laudamium,
totam rem apetiam, ~ i quae iDo ir!ventore ...-mtans et quasi architecto beatae vitae diaa
sunt ~- Nemo eim ipsam voluptatem quia voluptas sit aspernarur aut odit aut fugit. s~ quia
conseqwo!Ur magDi dolores eos qu; ratione voluptattm sequi aesciuot. Neque porro quisquam est,
qui dolortm ipsum quia dolor sit amet, consectetur, adipisd velit, s~ quia aumquam eius modi
tempora..jocidua ut laore et dolore maaam aJiquam quaerat voluptatem.
Lorem lpsum Dolor Sat

s~ ut perspiciatis IIIXk omois ist~ aal1ls n'( sit voluptatem acc:usaatiuln dolortmque laudaalium,
totam rem ~ eaque ipSA quae iDo ivel:store veritalis et quasi architecto ~atae vitae dicta
sunt i. Nemo eaim ipsam Yoluptattm quia voluptas sit aspernarur aut odit aut fugit. ~ quia
c:oasequuntur magDi dolores eos qu; ratione voluptatem sequi nescU!t Neque porro quisquam est.
1. 2.3. CSS , 1111 11

, ,

, , ~css
: L-, , SS
~, "Ji.
, , .
-
w 61 r
n
, , ~
58
2.
r r
, . ,
-
(
<hl>),
().
,
:
.
. , ,
1.
ma i n. css , -,
CSS.
ma i n. cs s , , ,
(, ,
Jl).
2.
ma i n. css:
body {
background-color: #CDEFF:
background-image: url(images/bg_body.png):
background-repeat: repeat-x:
padding-top: lOOpx:
-
( <body> ),
, .
.
HTML,
CSS (background-image)
.
,
. . 4
!> .
8.
100 .
, ,
3.
, ,
, ,
.
basic. html, ,
<s ty 1> (
<style>).
,
. ,
)
Ctri+C.
Edit ~
( ~
59
4.
ma i n. cs s
Edit ~
Paste
( ~), Ctri+V.
L-,

5.
<style>.
main .css.
L- SS-
.
6.
bas i . htm l
<sty l >
SS-, .
,
,
L-.
7.
L-, (

</t i t l > <head> ), :
<link href="main.CSS" rel="stylesheet" type="textlcss" />

<l i nk> - -
; - CSS-paa@import,
<l i nk>
- re l type - ).
-----------------------------------------------
, -
, n
href n
. ,
.
, -, .
, - (
www.commuitymx.com/cotet/article.cfm?cid=230AD).
8.
- ,
,
( SS-,
2).
SS- - ,
, .
, SS-
,
-.
-----------------------------------------------
- ( ,
), , , mai.css
, ,
mai.css .
basic.html.
60
9.
2.
02\another_page. html.
- L-: l, 2, .,
10.
</t i t l >
Enter.
-
.
11.
<l ink>, .
- (,
, ):
<title>pyra </titl>
<link href="main.CSS" rel="stylesheet" type="text/css" />

</head>
12. .
, -,
. ,
, ,
.
13.
main.css SS-- font-family:

"Palatino Linotype". Baskerville. serif: -.
(
):
font-family: "Palatino Linotype". Baskerville, serif;

l or: #616161:
line-height: 150%:
margin-top: 10:
margin-left: 80:
}
2.
14. } ,
Enter :
h2 {
color: #1967:
font-weight: normal:
font-family: "Palatino Linotype". Baskerville. serif:
font-size: 2.2em:
border-bottom: 2 white solid:
background: url(images/bullet_flower.png) no-repeat:
padding: 2 80:
margin: 0:
61
SS- ,
,
border-bottom,
background
- background-image
background-repeat- . ,
.
.
7, ,
6,
, ,
,- .
8.
, , l,
2 , . , ,
, .
- ,
.
15.
2, Enter }
:
. i ntro {
color: #694:
font-family: Arial. Helvetica. sans-serif:
font-size: 1.2em:
margin-left: 0:
margin-bottom: 25:

basic.html
. n , '. ,
, .
, L-Q.
16.
main.css
basic.html
. <>,
class="intro".
<
<hl>,
class="intro">
i ntro, ,
15 ( , ).
HTML ( ).
another _page.html - class="intro"
<> .
17.
. .
2.4
basic. html
another _page. htm

another _page. htm
, -
SS- .
gl l
. css -.
, .
, ?
62
2. ..
02_flnished.
'
Sed ut perspiciatls unde omnis iste natus r sit voluptatem accusantium doloemque laudantium,
totam rem aperiam, eaque lpsa quae lllo lnventore veritatis et quesl architecto t vitae dlcta
sunt expflcao. Nemo enlm Jpsam voluptatem qula vo1upts sit apematur aut odlt aut fuglt, sed quia
consequuntu magnl dblores qul retlone voluptatem sequi nesclunt. Neque parro quisquam est,
qul dolorem lpsum quia dolor sit amet, consectetu, adlplscl velit, sed qula non numquam eius modi
tempar Jncldunt ut teore at dolore magnam aliquam quaeret voluptatem.
Another Page...
5ed ut pcnpic:iatit u.ndt orn.nia t. ur crrot" sit ,..otuptatern ucuaantium ~ lalantiutn, cown ran apt:riam,
eoquc ipsa q...., . iJ!o ii"Uton: vcriwu < quui rd. ..~ virac di<D ""'' up1lcao. Nemo cnlm ipam
VQ!uptatcm quia \iupw tit aJpernA!Ur aut odit ruc~~ ted qu;. eonsuuntr moni dolores- qlli n.lione
\OOiuplatcm oequi nerciunt. Ncquc porro quloq,uam qui dolorcm ipoum qllia dolor til ..-~ ~ adipixi ..JU,
ted qu;. oon numquam dus modi tempora itlddnt Ui laorc dolore mnam a1iq1W11 quacn.t \OOhlpwom. Ut enim
ad minima venWn, quil nootrum cxm:italioocm uDam (Orpqris IIUOCipit laoriooam, oili ul ol!qWd oonunodi
con.ocqu.arur? Q1W oun Yd cum oJJe n:prcenderit qlli in VQiupwc Yelit ... quam niliil rn<>oiae CODIOC!Witut, Yd
iUum qui dolomn cum rup., quo wlupw nuJJa ~
2.4.
n SS-
SS- L-
-,
, .
SS- : (
), , ,
- , . .
CSS
. :
h1 {
font-family: Arial. sans-serif:
color: #CCCCFF:

h1 << ( <h 1>)
->>.
-----------------------------------------------
,
<
>,
L-. , , <>,
- .
-, ,
. ,
,
.
CSS -
-.
l-------------------------------------------------
,
, .
:
( )
-,
L-.
64
3.
: n
-
. , ,
, , ,
( <> ). ,
( <> ).
CSS, ,
<font> .
, , L-
, ,
.
L-, SS-
.
SS-,
- , l, TABLE,. IG . . ,

, .
3.1, <h2> (
h2, ,
) . SS-
h2 {
font-family:"Century Gothic". "Gill Sans". sans-serif:
color:#OOOOOO:
margin-bottom :O:
"~ ~ ~ ~ ~=,~~~.~~i;~~~~~=~1
How to Move Sod Up 10 Stories Without

The Apartment Manager Finding Out
~~~~~~~~ ~~.~~~!~cr~n~~:~.- ~~~~~.~!~~n<mumllr' hh t"''"rr.J
JI\.'ttl l;.orc~' d,\J~~~~ ~n~ ~1iqua cr~1 v,,rpOJt . Ur '' 1!\J ~ <Hf i ' .
t}t~ 1~mJ t.'.(C:t.:J t:n ull~lstt:qxr ~~ ipat lt't"'nj, "''' 111 :tiiIJir> ~:, comrrxJt,
~,.,)11~\fti:.H f)11is autrm H'l Clll1\ irr(' dolor hct~ril i ''lllputatt' \ 'CJtt ~:'1:-.t' k,
.. \ 111~q~ . $~ 1 ill Jplof~ l'tl J',.! i<il niiLI ,,.,
Wooden Crates Make Excellent Hldlng Places
l..i'~lr~n (l~)lc.1r :-.11 :ita'lt't . ~.o"~..:trtu~r adipi.:m~ ~o.'Ht . :.:J t.lm nonu111m) 11il'h -:-.""'J
1m~ l~tnf ut l."I tf(tlo 1:~n :tlt1 r: ""'IUif':\l 1.:1 ' ' i~t t:ntm :td ti ~tJI
t(tii'-IHtstn.ldi.'XC'r~o.i t;,Jiic.)t1 ul l:ac."("-.'r'tl~lpir lot\!.11 " n~sl osltt trC'\ ;, . ~-.Jt\
_... J~lft'll l \l'll..'tI1 urc.,lttll )( illl't'IJtlr('IH lfl \tllpUILIII.'

... t.JH:'<.'tfU:t1 , ' "'lafl~tn) ,t~)lor" t"\1 l~.~rat ll.1 l.1t 1
1.'$ H:-t'tf\1.\t
,,t ('\o.'it'
~~~~~~11~~r ~~~~~~~,.,. <~tlopoxl l~ <1mr111~

,lor . ,..J
IH(}k'H('
orit>Jr ''"""""!
IIIKJtliiHI UII:r\.'t'l llt11im: Cll:t~lli\ .11 Jqt~ n1 t.'f:\1 \ 'c.)JUip;t( ~ ~ t "1~1 (,.'IHIH ~lt1 1HI I \ t'f'tMIH.
r.tttt)O lfara1c<,f[)('r :-.:u~trrtlth4n:i~ .;J ol Jl ip t' (' ..t~J
. :
':'!
l. .
.~~
Llt.~~<........------------------ - ------------------------.0- '::
c.:-,,.,,.t
:~~:::!.t~~~ ~)~~~:~~~~~~~ :~:~~~~:~~..:-~~~~~ ~~~~~~t~1 \ ..rl!)~~(,lf~.. ,.~1~1 ~~~~ .~.~~ tl('' ' ''.:
11i.; n-..:-rnl
3.1.
1r -
. ,
?
65
: n
, .
, ,
, ,
CSS
- .
n:
, - ,
-, ,
,
, 1Ulacco.
,
Microsoft W ord,
. ,
HTML,
, . copyri ght ,
, .
-,
. ,
. <>,
. ,
.
, L-r.
, -
(
<h2>)
, .
3.2.
, - L-,

.
l-------------------------------------------------
n
.special
<h2> (Wet Sod is Heavy Sod).
<h2>.
, n n . n
(. . 3.2) n .
n , n
L- (n .
3.2),
<span>.
, , ,
:
. copyri ght, . speci l. ,
, .
.
CSS.

, , , .
66
3.
-
) Clils~ Selectors Moz1llil Firefox
'
--~
!oals
----
tf.e/p
.. et [ ht1p:ffas.local/d..o~ln'A
How to Move Sod Up 10 Stc ~
The Apartment Manager f"'i ~
Check the Elevator Before Beginni,
.Corem ipsum t!o~ sit . st at!ipiscing efit, set! t!ia71: '
ut liwreet t!ofim mD(JfkJ tJ(iquam emt t:o{utpat. 'l)t u.tst enim { '"- :
tatwn u(famcorpe .ruscipit 106ortiS nis{ ut a{i.quip comrmJ.:~~ , .
iriJJre C:O/Qr irrlienErerit in t:ufputate fit esse moCestie consequ.;:
faci
Wooden Crates Make Excellent Hi

Lorem ipsuw dolor sit amet, consectetuer adipiscing eJit, sed .-: ..
tincidunt ut laoreet dolore magna aliquam erat volutpat. L't " i ..
1---t~C:!tmd~ere~:tm:dt
u(farnwrper susctpit
{o~niS r( ut a(Ujf .
aute \'el
eum iriure dolor in endrerit in \ulputate \elit esse

eu feugjat nua faci
Wet Soa is Meavy Soa

Lorem ipsurn dolor sit amet, consectetuer adipiscing elit, sed tio
tincidunt ut laoreet dolore magna aliquam erat \'olutpat. Ut \\'15:
nostrud exerci tation uamcorper suscipit loortis aisl ut aliqur,,
DW autem \"el eum iriure dolor in hendrerit in vulputate Ye.Jit "':
[EJ:'Done
class="speclal"
.
3 .2 . ri n
-
- .
,
.91 i ves -
, ,
.crazy8 - .
.copy -right .banner_image, . -bad
as bad.
. ,

.SIDEBAR . si debar
CSS -, .
. specia1 {
1 : #FFOOOO:
font-family :"Monotype Corsiva":
67
ID-: -
,! , .
, :
.specia1 {
co1or:#FFOOOO:
font-fami1y:"Monotype Corsiva":
-,
, . L
-. ,
, :

, , .
1 ass L-, .
,
. spec i 1
-. , 1 s s
<>, :
<
c1ass="specia1">
------------------------
HTML
class).
, , ,
,
. speci 1,
.
,
<span>, .
, -.
, , ,
, .
specia1
<h2>, <> <u1>. ,
,
-
CSS
-. ID-,

.
ID-:
-

CSS
ID-
-, , ,
.1 . . ,
(ID), , L-
-. ? <<
~. ID- .
68
3.
: r
, - oajavaScript
.
,
10-.
, - , -
.
, , . -
, (
, , ) <img>,
.
, .
, .
CSS,
10-, ,
, . 3
.
!-, ,
. , ,
, , , .
!-,
( . .
5).
-----------------------------------------------
L-r. ,
-,
.
ss- ID-. L- -
n nr (), n ,
.
L-r <div> <span>
, n
L-,
n !-
). <di v>
. 1 11<
<di v> <span> -
<div>, ,
,
n, n , ,
, 3 </
, n
d1 v>.
<div>.
<di v> n
n, ,
, ,
n ( n
n, ( : n-
, }.
69
10-r: n -
. . ,
, . 3
n <di v>,
<div>, n (n
-, n
, <span> n n
n .
CSS
!- - .
, - ,
(inline) ),
<di v> ( r ),
~? n :
. companyName,
Cosmofarmer com, D1 sney ESPN:
<div class"photo">
<i~WJ src-"ho lidays. jpg"
alt="Penguins getting frisky"/>
<>m. dad and on our yearly tr1p
to Antarctica.</p>
</diV>
r, ,
<p>Welcome to <span clas~"companyName">

Cosmofarmer.com</span> the parent
company of such well-known corporations
as <span class-"companyName">Disney
</span> and <span class"companyName">
ESPN</span> .. .well. not really .
.photo ,
</>
ID- .
( . ),
(#).
, (. ) .
, ~ :
#anner {
ackground: #;
height: ;
width : 720:

HTML
- i d. ,
- ,
ID-~ #copyri ght
:
<
id="copyright">
-----------------------------------------------

(#)
L-
<div
ld="anner">.
70
3. :
n r
n n
!- n
, n !-
CSS,
n.
Rn n
, .
n n CSS-
8JvSrit-n !- n
n HTML.
, .
-. n
n, <h2>
n n
(, ) n
1d <h2>: <h2 i d=' R >R</

h2>. HTML,
URL-
n . . n JavaScript
n n n ,
1d
index htm1#R. n
#R 1 ndex. htm1 (n

n -, n
n <>
n . 1 -
HTML: <
name"R">R</a>).

-. , ,
.

, .
,
, ,
.
. , :
hl, h2.
h.
h4. h5.
{ color :
#F lCD:
,
( ). , ,
<hl>, <> ,
. copyright, #banner.
hl.
. copyri ght . #banner {
1or: #FlCD:
71
-------------------------------------------------
-
,

. , ( ) .
CSS
( . .
5).
CSS
* -. , ,
, :
. .
img. hl. h2.
h.
h4. h5 ...... { font-weight: bold: }
*-
CSS
L- -:
* { font-weight: bold: }
,
: -,
-. ,
,
#banner
#banner *
).
,
L- .
CSS, .

.
,
. , ,
,
. !-
.
SS- , ,
,
CSS HTML.
, ,
CSS
. ,
,
- -.
72
3.
: n
: 4 ,
. .
r
. , ,

HTML.

, .
-----------------------------------------------
n ,
r n
CSS.
n,
HTML
HTML, -,
. L- -
<html>-
<html>
. <head> <body>, ,
() .
, !J> ,- .
Ter <title>
<head>:
<html>
<head>
<title>poco </titl>
</head>
<body>
<hl>arooo</hl>
<> <strng> </strong>eco.</p>
</body>
</html>
L- (. 3.3).
- . <html>;
r ,
<head>
<body>.
, , , r . ,
, ,
-.
. 3.3. L 3 , n

73
' , CSS ~~
-. ,
, ,
. .
. , L-,
3.3 <htm l >,

<hl>, <>, <strong>.
. , , - .
. 3.3 <body> - <htm l >, <> -
<body>, <html >.
<body>-
. .
.
. .
<head> <body>.
<>
3.3 <htm l >
<strong>.
101 . ,
, . .

<body>,
<strong>
3.3
<hl>
<>
<body>,
<>.
101 . ,
, . .
3.3
CSS
<hl>
<head>
<body>-
<>.
~ >> .
HTML,
-, , . , -

<h 1>
<strong>.
, , -,
.
- :
<strong> -.
,
.
hl strong { color: red: }

<strong>, era.<hl>,
, -
. , ,
. Stro"ngHeader. HTML,
<strong> . ,
,
.
74
. : r r
n -,
. - -
HTML.
: n, (
, ), ,
- . .
(<>)
3.4
, ,
:i. ,
n:
li
{ font-family: Aria1:}
BaSIC Web
Pag~
CosmoFarmer 2.0
Wekome 10 your online ~urce for apartment !.:
and uicks. Lcam aoutlhe latesl lechnique
fruil. flowers and hers in your uran encl head
cover wldt rwr of Jopks sure 10
cvery high-rise dweller. Previous articlcs in..:l (

10 Slories Wilhoul Thc Apanmen1 Manager :"'
lrrigation Proicm~ Your Downstair.i N i!!l11,
highesl raled anicle ever on CosmoFarmer n .
lhc JKE A Way."
title
Montbly Columns
A~k >
~~
DIY Proiecls
3.4.
--n () <html>.
. , <>
IIOTOMKOM
<strong>, <>, <body> <ht1'(1l>.
: ~ (),
(1 i ), n Arial~ . ,
. n n
<>, (. .
u1
1i
body 1i
html li
html body u1 1i
3.4):
75
----------~-------------------------------------
n n,
n, n n n,
, .
n . .
, , ,

, . ,
(body l i
ul
. ,
<>,
<>,
<em>,
<l i >.
<>
<strong>
<l i >
. .
.
, ,
(
i ntro ).
:
.
intro
{ color: yellow: }
-------------------------------------------------
n ()- n (),
intro. , intro
intro <>.
n.
CSS
, :
.1ntro
{ color: yellow: }
, ,
. <>,

. i ntro,
I <>.
- ( ),
:
.1ntro
{color: yellow: }
<>,
-
<div>, <hl>,
<t> . .,
. intro.
CSS.
, .
15
, .

-, ,
.
, .
.
CSS
76
3.
: n

, ,
, -
.
: 1i nk - , -
, .
.
: vi s i ted - , -
. .
, , ,
.
hover -
. (
), , ,
.
: hover
-, . ,
, <>
<di v>, - ,
- .
: hover
: hover,
. ,

high1 ight,
hi gh 1i ght: hover.
------------------------------------------------
8 Internet Explorer
:hover
. n n JavaScript-oa, ,
n n. ( n n
DOC1YPE, :hover
IE 7
, .)
: acti ve- ,
-. ,
.
.
9 ,
(,
. .).
-----------------------------------------------
n -,
. n. ,
, - n, , n . .
n ,
, , .
n , n .
n, .
77

,
, . .
: fi rst-letter : fi rst-1 ine.
CSS
,Q_ - ,
: fi rst- l etter -
, , .

: fi rst- l i ne
-
( .
,
).
CSS
. ,
Internet Explorer 6 Windows -
-
( ,

Internet Explorer
8 Firefox Safari).
, ojavaScript,
~ .
:before.
: before ,
: ,
-. ,
! , .
L- -
-
: before. ,
-. , !
,
.
, ,

CSS
: before.
(,
. t i )
, ,
<
.
cl ass="tip">. :
t i : before {content :
"!
" }
. tip
<>,
!.
, -,
, .
L- .
78
3. :
,
. ,
, : before.
IE 6,
IE 7
SS-
content, , ,
:before :after,
Internet Explorer 8, ,
16
, .
.
n n nn
IE 67
-3,
n, , n
i 6 . - n
Firefox, Opera, Safari IE.
n lntemet
Explorer 6,
R -.
Flrefox, Safari IE.
n Net Applications
( 2009 ), 17%
n ,
IE . n
, IE 6
, -
IE 6,
, , n .
n n
n , 1f06
n n
IE 6
n .
,
CSS
IE 6. ,
. focus n
,
,
n.
, ,
JavaScript,
n ,
nn, , n
. - n

IE 6,
IE 6 7 .
IE 6,
n - J>
, -
n n
CSS,
IE 6,
. , ,
, .
IE 8, Firefox, Safari Opera, .
:after. - : before ~
: after- n. ,
79

n n
lntemet Explorer 6 n
CSS, n001.
n t ,
n;
before, after,
;hover. JavaScript
- -
jQuery
IE 6 n .
: n 11 IE 7, Firefox
1 ,-
CSS.
n n
, IE .
jQuery
IE 6.
CSSHOVER ,
focus hover (n
CSS n .
-, ).
n www.xs4all.
, ,
nl/~petemed/csshover.html.
, n
CSS ,
n http://
sperling.com/examples/menuh.
, n JavaScript
http://somedirection.com/2007/06/10/using-jquery-
jQuery {www.jquery.com), , no , -
to-avoicl-dassitlsinle.
HTML, . ,
HTML ]Query 1
IE 6.
,
:first-child. : fi rst-chi 1d
, .
, <u 1>, ,
( .
3.4
<1 i >). n ,
:
1i :first-chi1d { font -wei ght : bo1d: }

: fi rst -chi 1d ,
<1 i>,
, ~;> <u 1>. ,

.
1i :first -chi 1d
-: .
-. . 3.4 : first-chi 1d
: <> -
<body>.
>) L-
, -,
,
: f i rst-chi 1d. ,
Internet Explorer 6 ~ - ~
, .
:focus. : focus : hover, ,

: hover , ,
80
: focus -
3.
(
() -).
. -
, ,
.
: focus
. , ,
,
,
( ,
<texta rea> - : focus ).
- ,

:
input:focus { background-color: #FFFFCC; }
: focus
-, ,
CSS, . ,
IE 6, IE 7 ,
(IE 6 IE 7
).
-----------------------------------------------
.
, -
selectoracle/.
http://gallery.theopalgroup.com/
- .
CSS 2
-
.
Internet Explorer 6
( ojavaScript,
<< ~).
, ,
CSS
(>) -
. ,

body > hl
<hl>, <body>.
,
( ),
. .
3.5
81
<h2>. body h2 ,
<body>. r-
<body>. <h2> <di v>,

.
<h2> r, r,
, .
div
>
<h2> body > h2. r <h2>,
h2.
Heading 1
<di V> i n t:he page
1tis
paragraph contains
bold link.
Anot:her heading 2
(but: not: inside t:he <div>)
This list item contains
sub-list
Sub-i tem 1
o Sub-item 2
Sub- item 3
Item 2 of the main list

Item 3 of the main list
3.5.
() 3 L- ()
J n

n r r
? , 3
t. IICijle'laeYOI nwr
caii'ro8. 1110 1<080 <JIIO<I! ~ <W4
-.
< n11'10-:wetfi08 (JI(Xa ((. . 35).
t r n
r, n n i1 areropRX
(n) nri! {n). t
6-, r
neporo 1111 n n,
82
. :
- r. , !<
.ma1nL 1st
, , .
ery <ul>
<ul class"mai nllst">.

.mainL; st > 1i )
(ul
n -
n R
, ,
.ma1nL 1st.
sas-seif,
<1 i>,
<u 1>
.ma 1nLi st.
-, , .
<l1> . n,
<l 1> ,
n : u1 .ma1nL1st >
11 > u1 > 1i (
n -
r).
Times n .
HTML.
, ,
. , ,
u./. .

3.5 <di v> -
HTML
no <hl>, <>-
<h2> . .
,
, , ,
. , ,
<>, .
. , ,
.
+
. , ,
<h2>, h2 +
( ,
h2+p
). ( - )- ,
, ,
<h2>.
CSS
. ,
-, ,
, <img>.
, ti t le, -
83
----------------------------------------~-----
title HTML- (
) -.
. http://
wedesig.aout.com/od/htmltags/a/aa101095.htm.

. , <img> title:
img [title]
- ( i mg);
[title].
CSS :
. , . photo [ t i t l J
.photo L- title.
:
, , .
, ,
URL,
[href="http: 1lwww. cosmofarmer. " J{ l or:
red; font-wei ght: l d; }

. ,
-. , ,
-
<i nput>. -
. ,
,
<i nput type=" checkbox" > -
<i nput type=" text ">
, -,
:
input[type="text"]
- .
(,

checkbox), ,
- , .
,
.
, ,
( ), : <~
, ~. ,
, ,
http: 11 -
84
3.
a[href"'="http://"J
= ,
,
,
http://www.sawmac.com -
http: 11.
http://www.google.com
-----------------------------------------------
SSL-,
https://.
, ,
a[hrefA="http://"J. a[hrefA="https://"]
,
, .
. , ,
DF-.
PDF,
,
<
href = "download_instructions">.
, ,
a[href$=" .pdf"]
:
a[href$=".pdf"] {
background-image: urlCdoc_icon.png) no-repeat:
padding-left: 15:
}:
, ,
.
: $ .

([
href$=" .mov"J) .
Word
([
href$=" .doc"]),
, ,
. ,
. , , ,
.
<img>.
- ,
. headshot,
.
, ,
headshot, - mcfa r l and _headshot, mccord _headshot . .

headshot, src <img> .
:
img[src*="headshot"J
85
: n
~ ,
headshot>).
src
Internet Explorer 6,
, ,
IE 6.
, -
.
1
------------------------
8 CSS 3
. .
16
( ,
.).

, -.
, .
,
.
03, , . 2.

-, n
n n
n<: n n
n 6.
? .
, n
1.
, n .
. ,
. :
-, ~
n.
-I, n n
, n
-. n n-
. 2.
select or_bas ics .ht ml
L-r. (. 3.6).
86
3.
-, .
SS- ~ - i
.
.
The Amazing World ofCSS

Sed ut pcnpi<ialis und O<I!Ois iste natus .rror sit \'O~a/em acc:us:lium dolor<n~que lalantiuD>, totall> """ _...,., que ipso
quae . illo iavemore ''mt.s et qua.si orchitecto ''"" dict.a suot explicao. Nemo <im ipsam voktptalem quia \'Oiup!M sit
aspmUr out odit out fugjt, sed qui.a coosequuon. tDOgDi dolorcs eos qui rolione \'Oluptalem sequi ncsciunl
Sed ut per'J'icias unde onris isle oalus mor sit voluplalnn accusanWu! dolorcque loudoolium., lotam ran ;i., eaque ipsa
quae illo iav<1>1ore ,-<fitlllis ., quasi cbltecto beatae \-ilae dicta sunt ., . Nem<> .";., ip$0m volpratcm qui.a ''>\s sit
asperna1ur iiUI odit aut fup, scd quia coasequuntur =sni dolores eos qui ralion<: voluptalcm sequi nesciunt. Nequc p<>rro
quisqwm est, qui dolorem ipsum quaa dolor sit amet, consectctur, aclipisci vdit, sed quia non numquam eros modi lempo<o ioc.idlmt
ut labore et dolore O>agn/IIJI aliqua,;u qua<a/ <olpta/<m. l:t <im ad mioima veoiml, quis IIO<I>'IIID <O<etc~alioot111 u corpocis
$U'$cipit laoriosa:n, nisi ut aliquiO ~~ toaanod:i C:OI\s.equatur1 QW auttm ''d ; iure repreh~detd qui in Yoh.q:ltte '-dit cssc
quaro oihil m<>lestiae coasequa/w, \'! ilh.ln qui dolorem ...,. fPAt quo vohlptas tlo. porialur?
N: :
L't enim ad mioima valiom, quis ooslnlm exercit.atiooem \l!lam corpons suscipillao<iosam, risi ut aliquid toii8D<>di
coosequa~w?
Who Knew CSS Had Sucb Power?

Sed ut perspiciolis unde Olllllis iste oatus mor sit volupt11cm accusanrill:n dolorauque laucloum. tol.ttm ,.., ;operi.o, eaque ipsa
quae . ilo irn'tJ>lore vc::rOillis 1 quasi ordil~t<> beatae ,.., dicta suot i<:.. NCD>O
'~""' quia ~ oi
aspemarur aut odit aut fugit, sed qui.a coosequuofi ari dolores eos qui ralione \'<>>tat<D> sequi oe$dn. Neque porro
quisquam est, qui dolorem ipsum quia dolor sit amd, coasectetur, odipisci vdit, sed quia oon oumquaro eros modi taDp<n iociduat
utlaore 1 dolore :>D~ aliquam quaOI ,c!pt.atCD>. Ut alialad IDirirDa , ......,, quis nostr1.11t exerciWioo= ulazo corpocis
suscipillaorio.- oisi ut aliquid comn>c>di coosequatur? Quis aut<D> vt! ...., iure reprehendoril qui in v<>iupt11e , esse
quao rihJ D>Oiestiae CGDS<quatur, veJ iiJum qui do\orem eurD . \ quo \ 00iuptas tiiJI8a p..W..?
et>ial.,.....
N :
l:t enim ad minima , .......", quis oostiuo:J aercilalionenl ulaD> corporis wscipillooriow oisi ut aliquid"" COfiXDC>di
~7
3.6.
L-

2.
</t i tle>,
Enter <s ty l type=" text/ css ">.
Enter </style> .
.
,
. , . -
87
CSS.
L- (,
, ):
<title>Selector Basics</title>
</style>
</head>
, ,
(
, ).
3.
<styl >,
{. Enter }.
, ,
. ,
L-, .
, <>.
4.
CSS, -
, ,
, :
5.
{
color: #505050:
fot-size: lem:
fot-family: "Helvetica Neue", Arial. Helvetica.
margi-left: lOOpx:
Enter,
sasserif;
SS-
. , ,

CSS.
------------------------------------~---------
-, .
, .
lem
lOOpx
, . .
6.
,
.
(serif)- Times.
SS- ,
, - ,
sans-serif
88
3.

-
. , ,
.
<hl>,
<h2> . .,
.
1.
L-
selector _basics .html.

<>.
2.
<>,
Enter
hl, h2, h {.
, - .
<hl>,-<h2>
<h>
3.
Enter SS-:
color: #BOBlQO:
font-family: Baskerville. "Palatino Linotype". Times. serif:
border~top: 2 solid #86Al00:
padding-top: 7:
padding-left: lOOpx:
,
, ,
paddi ng. ,
,
, ,
.
4.
Enter ,
.
:
hl. h2. h {
color: #808100:
font-family: Baskerville. "Palatino Linotype". Times. serif:
border-top: 2 solid #86Al00:
padding-top: 7:
padding-left: lOOpx:
5.
<hl> ~ <h2> <h>
,
(.
3.7).
: n n
h Amazing World
89
of CSS
Sed ut persplciatis unde omnis iste natus enor s1t voluptatem accusantium doloremque
laudantiUm, totam rem aperiam, eaquelpsa quae l lnventore verltati 81 quasi
architecto t Vi1ae dlcta sunt axplicao. Nemo nim ipsam votuptatem qlia voluptas slt
espema!Ur aut odlt aut tuglt, sed qula consequuntur magnl dolore$ aos qui ratione
voluptatem sequl nesclunt.
Sed ut pensplc:latls unde omnts iste natus enor s1t voluptatem accusantJum doloremque
ludantium, totam rem aperiam, eaqua ipsa quae Hto lnventore vet11atis et quasi
architecto t vitae dlcta sunt axplk:ao. Nemo enlm lpsam votuptatem qula voluptas slt
aspematur aut odit aut tugit, sed qula consequuntur magnl dolore$ aos qui ratione
voluptatem sequi nesciunt. Neque porro qulsquam est, qul dololem lpsum qula dolor sit
amet, consectetur, adlpisd vellt, sed qula non-numquam elus modi tempora lncidunt ut
laore 81 dolore INigl1aln aliquam quaerat voluptatam. Ut enim ad mlnima venln, quls
nostrum axercitatlonem uJam corporis 8U8Ciplt taortosem, nlsl ut liquld commodi
consequatur? Quls autem vel eum lun! reprehendel'ft qui in voluptate vellt esse quam nlhJI
moles11ae consequatur, vel lum qul dolorem eum tugiat quo voluptas-nua pariatur?
N:
Ut enim ed minima venlam, quls nostrum exercltatlonem uam corporis susdpjt

nisl ut aJfquld commodf consequatur?
la.or1osam,
Who new CSS Had Such Power?

Sed ut persplciatls unde omnis 1ste natus error slt voluptatem accusant1um dolotemque
laudantlum, totam rem aperiam, eaque lpsa quae Hlo inventore verltatls 81 quasi
archltecto t vitae dicta sunt ll< Nemo enim ipsam voluptatem quia voluptas slt
aspematur aut odlt aut tug!t. sed qula consequuntur magnl do4oAis aos qul ratione
voluptatem sequl nesclunt. Neque porro quisquam est, qui dolorem ipsum qula do!or s1t
amet, consectetur, adiplcl ve11t, sed quia non numquam elus modf tempora lncktunt ut
laore et doiore magnam allquam q~ voluptatem. Ut nim ad mlnima venlam, quls
1. 3.7. n n
, n -
"
, .
, . ,
<> - , ?
1.
- .
L-
selector_basics . html .
90
2.
3.
h1, h2, h3, Enter . note
{.
note
() . :
, .
,
(), - .
3.
Enter
color: #333;
border: 2 dashed #808110:
background-color: #FBF8A9;
margin-top: 25;
margin-bottom: 35;
padding: 20;
, background ,
co l or , , .
.
4.
, Enter .
:
.note {
color: #333;
border: 2 dashed #808110:
background-color: #FBF8A9;
margin-top: 25;
margin-bottom: 35;
padding: 20;
-, .
,
,
5.
HTML.
L- - <>,
NOTE: <strong>.
, cl ass,
,
6.
. note.
~~ <>, ,
l ss=" note".
HTML- (
):
<
class="note"><strong>NOTE:</strong> Ut enim ad
, : class=" .note".
; HTML
. ( <h3>

<<Not !~ ).
-----------------------------------------------
, , ,
<h2>, L-
<>. , ,
. :
<h2 class="note">.
91
7. - .
~ (.
3.8).
The Amazing World of CSS

Sed ut ~s unde om111s 1ste natus error s1t votupratem accusnaum doloremque laudanaum.
totam rem aperiam, eaque epSa quae llo enventore venraos er QuaSI architecto t '11\
d1da sUit expllcaO Nemo enem tpsam voluptatem quea ~s Sjf spemai\Jt ! od1\ aut filoil.
sed qu1a consequuntur magm OOiores eos qu; rabone VO!uptatem 5eQ1J1 nesount
Sed ! persptdatis unde OIIS iste natus error stt vo!upttem accusant.rn OOioremque laudaroum.
tOiam rem apeream. eaque 1psa quae tllo enventore ventos 1 quast rchltecto t 111tae
dida sunt !1. Nemo enim 1psam VOiuptatem qu;a voiJptes Sj\ aspernetur aut odit aut lugrt.
sed quea consequuntur mag111 OOiores eos QU1 raone VO!uptatem sequ; nesount Neque porro
quisquam est, QUI dolorem tpsum quta dolof stt amet. consectetur, achpsd vekt, sed quta non
nurnquam e1us modttempora t!ICidUill ut labore et dOiole magnam a~quam quaerat voi)tatem Ut
en1m ad mn1ma ver11am. QUIS nostrum exerataoonem ullam COI\)OIS SUSCJptt laor10sam. ntsl ut
ahqiJid ~ commodt consequatur? Q11s autem vet eum r reprehendefn QU11n VO!uptate ve\11
esse quam rohlt moleSae consequawr. ve1111urn qul dolorem eum lug!at quo YO>tas nula panan.?
..----.................................. _.......,
~-.------~------ --- ----------
N:: mtn~ma veroam, QIJIS nostnrn exercttabonem utlam corpons sUSCiplt laboriosam. IISI
ti aJtQtld commoc:li consequatur?
~ .... _._.................................................... ~ .............._
.._ .................................................. .. _ ................................................ J
. 3.8. ' ,
-
--------------------------------------------~-
- n .
3.8,
, -
. . , ,
-
r .
, , , . .
selectors_basics .html
t .
NOTE:, (

<strong>). ,
- ?
<strong>, <strong> ,
, .
. noteText,
92
<strong>
3.
: n
. ,
- ,

<strong>.
1.
L-
selector_basics.html.
2.
. note
Enter.
. note strong
{. -
<strong>-
, .
<strong>
, ,
<strong>,
. note.
, , ,
3.
Enter,
l or:
#FC6512:,
Enter
.
:
.note strong {
color: #FC6512:
4.
NOTE:
CSS.
-
, L- .
,
.
15.
ID-
-.
,
. note
.
ID- , ,
, .
-, . <<ID-:
-~ .
,
-,
93
: n n
.
ID~
1.
<body>
L-
selector _basics. html.

. note strong .
2.
Enter
# rt i l
{.
!- #.
-.

. , , ,
, , , ,
.
article (,
),
3.
ID
<body>.
Enter :
background-color: #FDFBAB:
background-image: url(images/bg page.png):
background-repeat: repeat-y;
background-position: center top:
padding: 0:
margin: auto:
width: 760;
,
( ),
,
.
4.
, .
:
#article {
background-image: url(images/bg page.png);
background-position: center top:
padding: 0:
margin: auto:
width: 760;
, ,
-. , i d L
-, , .
5. - <body> i d=" rt i l ",

( ):
<body id="article">
94
3.
: n
<bo,dy> , # rt i 1.
CSS,
.
<body> , .

body
, .

ID,
- -
6.
ID.
.
-
.
(!),
.
,
background-image
( ).
( ,
,
HTML).
1.
L-
sel ector _basics. htm1.
# rt i 1
2.
Enter.
hl+p {.
<hl>,
.
.
,
.
3.
Enter :
co1or: #FF6600:
font-size: 1.2em:
1ine-height: 140%:
margin-top: 20:
,
1ine-height (
) (
.
1eadi ng).
4. , , Enter . \
:
95
:J :
hl+p {
color : #FF6600:
font-size : 1.2em:
l ine-height: 140%:
margin-top: 20:
, ,
, ,
(. 3.9). HTML, ,
,
<hl>.
~MEAHE-----------------------------------------------
Internet Explorer ,
"'
.,
~ css: MISSING Nui~

~~
~ .
........ ....,
ft ......
,,

Sed ut persptiabs unde omnis lste netus error sit voluplatem eccusantium
doloremque laudanuum. totam rem aper>am. eeque lpsa qiJa8 1fio uontore
verilalis et quasl arcMecto beatee llllae dicta sunt QXplcabo Nmo anim
ipsem voJuptetem qu1a voluptas sit espem&tur aut od~ aut fug4 s&d quia
consequuntut megru csolores eos qu1 ratne voluptotem sequt nesctUnt
Sedutpersp/clasunoeonnsoS!enaii<SerorSIIYOI\JP!IIIem~ntll!ldOio<emQI!
laiiOantJ\11\ totam rem aperta eaque rpsa Q\188 t1o IC'IIIEf'II:Ofe ventas et quasa arctite<;to
~>~ waedict&S<I"II eJ<!*C81>0 Nemo e<Wn opwr~~ qu~e YOI>Cas s.t o5petnetu1e1
odtt < ruo<t. se<1 quJa cseqwJr mogr> dalotes eos < ra~one ~tem sequo neso<n
NQue po!'ro qusquam es1, qu1 dolo<om opsum qua dOio< '" omet. coosecletur. ad!poso vekL
se<1 quoa f\00 runqu~~m "'"' moa.tempote rnac:~~n ut taore er 0010re mognam etquam
queeral voiupl3t.."_ \ mm ad mo111ma Y\1111am. qurs nostJme.<e<Ota~""""'IJiamcorporos

SUSCij>l labonosom !115>\ alqud & convnodl Cot1$EqUa'/ Qus
I!IJI11 wre
te!)reller>clerd qu~rn vdui>Cat t8';se quram IYhll molesoe ~tur. vel<lum qur
114em""'
dOIOromeutni\Jglatquo~,... par.a.r?
. .____ _...,:
~- .--~---- ---- -...,.._..,_...__...,.
: nmma ventam. qurs- exerat81r1em\JIIam corpons -
1 "" \ oiquld 8 ~ COfl$eqUaQ6?
lolnosom.
1--------- '
. 3.9. -
~-----------------------------------------------
-
O_finished .
, ' .
( ) .
..,

: , . ,
HTML.
, , SS-
?
- , SS-,
-, . , <>
<body>. , , <body>,
<>. , SS- (. . 3) <body>,
1or (, - ). ,
<body>, , , .
, , <hl>, <h2>, <>,
- .
( ),
. , , <em> <strong> <>,
, <body>.
-----------------------------------------------
.
3,
, , . , <>,
<d>,- . <d>- . (
) ( ).
, ,
. ,
, ,
, <em>, , <>,
. ,
Arial
24 , , <em>
. .
, .
4.1,
, , .
.
97
R.Id kd Gardtf~g
CosmoFarmer.com Projects
Hlgh Rlse Project: Ralsed Bed Gardening
Loff111 ip..c;:u dolor ..., iUnf't. ron..Of\.""teLu 'f adip1<a..; tic . ..:d d\ 1011 f\UI\1 n1Ynrt.h ttliqn,,J
tt'1I.IUJ\t ut l<tvtf't dc.&.~ m;t'CJ';a ..Wq'f.I C"''ot vc:.1JJ4,.,t t,.it W\~~ t'Utm 3d tJJ!i1n 1'\'ttiom. qua~ ,,....tna
t>'\11.tllon U11ni'IH....R'('Ic(" ~.ox;plf 1t~1!-<l. ntJI Ot 8ti.qp !;' t"Ja 01tI11dof"CCiiNilltll Lktts. ;tfltJ\ \~l
~urn triuf~doiOr in btndrt'ftt in ,,tljt:t.,tt" ,...t ci!f ~tt"' \/<q. 'f'l
illum dc*'lt'f' t'U fculiJ!
~ 011. '"""' t:ta~ tf -.xttrn'itn 1Ut.Wd~ dt(n.i :t\1 qUi bl.11'1t!tt Jlr.-wo~nt ~t.,l~il ant
dC"ll.-(11.
Step 1: Get Your Materla/s

t.o~n ip<w'' dulir atntt, C'<ln'lt"('\.1:1uc Jd't"""'i"" c.br.!kd ,1,.. '' noartm' otbb (IJI---.1\c:.d
tanod\Jnt t tw~ dokffn'~tt:. lhquartt t"rat \dutr.ltwt!-1 t1'U11'1 ~d tmnim t"'totmt qi fl(~
f".~~;.,.n l;t.ttll) U.,rno~'"'f ~~1pit h..rti o'li-rl \Jt ~ "1. t'3 ~""n1nf l\urt. l> :JIU,fNU 'd
,.,n irJtl' dr.&.:.r 1n !~rrrit ia. ,,1\pt,f.llt- \Yhl. ~ "~ -:>tsr ttjt)\l."qu.fll 'rt um ~k~c.tr ~d ltUIIJt
~ :at \'(') fflJIC rt ;a,rro~n rt tu-~) Codio d'tllt"'-101
bbudot (W:tt'(\1 10f1131um "./il
Ci''
1.-k-1111
Step 2: Waterproof Your F/oor

I.Ot"W:'I'n ip~u doiOr tt xttt"t
"
L"1NuN lhlt:i"' rh~
'~!} d1
lloO'IIntn' nJ)I' ~-u,nnd
I\.~1nt111 arfC'I1'SI!Lrt n~tlilt1.JWM l"t.\f\'\.!Jtllpril '~ ~1t rn!J'It 111) trllnli--'1 t''fiiUtn. ,.. noru
.-~...rn t~ uJt.~~n'W'fW"t ~ "1f1itJtA:ni ni..J :atiqr.('ox~ rac"n.xii$\:11\"S>~:qu;n. H~li.. AUt~m \.-1

t"tJJ'f'l 1nuR' dot.Jt laJ.nonL 111 '1Jipt.t.sk '~"''' NW: mok-tlt' t " ' .<tUat \t'l tltuna di'I.:.t't' (tJ ~
~ .wt \'l('f0t"H'~<t"1 ~("(''J!\1.'1..10 .:\ 1U~II t.dlfl (ll,t'-I ql\i bloUI
J,\ 'J)f;tt"foC'Pt tupt~~NP11''l\
ck:ltnit:.
Cosmofarmer.com Projects
Hlgh Rise Project: Raised Bed Gardenlng
Lort:m.lpsu dolor sit Oimt"t Wl\.~.."\: r-tur-r .adtJN-lonn( ~. '<'d (tl~o~m mJnntn' nihb t:UI ~~~ ct
unndun1 l'lt't\..tok.r~ rn.:t.1"J ~abq111t tat \ ,'lhJLp:.t
t 111.\:l'il t'n1n' Dd minim
wn.iam,
iUi
t.o-1rud t\el'i .tl uU.1nawrcr "U.'"4.1pat khorti< i.Q ''' ohqt,Jp '\ ~t tanJ.n1odoi.X.I>I'-"""-"u-.1t. J>t.JI\.
wuttm $ eum ort doi ~ tn "'''ltltcorl~:' '"'1puc~w '~''~~~ ~""Oniot-q\!Qt. '~1111. d.r.L.Jft"
t'U fc:urat
l>t.-a"'m
nulla fagsis at \
:untddt-n.it
fi('Ni!l C"l
,"ti!A~n C't IIJ~O :.!j
Ji.Qtt
1" I'Jift ~ndll ''~ nt
Step 1: Get Your Materlals

Lonn~lpsam dolor !I4t ~::t~tt~r:\dtp..snt~tLit. -d d~um 1o1mvtbhU~nd
11nt ~ atot-t cir.!1twt m 'J:.'~' Jt1.qU.;im ..: "ot:ulrc.r \{t \'MI Nim ~td minim wnio.m. q"
n~tntd t'drrd t~ftan uJL..m~~'qWJ tuk,~tl ~t..,.. (L.; n~ uc .tl'u t>' r;:~ iiJ\du('CIII\-cqtJ.Jt. Uttt~
;aQit\ \i') t1-n1'1 inuc~ doiOr in Jw.ndrttlt ~n "~Rit' tYht r~ l"tko'sti<" ~>t"Q\I~t. \ ..J i8um tT~
f:"Q fe:ugiat UI!a faciUsiS t \'t"tut'tt4 '-'t :ttNn!t tt ~t nJiodJJ;Jt.~.~.tll q ftl.\lt~tit prt~r~(lf
ktp1:\tut'Ja ''t dtokUJI ;
Step 2: Waterproof Your floor

LOrtiQ lpsum dolor \ :.rur-t t.".n:"-1l"!LtN ."J.tp~1f\itl'ht
tin....Junt ut h1....,t d~ m~~n~ '~qu 1t1\ 1-"f:\t \tt!utpo.
d Uta,n nunnm) ntbb ~ut~t.m1
minim veni.am,
t"t \\"i-4 1: ~
qui
~rrud es:com ~.:~tion di1ounrar("r ,~-.tfrit ~ :-.liqtp r" t.'" tumntodPtUn.d.al OutJ
.tt'fn \et ru.n \riurr duWr '" hi-1.Jcr.r1t \'U~t:tt{' ,til.t ~ naokoHr t'I'II\I-(a~~jtl ,..._.f!n t.1( ut'e
' ;H\1"'tnt<rQJN.'-..:'tllnt,;tntt3t.diodl~tni."-~n wbbnd1t
4 .1. n3
, - ,
. , <st rong>, <em>
, ,
. n
, .
98
4.
,
. (. . :
~ .
3)
- ,
. ,
.
3.
, .
, - .
,
<body> (
). , -
:
body { font-family: Arial. Helvetica. sans-serif: }

-. , ,
,
.
<d i v> (.
. : ~
3) , , ,
<di v>,
SS-
, -
. ,

<>,
<hl>
<di v>.
, ,
. ., .
--------------------------------------------------
8 3
<div>
CSS.

. SS-
,
border ( -).
, ,
, . , <body>,
( ,
. .) (.
4.2).
-----------------------------------------------
SS-, , . .,

1.
99
CosmoFarmer .com Projects

HJgh Rise Project: Raised Bed Gardening
Lore ip~ua11 dt)lo , ~n:t. CIII\<Nt~L!ICI ;l<llp1><1g el1t. "'''
tlinnt lt<lltUmltly ltJitll tui,mnd tilttldtt laol~tt tlolona11a
lu <'1'31 ~'Oiuljt. lJI 11 tsi cnt l mmim t'<'II/1, tfJ>
IIO>tt'\Jd cxcnJtatit llnrpcrs:c1pit lobt>t't isl ut l
<'n ct ndo consctl. ])lli:. ntcJrt l <'IIl rit.' tlo}'ll\
1Jtn<lrtl1t 111 I'Uiplltl!l<' 1clit "' motcsllt' o:;rquat. 1'<'1 illum
tlolot'<' <'U feu~at nulla faciljsjs \ 1'<'1<1 ' cl ntrun1sau t'IIU,L<>
\ dtgltl~im qi hl:cl1t J)r:I<'S<'Ill Juptat nr1l dlctJit
Step J: Get Your Materlals
LoreJ)) ip'un' dolor ,;, l. L'OH,C<'t\'lueJ' :o<IIP"' 111~ <'llt. "'<1

tltnltl nlu ltlblitui,od tcldllttl t laorett <l!, 111ng11i1
;t\i<tUAI\1 t'l':\1 1'!1JUip<lt {' 11\'ISI C11in1 :td 111i11i111 l't'IIII!. IJUI'
IIO$trud cxcrei wti<> llt1corper su."<'tpit lolrt1< nr<l ut <~liquip
tn Ctttlltodo ton-<~uat. J)lli~ ntcJ\1 \'tl <'11111 lrittn. dl))(>r in
Step 1: Get Your MateriaJs
. 4.2. , (), ,
, .
, ,
( (), () ), .

.
,
. . n
-t1 n
<body>,
100
4.
n r
. <hl> <h2>.
, <body>,
- .
-----------------------------------------------

- , :
. , .
, .
, SS- - (
, )
(, <body> ),
,
( ,
<ul>).
-----------------------------------------------
, , ,
, .
:
, , ,
.
, . ,
-u.
, ,
.

, .
04
2.

, ,
, .
,

.
1.
inheritance.html L-.
.
-----------------------------------------------
, , . 2.
SS- -,
, , .
2.
Enter
</title>.
<style type="textlcss">. Enter
101
:n
r </ sty l >, .

, CSS.
, r <>.
3.
<sty l >
{. u Enter
}. <>, r
-.
4.
1or:
#FF6600.
color : #FF6600 :
.
. . .
5. ~ , .
r (. 4.3).
The Amazing Wor.d of CSS

Std ot penpiciatis \l1de omli.s i n111us mor sit ,..,fupttllltm ac~usQ)I/{UJ1f <lol<mque laud.Jmium. tx>tom ""'
e:aque ips,a qua.e: ilo iaea.tore veritatis et qvasi arclitto beat:a(' \itae <ktt suat expkat~ Nemo
.";", ~sam \"Oiop(m quia ,..,q,w sit aspcin.wr u odit out git. sed quia cos qui r8liooe ~ sequi
periam..
.-n
adipisci v.a
8Dtemveleum&e ~
ut lautan""' ..,." i
Who llew CSS Had Sucb Power?

Scd ot P<fspidatiS """" ...... ~ 111!1 mor sit \'l>klptaltm acctnaalium dolemque loud:wiom, totam .....
periam.. <U< ipsa quae illo im'<ntOfe ,..,._ et quasi orchil.ao t1 \W dicti> 1111 i.. Ncmo <nim
ipsom vohlptatem Std at penpiciatis un& omois Im tuo mor sit voluptat1m aaamium cloiOremqu<
~. tota rcm opcriam. eaque ipsa quae: illo inwmor '-'.n'Jti"J qumf orch~fto beatae. ,. t
1111 >i.. Ncmo ..." ;..." ,..,~uptotem quia \"Oiuptarsit aspemaiUr ourodit autfil. ed quia e<>s qui rotiooe
'~ sequi nesciD. Quos 8UI<m ,-.J eum iure r~ qui in ''Oiuptat~ '<dt es quom oiil molesw
conseQWIIUr. vcl i1D qui dolo<em eum IUgiat quo ,w oulla pariatur?
4.3. , , ,
<>,
102
4.
, <> .
<> . , ,
<em> <strong>
, ,
.
, , .
:
<em>, <> <strong> <>.
, , ,

em
strong, .
-
.
SS- . ,
-.
1.
L-
i nheri tance. html.
<>.
2.
Enter .pageStyle
Enter }.
{.
3.
<body>.
font-family: "Helvetica Neue". Arial. Helvetica. sans-serif:

font-size: 18:
color: #BD8100:
width: 900:
margin: auto:
:
.pageStyle {
font-family: "Helvetica Neue". Arial. Helvetica. sans-serif:
font-size: 18:
color: #BD8100:
width: 900:
margin: auto:
4.
, .
(
).
<body> (
l s s=" pageSty l ".
<body> : <body l ass= "pageSty l ">.

. pageSty l .
, <body> ( ),
, , .
5.
103
. - .
. 4.4, -
, ,
. , , <body>,-
-
.

Secl ut ~rsplclaiJs unct. omnts Jste naius error sn volupratom ac:l/$anYIIm doloromque laudniJum totom rom
a~riam, eaque lp"' quae lllo lnventora v...netts &t quasl archltacto bealllo vffo dlela sunlexp!ocaO
Nemo enlm ;psem vot>talem q\Jia votuplas Sl1esp.malllr out odrt aut fuglt, uc1 qula qul rotlone volup13lem
sequo nesclunL
oplsclveJn
autam vateum hJ.re re

ut leutem ve! eum 1
Who Knew CSS Had Such Power?

Sed ul ~rspk:lel!s unde omnls lste nalu t(IOf $11 votupUI\em accusenuum dolcwemquelaudenuum. toO!m rem
aper\am, eaque ip&l quae ~lo lnvontore vel11atis \ quaslerchnoclo vlloe dkta S\J<It l~ Nemc
enm ipsam voluptatem Sed ut persp1clat1.s unde omnts tste natu,s error voiuptstem accusanttudo1ofemque
leuctentku'n. totam . apellam eaquolpsa quO* 1 lnvontore vorftatlo . quasl orchl:.<:to t vnoe dkta
sunt . Nemo enlm lps;lm voluptatom qula vol\lp\4s sit espematur eut odlt aut rugh. sed qula eos qu1
ro\Jone voluptatem sequllle$(1U!\t Ouls autem ve! um tura r.prahendem qUi in VOIUptate vel<t esso quom ntl\ll
molestlae conequa!Uf, vlll ~m qui doiOrem eum 1\Jgiat quo v~ptas )1YIIa pilllot'?
. 4.4. , n <d>, n ,
,
-
, :
,
, , ,
. CSS ,
? n <body> <>
?
------------------------------------------------
n pageStyle <d>, ?
n . ( ID)
<d> - n
. n, , <d>
n <d> r . ( ID),
<d>
n .
104
4.
, ?
<> ,
,- , , <body>.
, .
- , <>.
.

, .

-.
() . ,
, ( )
. , .
1.
L-
i nheri tance. htm1.
<>.
2.
( 1or:
#FF6600:)
Enter .
-.
3.
.
:
{
co1or: #FF6600:
margin-1eft: 50:
margin-1eft: 50:
padding-1eft: 20:
border-1eft: so1id 25 #808100:
paddi ng
4.
ma rgi n- 1eft
50 ,
20 .
.
,
50
, <>.
, <> (, <em>)
(.
4.5).
: -
, <em> <st rong>

50 !
, , ,
. : , *,
.
*-
, .
: <>
~(*, ,
).
105
The Amaztng World of CSS

Sed ut pereP\claUa ullde O<n<\J$ lsle natus o"or ~ vo/uptsrem 1/CCllUm/m doiOemqueleuoantillm
tot""' rem ape~am. oaqutlp!14 quao n1o l(lventoro verflalis ot quaal archrtocto t vitae
dlcta sunt e.><pticao. Nemo entm lpu.m 'IOiuptalem qula volupta s upematur aut odK aut 1\Jgi~ d
q\Jio eos qut raUono v<>platem soqul nesclunt
adlplscJ VtiJ\
eutem vet eum iure re

ut lautem vol oum 1
Who Knew CSS Had Such Power?

Sed ut persf)icleti> un~ omniStste natut enc< s votuptatem etCU$ti\lm doloremque leUdemJm
totem rem apo<tam. eaquo tpsa quae Uto mvontore ~er11a~s 61 quasl arcnecto .t >~! dicta
sunt ~ Nemo anlm lpsam 'IOIUptatem Sod ut partplcloUs unde omnJs tste natus ~or S4
voluptor.m actll$8rr/ium cloloremque laudentlum. totam r.", ape~om, eaque jpsa quae llo
Fnwmtora velftotls et qua.i lf:hlteC!o t vttae dlclo sunt >ii . Namo on1m !14
voluptotem qla voluptas ~ upernatur aut odK autl'uglt sad quJa eos qul raJ!onalloillptatem soquJ
nescturrt 0\ds autem vetoum ture tep(ettondorlt qulln votuptate velit quam nillll mole$Uae
consaquatur. vol illurn qvi dotoram eum tuglat quo voluptas nuha parlatur?
NotMel
Sed ut perspiclalls unde ornnl$1ste natus etror s voluptatem ccunt/um cfoiOemquo laudanttum,
lotem rom apo~m, ...quelpsa quao hlo lnventora vo~tatls et quasl arc:h~acto t vttoe cftcte
sunt oxpllcao. Nemo enlm ~m voluplatem q\JJa volupt&s s!( aspematur aut od!t aut /uglt. se<l qwe
aos qulratlone
nes<iunt Odl tampora lnoidunt ut laoro at doloro magnam allquom
Pllc. 4.5. w SS- (n, w}

~~--~--------------------------------~--------
n SS- n n 1.
~~ ---------------------------------------------- -, ,
n
04_finished
r .
,
: -
? -
CSS,
, .
. , <body>
,
, .
, SS- <body>, <> .

, : SS-
,
- (, <> ).
, -
It, , . ,

. :J ,
.
----------------------------------------------- , ,

(. . ID-: - .
3).
-, -
.
.
CSS,
. ,
CSS.
, ,
-,
. , -
107
l<<
. ,
r, , .
: - (
.1 -)
- (n, <>
<> ).
CSS . . -
11 , - (, ,
n )
. :!<:
'- -.
'- z (, ,
<> ), ,
, . : <body>
rr n , <> - , <> - .
, <> <body> <>. ,
, .
, n . 5.1, : <body>,
.lJI <> <strong>. SS- :
Jody { font -family : Verdana. Arial. Helvetica. sans -serif: }

~
{ color :
#F:}
strong { font -s ize :
24 :
~ ('\ ()
lnheritance and the Cascade
GEJ ~~ ~ +)
@) tlle:/1/Users/dave/Do<uments/OO_we (Q,.
Google
Heading 1
This is the <strong> tag--strong
emphasized text within paragraph of text.
ipsum dolor sat. Lorem
Lorem ipsum dolor sat.
dolor sat. Lorem ipsum
dolor sat.
ipsum dolor sat. Lorem

dolor sat. Lorem ipsum
Lorem
ipsum dolor sat. ,
Lorem ipsum
dolor sat.
Lorem ipsum
5.1. n

108
<strong>
5.
n :
, , ,
<body>. <strong> -,

24
font- f ami 1 <body> 1or .

<strong> SS-,
. ,
<strong>
strong {
font-fami1y: Verdana. Aria1. He1vetica. sans-serif:
co1or: co1or: #F:
font-size: 24:

-
,
.
CSS? -,
<body> <>.
5.1 <strong> ,
. -
<body>
<>.
, <strong>.
?
<body>
<>? : .
,
.
, <body>,
. , -,
. <>
<strong>
, ,
. <>
.
, , ,

- (.
5.2).
5.2 <em> <body> <>.
<> , <em>
<body>
, -- <>.
,
.
, ,
. SS-,
,
<td>,
<tab 1>,
109
TheCasc<~de
1:\ ~ i ('j: r.: ~ :~ ~ l1 t" (t~ :. . -1~~ : ~1 ::,
.~ !H l t.:til } : :'i i H ~:~t !~; (~\
: :=
1.
5.1.
n, n
( <td>), - , ,
~ <td>,
-.
r
n
, ,
~ CSS. ,
. , <body>,
<> <strong>. <> <body>,
<strong> , .
<st rong>, ,
(. .
5.2). , , ,
.
, .
, ,
, -
. ,
<>. , .
~------------------------------------------------
, <>
tn, .
9.
110
5.
: r
, .
: -
~ <>. ,
<>. .
, <>
. ?

, ,
. :
. ,
.
.
,
<h2> .l eadHeadl ine. L- : <h2 cl ass="l eadHeadl

ine">Your Future Reveal ed! </h2>. <h2> .
-----------------------------------------------
, , .
.
(. . ~ ~ .
3). ,
.l eadHeadl i ne, . secondaryHeadl i ne, . newsHeadl i ne .l eadHeadl i ne
. leadHeadl ine :
.
ID-.
!-
cl ass="news">.
#banner .news. L-
<di v> .
<div id="banner"
- ,
Ii . -
@import
.
-
. ,
(. . : ~ .
3). ,
- <di v> (: <di v id="mainContent ">)
: < cl ass="byl i ne">.
:
#mainContent
#mainContent .byline;
p.byl ine;
.byline.
111
- ,
, . .
. , ,
-
. L- :
<
class="byline">Written
Graine de Pomme</a></p>
<
href="mailto:jean@cosmofarmer.com">Jean
-
:
{ color: #6378df: }
{ font-weight: bold }
.byline { text-decoration:
n:
<> - ;
<>, <>, ;
, ,
l i
ne.

, <>. .
, ,
~:
, . ,
-
.
l-----------------------------------------------
,
. , .
,
.
:

. ,
, ,
font- fami l ?
?
, ,
. ( .)
,
. , , ,
. ,
CSS
. ( )
112
5. : r
: , , ID- . .
.

ID--
1 .
- 1 .
100.
(inline) - 1000.
-----------------------------------------------
,
. , .
, , www.w.org/R/
CSS21/cascade.html#specificity.
, .
, :

<i mg>
= 1);
.highlight (= 10);
ID-#lg (=
100).
- L-: <img
src="logo.gif"
id="logo" class="highl ight"
/>. (
, border ), ID- (#1 ogo ),
.
-----------------------------------------------
(,
:first-child)
1 . (, :lik)
10
(. . .
3).
content
h2 strong, -
(.
5.1).
5.1. ,
,
Cenerop
Ter
.byline
p.byline
#banner
#banner
1
1
#anner
.byline
1
10
11
100
101
110
11
2
2
221
a:link
p:first-line
h2 strong
#wrapper #content .byline a:hover
1
1
1
1
1
1
2
2
1
113
J:D : n
~-------------------------------------------------
-. , . ,
~, , #anner, ,
~ .
: .
: .1 .
;;r . . <>
.
::..1 .
.1 .
L-.
<:
class~"byline " >Written < cl ass="email"

1ref="mai lto: jean@cosmofarmer. com">Jean Grai.ne de Porrrne</a></p>
-, -
:; :
: .email { color: blue: }

Jyline { color: red ; }
,
11 ( 1 -
1-
), <>. .
r ? ,
.

nr

php? appllcation=firefox&id=97). n
8( ,
n, n
- (
).
?
, Apple -
Safai,
, ;
n , Windows.
. r n
n 11 Web
Deamweaver (www.adoe.com) n
) n n
lnspector (
CSS. ,
-, SS-,
) n
t< .
-<.
) dvanced (n
Show Develop Menu (
) Preferences (). n
. n n
Firefox-View formatted Source
(https://addons.mozilla.org/extensions/moreinfo.
lnspector.
Web lnspecto
no http://tinyurl.com/web-
114
5. n!
, :
.email { color: u: }
.byl ine { color: red: }
.
. l i ne . ema; l ,
.
, , (
) .
- ( L-).
, <styl > (. .

HTML,
2),
<l i nk>,
( , , :
). :
- .
, .
----------------------------------------------------
,
,
<style>.
. .
@import,
2.
CSS
-,
. 3
- .
#nav,
3 -.
n ! 1mportant.
, n !1mportant
, .
n. :
#nav
{ color: red: }
{ color: tea1 !1mportant: }
1<:
11 ! important,
n n n n
#nav,
, , n
#nav
t
, , <>.
1mportant n,
n. , n-
lnternet Explorer 6 n
!i mportant,
~
, SS - ,
. , ,,
115
,
. .
. -,
! important ( )',
. ,
, ~ .
.

. 5.3 , -
. .
. i ntro
,#s id . , . int
. ,
#sidebar . i ntro.
. 5.3
<div> #sidebar.
#sidebar
. intro ( - 101 10).
: . i ntro ,
, . 5.4: #sidebar . intro.
,
#sidebar {
tont-family: Verdana;
font-size: .9em;
}
Just Say No m
Lorem ipsum dolor sit amet,
consectetuer adip1sang el1t, sed diam
nonummy nibh euiSmod tlncldunt ut
laoreet dolore magna altquam erat
volutpat. Ut w!sl enlm ad minim ven1am,
qs nostrud exerd tation ullamcorper
Lorem ipsum dolor s1t amet,
consectetuer adlptscg eiJt, sed dlam
nonummy n1bh euismod tinddunt ut
laoreet dolore magna aliquam erat
volutpat. Ut WISI emm ad minlm veniam,
quls nostrud exerd t.ation ullamcorper
p.lntro {
font-family: Georgia;
font-size: 1.25em;
}
<dlv
<
ld="sldear">
claas="lntro" >
</dlv>
. 5.3. n n ,
ero r
116
S. n
c:reti: n.
.sldeb8
{
font-famity: Verdana;
font-size: .9em;
}
Just Say No m
Lcrem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis
nostrud exerci tation
ullamcorper
Lorem ipsum dolor sit amet.
consectetuer adlpisclng eRt, sed dlam
nonummy nlbh eutsmod t:Jneldunt ut
laoreet dolore magna alquam erat
volutpat. Ut wtsj entm ad mlnlm
kler
p.lntro {
fontfamily: Georgia;
fonts.lze: 1.25em;
)
<dlv
<
ld="sld..r"':
clu= "lntro" >
</dlv>
~.
5.4.
n ,
r
n , .
, global.css,
.
SS- :
<hl>, . . ,
, () <hl> ,
. ,
,
. ,
g l l . css, ;
(<hl>, <> . .) .
,
, . ,
global.css :
hl {
font-family : Arial. Helvetica. sans-serif:

font-s i ze: 24:
color: #000:
117
rr r
, <hl> -
.
:
~1
font-size: ;
color: red:

.\rial (
<hl>
),
36
( ).
------------------------------------------------------
~
, r L-
<head>.
, r ,
r .
. ,
home. css, -
global.css. home.css global .css,
. home.css
global.css L- -:

<link rel="stylesheet" type="text/css" href="css/global .css">

<link rel="stylesheet" type="text/css" href="css/home.css">
~
------------------------------------------------------
r r -r
<d> -r . ,
-r,
#home,
. 9.
#review, #story,

, :
,
<hl> <h2>, ,
;
, .
HTML , :
, HTML .
, .
, ,
Safari Firefox
paddi ng, Internet Explorer margi n.

. -
118
5.
, , ,
,
Firefox
Internet Explorer . -
. ,
.
Wt
( CSS -).
, ,
. ,
- .
:
html. body. hl. h2. h. h4. h5. h. . ol. ul. li. pre. code. address.
variae. form. fieldset. ockquote {
padding: 0:
margin: 0:
font-size: 100%:
}
ol {
margin-left: 1.4em:
list-style: decimal:
}
ul {
margin- left: 1.4em:
list-style:square:
}
img {
border:
. ,
100%- .
(.
5.5).
, L-.
-------------------------------------------------
. reset.css 05
www.sawmac.com/css2e,
.
. CSS (

15
<ol>
<ul>)
15.
(
), ,
, .
119
~ : r
:
..,
: , .
:w , ,
: . , ,
-: ; .
u . ,
:-:- SS-. , ,
::: .
,
~ il.'! . , n . 2.
-: n
05.

J.1 , .
cascade. htm 1 n
05 ( . . 5.5).
: ( )
. ,
SS- .
~css.n..~- t.......
-"""''"*""""""""'
O.Q:.L:i) Z:\O}_wreing\OO_o\..fJ'otrt.J~_MoWIS\uscNt,himl
-:r-
l fl c.s......,_ ......., ....... c-....
-~
SSThe ~wq .-1

<d,. pcrspicios
dolor-
ande""""' ;".
oatus ertO< Ut '~ occosontiuo>

lotam raa ~ eaque ips.a qoac lo ~orc ,.aQris. quasi wfbltu.to
.....,,;,.. ditu- >ik.. Nemo ..." ;ps- '~ <PJio '-olupW sit ._,..." ...
w &l8t. sed ~- map clolorcs <os qua.- >-oluptat.,. ..q.i~
emlp..."Dolo<Soc
18 pcrspicios uode ocis & ...,. t:nor Ut v..._.., ocCU<IOiium doloRoaque
'
t::~ rem ~~~ qwte ilo iu\c:otore YefUris d ~ archit10
...,.dac 6 .... ..i Nemo ..,;..,. YOioplll<~~~cpa ~ ,....,...._

.,. Nai<. scd qiU ~ ..... dolo> eos qoi.....,.. ~""' ..qW o<sWnt
""""""""
.... "'dolor="""" <PJio
od......,,........_
dolor ....... ( ............. odipisci-.
18laor< c~o~or."._~
. . ._ _. ..,.,
""" - l.:..,
- " " ' modi - - . , . .d. - _ _ cotp<Xis susdp<
CjW oo<INm
. .. ..
ni1i ,._ aliqoid"' COIIIDIOCii .-~ Q.n .,..." 1:1 <11111 iu<c reprd>eodcril
\'\>IIIC\""
....
_._
""clolorcn>...., NFI
\-olupW ..... ".n.n.'1

ut pmpicias ur:.ck ~ istc NdUS aror ~ '~ ~ dolormue
tou.:n r aperiem, eaque ips.a ~ .. ilo 81\'mt:<n. ~ d quasi arcit:ecto
.0 cidaNS>ik.O. NeoJO . . . _.."......,.,.q\8&,-oNprasJit_.,.""'
w !Qcjl. sed qula .-.q~UW< . _ ; dolorcs cos q1a r '~"" sc.P ~
eq>~< pooro ~ ~. qw clolorearipsl qula dolor"' ...er. cooscc.-. odipisa '...

qiJia ..__.;". modi r.._.ID<i<II18 l< et !>< . , . _ oliqoam quoen11
mt.
Ua Clim .!d ~ '-ailra. ,ps n. ex.erc:itJdooeoa cOf'J)Oris scipic
m. aisiuteiquid.
aCCIO'IIJ:IOdi sq1 Quis 8W:m\'Cl ewuaerqe:odel:it
'lnea'~'""esS<<!"'""noiiDOiestiooc~. ,-diincpclolorcmcumfi>a>3t
SOkor
Sedut~uock""""'lsrnao
r ~ ~em
ac:CUSIDI:U.a
,_,..,.
_ _dolacmque
_ .".
laudooa
__
quae. lo .,......."._..._ .. an:lil01> .- - diclln >licll>o.
N._ . . . .....,,.....,._ qa;a ".,q,w

... ._"."., .... odit . . !Qcjl. sed qaia
c~mapidolof~s eos qui~
...~ .... ""dolor=
~sc<P.....a.nt. N-poro
ips1D quia dolor
adiploci-. sed qo;. .... -
....
IIIOd! , . _ . i>ci<II laore ci clolore
_..,'*'""'..,..
... od...."........, qgi>-tiqwm
cxac:ioioncm- corporis
liooncom.
Ur
susciJ>i1
aisi .. aiqo8d .... COIIIDIOCii
<---'~
.......... ...,. ...
... quo.....,...-
reprccaclc:rtqui;. ~velit
cssc
_.......-qui .... - fusiot

poriotw?
voloplai- poriotw?
' Ut!;qoid
d ut ~~ QII:2DS istt n mor,;; vo1taocatem ~ cio-eJDC~Ue

.
5.5.
n n
HTML
120
2.
5.
n r :
ma i n . cs s 05 ~
, cascade. html.
: ,
.
, .
,
.
3.
- ID-
.
#main
#sidebar-
5.5. HTML <di v>, .
. ID- , ,
<di v> , (
ID-, ,
CSS, . 10.)
,
.
4.
main.css
#sidebar:
body {
color: #1967:
padding-top: lOOpx:
background: #CDEFF url(images/bg_body.png) repeat-x:
width: 800:
margin: auto:
}
hl {
font-size: m:
font-family: "Arial Black". Arial. sans-serif:
~ ,
.
cascade. html
(.
5.6),
, ,
.
font- fami
ly 1or, , ,
Arial J{ .
, , t ,
<hl>
~;~
<body>.
, i <h 1> <r,

<body>.
121
()i :
Missing Manual
Sc:d vt ~ undc 00.011wc aana Cl1"Qt Rt '~ acaua.nuw ~

1.tda.aciu:m.toeam n:m aprcria.m. q~ ipu.quac aiho.in\<a~.IDr'r:~ctquu[
""""- .........,. diaa IUnt ccplicao..Kcmo mL<nipoom wlup"""" quia volupwo
tiJ upcmiiW' aut odit :t fusiJ, ..d q COt"quuntur magai dolon:s . q\obl n.doac
~ ooquloadwu.
LomD ~ DalotS..
Sidcor
Scd ut pcnpiciolls undc

11 t enor
~-6\m\
dalamquc loudoodum,
toCam tctD ~periato ,

""JU< ip<a qua< . o1Jo
Sa!Oipenf>iclaUnde -.ailo< ........... tlt~m-=-<nqU<
1.tda.aciu:m. -. n:m ..,..W.. caque opooqr. . g1o """""""' ..r...U.ct '!"""i

::.i11 1 , . dla.&amtcxplitao. Ncmo ~i.m1puu:n \dV.pur.t:&n qloriA ,'OL,jpt.:u
tit ~ aul ocit IWt fiiR!~ tod quiA CONCqJUIIII1 . . . . dolcro"" qndaoe
.........,_. t<qul ocadalnL N"'''"' pam><Jwoqu&ll\..., qulalot= ipn qWo. clol,.
--adlpoci..,todqul&noa.._.- '''" m !m>pan iocidum"
1.. ~ dolore ~ ~ qoaend volupt. t,t crwn td 11\inima '<nilil!l, qu
IIC*.'Nm ~u.ciont.:N ullam c:orpom IWCipi.t ...;..t11, rtW \1.\ oltquid ": COO'Wdi
_
...~ Ql>io _..,... eumi""' tq)ld>cnden< q ln <>l~~~ \d4-qnam
DJhll
~""- qui cloloor="""' ;.. quo voluptu- pariatU<?
Scd ..ptnpod.a. >d< _". i ............ ,;, ~ ..........wum <~~...,..,.
~ cown rrm ap:rial.. oque .-quu mu ~ ,fflaril ft.quui
-- dic<a .... ccplicao..- ....".. ipaun
wlupW
... ..,..,............ odU ""'fugi~ ""'qu!a "'""''~"'''""'""C"i- ""'~"'
wltq>am 1101\'d ...a.uv..Ncque pom:oquUquo "' quldolot<m ~ qUdolo< .;,
""*"*
.'
Uwt.t\tore~dqul
:bli<CIO.......;".,
dlct. , _ <>tplkao.
-.-~
>'OIII]>Utcn\ quiA wlupw
lit. uptn~~Wt aut odit .ut
rug;.....rq;.
~Nt~
tlolara. tQS qoi nJionc

Yalu-ooqo.i
>'01--
'
.. . ..
-
.. .
n::.
........
Nc:que pono
~Wqown Qt, qui
-ipoul'f"tlolor
iodduntut
- + - - . . . . . - ....... ~-
5.6. : <h 1 >
w r <d>, n w
<h 1>
.
.
-,
- ~ ( ) ,
. r, -.
1. ma i ri.css :
h2 {
font-size: 2 .2em;
1or : #FD:
margin-bottom: 5 ;
,
<h2>
.
, , <h2>
n .

, .
2. ma i n.css,
r <h2> Enter,
. .~ :
122
5.
n :
#main h2 {
color: #864:
border-bottom: 2 white solid:
background: url(images/bullet flower.png) no-repeat:
padding: 2 80:
, ,
<h2>,
#ma; n. <di v>
, . ,
#main,
<h2> <div>.
2, 14.
. .
3. (. 5.7).
, (
) , ,
, .

Stdutpt'?IOAf.lt'-11*01N\IIIIS't\.\~tf1atlkt\'Oh'J)U'4Q\~11\
doSoi'IC'.qu:t' l.a:ud.!nh1 tllt~m t..m .3?""-!W. r-UJU~ ~ qu.a.. ,:;Q ~Ptrn:on

\mtt::u.C:quastlrchitodou~'"""' dJd:iiVJ'Io.y-l.ao :r-.::fn\ot'!I\I.Jt\1J'f\
\"1)hJpt.t';tr1n quu
,,.pt.IJ t .dpl'f'IWW 2Ut odit l.ut iug1t- ...d
"t~tl): c~.ntw'
0'\lfJ' dck:e; too, qw n \'Qka.fU:tn ~ nttCNnt.
Lorem lpsum Dolol" Sat

St4 u.: pt-.:t-patu ~ OlltIIII!t: :tufi ~or llit'-~f1km ..;ca1tl\IJJ;L
.:$~ !\t:N.
:~m
rm ~ oquto tpW ~ 3bi:IIOI:n\'JI(1tont
\"'i~ at uu "rd'\d!to ~ \'tla. dJ...~ 5.! ~. >.:tmO ~ 1.p'_oUS\
..~pt.ttlltnqwA "'Oiu~. tu ~~ut o.lit .au: tup:.. 8J qw.4COJ\t.eq\I:!!UUt

tt~Apdoion:it t.Aq'W r;ei-XJC)f'"*.apta~""'t<\U N<unt ~tq'Ut! poNQqwsGu.tlnf'tt.
do.m~cr:u;;.dciot'~"~tox.~ d..-po.~~,t..1q~I\Citt.
nu:nqu&m ~ ~ tnnpor:a IU1d~.t ut 1i:- \ ddott :nu.g.n.tm um qu.:st"f'St
\"9hapt..lin'O. t:tenw
~"t
;Wr,ur".~'~q;oOsuJO\Q!t~J\uhm~
~JWn ~ut..qde,.~xr.~~~tut"Qvblnlta'I''C:lcum
A<tt"fU~t".Nqan.-.;\"'l:..pW.\...tt*fq\1..11-an.l!t'tCi.~~\l\'.t-el
....
t!ttm\ qw. dOkctt-m eu.m lugu.r quo '~.as n\..!1.1. pru.tur
Sed ""~""'~""-'"" undA!

00\tU ht natu.
tf'(W.
\'O!;.:tptatena~
d.~u.~~dan:.\J.O\o
t ~ aptfi.w\.
--qtbil!o
im~t~.c
qulo5i n:h:!kto ..u~

VJ.t dkta .tw'lt
e>.-pli(.11)o.. '!"o:tmOfC'IiC\
:pwm \'Oiuptoa.tt'O\ q~,.

\"'Npt.u t1t upt.m.alw
.!od>twt~S::....S
qw.o<x>nquun!w
1N.fJV ~ .otqui
~I.J: p..Js~~<okw .JAwnat1.1Jtr()II0t.'C!Wpt~~~.\
. 5.7.
h2 lmain h2 n
, n
#mai n
lmain h2 -
h2
h2, - (
color) #main h2 . , r
123
#ma i n h2
h2,
#mai n h2
h2.
CSS ,
, ,
, .
, , ,
CSS, .
1. main .css.

.
2.
#main {
color: #616161:
font-size: l.lem:
line-height: 150%:
margin-bottom: lOpx:
margin-left: :
, , (
l ine-height) .
, ,
. , ,
.
- -
.
3.
. intro {
color: #694:
font-family: Arial. Helvetica. sans-serif;
font-size: 1.2em:
margin-left: :
margin-bottom: 25:
, ,
. , ,
-4.
- L-.
html -. <>,
<hl>CSS: The Missing Manual</hl> <div id = "main">,
sd.

:
<
class="intro">
124
5.
n r:
5. .
. ,
. intro-
, #ma; n
.
intro.
. i ntro, . ,
ero ~?.
6.
mai n.css
. intro
#main . intro.
,
. ,
#ma i n .,
7. (. 5.8).
! , ,
, .
, ,

Sed Ul prsp1cias unde omnis tste netus error srt voluptatem
accusent!um doloremque laudanum, tolam rem aperiem eeque I
Sidebar
quae lllo inventore veritats el quaslerchrtecto t vrtae dic:ta

sunt explicebo. Nemo enm tJ>$Bm voluptatem quia volupms sl\
aspertur aut odrt eUI fugit.
sed quta consequuntur magn dolores
eos quj ratone voluptatem sequi nesciunt
tot.un t9m .tped.at.

..._;pquu.illo
Lorcm fp..,urn JJ lor Sat

Std ut ~s undom:nis tstkn.at axw sit \'Otuyt.at.an ~
dolomnque .._ _ - , . . . , . . - " " " qu.v . iDo
-zm.~\~d qu.u.~u.t.u,"J.t.tt-clict&wntetp1iao.
Xano """"ipwn
'I'Oiupf- quu wluj>las dt aspem>htt aut odit..
~ ..0 Cj\1>& <UNOqUW>t "'"~~'" d - - qw t> ''Oipt>.tom

'"'1"' ..... Noque CfUU<!U>m..., qw ckllor.m lf"'l quw dolo<
.tU\<tt ~~ ~ '<Nrt. ttd qwa non nnqu.am eu.- modt
tecnoao tnadunt cd: J.aor. ~ maanam. Uouam ou.urat
:(\\'81\tot.\~~
qu.u>.uc!U-tt
'"medkt~-l<l.rtt
..'<J:. NOU10ts'oim
lp<>.m '-..luptJ.t.n~ '!""'
,'O!upl.. ort u
&u.t ..S.t>ut fvg1~ ><4
'!""'W0qUW\I
mapdokN"ts-<Jui
<>fi<>no<".ptl:ta\ooqW
ncN.nt. ~. . potto
5.8. l\w

CSS. ,
2,
.
6.
7.
, ,
8.
r"naa
9.
1 .
CSS
-
. , ,
, Flsh-, -
.
Facebook, , ,
, ,
Twitter .
CSS
-,
.
CSS
, , , ,
- (,
, ), -, (.
6.1 ).

- ,
CSS
-.

, ,
, .
SS-
font-fami ly:.
font-family: Arial:
-----------------------------------------------
SS-r
r (. .
2).
{ font-family: Arial; }.
r , , SS-
r .
127
!!!<1ii!!IO
C...",Hgd!wrs
~
~
~
_...,.
~~
':"'?+ ... ""'"'JiJet
NWCJCIIX .
~ illo~.-1804~~.dili1...,.,._~ddt81t.
--~ct-dokirll"'dqD801cstio~.aocc88CA~ -P~~
... iD ~ ~4cia dnoeNat 8di:i.& .....
llaque oaIJII
~Ydli'.totodqN . .
w.~----dlc.-..-til
..........
~dalof~~WN8r-.,-.~~
... .-..~~Ya'iiid~~cat
v&.rdda,..CJk.O N-~\-~4U
~-__..
.. _. ... ,., tot448ac~
~dl*n:ct8'*-~40i~
Sf'ldJ:~<t~ut-iwrNcm.8~
~da~~toe..~-~,. . .
ipqq.~. . . . . . . . .t . . . . . ft-~t.ttarol
..W.:8tt..,..a. N.oMI>..-~~
.....
....-.o-.oc~lllllipOI'.
._.._.,._
--.,
t. cS dar
~..,..1C'dQ.illooo
. . . . . . eociiii!IIIIICII'
............ .-.
~!IIW:itef.clcloJt'
,......_ .......... odl.,.., d ... ~

...-ido_"_. .. ,ac- ........-...p~ Neq pono....-ett,.ado -ip.
.cJD,.--.c~.lldipiw'i.,. dcPa-.....-.-.11101!5~~q~on--..\II!.or~
(C~f>
__
...,__..~.._
About Us
Vr:AO (QS : ~ IU$1'0 OIOIIS~IOS OUCUS OIII...ANCIC ArstW'I'1t>.
'fdllp~.._.v 4ut~O>ts
4VM4Cioru tt . . . ~ r:ttt.llfl Iit O(OIIIQ1S
C.lltftW. .. ~t,~tW..I W\ C4o8..-t o/lef. . . . OIItt4'J\OIU, fi'IIIN
1 AQUE
EARU\1
S(D ut ~'m Dt IS'tt NAU$ WOR SI
.......
Ydlop~~'lllltlnt~l.wdtw. to~lola
lllodaf~Jf'iP'~f~fll;.il
,._~4P~II:..ta..,..w.~~t{'.c
~lft~, ...t"W"
qli!IISI ~ltt.o.a.t.,.YitAII'ckt.t.-tnpk.ao ...

~-~'fd:lw-~~\lt~.atwa.ltf.Oitl
.tfu-t.\OCI~COI'I'~tll<'""'tf\16t'n"".U
ftCIOII YC!Wptent .,.....S "...aiw>t..
-~~~-lt
~..........
.,.,.:11\111
Al>IPISCl\'tlJ.
SEO
"..,...,.".._~"'"'
sm ur~ns ~ Oii./5 tSt tu.ustOtt sn
"'o!C:~~h4rllf
\'CIIIr91~~ ~W'ItiO"'~"et.icli.W.,
lahrttltblCJO~'IU.J>tiii'IJ
totottl
._._~_.,..,...,~qa.II-uw~.tet
.... ..,i~II",. . ._.td(c..SIIfl\~"-'11

8Neii~'<I\OIiotat... 4.Pa~S)It~.-o~~~to6t
.,~
N-81t. \~_,._, CCWI.....,...at ll'f ........ da6oq, t._.
rad.olo ~..~ ~lt~ew.o~at .....,_. pono~Uihqu.tm

f'lt,~"' ddotf',. 'ip$\IIIII. diCIIICW \!\ - t . COII\.t8', <ii'IJO ..Wt.,.d ~~~ IIOfl ~- et\11.
!fiOd t.u~poRIIIo.doJ/It wtt.or. t~ "'iif''-16~-~~~WoWt Y'OWpW.IIIIV.
:t.
. 6.1. - (),
,
CSS ()

,
r ( ) (
128
-). ,
. , , ,
-
, .
.
(
). Times.
~----------------------------------------------------
'
- , Cufo
(http://wiki.github.com/sorccu/cufo/about). ,
JavaScript,
HTML.
Cufo ,

, .

, . ,
, ,
. ,
, . :

,
.
,
Arial.
Helvetica
sans-serif.
( sans-serif serif), .
, .
,
:
font-family: "Times New Roman". Times. serif:

,
( ).
(serif)
,
,
, .

Times, Times New Roman, Georgia:
"Times-New Roman". Times. serif;

Georgia. "Times New Roman". Times. serif;
Baskerville. "Palatino Linotype". Times. serif;
"Hoefler Text". Garamond. Times. serif.
129
6.2.
------------------------------.w------------------- - - - -- - - - - -
~imes New Roman", Times, serif
"Times New Roman", Times, serif
Class aptent taciti sociosqu ad litora torquent per
Morbi tempor, leo vehicula auctor gravida. sapien 1
him.enaeos. Mori tempor, leo vehicula auctor gravi
s non ante. Proin aliquet, magna et sodales tinci
eleifend felis eros non ante. Proin aliquet, magna et
condimentn orci est sit amet odio. Aenean consect
porttitor nulla, non condimentum orci est sit amet
porttitor fermentn intcdurn.
nibh quis congue. Cras pOrttitor fermentum inter
Georgia, 'Times Ne'" Roman", Times, serif

Class aptent taciti sociosqu ad litora torquent
himenaeos. Morbl tempor, leo vehicuJa auctor
tellus, eleifend felis eros non ante. Proin aJiq
metus sem porttitor nulla, non condimentum
consectetur rntrum nibh quis congue. Cras
Georgia, ''imes New Roman", Times, serif

Class aptent taciti sociosqu ad litora torquent
himenaeos. Mori tempor, leo veblcula ~uctor
tellus, eleifend felis eros non ante. Proin aJiq
tincidunt. metus sem porttitor nulla, non condi
Aenean consectetur rutrum nibh quis congue.
interdum.
~HoeflerText", Garamond, Times, serif

Oass aptent taciti sociosqu ad litora torquent per
~r tempor,leo vehicula auctor gravida, sapie.n lacu
r.on ante. Proi.o aliquet, magna et sodales tincidunt, m
condimenturn orci est sit amet odio. Aenean consecte
potttitor fermentum intadurn.
"HoeflerText", Garamond, Times, serif .

himenaeos. Mori tempor, Jeo vehicuJa auctor
eleifend fdis c:ros non ante. Proin aliquet,
sem pomitor nulla, non condimentum orci est stt
rutnun nih quis coogue. Cras porttitor fennen
paJatino Linotype", Baskerville, Times, serif

Class aptent tadti sodosqu ad litora torquent
himeaeos. Morbi tempor, leo vehicula auctor
eleifend felis eros non ante. Proi aliquet, ma
sem porttitor nulla., n condimentum ord est si
"Palatino Linotype", Baskerville, Times, serif
aass aptent taciti sociosqu ad litora torquent per

himena.eos. Mori tcmpor, leo vchicula auctor gravi
eleifend felis eros non ante. Proin aliquct, magna et
porttitor nulla, non condimcnrum orci cst sit amet
nibh uis
. Cras orttitor fennenrum interdu
. 6.2.
Macintosh ()
Windows
().

. - Arial, Helvetica, Verdana
11 Fomata:
::>
::>
::>
::>
::>
::>
Arial. He1vetica. sans-serif;

Verdana. Arial. Helvetica. sans-serif;
Geneva . Ari 1. 1vet i . sans- serif;
Tahoma . "Lucida Grande". Arial. sans -seri f;
"Trebuchet MS". Arial. Helvetica. sans-serif;
"Century Gothic" . "Gill Sans". Arial. sans-serif.
. 6.3.
, -
,
. ,
- . ,
.
130
, -r1-a&- .-H-e-lv_e_tlca
--.-ns
- ...-rtf------------~-AriCI
-es
-~ .~~-.~~ett~~;u;~;!.:~~fad___lltora~~t per ~~
Cleas aptent t8cltl soclosqu ed lltora torquent per conub
........ , ...... au\i<l\1....-w..
......,,
lacue cuus tellus. : 8181fend fells eros non en
seplen 18cus CUflus tetkJa, elelfend fetls 8f'OI non
ondlmentum ortl est slt amet odlo. Aenean consectetur
oondlmentum orcl est slt amat odlo. Aeneen oonct
Verdana, Arial, Helvetica, sans-serif
Verdena, Arlal, Helvetice, aana-aerlf
Class aptent tacitl soclosqu ad lltora torquent per

auctor gravlda, saplen lac:us c:ursus tallus, elelf
matus sam porttttor nulla, non condlmantum orcl
Cras porttltor fermentum lnterdum.
Class aptent tadtl soclosqu ad lltora torquent

vehlcul11 auctor gravldll, Sllplen lacus c:ursus te
tlncldunt, metus sem porttitor nult11, non condl
congue, Cras porttltor fermentum lnterdum.
Qanava, Artal, Helvetlca, na-aarlf

Clall aptant t8cltl soclosqu ad lltora torquent per conuol
saplen lacus cursus t811us. elelfend faHs eros non ant
ondlmentum orcl est slt amet odlo. Aenean conctetur
Geneva, Arial, Helvetica, sans-serif

Class aptent tacit i sociosqu ad litora torquent
auctor gravida, saplen lacus cursus teNus, elei
metus sem porttitor nulla, non c:ondimentum or
porttitor fermentum inte<um.
ahoma, "Luclda Grande.., Arlal, sans-rtf

eptent t:ttl sodosqu ed llttn torquent per conuI
sapien lac:us cursus tellus, elelfend fells eros non ente.
ndlmentum ord est s1t amet odlo. Aenean consectetur
Tehoma, "t.udda Grande.., Ariel, sens-sertf

Class aptent tacitj sodosqu ad llto~ torquent per con
sapien lacus cursus tellus, elelfend fells eros non
oondimentum ord est s1t amet odlo. Aenean con
lr.uchet s, Arfal, Hlv.tica, sans-ser1f

Cless aptent U.Citi sociosqu ad Litora torquent per conub
1revida, sapien l.lcus cursus teUus, eteifend fe\is eros
nu\18, non conctimentum orci est sit amet odio. Aenean
"rebuchet s, Artal, Helvettca, sans-sertf

C\ass aptent taclt1 soclosqu ad \ltora torquent per
ariiVida, saplen lacus cursus tel\us, e\elfend fells
mJ\la, non condimentum orct est slt 11met odlo. Aen
'Century Golhlc". "GIII Sans, Aliar, sans-serlf

C loss aptent taclli saciosqu od ~tora torquent per
ctor gravlda, saplen lacUs cursus lelus, eleif
em porttitor nullo, non condmentum orci esr srt
fermen tum lnlerdum.
6.3. Windows
"Century Golhlc", "GII Sans", Arlal, sans -sertr

Class optenttocltl soclosqu od 1\tora torquent
auctor grovldo, soplen lacus cursus tellus, ete
metus sem porttitor nulla, non condimentum orc
porttitor fermentum interdum .
()
Macintosh
()

n
(, ) .
( n
,
).
"Courier New". Courier. monospace.
"Lucida Console". Monaco. monospace.
"Copperplate L ight ". "Copperplate Gothic Light". serH.
"Marker Felt ". "Comic Sans MS". fantasy.

.
6.4.

,
, .
, octrr,
131
eourier New" ~ Courier,
mono~pace
Cl~s Aptel\t uciti 8ocioqu <\ litora torquent per

! ncepto hienaeo. Orbi t.e.opor, leo vehi cula aucto
cursu tellus, eleitend feHs eros non nnte. Proi
30da.les tjncid'Unt, atus ~fII porttitor nlla, non

Aenean COI\S&Ctetur rutrwn nli>b quis congu
:ferentuu~ interdum.
.a.lll6t <11.
"Luci da conso1" 1 n, monospace

Class aptent tac1ti
sociosqu ! litora torquent per
1nceptos hi~naeos. orbi tempor, leo vehicula aucto
cursus tellus, eleifend felis eros non ante. Proi
sodales tincidunt, metus sem porttitor nu1la 1 non
uoet odio. nean consectetur rutrum nibh qu1S congu
fe1'111entu interdum.
'COPPERPi.AT& lJ<'', COPPERPLTS: GoTHIC tJG'' t 8ERIF
11
L..8$ 'N TACrri80CI08QU UORA TORQUEN P&:R

HIENAE08. MORQI TtPOR, L&:O Va;:HICULA AUCOR GRAVIDA,
TEU.U8. EU:IFaNO ""U8 EII08 NON ANS:. PROIN AUQU!cr.
"Courie.r Ne..,.,, courier, roonopace

Cl4o8 aptent taciti aocioqu ad litora torquent per
h1menaeoa. r tempor, leo vehicula auctor gravlde
eleifend !elis eroa non ante. Proin aliquet, magna
porttitor nulla, non con<limentum orci est ait 4met
qulo congue. Craa porttitor !ementum interd\J/11.
"Lucida console" n, monospace

class aptent tac~ti sociosqu ad litora torquent per
himenaeos. orbi tempor, leo vehicula auctor graiticla
eleifend felis eros non ante. Proin a11quet 1 ~~~agna
porttitor nulla, non conclimentUIII orci est s1t amet
quis congue. Cras porttitor fementum interclum.
"COPF'fPI.A!; UG''. "I. GI UG'', SERJF
CI.AsS N TACm SOCIOSOU U ORQUDrr PER ~
MORBI :R, LEO VEICULA UR GAAVIDA, SAPIEN LACUE
NON N. PRoiN ALJQUE, MAGNA SODAJ..ES '1NCIDUN, 1
CONDIMEN'r\JM ORCI S Srr 0010. AENEAN CONSECE1'UI
R'R FERMEN'r\JM IN'!VIOUM.
Mlri'\J8 I: PORI'I'OR NUU..O., NON CONOIME.NUM ORCI S

CON SEC&UR RURUM NISH QULS CONGUit. CRA& PORrfOR F
" at-ker Felt", comoc Sans s, fatrtosy
Oo.s aptnt taciti sociosqu ad litOf'O torquent conubla no.stra,
!' t~. le.o vehicula ouctor graviclo, sapien lacus cursus tell
ame. Proin all~. mogno et sodalu toncidunt,rtus som portti~
-
.;,.. - .J:.
'*-- ---_.",- -4~-- . :LL
-1 - " 1"'-
. 6.4. Windows () Macintosh (). Courier

n , .
Lucida Console n Windows Macintosh, Monaco

n Macintosh
n Macintosh. ,
- :
Arial Black;
Arial Narrow;
Impact.

Arial Black Impact:
n . ,
, font -wei ght font -sty1 norma 1.
, ,
, .
~ ------------------------------------------------------ , (
Madntosh, Windows Unux), www.codestyle.org/css/font-family.
, n -, n
htt:p://unitinteractive.com/og/2008/06/26/etter-css-font-stacks.

- ,
, - ,
. -
CSS
132
. r
l or .
, :
l or :
color:
#8988:
- (
).
~--------------------------------------------------- ,
, ,
www.
colourlovers.com.
r
-
. . #6600FF,
. ptotepe
66, 00 FF.
, (
RGB,
.1).
.1.
----------------------------------------------------
~"011.
. , ~<~~JooG ~ #FF #F
#FFFFFF
#FFF.
RGB
..>~
RGB (red-
green-
, lue- ), , . :-i..w
. .. ~i!C.1a.\t,
(0-100 %)
.1 ..:J!..::.
0-255
(, . ;!~ 1 1
(, L...~.:I
), .
color: rgb(l00%.100%.100%):
color: rgb(255.255.255):
---------------------------------------------------
L -.:: &1J!;
gray,
gree,
lime,
17 ~'1e-tllli .-: aqua, lack, lue, fuchsia,

olive, orage, purple, red. Si'.e: ':!5!1 . ..nte, yellow. CSS
: color: fuchsia; .
maroo, v,
133

. ,
, . ,
, , ,
-,
.
font-size
. , :
font-size: lem:
,
lem), . CSS
: ,
em ( : ,
i), exs ( , ),
, , , , , .
, (, ,
. .), -,
.
-, .
em,
- ,
-, .
, .
. ,
,

36 <hl>,
36 .
,
(.
~ , , ).
font-size
font-size:
-----------------------------------------------
7 . ,
,
36
134
n n
,
n n : nn n
-. -
,
lnternet Exploer, ,
, n
,
, lntemet Explorer (
n.
, n
, nn n n
1 ,
nn: n n
, , . .
nn . ,
lnternet Explorer 8 nn,
n ,
n - SS
n, 11
n - View
Text Size
, n lnternet Explorer 6.
}, n.
lnternet Explorer ,
. ,
n. n n
, n
-:
n n .
: ,
em, n .
, n -
n n
- n -.
, , , n
n, ,
n n
n, -
r .
n,
em
n n CSS n
, n
em
,
n . , n
CSS, nn .
, r,

16 -
() . .
,
.
Internet Explorer, ,
, n View Text Size Larger Smaller

( ~ n ); Firefox 2 n
View Text Size Increase Decrease (

), Firefox 3- View Zoom ( ) , Safari- View Make Text
135
Smaller
( ~ )
View ~ Make Text Bigger
( ~
).
CSS,
16 )
em, .
CSS ,
sma ll, medi um, l rge, - l rge - l rge.
: - sma ll, - sma ll,
SS- :
font-size: large:
medi um
, , , ,
,
. - sma ll
, ), - sma ll
10 , small - 13, large- 18, x-large- 24, xx-large- 32 .

-
. . ,
, .

,
, .
,
l arge, - l arge .
16 .
.
,
,
100 %.
16 .
, ,
-. ,
200%:
font-size: 200%:
, , ,
90 %.
i ,
. ,
100 %
, -.
- . 6.5 <di v>,

200 %.
32 .
. . , ,
100% 32 .
<hl>,
<di v>,
136
. 't
r <div>, 100%
-, 32 .
. . r6t-,
.....
-J
tr- 0 ~
.............,.___.____ -
~ -...
Pixel Text Size Values
j Heading 2: 48 t
) h iralicized rexr set ro J8px and r bold
j tex1 (1vhich is inside the <> tag) is 24
1
i
his is <div> tag. h

font-size is set to 2ems. Other
tags inside this <div> will
inherit that text size.
r
1
!
J.
i~
.i1
J....~ ~---------~----....-------..1
1!1 riJ
Em Text Size Values
! his paragraph is set to 32.
Heading 2: 1em
his
paragraph is set to .75em. h _
italcizd JXi
is :r ro .7Sem a1ld rhe l>o/4/cd(wllldtts
-llu <t-14} lr. 1$nrt.
,;18,; ..........~....-...-....:li-...,._~~~..~-...-..;.;_-..~
Ofo
Text Size Values
Nested List Proems
This is <div> tag. The

font-size is set to 200%.
Percentage values pose

prolems for nested lists.
i Heading 2: 1000/
Textis 75%
This paragraph is set to 75%. h italicized

!text is ser ro 75% a1ld rhe l>o/4 lcd (wfti<A 1r wtd<ll-
"'1) 1r 1S"-
r,
t
t
L------~-------------- -------------------~- .1
Text is 75%
Tat is 7S% of75%
Text is 75% of 75%
Textis75%
. 6 .5. n n
, em n
em , r
. ,
, , ,
, .
em
, , r
em. , -
-
.
137
em .
. -
.
CSS
. ,
lem
100%, . ,
em,. 100: . Sem - 50 % . .
, SS- ,
font-size : 200% :.
font -size : 2em:

~-----------------------------------------------
n n n, n
R
em.
, ,
s : n
2.Sem,
2.Sems.
em ,
. , , .
6.5.
. 75em, <>
2em (32 ) <di v>, : .75 32 = 24

. <> . 75em.
<strong> . 75em, , ,
75 % . : 32 (,
<div>) 75 ( <>) .75 ( <em>) 75 (
<strong>). ,
14 .
~----------------------------------------------
Intemet Explorer
n n em. n
n: n n R R <d>
11 n,
Intemet Explorer .
em
- . n

3 n

138 n n ()
(. .
CIIIIOI08 (. . 6.S). n, u1
( font-s; ze: 75~ },
I, lf1 <u1> m r .
, <u1> ymoenett , 75 %<ul>.
3): ul u1 (font-s1ze:
100%} .
<u1>, <u 1>,
100%. , 100%
u1,
m, nn I\08 6 rl!
. n
.u t, n . . n
nn r n.
n 75 %.
138
. r
-------------------------------------------------------
- . ~
,
. ,
.
. , ,
. r :
http://
www.creativepro.com/story/feature/19877.html.
: , . . CSS
.
, , ,
, ,
. .
-------------------------------------------------------
CSS
r .
.
, - .

, <em>
<i>, (
<strong>, <>, <th>
( <hl>, <h2> . .),-
), ,
(tale
header-
!>),
. . ,
font-style
font-weight.
, :
font-style: italic:
, , , :
font-style: normal:
-------------------------------------------------
fot-style
,
oiique,
italic.
font -wei ght

CSS,
. ,
( 100-900) ,
(900) , 1> (100)) :.
( >>
, ,
139
,
.
,
. .
, :
font-weight: bold:
:
:
-------------------------------------------------------
, ,
,
. :
hl, strong {color: #3399FF;}

n ),
<strong>
<hl>.
Caps Lock . , ,

, Microsoft Word?
, SS- text-transform.

(
). :
~ext-transform:
uppercase:
l owercase,
- capi ta l i ze.
, ,
text-transform,
: , ,
.
CSS 1te ,
none:
~ext-transform:
none:
.
\ font- vari ant,
, .
.
, -
!>, .
"Jnt-variant: small-caps:
140
. r
w
CSS text-decoration
.
, , (.
6.6)
. text-decoration
:
underl ine, overl ine, l i ne -through
l ink.
, , :
text-decoration: underline:
Ackress
1@) http://as.looll/chO{I>cowxOv711::z.html
Text Decoration
Underlined text is often confused for link.
Overlined text must useful for some reason.
11
MlleadJ r.t sente~illtes t13ed ~
i:rtdiea~ edited
ntateritd
Blink is just plain annoying.
tma toa C&l1 apply tdlof &me eLting ~ csletneL

' 1
8tn~t
. 6.6.
text-decoration

.
:
text-decoration : underline overl i ne:

~
, q . -, ,
,
,
. , , r
, . 1; nk
! (
, ).
141
-------------------------------------------------------
, !i , n
- - order (. .
7).
, order
: , , - -
, .
overl i text-decorati , l i e-through
. - ,
,
.
:visited .
text-decoratio:
?
-
(. . - .
9).

, (.
6.7).
letter-spacig .
,
. ,
, .
, :
letter-spacig:
-lpx:
:
letter-spacig:
lOpx:
, wordspaci g. ,
:
word-spacig: 2:
,
: ,
em,
).
, ,
. ~ ,
.
, .
142
. et<cra
v*el!faiu~et: -Spx
Negative Lett2r Spacing T~ghtens Up Text:
-1
No Letter Spacing
Positive Letter Spacing Spreads ext Out:
Positive Letter Spacing Spreads Text Out: Spx

si t i v
Negative word spacing1
t t
i n g:
10
-.sem.LoreipsudoloJ5iWnetponsectetueadipiscin!J!lit~
diannonumm)llill!uismod:incidun\t(aoreetiolonmagnailiquaralvolutpat.
Negative word spacing1-.1.em.Lorem ipsum dolorsit amet, consectetuer adipiscing elit,

sed diamnonununynibh euismod tincidunt ut laoreet dolore magna aliquam erat vo1utpat.
Positive Word spacing1 .:tem Lorm ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh elli.smod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Positive Word spacing1 1.em Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh elli.smod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
. 6.7. r

CSS ,
, , . ,
, . .

(
) CSS
()- ,
, - 1i ne-hei ght.
, (. 6.8).

.
6.8,
120%. ,
, , ,
(. .
6.8, ).
143
Ll~helaht 75": Lorem.Josum dotor sit ~~) conse<:tetuer adlaiscln~litl
dfam nonummv r!i eursmo~nc unt ut taoreet aotore.

na
vo!Utpat. LOremh1psum l or t. amet1 _consectetuer <> na
c21am nonummy nfD eu\51
t1ne~c!unt ut taoreet !1ore magna
luam erat votutpat.
auamde~t
!t. se
Llne-helght 100%: Lorem ipsum dotor sit amet, consectetuer adlpisclng

etit, sed diam nonummy nibh eulsmod tfncfdunt ut laoreet dolore magna
allquam erat volatpat. Lorem ipsum dolor sit amet, consectetuer adipiscing
etlt, sed diam nonummy nibh euismod tfncidunt ut laoreet dolore magna
a!iquam erat volutpat.
Lfne-helght Normal: Lorem ipsum dolor sit amet, consectetuer adlpiscing
elft, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat votatpat. Lorem fpsum dolor sit amet, consectetuer adlpiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Linehefght 120%: Lorem ipsum dolor sft amet, consectetuer adipiscing
elit, sed diam nonummy nfbh euismod tincidunt ut laoreet dolore magna
aliquam erat volatpat. Lorem fpsum dolor sit amet, consectetuer adlpfscing
elit, sed dfam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Lfne-helght 200%: Lorem ipsum dolor sft amet, consectetuer adipfscing
elit, sed diam nonummy nibh eulsmod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adlplscing
e!it, sed diam nonummy nibh euismod tfncldunt ut laoreet dotore magna
aliquam erat votutpat.
. 6.8.
line-height
() , n ()
, em,
font - s i ze, ,
em
l i ne-height:
l i ne-height: 150%:
, em , : ,
,
font -size. ,

(, 36 ), 1,
.
(,
150 %)
font-s i ze.
144
, ,
120%. , ,
, . ,
, ,
120%.
-------------------------------------------------
,
. (leadig)
. , 12 . ,
150 %, 18 . ,
.

CSS
- . SS- :
line-height: 1.5:
.
,
. ,
1 em,
1,5,
1,5 ern. 1,5 ern 150 %

. .
.
<body>, 150 %.
- .
, . ,
10 . 150% 10
15. 15 . ,
- 36 ,
15 ,
150% <body>

1,5. ,
,
. , ,
36 , : 1,5 36 =54 .

-
. text- l i gn,
- (),
( ).
, ~ -
145
. ,
:
1eft, ri ght, just i fy, center.
text -al ign : center:

,
, , .ll
, ,
(
). , .
-
-
- ,
justi fy
, ,
. , -,
, .

r ,
mt
3 r
n 311
3. , CSS r font, -
I!f CJieti.
1 Sem/150 24/37;
6 :
! (n fontsize/lme-helght); r
: font-style, fontvariant, font-weight, font-size, 1ine-height

font-fami 1.,6nfnt: ital ic
bold small-caps lSpx/150% Arial. Helvet1ca.
sans-seri f. n,
nn 18 n
n, rial ( Helvetica, sans-serif)
, n
, . ,
150%.
n. n, n
:fnt ~
1talic Old small-caps 1 5em Arial

small-caps 1tal1c l.Sem Arial:-
font: 1d
n 3.
<>,
n:
n n ,
n (
( ').
font: l.Sem Georgi . Times.
n , , .spec1 1Paragraph : font:

1. sem Ari 1. - - 3
):
serif:;
n
, 3n ,
:
Ari 1.
Helvetica. sans-serif;
,
n ,
2000%
. 3
n nn
. n
.speci 1Paragraph
font:
norma 1 norma 1 norma 1 1. Sem/norma 1 Aria1:.

n n r:
146
. ,
,
. - ,
, .
- ,
, SS-,
text-indent
margin.
( ) .
text-indent:
em:
25;
text-indent: 5em:

, ,
em
(
).
--------------------------
text-indent
, (, )
, texti ndent .
, , ,
, . ,

50 % ,
. ,
, , ( ,
, ,
-, . <<
.
7).
()
- ,
.
CSS
. ,
147
margi n-top margi n-bottom ( ) .

, :
margin-top: 0:
margin-bottom: 0:
-, :
margin-top: 0:
margin-bottom: 0:
, ,
,
em.
, , ,
, . ,
,
,
em
;-----------------------------------------------
n
, n ( ) n r.
, , . .
5.
1:
. , ,
10 ,
10 ,
-.
,

CSS
: fi rst- l ine : fi rst-1 etter (. 6.9).
, , SS-.
: fi rst- l etter
, . ,
,
J:first-letter {
font-weight: bold:
color: red:
,
, , ,
<D
class="intro">Text for the introductory paragaph goes here .... </>
. i ntro:
148
. r
<:><\.~
:flrst-word, :flrst-llne
~load
( hnp: f/css.locotl/chOt: ~Googte

>1.
LOQtlon
SUtd>
11
orem lpsum dolor slt amet, consectetuer adlplsclng

elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ull8IDCOrper suscipit loortis nisl ut aliquip
commodo consequat. Duis autem vel eum iriure d
~~ olore magna allquam erat volutpat. Ut wisl enlm ad

minim veniam, quis nostrud exerci tation ullamcorper suscipit
nisl ut aliquip commodo consequat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit Ioottis
nisl ut aliquip commodo consequat. Duis autem vel eum irie d
loortis
1!1
t wisl enlm ad mlnlm venlam, qul~ noatrud exercl

tation ullamcorper susCipit loortis nisl ut aliquip
commodo consequat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit loortis nisl ut aliquip
commodo consequat. Duis autem vel eum iriure d
868
:first-word, :flrst-llne
[ http://css.iocal/chO/MP2tbxow) ~ Google
&ack
ro,."ard
~load
s:~p
Loc.JIIon
Seardl
11
orem lpsum dolor slt amet, consectetuer adlplsclng ellt, sed dlam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit loortis nis1 ut
aliquip commodo consequat. Duis autem vel eum iriure d
. . . olore magna allquam erat volutpat. Ut wlsl enlm ad mlnlm venlam,

quis nostrud exerci tation ullamcorper suscipit loortis nisl ut aliquip
commodo consequat. Ut wisi enim ad minim venia'm, quis nostrud exerci tation
ullamcorper suscipit loortis nisl ut aliquip commodo consequat. Duis autem vel eum
iriure d
lli8
l!l
t wlsl enlm ad mlnlm venlam, quls nostrud exercl tatlon ullamcorper

suscipit loortis nisl ut aliquip commodo consequat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit Joortis nisl ut aliquip
commodo consequat. Duis autem vel eum irie d
6.9. :first-letter n ~

' , . i ntro : fi rst- 1ett er.
: fi rst- 1i ne .
(h2 :fi rst -1 ine) -
149
(:
fi rst-1 i ne).
: fi rst-1 ine,
. ,
.
L- : < 1 s s =
"i nt >
. intro:first- 1ine { text-transform: uppercase: }

~-------------------------------------------------
-

Safari text-trasform,
:first-line. , Safari CSS

<u 1> < 1> :
, , .
, , , ,
. ,
, ,
. .

( <u 1>),
\ , (< 1>)
CSS : (
), 1l (, ), (
). -
:
decima1, decima1-1eading-zero, upper-a1pha, 1ower-a1pha, upper-roman,

-ower- roman (. 6.1 0). , SS-
-i st-sty1 e-type:
-lst-sty1e-type: square:
-,st-sty1e-type: upper-a1pha:
Mozilla, Camino
6.1 ), deci ma 1-eadi ng-zero, , 01. Internet
Explorer 6 7 decima1-1eading-zero 1ower;"eek.
Firefox
( .
~-----------------------------------------------------" (, J, ),
(JI n
lower-greek.
'
150
6 06
Usts
..
.U:k
forw:.r ' Rt iNd
~'-
k an:h
Loatron
dlsc
item 1
item 2
ite
[!J
) hn:pf /css.local/chOfMPgpd (Q. Google
Bookmarks
c lrcle
square
item 1
item2
item 3
item 1
ite2
item
1
declmal-leadlng-zero
declmal
1. item 1
2. item 2
3 iten13
lower~alpha
.
.
01. itemt
02. ite2
. item
. item
upper-roman
r. item 1
11. item2
item 1
item2
item 3
upper-alpha
.._
lower-roman
i. item 1
ii. item2
iii. item
. item
. 6.1 . w
itemt
item 2
decimal
decimal-leading-zero
,
< 1> <u 1>.
sty1e-type : square:}
u1: u1 {1i st-
, .

( <1 i> ).
- . ,

<u1>,
.circ1e, :
.circ1e { 1ist-style-type: circ1e: }

:
<u1>
<1i> Item /1 i>
<1i c1ass~"circ1e">Item 2</li >
<1 i> Item 3</l i>
<1i c1ass~"circ1e">Item 4</li>
</u1>
, ,
(.
). ,
151
<ul>,
(. ~ .
~ .

9). ,
none:
li st-style-type : none :

,
( .
6.11, ).
outs i de
.
,
CSS
l i st -sty l e-position.
, ,
, ( ),
(. . 6.11, ).
inside :
list-style-position: outside:
l i st-style-position: inside:
llst-style-posiHon: outslde
llst-style-posltlon: lnslde
il..orern ipswn dolor sit amet,

consectetuer adipiscing elit, sed diam
nonummy nibb euismod tincidunt ut
laoreet dolore magna aliquarn erat
volutpat.
.
Ut wisi enim ad minim veniam, quis
nostrud exerci tatio tincidunt ut laoreet
dolore magna aliquarn erat volutpat.
lncidunt ut laoreet dolore magna
aliquam erat volutpat nonurnrny nibh
euisrnod tincid.
iLorem ipsum dolor sit arnet,

nonurnrny nibb euismod tincidunt ut
.volutpat.
Ut wisi enim ad minim veniam, quis
dolore magna aliquam erat volutpat.
lncidunt ut laoreet dolore magna
aliquam erat volutpat nonummy nibh
euismod tincid.
iLorem ipsum dolor sit amet,

consectetuer adipiscing elit, sed diarn
nonurnrny nibh euisrnod tincidunt ut
laoreet dolore magna aliquam_erat
volutpat.
2. Ut wisi enim ad minim veniam, quis
3 incidunt ut Jaoreet dolore magna
euismod tincid.
1. iLorem ipsum dolor sit amet,

nonurnrny nibh euisntod tincidunt ut
volutpat.
2. Ut wisi enim ad rninim veniam, quis
nostrud exerci tatio tincidunt ut looreet
3 incidunt ut laoreet dolore magno
euismod tincid.
1.
. 6.11. n
list-style-position, n n
n
152
--------------------------------------------------
w
paddig-left: (. . . 7).
, <li>.
, list-style-positio outside (
).
, , ,
, ,
margi n- l eft
paddi ng- l eft . ,
ul. ol {
padding-left: ;
margin-left: 0:

<u l > < l >.
padding
margin
. ,
Explorer).
paddi ng (Firefox, Mozilla, Safari), - margin (lnternet

paddi ng margin

, .
,
margin-top
margin-bottom
. , .
, ,
<1 i >:
<u l > < l >,

()
.
.
. ,
Photoshop Fireworks,
( Webdings).
---------------------------------------------------
. http://www.stylegala.com/
features/bulletmadness/ 200 .
www.cssjuice.com/38-free-icon-checkpoints,
.
153
SS-
l i st- sty 1- i mage
src L- <img>.
list -style- image : url(images/bullet .gif) :

url . ,
,
i mages/bu 11 et . gi f
. , ,
HTML,
II
n
n
3,
n n, n .regularL ist,
: ,
( ) .
r .
n r <sp3n>
n?
. : <1 i ><span
c]ass regularl -ist ">Item 1</span></li>.
CSS
n/\ n n
, n
, - .
~ n. _ n
r , .
t .
, -
t n, ss-,
, r- ,
lnternet Explorer 7 n
iJ. , ,
.II.
, n lfU
-. ~
.
n . ,
- .
- .
n- .
, , n
:. n r < 1>
n ,
CSS
<1 i>. n n
n ,-
nn
ht tp: //1 .
. f m. 16.
<l 1> .
~-----------------------------------------------
n (, )
, , n 001 ,
-r. . .
.
8,
154
list-style-image
. .

.
, . .
. background-image.
8.
,
.
~----------------------------------------------------
fot (. .
),
.
list-style ,
list-style-image, list-style-positio list-style-type. , ul { list-style: circle inside; }
- list-style: circle url(images/bullet.gif) inside; -
,
,
....

, , , ,
CSS.
, ,
. , .
2.
1.
text. html (. 6.12).

- ,
.
.
2.
text. html
L-.
3.
<head>
<title>. Enter <style type="textlcss">.

Enter </ sty l >.
155
CSS The issiog Maoual

E~ploriog Typograpbic
Possibilities
oovcml><r 30 Rod Diie

Lo.=lpsu
Rtpt~ qao io
L-~
Rqxel><aderacpioca
. to.-1
E S$t
Rqxemdoril
qvaro
qoi io
DUUa
Ut .... ad ................. ~- ..~ ..... cocporis ~ Joonosan. ";,; .. aliqoid"' ""COIDIDOdi~ Qui.
"''""' vd...., in repr~ < io ''Oiuptate '-dil esse- oilil 11:.. ~. wl iloo> qoi dolott10...., 1\>f;ia( quo
YOiopla$u. .....ad ......... _ ~- ....datiooem ...." cocporis sns! laotio<am. ";,; .. aliqoid ....
COIDIDOdi ~1 Qui. ..._ vd CUO!Ue rcpr<lleado:d qoi ia ~
oilil ~ eonsequaJur v d - qoi
dolotem <Ofo;illl quo ~- pa;.tur?
.,......_7
vdO....,-
9uis autero vel euro

Ut ..-. ad .,._. veaiu.. ~ aosiND exerdatiooem ,._ corpoos scip&locxio...,_ ";,; ut aliqoid COIDIDOdi ~7 Qui.
-wJCIID intcpremdoril qoi ia ~
qaamubl oil:..ae ~. ,,.. q\li dolot<UI ....,.fu8iol quo
~ .... ........_?Ut . _ ad ........
~- ~
eo<po<is sns! laotio<am. oisit oiqoid<Ot ..
COIDIDOdi~7 Qw. ...... w~ ........ rcpr"'--ect qui ;" ... ~.vdO
oililoooleooe~. v d - qoi
dolot<UI . . . . . . quo ~ .... poriotur7
vaa....
vdO....,
......
.... -
. 6.12. - L-
, ,
CSS. , -
CSS .
4.
reset. css.
<styl >, .
text . htm l , ,
,
.
5. Enter body {.
,
.
4,
<body>.
, , ,
, .
6.
Enter :
color : #002048:
font-family: Arial. Helvetica. sans -serif:
font-size: 62 .5%:
156
- ,
Arial
( , ,
-) ,
62,5 %.
-----------------------------------------------3 -
62,5 %?
62;5% 16 (
),
10
, . ,
1,5 em 1,5 10, 15 , 2 em - 20 . . ,

em . ,
, http://clagnut.com/iog/348/.
7.
Enter
?f< :
body {
color: #002048;
font-family: Arial. Helvetica. sans-serif;
font-size: 62.5%:
.
8.
- ,
.
.
. , - 62,5
%, 6.
,
,
em .

, ,
1.
text. html
L-.
Enter
<body> ,
h1 {.
#ma i n
HTML.
<hl>,
main. HTML -,
, <div> main (<div id="main">).
, , CSS,

157
L-
<di v>.
<di v>
.
,
11 .
2. Enter SS-:
color: #FF6600:
font-family: "Arial Black". Arial. Helvetica. sans-serif:
font-size: 4em:

<hl>, ;:t . ,
4 em,
40 (, ,
).
62,5 %,
6. ,
, 4 10 40 .
10 ::
3. , Enter .
:
#main hl {
color: #FF6600:
font-family: "Arial Black". Arial. Helvetica. sans-serif:
font-size: 4em:
4.
.
.
5. text. html L-.

<hl>, Enter :
#main h2 {
font: bold 3.5em "Hoefler Text". Garamond. Times. serif:
border-bottom: lpx solid #002048:
margin-top: 25:
,
<h2>, ma i n. font
, font -wei ght, font- s i ze font- fami 1 .
, ,

3,5 em .
,
(
4CSS The Missing Manual Exploring Typograph.ic
Possibllities ).
.
158
6. , :
#main h {
color: #F:
font-size: 1.9em:
font-weight: bold:
text-transform: uppercase:
margin-top: 25:
: ,
, ,
text-transform,
<h> . ,

margi n.
7.
#main {
font-size: 1.5em:
line-height: 150%:
margin-left: 150:
margin-right: 50:

l i ne- hei ght,
150%
, .
,
( ).
1,5 em ( 15
) .
,
ma rgi n
. , , ,
.
8.
#main p:first-line {
font-weight: bold:
color: #999:
: fi rst- l i ne .
<di
v>
9.
.
- , . 6.13.
159
: t1
Ut &nlm ad minlma venlom, qula nosttum ex.rcit!onem ul18m corpons

commodi consequalut? Qula aulem ve!
eum lure ~ehell<lenl qulln voluptate ve!lt quam nlhll moieeliae
oonsequodut, vel UkJm qul clolcnm eum fuglat quo volupCas nulla peri8lur? Ut enim
8d mlnlmo veni8m, q\118 noettum exercltalionem ull8m corpons sueclpil
laorloeam. ..-; ut aliquld commodl consequetur? Qula autem vel eum lure
reprehendent qui ., volupCa\1t ve!lt 8$8 quam nih!l mo48&1iae consequetur, ve!
lllum qul c1a1otem eum fugi8l quo volupCas nulle paNitur?
~ leotio&am. ! ut a!oquld
AUTEM VEL EUM

Ut anim ad mlnlma veniam, qula noatrum exerclll!tlonem ullam corporla
euscipct laorioeam. nisl ut eliquld conmodl coneequalur? Qula autem vel
eum t1111t reprehenderit qui in voluplate velilesse quam nihll mol8sli8e
conaequeu, vellllum qul dolorem eum fuglat quc voluplas nufle patur? Ut enim
8d rrinlma ven!em. quls noetrum exerc.tnonem ullam ccxpone susclp!t
latr!osam, noar ut allq<l commodl consequatur? Qu<s autem vel eum lunt
reprehenderit qui in voluptale velit eese quam nil'lil moieeliae consequalur, ve!
ilum qul c1a1otem eum fugial quo voluptas nul!a perialur?
. 6.1 . - n: ,
n
ero
, , ,
ero. CSS .
1. text. html L-.

:
#main ul {
margi n: 50
width : 1 5 0 ;
float : r ight :
25 50:
: ( <ul >
<ol> i.I ) ( <li>).
160
. -, margi
.
, ma rgi
( ma rgi - top, ma rgi - ri ght
. .). : ,
, . ,
50 , - , 25 - 50 - .
width 150 . -
,
, .
: fl oat:
fl oat -
ri ght
. ,
. ,
.
.
2.
text. html:
#mai l i {
color: #207EBF:
fot-size: 1.5em:
margi-bottom:
7:
: ,
.
.
----------------------~-----------------------
,
<li>. <ul> <ol>
.
3.
, .
6.14.

,
. , -
, , ,
.
- <<November 30 Rod Dible>->- (
). , ,

1.
HTML
HTML (<p>ovember 30 <strog>Rod

Di l e</strog></p>) cl ass="byl i " <>.
HTML :
< class="byline">ovember
30
<strog>Rod Dible</strong></p>
161
.CSSTWOII'.P.Y-fil< !dt r- ~ l1i!t ~ !ools
<.,.. Q
;.~
-~
4
....
ID dcJ/JZ;,_"'o.ng/OO.mm.,2<102_t~""' Hl [~G
_. ...Jcss- FomoJ- ~ ...,_..
l"-!
w-..- Gl ..-.....-,." o..cm.- : R.soz.- ,/'~r 0v-s
css The Missing Manual

E xEloring Typo2'faEhic Possibilities
novemer 30
ESSE QUAM
Rod
0\\
NULL
Ut en1m ad mtnima venlam quls noswm exercitationem
u11am cotp0<1s suscip<l lai>Oiiosam, ntSI ur aloquod commodr
LOfem lpsum
Reprenendent quo '"
LOfem lps".m
consequal..r? OI.IS autem ..~ a.m .rre repr~ qur..,

voluplate Yelll esse quam nrhl\ molesUe consequaiUr, ..! ..",.
Reprenendent quo '"
qur dolo<em et.m tug>ar qur> YOiup(as n<JIIa pariatur? Ut enm ad
Loremlpst.l'l'l
monma ~. qurs nosuum exe:~aonem tAiam corpons
Reprehendent quo rn
susc.po~loriosam, nrsr ut aliqurd commodl consequatut?
OUis autem vel etJm u-e reprehendenl qw .., I/Oiuptate ve1rt
esse qul)m nrhll mo~est~ae consequatur, ve1 ..",. qur dolorem etJm fuqrat quo VOiup!as nula
panatur?
QUIS AUTEM VEL EUM

Ut nlm ad mlnlma venlam. qui nourum exerchationem ullam corporis suscipit
laonosam, nrs1
ut a\lquld commodi conequai\J(? OI.IS aurem vel eum lure

reprehende(c quo.., voJuplte vet1t esse quam nhl molestJae consequatUr, vel illurn qur
dolo<em eum fugrat quo voiJplas nula panat..r? Ut enrm ad mi'I\3 \/ef118m, QUrS nostr..n
exercllanonem Ltam corpoos suscope laonosam, ISI ur alrQUrd commodr

consequatu? Quos ao.aem ..! eum rure reprehendenl qur rn volupta!e velit esse quam
ni/111 molestiae consequan, ve1 ilum qudolorem e\JII fugiat quo voluptas nula patur?
;.
1
!
i
Oone
. 6. 14.
float 3
3.
2.
#main .byline {
color : #999999 :
font-size: l . em:
margin: Spx 25
50 :
, .
, ,
. byl ine (
), . ,
, . 1i ne , #mai n ,
7 , ,
#main
#main .byline, ,
162
. ~
- . ,
.
3.
HTML .
#main .byline strong {

color: #207EBF:
margin-left: 5:

HTML 1, , - Rod Dible>> -
<strong>. <strong> ,
. ,
,
. ,
<strong>,
. byl i ne,
ma i n -

, .
,
(
November 30>> ).

-
, <di v>,
. ,
.
1.
text. html
L-.
2.
body
( ):
body {
font-size: 62.5%:
color: #002048:
background: #ElEEFD url(images/bg_body.png) repeat-x:
background
.
; ,
- .
, ,
- -
.
<di v>.
163
3.
body
#mai n hl:
#main {
width: 740:
margin: auto:
padding: lOpx:
border: 4 solid white:
background: transparent url(images/bg_banner.jpg) no-repeat:
} body,
Enter , .
, .
,
<di v>,
<di v>,
.
------------------------------------------------
. .
15.
width
<di v> (
740 .
),
margi n -
<di v>
auto
auto,
paddi ng
, <di v>
. , <di v>.

,
, , ,
, .
, .
4.
#mai n hl:
#main hl strong {
font-size: 150:
color: white:
line-height: lem:
margin-right: -1.25em:
HTML
<hl><strong>CSS</strong> The Missing Manual</hl>.

<<CSS
<strong>,
( ,
3 ). , ,
, .
,
,
em
1 em,
150 -
164
. t<
n n
-1 . 25em.
margi n- ri ght,
n , , ,
. ,
Missing
( The
Manual~) ~css~.
-----------------------------------------------
n n
CSS
( ). n
5.
CSS.
.
- , .
6.15.
text. htm1,
O_finished .
E xploring Typographic Possibilities

nowm.r 30
ROO OI8LE
ESSE QUA NULLA

Ut enfca ~ atl:nl_. vn1AlP\. quh nOJuum
t.etem lpSu'n
...___....."COfpoiiS--.csom, ......
6pfex<e.-c~a./is...",.,......"
RfP'~(J.tnea
IIX~ repr~ o..n .1 voIQ8tw8 esse~ n
Lotfm~
.........
Re9rehendett. qw 1n ~
"_c_,..,...""qli_..".!\.981
--noJiapor....-7 Ulenmod ",.,...._\
QUIS
.......
'*"'
.....
no:sarwn ~
corpons SUSCCJI
-~
Reprtndtft q&a in
~.JU'IW!fme~cptnee~
wieosseqt8'1nttl..--, wt....,.,qu-omeumlugool...,.
--~
QUIS U VEL EUM
IJt en'm ld lnfml ventatn. qW noaU'UII' otn;ka1tonet~t utm corports
---L.C~
Oic.onwnodi<OMeq<....-1
o..;,.._,yt~
a.-ner('CW~(~W\0.1---deeq.,a;;wn..,~
. .... llkmqudoiol<m....,"-QUO-"'*'"....u?UI..."
ad rw'll"na ~. cps no$tn..n\ ~aonem '*-" corpons susc~
... .
~. ,..,."-....exe~CQ{rmOii~QasaJemwl01.81\u:e
<epf-.nqu .... - - -.... ---consoqulur

....,qu-...,..."1190(---por-
. 6 .15. n
CSS
, n

CSS,
HTML
. -
, , , CSS.
, ,
L- SS-, ,
. . ,
() , .
(, ),
. , ,
, , ,
(- , t. ).
, -
, ,
CSS,

, , ,
. ,
<i mg>. .
- : ,
(. 7.1). , ,
.
, . ,
,
.
, , ,
.
Paddi ng - , ~ -
. 9 .
Border- , - , , .

.
Background-co l - - ,
paddi ng.
166
7.
, n,

r---------------------~
1
11
j---------r
'
t
1
, : :n: n
: n ,
n ,
1
n
n
----------
- - - - - - - - - - - - - - - - - - - ____J
~-------- - ---- - - -- --------- ~ - -- ------ '

n
' - - -- - - - -- - -- - - - ----- ---------------- - ----- - - - - - - -- ~

Boxes
.~
.. ,_,,,,...... .. ._ ,,............. _. .. .. .... .. -- .... ..
X!>lso~ IA}CookJoP
f}css
......... ....... ...............

-
e\Forms {Yimagts Olnformation ffi)iscellanoo
Lorem ipsum dolor sit amet, consectetuer adipiscing elft, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit loortis nisl ut aliquip commodo
consequat. Duis autem vel eum iriure.
------Lorem ipsum dolor sit amet, consectetuer adipiscing

elit, sed diam nonummy nibh euismod tincidunt ut - ---+-taoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
u\Lamcorper suscipit lobortis nisl ut aliqutp
commodo consequat. Ouis autem vel eum iriure.
~ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, d diam

' nonummy nibh euismod t1ncidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ul\amcorper suscipit loortis nisl ut aliquip commodo
consequat. Ouis autem vel eum iriure.
:J:t'"'D;;.;.....................................................
.
-- ~ .
___ ............. ...$ ..:4::
7 .1. (,
), n, non
Margi n -
n n,
. , , ,
n n
167
.
. .
- ,
. , - ,
.
.
-----------------------------------------------

, . ,
,
CSS,
L. , , ,
, .

, .
margi paddi g -
. , ,
-
. , (.
------------------------
. ' . 7.2. - 10 ,
. ..,, 20
7.2) .
168
.
7.
, n,
7.2
. ,
. ,
() ,
.
padding margin
, ,
, ,
.
(),
.
,
,
- ~~ .

.
margin-top, margi n-right, margi n-bott om margin -left.

paddi ng-top, paddi ng-right, padding-bottom padding - left.
CSS
:
, :
margin- r ight: 20 :
padding-top : m :
margi n- left : 10%:
em , '
( . . << ~ .
, 3
6). 20
em -
.
, (
~).
------------------------------------------------------ n n n, n ik (n
,
margin-top:
padding-ottom: ) . n n nn
, n margin padding :
margin: ; padding 0;. n n -, n -
- n , n.

n, n n
<body>, r N
n nJ<
. n 11
n n
~q~
11. ,
3. n
760 n. n, 10 96,
n 76 n r -
, r 3- -
169

r.
. n,
, n n
300 n. <d1 v> -
JI.
600
60 n (10% 600 n}.
, n n ,
<di v>
3-
10%, 30 n.
. n ,
t -,
, 1 11J1
n n:
nJI 811.11 n .
JI
-, . ,
831t, -r
20%- n
<d1v> nn, -
margin
20%
padding
(margin- right, margin- 1eft
. .)
. :
margin padding
:
margin: lOpx lOpx 20 :

paddi ng : lOpx 5 Spx lOpx :
---------------------------------------------------- n SS-r , ,
. ,
margin:
margin:
;.
margi n paddi ng .
: , ,
. .
- RouBLe (
, ), ,
: () , Right (), Bottom (), Left ().

, ,- .

<hl>,
hl {
margi n: 0:
, n

padding: lOpx :
ero :
170
7.
, ,
-----------------------------------------------
n
, . ,
margin: 2em;
2 em.
CSS
, n -
. ,
(.
7.3,
). ,
30 ,
n 20 .
, q 50
, -
30 . , n
1111 n (. .
7.3, .).
~) Margin Coltapse - Mozilla Firefox
~1@(RJ
h>:f/as.lcx
20
35
Go
!Ci.
: 15 top m argm
7.3. n n 3
20
7.3,
15 ,
n ,
. q ,
20 n
(35 ), n
, .
,
,
35 .
15 ,
20
fl
171
. -
. . ,
- <<>> ( <di v> ).

20
.1,
. .
, ,
. .1
<di v>, "1
10
, , . 10-

<di v>, (. 7.4, ).
.1 <di v>. .1
. ,-
:J:
<div>.
----------~---------1
IITHTUI HYDROPONICS
<div>
.
& Do
<h 1 > _____....-
8if-iiiJ;Jj
not try this at home!
Lorem ipsum dolo sit amet, consectetuer adipisc.ng

elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut w1si
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip
IITHTUI HYDROPONICS
14
20 ,....l....\==""""""""""""""""""""""""""""""""""""'
1 1 )L----,--------,----,
20
& Do not try this at home!
Lorem ipsum dolor sit amet, consectetuer adipiscing

elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostud exerci tation
ullamcoper suscipit lobortis nisl ut aliquip
7.4.
, .1 1
- (
;(
<d1 v> ).
-~---------------------------------------------------

CSS . ,
: ,
r <di v>.
172
7.
, ,
,
(. .
7.4, ).
-------------------------------------------------
( ) .
, :
13,
CSS .
, ,
20 ? , .
CSS
, ,
. ,
, - (
<d i v>) .
, ,
.
, ,
, (
, ~ .
>> .
6).
,
. ,
.
.
Tuna~)
7.5 ( Raise
10 . ,
.
, ,
<<Extra!
Extra!~.
,
.
,
. .
The Extraordinary Technique~.
7.5,
.
( , ,
).
,
. ,
-.
( Q) , -
173
n n
,
, .
, n n, -
-.
} fl~aiJVC' nrgrns
t!i
!leW
r..l[gi(RJ
Mozilla f IIPfOX
Qoal<mar
!iO
Iools
.....
~1
htff>:/fcss.~/dfj7~
DIRIie ti) CooiOes ~
css-
Fonns-
<t"; IINoger
1 Go 1n
lltfannatlon
@) ~ ~ QJan
SEA
TUR
NAA
INLYOT
UR TUB
II::IE
FXRAQRDINARY IECI::INIQIJE EQR ERESI::I SASI::IIMI

Lore.m ipsum dolor sit amet, QOnsectetuer adipiscing elit, sed diam nonummy nibh
euisn:d tinciduntut laom~tdolore !gna aliquamerat volutpat. Ut 1isienim
ad minim venia.m, quis oostnJd exerci tation uiJiUDQOrper suscipit loortis nisl ut
aiJquip CIOmmodo CIOnsequat. Duis autem vel eum i.riure dolor in heodrerit in
vu\putate velit esse molestie CIOnsequat, vel um dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dlgnlssim qui blandlt praesent \uptatum
zzril delenlt
t::J
.
Oone
...
7.5.
, , ,
------------------------- n n ,
n . n n
, .

-
, .
CSS
: (.t)
(inline,
),
.
, <> , , .
, <div>, .
( inline) ,
. .
<strong> - . , ,
, ,
<em>. , ,
<strong>, .
inline-ero <img> -
, <> - , n . .
174
7.
, ,
CSS
. , , ,
.
-.
,
.
.
7.6 ,
20 .
Lorem ipsum dolor sit am<t. consmduer adipisciag dit. s~ <iam oonummy nih euismod
tn:-.-:!aoreet doloremagn.>
,......." quis
ccascquat_
------~~~~~~~~~~
20
,'tf illwl
'~~~~~~~~~~~::~~
praneot q,w.." mi dde ~

ipsum dolor ...
~ CCCtS adipisc:i "1 dol, ~ diam DOOU ID}' nih <U ismod linQd Ul]( ul r <t dolo
R 1111 lll>quam <n11 ''!. l.!t "'isi ..."
Lor=- dolor sc om<t, cons:!rtucr odii>csciag dil. ~ n DOIUIY aih <Ui.sa:>od

IIOCi<Jt u1!aor<et dolore- ~ ..-. \'Okllpel l.!t w isi mm ad lllioial ''CIIiom. quis
nostn
taliocl uloa>t:o<por suscipit 1oo.los t>isl u1 . < <:< d ~ uat
"'"'ci
display: inline-iock;
ver1.ical-align: middle;
paddig: 20;
margin:
20;
Duis lllllad ..." ..v. dolor ;"
-+-------------1
'--------'
dolore t'U frog io1 ... fac:i is1s \ va:o ~ et acansao ct i.osto odio dipo$S8U Q\8 1 <il
proe seo1 >. 111m udl c!eleoa que .US dcloce te ftu~al .... fac:iisi.Lorem 1pSUO> dolor sa
omet, -~ adlposc8Jg dit. ~"""" ooma~~~~y i euismod tinci<I u1lored dolore

tna8JI'I ~
Ut "isa ..."
"""''O!ulpat
7 .6.
, n n
: ,
. 7.6 ,
.
, . , ,
. , ,
. ;
, di sp l :
i nl i ne- ock (. . 7.6,
8.). , ,
175
, , , .
, Internet Explorer 6 7,
, ,
<strong>, <em>
<span>.
6 7
, vertical-al ign :middle, IE

, .
-----------------------------------------------
n:
<img>,
-, .
, , ,
.
, .
, ,
, ? , ,
, , ,
, , ,
-.
, CSS , , -
di sp 1. :
display: inl ine;

, , , ,
, :
lock;
display:
-------------------------------------------------

display
. ilie-iock (; .
7.6).
. -
, .
JavaScript,
display ilie
,
k.
CSS: . , ,
display IE 8, Firefox, Safari Opera
CSS . .
,
. .
7.1,
, ,
. : ,
. ,
,
- .
176
, n,
7.
. , ,

1 em, .
,
<hr> ( ), -.
: 1or
(), width (, )
sty1e () .
co1or
(. . ~ ~ .
width-
6).
RGB,
, .
CSS ( )
thin ( ), medium () thick ().
- .
, style .
. . 7.7.
. , so 1i d
, dashed- (). CSS
: solid, dotted, dashed, doule, groove, ridge, inset, outset, none hidden.
none hidden :
. none ~
(. . ~ ~ . 6).
Q o o -1 :
Jl
-~ . r~
"'
...
.........
.
.
.
- - -....... 0 .-=
.
.
. - - ..........
- - -........ .
1
8onSer
1 -
8otOv
'
:
w~;t..=J~ -
1:
::= :
000
00
. 7.7. : lnternet Explorer 8 ( ),

Firefox 3 ( ), Opera 9 ( ) Safari Macintosh ( ).
lntemet Explorer 6
IE 8
177
--------------------------------------------------
Intemet Explorer
Windows
, .
border
. ,
CSS, ,
20
, , ,
. - ,
: , (
) .
border:
- border,
solid #FOO:
. ,
, ,
.
-----------------------------------------------
n : order: 4
, order:
#FOO solid
solid #FOO;
4;.

,
:
border-top, border-bottom, border-left
border-right.
, border, ,
.
, :
border-bottom:
dashed red:
border .
, border-left, , ,
. , ,
, ,
-. SS
:
border-top: 2 solid lack:

border-left: 2 solid lack:
border-right: 2 solid lack:
border-bottom: 4 dashed #333:
SS-:
border: 2 solid lack:

178
7.
, ,
,
. ,
SS- , ,
. , ,
border: 2 so1id red:


.
,
border-1 eft.
SS- .
: ,

border: 2 so1id k:

border-bottom
border. border-bottom
, border
.
, SS- .
CSS, . 5.
none.
(, ,
). :
border: 2 inset #FFCC33:

border-right: none:

15 , ,
. ,
doub 1 #FFCC33:
border:
border-width: 2:
border-sty1e: doue:
border-co1or: #FFCC33:
, , ,
.
, . :
border-ri ght-wi dth, border- right-sty1 border- right-co1 or. ,

: border-1 eft-width, border-1 eft-sty1 . .
: border- r i ghtwi dth: 4:. , ,
,
,
dashed
so 1i d.
179
,
,
border-wi dth: lOpx
border-width, border-style
border-color.
5 15 13:
(, , ).
2 ,
(, ). :
border: 2 dashed green:

border-color: green yellow red
lue:
,
,
-------------------------------------------------------
, .
: , , .
,
CSS -,
background - l ,
6.
. .
- , :
body { background-color:
#DDAF:
, ,
<body>
. revi ew
<body
L- :
class="review">.
l-------------------------------------------------
-
. .

. , ,

-,
, .
-------------------------------------------------------
, :
- (. .
7.7},
. ,
.
180
7.
, ,

SS-,
CSS.
, , ,
, , .
height width
.
, -,
3.
: ,
(
.
8).
.
CSS,
width: :
width: 30%;
height: 2Dem;
, ,
em -
, . , . ,
24 ; em
24 , 2 em,
48 .
2 24,
, (. .
~ .
6).
width
-.
75 %
75 %
. ,
.
200
<di v>
(, ),
150 .
height
, -,
.
(SS n
11011308n. r,~',~ .
3n
. nr iiWiia
e~pa:min-height,min-width,max-height
( ) &<1 .;'
max-width. nn n
nnn~n~.
MIIHaJIIIO(' MiiCIIanoe
r; COillleIIIO, lllttmt!t&ploter6
m .
ero e1101t11ii0t mi~
181
width
height
, , -
. ,
, ,
CSS.
width height
, (. .
7.1,
CSS
). -
( ), .
, ,
, .
7.8.
100
15
15
10
10
160
,...
'
'''
...
,
.
7.8.
, :
-argin: lOpx:
:order-width: 5:
:adding: 15:
~1dth: lOOpx:
wi dth, ,

.1,
182
wi dth
7.
, n,
( n.1~t n
100
). , ,
, . n
20 , 1
100 n
. Internet Explorer
160
n :
, 30 n n
, ~::-
-.
: 11
!
CSS
, n n n .
I\ , :v
:-.1 (.
7.9).
, n ~ t, {t :-.t
, 110
100
11 .
, .
( ,
IE 6)
ci'O
n . ecJt
, , ,
, n
, , ,
no 1t
. ' .
'
'
' .. '
....
~ ~..~ u ~ ~ ~~ /; s-~ i~(-~ ~: :;.,
tore ipg.D d' iOA 8m4, COOtCICI:Uc'f ~~ eif.

\oed di.3at ~-l!bll et.ailocf !Wht t.ll orttt
do'e&~pt~crlll~ l.;1wi$j ~.dn:8:.R
,"tS!i8o, qW. c1tNd .'-" Ulion uld<orper rusctpil

\oortls~ -- ~t2; c.at~COiiJOSS . l>t.a~
ia '~atc veolil
"~~ t:OO\eqt, ..'t!l ~ do:okwt n.I~ rad
ri
Ifth~
IUIIOIIDt
of
tonfeatill
l'ixed lleight
is taU~r
tlaaa the
,
soe
w~ird
(.(llllcro Vswn d 1if ~ ~oc$lt1Ucr adipi~g t1it

t.<n OOCUJWO)" ~ ~ Wi6a ~ Uoreet
d fOa8D.1 ~ tS:f \'oUp.8
l:'1 ~ il:n ld ..-...
lhi.as
bappen.
vtailna. ..- ooSO'\Id <'J.ttci aDoo "'-:cxpcr 'i

~lisJUIIIIiq;pace~~ O\li$ . . CIVd~irfll't:dolof8"!
....., ;.....,..- ...-'......... -~" .......a..w ....... ~.......,., _, """"" ~ ...... r..,'"".... ~ r..-.
.
~ (CH ~-- <icJ~!Qds~
::~~--~~.: :~/~.~~~:~!~-~}~~:~_:!~/~-+~;;;_~:~~;~-~-~ -~~-~-~~.-:.:..-~.:.~~-~

Wheo beigbts go bad
W hen heigb ts go bad
aACCD ''d N8 t <lolor in cDccri
--
J.lrt~ F"""41!:f.TOdit"'-
LQftrn ipsW! 6olor ~ ..1<'1 . ccSt~ .tdiP"C\i t lil ,,..r~

&1m I'IOfO"'l)' tlib Nismod ~ Ull.aotr:d ~~ mN
Uo.tuw no)l ' 'OUJ>;rt t:1 '~isi CJ:Jim ad oiniot '"CDaro ~
tKHOud C.\:C"' ri tiOor\ IJI8:Dc'OfJ)Ct ~ 1ooois tisf ~ aiqt.lp
u.~a.cocm<lcoc\t~ D\8s~ "cl~.uc: ~

cndr~ 11'\ '~~
' 'tlit tsst t:DOk\t!C' conscqut. ,.d
dolote w fa~P Nl.& faci
io
:1
bos, some
Lor =\?"1:1dd.o\'~.1n:.t:I. (.~(I;ef~.~c srd~ ~.c-&~~

~ 1o1t Lrm dokxr m.'l(rN ~~ (1'-,r ,.oUp.v t:t ~,.; n.~~ ~ -c,'li.w JW
f\0\'\111 C'Aes-rtl~tiootai!OIC')I"orptt WJ.nP!I~ ,_~1./1 M .JIIIPC:.". . : = CQ('IJ.('q!IOI.

Oui~ ~"I'"''' N:D .~ 6o&or 1'1 ~mt" \~1~ ,.~~ t\~
.
~"11 ,.~
6.n dot ~ fNp.JI. da
/:,
;;----- --- ------ ------- - --
7 .9.
lnternet Explorer () Firefox ()

,
hei ght :
.1
<di v>,
, n, , n
.
, , ,
183
, .1
, .
PMEAHE-------------------------------------------------
Internet Explorer 5 ,
width ,
. SS-
, ,
IE
IE 5
, , , .

(1
CSS,
10
IE 5 http://reference.sitepoint.
com/css/ie5oxmodel.
overflow

wi dth hei ght, . .
Intt:rnet Explorer 6
7.9 ,
, .
( ) ,
.
overfl ow.
, ,
, .
Vi sible- , .
,
overfl ow (. 7.10,
Scroll
).
- (.
7.10,
).
- -,
L- ().

scro ll, .
, ,
.
Auto
- ,
. ,
scro ll,
Hidden- ,
(.
7.10, ).
, ,
Internet Explorer (. .
Internet Explorer 6~ . 12),
184
) Weathei11g the Heights - Mozilla Fir efox
7. , n,
l;](Q}@
hen heights ~:-~~~~-:;----J,

bad
:1 property is set
j to
do'- .
"visiie"-aay content
1~ that flts outside J
lpSUI
"" Sit amct,
ctetucr adipiscing elit, sed
DOIIIIIDIIl)'
euismod
ut laoreet dolore
the . is
!
i
dispJayed
anyway;------aliquam erat volutpat. Ut wisi eoim ad minim veniam.
~tnl<i I".XI'JI'r:i l>tn 111\>tmr.nm<>:r <11~r:init lnhnrti~ ni~l
1>
<t
) \'/eathering the Heights- Mozilla irefox
~I(QJ!Xl
-----~-------,
When heights h overflow

11setproperty 1s
go bad
~~
__... . . ._______
!
1
1to "soll''-"a,-!
Lorem ipsum dolof sit amet,

f the same
consectetuer adipiscing eJit, sed :
~~
diam nonummy ni euismod t~-~~~-~L
.l.___ J
tinciduDt ut laorect dolofe
magna aliquam erat volutpat. Ut \vW eoim ad minim veniam,
quis nostrod exerci tation uamcorper suscipit loortis nbl
) \'/e,lthering the Heights- Mozilla Firefox
When heights
go bad
..,
GJLQJ~
~:~~0~--~
f to
"dden"-
f content outside
Lorem ipsum dolof sit amet,

consectetner adipiscing elit, sed ' the . doesn't
(_ap~r~~~.......
di.am nonmnmy i euismod
tincidunt ut laoreet dolofe
magna aliquam erat volutpat. Ut \visi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit loortis nbl
.
7.1 . overflow
185

lternet
Explorer 6
<! n-
, n -.
n , n
, n
8 lnternet
* htm1, n
lnternet Explorer.
Explorer, r
:R Firefox, .
n, ,
n n . r, n
n . ,
. -
html
, n
lntemet Explore. ,
sidebar,
lnternet Exploer
lntemet Explore 6,
n ,
n (. .
, n n -.
lntemet Explore . 12).
, n
, n n
, .
12.
s1 deba r lntemet Explorer
, n
n
lntemet
Explorer,
r n
* html s1debar { marg1n-left

_
* htm1
(n,
, n 11 . n
). n
n n
lnternet Explorer 8. 15.
CSS, n n
lnternet Exploer 7 8 n
: lntemet Explore 6
8. n
* htm1.
. , ~
* html
, , n
html . <hl>,
n ,
lntemet Explore 6
n , n~
, *
html hl.
html
. ,
, nn n
, .
n .
Explore.
lnternet
HTML ,
: , ,
. ,
.
CSS
3
, , ,
_ n -
SS- fl oat.
186
7. , n,
fl oat ,
-. ,
n ,
(.
7.11, lmuy). (
) - , n
.
-,
.
n ~
-.
Ft-o~ts
{)'h;pif~ 1Q. !Qt.'" ~
Regular Page Flow

R.ight Sidear
Thrs is <dJV> tag tl1at "ould 1ook ettrr. rfit were thi!ID('r and
align<-<1 to t right ~dge of the .
'--=""=-'":::;;ou..or~ ipsum do!or sit amet, C<'II1S<'Ctctu~ ndipiS<:log elit,
scd di3m nonummy nibh euinod lincrdunt ut 1aoreet do!ore mugna

aliquam erat \'Oiutpat. Ut Wl~i enrm ad minim 'eniam, quis no~trud exerci
tation u11amcorper su.<Cipit 1oortis n:l ut aJrqp ('Ornrnodo
~1!-~.i'.LP.uis~.'!~~) ''~J. !!!!ri-_9(!~ in bend~r.L!.~'!.~JJ!!!!~.I.U~!!.
Aoou
LoatiO!\
)
ko~ir(h
[!J
J.ookln.ar'h
Lorem IJI$UI dolor Srl amet,

oon.sectel\rer adiprscing elrt.
sed diam nonummy nibh
Sidear
~nismod tincidunt ut laoreet
dolore magna !qun erat
This is <div> t
\-olutpat. Ut '
enim ad
th&t's Roated rijt
rninitn vc.niatn1 is nostud
and lw< set width.
exerci tation ullamrorper SILIOprt
rtis nisl ut
aliqurp comodo oon.ut uis outen1
vel eum iriure do1or in hendrerit in -uiJIUinte
\'elit es:;e molestie <'Onsequat. vel ill n1 dolore 11 feugt nullo fad
R.ight
Lorem ipsum dolor sit nmet. etuer adipiscing c1it. sed diam
nonummy nibh euismod tincidunt u II\Oreet dolore magna a!iquam erat
,olutpat, Ut wisi enim ad minrm ~ruam, quis nostrud exerci tation
uiJ;mQrpi!r suscipitloortrs nisl ut allquip oomrnodo OOO$equat. Dui$
autem ve1 e11m triure dolor ln hendrent in wlpultlte velit :.. mole.tie
oonsequot, vel n do\()re eu reugiot nulla faci
. 7 .11. L ()
n float ()
187
, fl oat
,
CSS.
,
,
, , -.
fl
oat
,
12),
( .
l eft -
- l eft, ri ght
none:
, ,
, ;
ri ght - ;
none -
float: left:
-------------------------------------------------

<img>.
float
L ,
SS-
float.

-. ,
.
, ,
-,
,
. , -
300 , .
, .
, 300
, .

fl t
, <i mg>.
fl oat. ,
. , ,
, .
fl oat ,
. <di v>,
L-, -.
,
- (
). float
wi dth ( CSS
, ).
,
188
7.
, ,
, , ,
, - , .
-------------------------------------------------
L- n
-. L- L-r,
.
n, -, <hl>,
<>. <> <img>. n,
, <hl > <>
n- . , <img>,
.
,
-,
, -. , ,
-. ,
, , .
,
, (. 7.12, ). ,
, .
, . ,
, , ,
(. .
).
Sldear
11is Jidcor .. llolled ..". """

.... 20pixels..P., - - -
:=H=ec.a..:o
:.: d=
i n=--go,:2::-,--- -..,. 6...,...,.-.~;,
Lorcm .".... dolor s&
....... cooscctetuer
~ dii. sed diom
Heading2
LO<aD.ipoOID dolor ..
lg$ $tZf . . -
8IDtf. coosecteN~er
oad
JICiPsaag dii. sed-
cisplay d!cir ""'*'!Joaods oad
dolor.-.
Oorc
Sldear
Jlcadlinc
cisploced .. s for 11
""""""" al>h cosmod

ord<G (es per 1 CSS spec.)
liocic>t ,. loc<ccr
dolore . _ oicpoo>
erlt "~ Ut wbl etain ad iWD ,.cniam. <Ps nosaud excrci
totioo ~ SU5C.ipt loOo<lk ais1,. oicPP : ..,."..,.,&,
coooeqooL Duis- vd """'me.Lor<lll ;..."
c:i
7.12,
CSS .
--~
-..
..
dolore- *"""'
11is Jidcor istooled det oad

.... 20 pixels ...... oaod ..
c-..tiOOD"""""""'ctapis
cisploced ..dlc for 11
1 wict oad
cisplly d!cir~ oad
IOgS...,
orcle(as.,... ..
css-.>
11 '':. Ut ~isi eni. ad mirin ~ cps OO'S'Ud c:xetci

tiJiioa ~ SU5C.ipt locrlis ais/,. aicpp ~
v
Duis autern vd <U.....,. Lorcm .ipoOID dolor . IIIIJd,
"'
J:Oooe
. 7 .12. overflow: hidden; <h 1> nn ,

n Q n n
. :
overfl ow: hi dden:.

overflow ( )
189
n n
-----------------------------------------------
. .
.
,
,
, r
n
,
. -
,
.
, - ,

. , , ,
, . ,
,
.

, . ,
, .
<!~ (.
7.13, ).
CSS clear.

overflow: hidden
overflow: h1dden
-.
n :
(. . 7.13).
ltemet
. - lternet
Explorer 5 6 ( , ,
Explorer 7, Firefox, Camino Safari, r

Opera ( 9), lntemet Explorer 5
6 .
Opera 8 ( 9
n n n
. lntemet Explorer .12}.
, n
Explorer
} r
lternet
, ltemet Explorer 5 6 .
: zoom :
1:.
lntemet Explorer.
Microsoft ( ,
Explorer),
, lntemet
190
7.
, n,
Floats Bumping Into Each Other

l.orem tps\lm tlolor slt
amtt, ~ons.tc.1etue.r
adipi;lng elit, sed di011>
t100\unmy nit1 ettsn'od
rinc.idunt ut laoreet <lolott'
agna nliquam erat
\'C)IUtpitl. Ut Wl~i 4!'1\Hfl ad
roinim \'el\\:tn,, qis
oo..~tnld c.xerd tiition
uJiamrol'l"'r !.IIScipil
lohortis 1\il u1
aliquipex~a
t.'Ommodo cort~equat.
t)js IJUtt'\ \o\"l tUI
1riure doJor io
edrent 10
\'Ulputate \rHt c.sse

tr\01~rr
ensequar.
vel illum dolorc ou

feugU~t nulla (,.<;
[."oren\ 1psum tlolor sit a~t. conse-ctct:uer acltptdn& e-lit. ~ dtam noummy
njbh ruLm1od tiocidunt \1t lanrce.t dolorc mngru\ aliquam ~rat volutp;it. Ut ~'1J;I
tnim ad minin1 \'cni.am. quis no~trud e~trci tatioo ullamrorper wlpit
lolrtas n~t ul aJ1qt.Up . oonunodo rooua.l. Duis a.tttrm vtl m iriurt
OOior i11 t.c~ert_t in \ttdputate \'c1it ~"" 1ulestie c:onsequat.i wl ium (tolort'
Floats Cleared
Urem ipsuro dotur ~ amet. Wnst\:lt:tuer
adipiiOQg elil, sed diam AODIIIOI)' nibh eul<l1>od
liridunt ut IAQreel dolorc 1~&"'" aii<\\J.OJm crat
\oltpat. Ut v.i.s1 t'nim ad minim vcoiarn. quis
OO$tnJd 6Ucltation uHamcorper su$4:1pit
loortis nisi ul eliqulp ~ oon>modo
ronsequa1. Duls autn , .1eum irillrt d<>lor in
.ndreri11n '"lputal< ve\Jt s ma1te
roo.,equal, vci illum dolore u fe11giatnuJia (;.cl,
t..ort:t ips11m <lolor sit ot"t. eon..-,c:ctetUt'r
odlt>i$<1ng <lil, sed dt>n> notmmy niI> euumoct
tir><i<lunt ultaoret tlolore M'll\03 aliquatn ernl volutpal.
t11 \0.-isi enim :td minim vcnjam. qLris no~trud exert.-a
~11on <~lar<~rper sU!!pil lol>nrti< rlil ut :t!i<(11ip . t'a
cornn'k'CJo oomcqaat. DuJs autt> ,rl ewn iriure do1ur in
l\encirent in ,'\.Liputatt velit t-~ nte.sttt co~qur.t, \"}
i1111m dolore eu fet<siat nulla ftt<i
'-uosect.rtucr
t.orem ipsu doJor xlt ai'XW't,

:.[~,?,~~;"[~]:t~~ij'-1
1elf<, <d dtam no11ummy nJbh ouism<XItin<~<iunl u1
laoroct dolor~ tn:~gJ>a aliquam t>rol \'Oiutpal. Ut
"i-os:i ett.irn 8(11niraim \-eniu.n'\. q r1~trud tx:tra
(.-t&un ullam.corper ,;uscipit 1uortJsnLSI ~&t ~Jiquip
1t'X t>a com.modo consequo&t DuL.~ autem \"fl tutn

1riure dolor ln ht.'odrtrit an ,.ulputate \'tli\ e$S.t'
...
~-~----c~"-u -~~---L..--:..
7 .13.
, (),
clear (),
clear
n . n ,
-, n n .
, (
) .
191
: , ,
l r :
l eft -
, ;
right-
, ;
both -
;
- - ,
, ,
,
.

- .
, :
.copyright { clear: both: }

.
7.13 , l r
(1)-
, .
(2)
(3) ,
(2), -
(1), (2)
( )

. (3) .

(. .
clear: right;
7.13, ).
,
.
-~-------------------------------------------------
,
. , . .
12,
: ,
,

CSS,
, -,
-,
-.
192
7.
, ,
, ,
. , .

2.
07.
n
L-,
CSS.
(.
7.14).
--------------------------------------------------- .
7.17.
Amuina WoddofCSS
Sod Ul perspic:ialis ll>de omnis !ste oaiDS aror ~ volupWaD accaotiJm dolo<emquo lauclantUn. totam rem _."", eaqne
~ qoae ilo CVCII!ore .....ntis el quasi 8fcl>itecto 18 W3e dicla n ~. Nemo euin ip.- vo>hdCOD quia
volupto& sil aspernaa 1111 odilllll n.g;c, ~ quia ~... dolc<es eos..,; r1lliooe ~- ~ ....a.at
N
~ Ul pe:rspici&js uode CCI>I:Ii$ i$te oatos ar<>r ~ vo>mtem .,.,.."..." doloremq>e l.mclaoliam. tol!lm """ ~
ipsa qoa.e ilo inva>lore ..,.._ el quasi o1<ditcc.to .1 W3e dicla $1101 ~. Nemo euin i ~= qoia
....,q,tas sit aspem8IDr 11111 odilu fugi. sod quia cooseqiUIIDr magni dolores eos qui r1lliooe vo>tatan sequi oesdulx. N<q~>e
potro qaisqoalll est.
W new CSS d Suc:
Po,.cr7
~ Ul ~ uode omais !ste""""
aror sit ,~.." accusaotium clolaremque loutJ;wium. '"""" ran ...,.._ que
quar ilo""-oreverilalls d quasi lfchlltc> 1 -.itae dicla SI explicat. N=o euin i voluptalaD quio.
sit asp<miiii8" aut odit aalilgil, sod quia cooseqwo~ur ogni dolores
l
persp;a.a. uode oomis i oa1u> enos sit
""""'*""'
~ doloranqoe ~ lolaDI r ~ uque

illo I!IIIore -otis 1 uasi o1<ditcc.to 1 viloc dicta sl e;>litol>o. Nemo euin i5 voluptalem quia
sit asp<miiii8" 1111 odillllllilgil. sod quia coosequiUr ogni clolares oos qui lliooevoq,em sequi nescim<. N<q~>e
porro_.,..est, qui dolorem..,...., quia dolor sit otne1. ccosectell6, a&pisc:iveQ,oed quia"""OIJI!>CIIIIDI eiosiDOCit-&
iocic>t utlolre et dolore tiiOjllli!ID o!iquom _ . r ~
:
Neillw:rl
Sod Ul perspicialis ll>de oris !ste oal>l$ r sit voluptal<m ocCDS80Wal doloremque laudaoliua>.tol!lm rem _."", que
ipsa qoa.e ilo m...,.ore vai:alis 1 quasi orchilec:to 13 vi.1e dicla S1IDI eq>icao. N euin i ~- quia
v6! sil aspematut aut odiiiUI fusir. sod quia cooseqwnor mogni dolores eos qui mione voluptalem sequi oesc&rot N<q~>e
potro quisqlam esr. qui dolotem ip..." quia dolor sit ornet. CCI<I$eCid\W, adipisci velit, sed quia """t1111DQU<11D eios IDOCi IC0:1pO<&
incicII ut lalxe 1 dolore ""'8"' aiquam qun1 ~= Ut euin ad mioima veoiam. quis oos\ruln exercilaliooe ulam
~ susdpC laorio<am
Cop)ig1Jt2010. Th: Loreoo lpsum Corpo<alion
. 7 .14. n HTML ,
.
n n
193
: n, n,
1.
L-
sidebar. html
07.
,
. ,

CSS.
, ,
, -
.
margin
padding.
,
,
. - , .
2.
CSS /* end reset styles
*/ :
html {
- .
-,
background-color
<html >, <body>. ,

<body>.
3. .
body {
background-color: #FFF:
border: solid #85All0:

<body>
. <body> <html >,

, <~~
<html>
, .
.
~ ------------------------------------------------------, background-color <d>, n

. <html>, <d> n
. , n - n
3, <html>
CSS.
n . , n
4.
( <body> ),
( ):
body {
border: solid #85All0:
194
7.
, ,
width: 760;
margin-top: 20;
margin-left: auto:
margin-right: auto:
padding: 15;
760 :
760 ,
<html> 760 <body>.
ma rg i n- top 20
, <body> - ,
, . auto -
wi dth
: , ,
, ,
.
-----------------------------------------------

margin, ,
, :
margin:
20
auto
auto:
, <body>
,
15 . ,
15 .
paddi ng
, ,
.
5.
- .
, ,
(.
7.15).
, .
CSS, <<>>
, ,
.
1.
<hl>
sidebar. html L-.

body, Enter :
hl {
font-size: 44:
font-fami ly: Georgia. "Times New Roman". Times. seri f:
letter-spacing: lpx:
color: #85All0:
195
: n, n, r
".
'
CSS: MISSING MANUAL.

~
fti :'
'
7.1S. auto
n n ,
. 44
. eJ\ry Georgia
, .
.
---------------------------------------------------- n
n. , ,
CSS , .
2. hl,
( ):
hl {
font -size: 44:

font -family: Georgia. "Times New Roman". Times. serif:
letter-spacing : lpx:
color : #85All0:
text -transform : upper~ase:
bacgroundcolor: #24:
196
7.
, ,
, ,
. ,
, (
The Amazing World of
css~.
).
- , ,
. .
3.
hl,
( ):
hl {
font-size: 44:
font-family: Georgia. "Times New Roman". Times. serif:
color: #85All0:
background-color: #24:
padding: 5 15 2 15:

paddi ng
5 , 15 - 15 - .
: - ,
<body> (.
4 }, 15
, .
, .
: .
4.
hl,
( ):
hl {
font-size: 44:
font-family: Georgia. "Times New Roman". Times. serif:
color: #85All0:
padding: 5 15 2 15:
margin: -15 20 15:

-15
ma rgi n
20
-15
.
, .
.
, -
. <<>>
197
: n, n,
15 15 ,
<body>.
5. <h2>.
hl:

h2 {
font-size: 24
font-family: "Aria l Narrow". Arial. Helvetica. sans-serif:
color: #F96B18:
border-top: 2 dotted #8DA516:
border-bottom: 2 dotted #80516:
padding-top: 5:
padding-bottom: Spx:
margin: 15 Spx 0:

. ~
, . ,
mrgin . 15 5
.
6.
(.
7.16). .
AAZING
WORLD OF CSS
--em>raii\'Oiopwem_dolomDqooo_,__________ .. _______ .... ______ ____
s.d a&penpidllii-CI!DI!is
opa;.m,coquo ipsa qu~< ~ iJJo ......., wm.ns .. quooi an:bl"""' u \itacd!c """exp!iall>o. Ncmocalm
ipoom vo~upa<ea> qu1a YOiopat _...... ... odilm ",...,, ..q ~ 0>8plcloloru.,..qul-
~~-------"'""'"
N
........,,
_,,
,,_
....
,_"_,,
s.da&~110deOO>IIirtao ..... enar..,.,_-~--
apcr\8m,caq-. .. f!>uquaeaIJJoiov"""'"' YetimiseoquooiiiJ'd1itoc<ocauoviJxd!cS11~. Norno<Dim

._,-o~_..qulaYOiopatosp:marautodital\o&ll.l<dqula_""'"'.,....-.. ... q u i -
...,...~~-- Noqaopanoqu...,. ....
Who Klli!W CSS d Sudl Power?

s.dUt~--l-em>tlil~-tio""-'<l---
8pCI\am, t:tqoe ipa quac.a i1lo vuaore '"uit8c.t Q1.1-.i arc:hitcao vilacdkta JUat~. Ncmo t:!lim
lpollll'o'QI~quiiYOiop lh ~Sp:m~~UrllltodiiWtNck.O<dqala_.,.,._
. 7 .16. -,
,
198
7.
, ,

- ,
: , , .
, , . ,
. ~
,
-,
1.
si debar. html
CSS.
L-.
-, .

<di v>.
L- .
2.
<div class="sidebar">
<h2>
( NOTE~ ).
Enter.
L-
.
. s i deba r,
3.
<div>.
</>,
<h2> (
<h2>Who Knew CSS Had Such Power?</h2> ).
</di v>.
</>,
Enter
<di v>.
4.
- <h2>
:
.sidebar {
width: 30%:
float: right:
margin: lOpx:
(
)
30%.
, .
30 % . fl oat
,
ma rgi n 1
- , ,
, : <h2>
. IUi
, .
h2 ( ,
8).
199
: , ,
5.
. s i deba r,
( ):
{
width: 30%:
float: right:
margin: lOpx:
background-color: #FAEBC7;
padding: lOpx 20;
.sideM
-
, ,
.
6.
.sidebar,
( ):
.sidebar {
width: 30%:
fl oat: ri ght:
margin: lDpx:
background-color: #FAEBC7:
padding: lOpx 20:
border: lpx dotted #FC6512;
border-top: 20 solid #FC6512;
, . ,
,

.
, ,
20 .
(border-top, border-bottom, border-left border-right).
CSS,
, .
,
5).
<h2> (- h2,
~ . ,
,
.
7.
. s i deba r
.sidebar h2 {
border: none:
margin-top: 0:
padding: 0:
200
7.
, ,
. sidebar ,
h2. ,
<h2>, .

, ,
, -
h2 -
<h2>
. ,
.
8.
h2
overfl ow:
h2 {
font-size: 24 :
font-fami ly: "Arial Narrow". Arial. Helvetica. sans-serif:
color: #F96l8:
border-bottom: 2 dotted #8DA516:
padding-top: 5:
padding-bottom: 5:
margin: 15 5 0:
overflow:
hidde:
overfl ow
hi dden, ,
Internet Explorer 6 -
, , ,
).
9.
- . ,
.
7.17.
Internet Explorer 5 6 ,
. 7.17. ,
,
-. .
Internet Explorer 7 8 - s i deba r. htm 1 ,
.
Internet Explorer 6, , , .
,
<h2>
overflow,
, Internet Explorer 6
()
- . ,
.
-------------------------------------------------
n
, n n n
, n Iternet Explorer .
201
: , ,
AMAZING WORLD OF CSS
Sedtlpc:rspiciisCDdt ocarisis8C'U'e'IOI' lil\~.ac~do:~~ (Cita!DICIII~ ..~

~acl8eu ~'Dt diaaAa ~ Na110cai1D~ ~CI8
Cn.a qa.a .._ort''C!I'ialis d
~-~- odlatait. "Cd<Pac~aa.apdolof~ eo~qt;~t.C..,~a~~~oc:.id
'll'ho Knew CSS Had Such PoNe,-:

Sod
per_..
aode oaDs istc o.11a:s cnOJ ,olrllputma ac-C'\INICi.a)

doloraDqrx lladlni:UD, IotlaiiCOI. ~ . aqoe ips.a ~ , lo :!"t
~ d qasi adileao .-. ....__ dicca sua1 rxplir.ao N~ cni
.,._,~=IJ.Iit~~~
~llllllpidon
.. odlt .. ~Soe'dqllia
_..----...........
_ ...-... .
'
Sed Ql prcnpici8s t8lidt: omais isl~
..,.-.....
~mcwtil~
~~-~C8qllt'ipsaqat:
. i_ _<..,;
NoiMe'
....._
,_.....,._
N_....".._ ..
~N--
Std paspici*s 1Dkoa8!. islttus cnor s*''~fal.cu:wre

dDiora8qDt ~. to&IID fCID apcr\lla. caq8e ~ q.1W 1 lo ilDoft
~ d qai adlikdo u ~ clrt8 SUIIII ~ NaDO siaa
.,_.......,.., .... ........,,. _ _ . .. r;. ~~..-
......-.odll
...... sed ...
....
...............
.
~ ..... doan>~ qair81tiooe~ s.rqatonoUat. N~

p:no ~ c:sL qai. d., ~ qgia dolor silaDet. <oo.s.c'Ctc:Nr
8lipOd ..-_ ~qaie.DOD _,.-t'ila~\c:IJ:IfiCII"4 iac:idDcll18 LIott ct d~"- ~ .,_q.ecrli ........CID
MeNeilher'
Scdalpaspic:ialis_.c..-i:stl!6111atmor tir~c ~d~~ IOC8Iart~~~~apcrilla ~
ips.aqu a . . iava:tofC'''~ct qca:si 8"(~ ~ v8ac diaa. Q:d )i Nt~DD~ ipW:D ~CIDq\U
7 .17. SS-
L-
, . - _
1.
s i debar. htm1
L-.
<h2>.
Intenet \ 6.
2. - s i debar . html :
h2 {
font-size: 24 :
font-family: "Arial Narrow". Arial. Helvetica. sans-serif:
color: #F96Bl8:
border-bottom: 2 dotted #8DA516 :
padding-top: Spx:
padding-bottom: Spx:
margin: lSpx 5 0:
overfJow: hidden:
zoom: 1:
202
7.
, ,
zoom CSS.
Microsoft .
. zoom
IE 6.
, ,
.
: .
.
* html ( * html
- . s i deba r - ,
Internet Explorer 6
3.
).
* html .sidebar {
di sp l : i nl i ne:

CSS.
di sp l
,
4.
-
,
Internet Explorer 6.
. 7.17,
-, ,
,
. , .
15
Internet Explorer.
sidebar_fin1shed.html
07_finished.

,
. <> ,
: , . .
,

. copyri ght ).
s i deba r. htm l
(,
), ,
(
text-transform, .
~> . 6).
<> L-.
- ,
, .
CSS
.
: <img> background-image
( ).

CSS.
, .
-
.
CSS
<img>
<img> -
.
, ()
.
CSS ,
.
SS-, .
, border
.
SS-, .
Border -
(. . <<
~ .
7) .
1 .
: , ,
Paddi ng -

,
. ,
.
204
Fl oat -
8.
-r
fl oat
-. ,
, , -
. , -

.
Margi n -
-, ma rgi n.
, .
( )
( )
<i mg>.

, ,
. ,
, ,
. , ,
. ,
.gallerylmage
.logo,
,
. ,
<di v>
ga ll ery
, :
#ga ll ery i mg.
background-image-
.
,
http://www.csszengarden.com. L-
-, .
8.1,
.
, -
,
( , L- -,
,
<i mg> ).
, , ,
-. ,
,
.
background <body>. CSS
HTML
, .
205
. 8.1. csszengarden.com
, , n CSS
L- -
~-----------------------------------------------
.n n SS-
. n -
, .
206
-r
8.
GIF-, JPEG NG-: -r

n
. , JPEG n
, JPEG, GIF, TIFF, , , EPS . .
, n n
n.
, - n.
GIF, JPEG PNG.
GIF- JG-,
, PNG
. PNG
n .
GIF. GIF, nr 25
, ,
PNG
PNG (Portae Network Graphics)
, GIF.
no n
GIF (Graphics lnterchange Format).
PNG ,
, GIF.
n : ,
, n . . GIF- n
PNG24 PNG2 ( PNG24
) n
, ,
n JG- n .
, - ,
- .
, n
PNG24 PNG2 , n,
r, JPEG. n,
PNG, n,
JPEG n
, PNG24 PNG2,
, JPEG
( ,
). , ,
, GIF-
n .
GIF 25
, GIF
.
PNG2 ,
: 25 n (
PNGB,
, , GIF.
-). n
n
JPEG (Joint Photographic Experts Group).

, GIF
. JPEG
50%, -
, n. ,
JPEG n
lntemet Explorer Windows n

256 PNG2:
, IE
n . n
, n
GIF, n
n,
JavaScript (.,
http:/1 24ways.org/2007/supersleight
JPEG ,
transparent-png-in-ie}, n
IE 6 n PNG).
JPEG,
lnternet Explorer 7 8
PNG, Firefox, Safari Opera.
207
background- image .
-,
<body>:
body {
background-image: url(images/bg.gif):
:
url,
, .

URL,
, :
url(http://www.cosmofarmer.com/image/bg.gif)
:
url( .. /images/bg.gif) /* */
url(/images/bg.gif) /* */
>> (. ),
,
L-. ,
, , 81l .
, styles ( )
images ( ). ()
() (.
8.2).
, (
8.2.
1 . 8.2).
D. . ;.
styles.css
, -
, <body>
, bg. gi f images.

( 2 . 8.2). :
body {
background- image: url( .. /images/bg. gif):
208
8.
. . 1 ~. ,
styles;
images/ images>>;
bg. gi f .
HTML;
CSS
, .
:
background-image: url(images/bg .g if):

background- image: url ( "images/bg .gif"):
background-image:,url(' images/bg.gif'):
TnURL
()(!J
CSS n
URL: Unlform Resouce
, n
@ mport
locato ( , URL-a
pec) -
, -.
n , n .
n n: , m
. n ,
URL
(n, r
6-r, ).
,
, m ,
, n
n -
r .
http://, 1110r () , n
http://www.cosmofarmer.
com/images/bluegrass.jpg.
. n:
URL,
,
.
(m n
) ,
r ,
n n
. n
1 (),
n, -
(n,
: n
m ). ,
/images/bluegrass.
, n
jpg , luegrass.jpg
images,
. ,
http://,
- m
n n 6-
http:// .
File ~ Open
209
n n
( ~ n<),
. SS-
, -
. ,
- -
URL ,
, n
~.
L-
background
, - (
HTML , ) . , CSS

. background-repeat, ,
( ):
background-repeat: no- repeat :

. .
repeat -
- (.
no- repeat
8.3).
- ,
. ,
, <body>:
,
(
2 ).
- <di v>
.
repeat.- x -
( -) .
() - (.
8.4, ),
repeat -y -
- ). ,
- (. . 8.4,
) -
(, ).
210
8. -
. 8.3. :
, (); , ,
() -
,.
. 8.4 . ,
() () -
. SS-
posi ti on
background -
211
n
:
l eft, center, ri ght,

top, center, bottom (. 8.5). ,
- :
-.
:
body {
background-image: urlCbg_page.jpg):
background-repeat: no-repeat:
background-position: center center:
-,
:
background-position: right top:
center center
left center
center bottom
right center
center top
center center
8.5.
~-----------------------------------------------
n ( ack
, ),
ground-repeat
ackground-position. , n

repeat,
- n .
ackground-position , .
212
8.
,
-. ,
-
, (.
8.6, ),
body {
background-image: url(background.jpg):
background-repeat : repeat-y :
background -pos i tion : center top :
,
bottom, center top,
q
- ( )
repeat- (. . 8.4, ).
u( 2, , . 8.6,
.
~~
\~.'
...
.._
Center aligned
background graphic
tiled vertically
Botton1 .lrJncd g
t 1l('d 1101 1/0il t.J I Iy
.-
Jplc
. 8.6. ()
()
background-position
. 8.6, ,
. -- ,
, ,
.
--------------------------------------------------- :
<html>
<d>.
n n <d> , -
<html>
, ,
~ , .
,
IE !
213
Firefox
R , Fiefox
Firefox n
n . ,
bottom
bottom,
-.
, n
n n
~ . ,
- no .
: html
{ he1ght 100 t: }
( lntenet Exploer 7 n).
em. :
-
,
- ( ,
, - ).
, .
< 1i >
(.
8.7,
).
(. .
8.7,
). ,
5 8 .
.1 :
Jackground-pos i tion:Spx
606
rbll
8 :
PosltJoning
Don't leave
Water-proof
g
Kudzu is to
g Don't leave
g Water-proof
g Kudzu is to
g
-;:
ullets
0 G ~ h>;f/css.loal/ch08/plxtl_plxen,~r~
Google
)1
the hose running.

your planters.
avoided.
the hose running.
your planters.
avoided .
8.7. n
- n , n

214
8.
(bottom)
( ri ght) - em, ,
,
,
(bottom ri ght ), ,
,
, .
, . ,

, .

,
. .
, . ,

, .
-----------------------------------------------
n n
() n ,
-.
em,
: ,
. ,
? ,
.
- (
. 8.8), :
background-position:50% 50%:
,
50 % , 50 %
- ( ,
). ,
50% , 50%
- . ,
,
. ,

, -
).
215
20% ':
~----------------~------~
- -------:
~~r
_::-____
'
'
50%50%~
8.8.
-NJ
....'
'
'
'
'L----------
()
~-----------------------------------------------
!UI
n ~ ,
.
ern,
, .
;, , ern . ,
:-r
, u
, :
:::kground-position:
50%:
ujm
--l,
top
:,
50.
~-----------------------------------------------
:i, -, ,
-, .
:.:n, .
313 - ,
- , -
<img>
, -.
216
8.

- ,
, .
, .
, , .
-
, , , ,
.
CSS
scroll
scroll
fixed.
background-attachment,
fi xed
8.9). ,
.
, (.
-
,
:
body {
background-image: url(images/logo.gif):
background-attachment: fixed:
fi xed
. ,
( )
-, ,
.
-----------------------------------------------
SS -,
<d>.
Intemet Explorer
ackground-attachmet <d>.
background
,
, ,
.
,
background-image, background-attachment . .,
-
background.
background-color,
CSS.
background,
background-color, background-image, background-attachment, background-position.
217
ackground
Lorem lpsum
Lorem ipsum dolor sit amet. consectetuer
adiplscing ellt. sed diam nonummy nibh euisrnod
tincidunt ut laoreet dolore magna aliquam erat
volutpat Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit loortis
nisl ut aliquip comrnodo consequat Duis
autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat. vel illum
dolore eu feugiat nulla fcilisis at vero eros et
accumsan et iusto odio dignissim qui andit
praesent luptatum zzril deleni.
adipisclng elit. sed diam nonummy nibh euisrnod

tincidunt ut laoreet dolore magna aliquam erat
volutpat Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper susclpit lobortis
nisl ut aliquip commodo consequat Duis
autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestle consequat, vellllum
dolore eu feuglat nulla fcilisis at vero eros et
accumsan et iusto odio dignlssim qui andit
praesent luptatum zzril deleni.
adiplscing elit, sed diam nonummy nibh euisrnod
tlncidunt ut laoreet dolore
aliquam erat
.
8.9. n n n background-attachment
n
fixed

, -:
body {
background: #FFF url(bullseye .gif) scroll center center no-repeat;
.
. , background: 11 ow
background-color : yellow.
, . ,
:
:ackground : url( i mage/ bullseye .gif)
218
8.
background: url (image/bul l seye.gif) fixed left top repeat:

background
, ,

.
n
l! , ,
; n n
,
).
.
f. ,
n,
~ .
r. , Bullet adness
(www.stylegala.com/features/ulletmadness/)
Morgue File
200 ,
(www.morguetlle.com),
. Stock.xchng (www.sxc.hu) n . Open Photo (http://
openphoto.net/gallery/browse.html)
, n
,
r Creative Commons ( ),
r
: http://search.crealivecommons.
org. ,
Ceative Commos Flick (www.flickr.com/
creativecommons) Picasa Web Albums (http://
picasawe.googfe.com) ( ,
,
1:
, n :
n, iPod ( -
), . . Some Radom
Oude n 121 : www.

somerandomdude.net/srd-projects/sanscons. n
,
: Colour-lovers.com
(www.colourlovers.com/pattems), Pattem4u (www.
kollermedla.at/pattern4u) Squidfingers (http://
squidfingers.com/pattems).
n n
: gPattems (http://gpattems.com),
Stripe Generator 2.0 (www.stripegenerator.com)

PattemCoole (www.pattemcooler.com).
- n -.

.
, , r
,
.
1:
219
, ,
. , .

2.
08.

, .
1.. i mage .html 08\image_ex .

- CosmoFarmer.com
(.
8.10). ,
- n .
U..Citl~a.
........
"'t*~
: -:s~-~=~~- .. -~~....
-:~----- ___q.;;c - __._

CosmoFamer's
=--
-~
-~
Guide to Apartment Lawn
Maintenance
-._
_ __
t.orem ~ dot sn amtt, COOS"tetu
~u.....s
l'lioa>odooaduotut'--o!olotoaiqu8rn e:Rt \". tlt witi t':n!m . mnm

......."
.-....
.....
ipsvm
do1or sit_
ame.t. (OQiolfl('ki;Utr
~
olit,S<dd>am
_ .,......,
-..-
tiodckwd\4~~ lnli!I~CI1
et -.h><. Ut w>Oi<lmool- ,......"
uerdtai:So. tor.mfp5umdoJoratamer..~~ek.J414fham
. -ni..onod- ut-.WO...-aliquament
'Oiuot.Ut>Oioi.amod--quiJ........t...m
~~-nlslutali<._
..-...-.",.
....... Yd ..... - . .
l..alremjpsucndoklraatt. ~~- Rddtamt~m~WCDy
18h.......,..dadduntutlaonw:t-._all<..."evolulpoO<w..t
e.D1m.t n:lnlw ~ qw Aliii.Ndu.trei t8'G~ atllldpst iooc't:W

. oad \11: ~ comcnodo COOkQU8t. Duil wtero '~ f!ti'D t:iun: cWor iD
' enc1A!J'il: in vputete ..'elt~ mo\eiOt~ ,-eJ ihrn dolore. eu~
....
......
t.=:=.:::.=.::.::.::.==.:.J
~,
' ~ tahcm flbl ur ~uip e::t tommodo coasequn. J)ulsam wJ eum
Jdun.
........ lpSUindolot"'-~-~dt....Sdlom.......",.
' r. Nsmod tirlcidunl ut \lorett dolore owrpa a1iqun ent YOU::p.t. th. "-.1
: ooimod""'""'""-Qis-er<~-~fiiOCIJ>i<loo""'
, ral..adquipa.ea~~DUii4\IU!'.ra''tt~iri.aredoklrkl
; eodrelirin '~ ..'dil. moh.til toeqUllt,. "ffiillum1ol'eeu ~
m.ilkfatsls at 1tt01 tt 8tt'UO'WIII\ NP:o !~~ q\8 ..
.,_.".~-.Lomn
ddoaot"""'""'-. ...._ ....
ipsumdo1otJttamt.t.,conN!t'tl;tut:rlld.ipapsUJ.
8.1 . -: () n () SS-
8.10 -
liTML. . ,
( . . 8.1 , ). CSS
(. . 8.1 , )

ero
2. sty 1es . css image_ex .

,
i mage. html. ,

3.
<i i!YJ> HTML.
i mg .figure
220
figure.
8.
img. fi gure <img>,
. figure,
,
).
4.
fl oat
margi n:
float: right;
margin-left: lOpx;
margin-bottom: lOpx;
fl oat -,
,
. - ,
5.
.
:
img.figure {
fl oat: ri ght :
margin-left: lOpx:
margin-bottom: lOpx;
border: lpx solid #666;
padding: lOpx;
- ,
,
, .
6.
styl es. css image. html. <img>

cl ass="figure" ,
<img src=" .. 1
images/grass.jpg" alt="Apartment Grass" width="200" height="200"
class="figure" />
,
.
7.
figure.
- . , ,
.
8.1 ,
-, ,

08_finished\image_ex, image. html.
, -
, .
.
1:
221
, . . ,
,
, .

<d i v>, -
- , ,

-.
1.
capt i on. htm l
08\caption_ex
L-.
L- .
2.
<img>,
<div cl ass="figure">.
-. <di v>,
3.
</>
</ di v>. :
<div class="figure">
<img src=" .. 1
images/grass.jpg" alt="Creeping Bentgrass" width="200"
height="200"/>
<p>Figure 1: Creeping Bentgrass is best suited for outdoor use and should
avoided the indoor farmer.~/p>
</div>
,
4.
( sty l es. css ),
styl es. css
-.
08\caption_ex.
, , ,
<style>.
5.
.figure img {
border: lpx solid #666:
padding: lOpx;
<img>,
,
figure,-
<di v>.
(
7), <img>.
, L-,
-.
222
8.
<di v> ,
- () ,
.
6.
sty 1es. css
.figure {
fl oat: ri ght:
width: 222:
margin: 15 lOpx
lOpx:
fl oat: ri ght ,
margi n
<di v>.
, ?
(200 ; .
3 ),
<di v>,
. ,
, .

, -:
200 1
()
222 .
7.
styl es. css
.figure {
font: bold lem/normal Verdana. Arial. Helvetica. sans-serif:
color: #333:
text-align: center:
, .
6,
, Verdana
. ,
font
(. fi gure
.
, -.
8.
. figure
. figure {
color: #333:
text-align: center:
background-color: #efff;
border: lpx dashed #666;
padding: 5;
1:
223
background-color, border
padding
() .
.
9.
caption. html styles. css

capt i on. html .
,
-
.
- :
, .
: ,
,
, .
,
CSS.
.
<>, , ,
styles.css
<>. , ,
10
, -
8.
,
(
. . :
.
. figure
5).
. ,
:.
. figure .
margin
figure
.figure {
color: #333:
text-align: center:
background-color: #e6f3ff:
border: lpx dashed #666:
padding: 5:
margin: lOpx
0:
caption. html styles. css. - caption. html
.
- ,
.
8.11
).
08_finished\caption_ex
224
~ ....
00
---Foqllotor
iJ
\\o--irnk3\-\DoamenbiD~writiogiDO.
v,.,.. F"""'ttes Toots
8.
't 1! LiveS>td>
tlp
............................................................................................................................
j Cosmofarmer's Guide to Apartment Lawn Maintenance
:----------- ------- -----

~ Lorem ip5um dolor sit a.tnet, consectetuer adipiscing e!it, sed diam
1oonummy mh euismod tincidunt ut Jaoreet do\ore magna
! a]jquam erat volutpat Ut wisi eaim ad minim veniam, qui<;

! nostrud exerci tatio. Lorem ipsuro do\or sit a.tnet, consectetuer
! adipiscing elit, sed diam oonummy mh euismod tincidunt ut
j Jaoreet dolore magna a]jquam erat vohrtpat Ut wisi enim ad
! minim veniam, quis nostrud exerci tation uDamcorper suscipit
! \oortis isl ut aliquip commodo consequat. Duis autem vel

; eum iriure.
---'"---
.:=:::::o":w
!:::::;
Lorem ip5um dolor sit amet, consectetuer adipiscing elit, sed diam
~:::::.:
~
oonum.my nib euismod tincidunt utlaoreetdo\ore magna
:.. ~~-~!'.':~.~~~: ...
llliquam erat volutpat. Ut wisi enim ad minim veniam, quis
oostrud exerci tation uDamcorper suscipit Joortis nisl ut aJiqujp commodo consequat. Duis
autem vel eum iriure dolor iD eodrerit in vulputate velit esse moJestie consequat, vel iDum dolore
eu !e1J8iat ~~cuJJa facilisis at vero eros et accumsaD et iusto ndio dignissim qui Jandit praesent
Juptatum zzril delenit augue dui.s dolore te !eugai.t nuDafacilisi.Lorem ip5um aoJor sit a.tnet,
: consectetuer aclipiscing elit.
~
Lorem ip5um dolor sit amet, consectetuer adipiscing elit, sed diam nooummy oibb euismod
j tincidunt ut 1aoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, qui.s
! nostrud exerci tation uDamcorper suscipit Joortis nbl ut aliquip commod.o consequat. Duis
j autem vel eum iriure.
!'~COP-itiiG;.~T2006:OSNOF~jtfA.OM "
. 8 .11. -
....... ..................
.....
- -------
<div>,
n , n nn
2:
- L-
<t >, , .

SS- L-.
1.
gallery.html
08\gallery_ex.
-,
L-, . -
n .
- <di v>, figure.
<di v> , <di v>,
n .
<div>,
photo:
225
2:
<div class="photo">
<img src=" .. /images/dandelio.jpg" alt="Dandelion"
width="200" height="200" />
</div>
<p>Figure 6: The dandelion: scourge of the apartment farmer.
</>
</div>
-----------------------------------------------
-
<div> ,
. 2.
Enter
<l i nk>,
<l i nk> ,
-.
3.
.photo img {
paddi ng: 4: }
. figure {
font: l.lem/normal Arial. Helvetica. sans-serif:
text-align: center:
margin: lOpx 0:
}
</style>
-
, .

, .
- <di v>
ga ll ery, <di v>
.
.
<di v>
, . ,
#ga ll ery i mg #ga ll ery
#gallery img
.photo img,
. photo i mg.
.
~-------------------------------------------------
,
,
<link>
</head>.
226
8.
4. :
.figure {
float: left :
width : 210;
margin : lOpx lOpx lOpx ;
, (</~
.
, ,
.
, , . .
-.
:
200 , 8
2 n -.
----------------------------------------------------
8 n
. , , (
5). ,
HTML ( ,
, ) .

r n n
,
, .w,
Cosmofarmer, r. rr
{ width:
. ,
300)10r: w
? -
310 }. n
<d1v> figure (
.w n
n: R
r, ).
figure,
. figure .
(210 300)
, nR n 11 (. . S).

CSS : <d 1v
n, n
class"figure
w">. <div>
5.
f1gure, w.
. f1 gure, .w
,
.
- ga ll ery . html .
, .
8.12, .
8.12 ,
( . . 8.12, ) . hei ght
.
n (. .
8.12, ).
2:
227
. "...o:t.'ll ,,.<~~>'..r~ t~: .., , .,.._... ..,:c.ot~w -,c-f',..~ "., "~...., " ''~ " '"' "' :
'.!Of\:lh(!'lt \,..\.~1>/0'.'" ,.-,"" ............
8.12. , n , -
, , -
. , . ,
. ,
. ,
,
. , ,
( ,
float, .
.
7). , .
--------------------------------------------------- n n ,

5,
, n .
float, 1' display: iline-ock .figure.

, /n (,
), (
). , vertical-alig,
.
.figure
. figure {
di spl : inl ine-lock :
vertical -align : top :
width : 210:
margin: lOpx lOpx lOpx :
}
n , IE ,
IE 7 Firefox 2.
IE 8!
228
6.
8.
gallery .html L-. . figure

height.
. figure {
font: l.lem/normal Arial. Helvetica. sans-serif:
text-align: center:
margin: lOpx 0:
height: Sem:

. ,
( ,
).
-----------------------------------------------
n height, , n
. n,
, nn nn .
7.
-
. . 8.12.
, .
,
, ,
.
. ,
.
-
. ,
Photoshop, ,
.

CSS.
-------------------------------------------------
$5
3 n
ox-shadow,
. n , n n,
. n .

, .
08\gallery_ex , ,
, Photoshop, Fieworks
, .
Fireworks,
,
,
1.
PNG8.
L- ga ll ery. html,
.
2:
229
-,
<di v>,
2.
- :
.photo {
background: url(drop_shadow.gif) right bottom no-repeat:

<di v> .
drop_shadow. gi f
no-repeat ,
-, ,
. , ,
,
-
3: ,
4 . , , -
.
,
(http:/1
www.clagnut.com), - ,
-
<di v>. CSS ,
, , .
.

13, , ,
. photo i mg, 3.
-----------------------------------------------
n
n
3.
- n .
http://1976design.com/iog/archive/2003/ll/14/shadows/.
. photo i mg
.photo img {
padding: 4:
position: relative:
top: -Spx:
left: -Spx:
, 5
,
<div>.
<div>
4. - . ,
. 8.13.
,

Photoshop!
230
8.
[ CosmoFarmer.com's Indoor Grass Photo Gallery
:------------------------------------------------------------ ------------ ----

; seleclion oflodoor sod opdons: revie~ved and restcd yCosmoJ"anner.com ln our srate-oflhe-an "Apanment
: Laorary" 5th 'o'l!llue.
8.13. n -

-----------------------------------------------
n
375 375
n,
n n . n n
, n .

, -.
: <i mg>
<di v>,
<img>
.
,
.
3:
231
OB_finished\gal/ery_ex .
-----------------------------------------------
,
. , .
,
alistapart.com/articles/cssdrop2/
http://www.
http://www.ploughdeep.com/oioski/.
3:

SS-
background-image- -.
.
HTML-ery, ,
, .
, ,
-,
. ,
background-image .
: ,
,
-.
background-image.
1. sidebar .html 08\g_
L-.
- : ,
(.
8.14,
).
, ,
,
.
2.
body {
background-image: url(images/bg_page.png):
background-repeat: repeat-x:
<style>
232
!Jk . . . . .
......,...,... _~- . . . . . . . . . . . . . . .. . . . . . . .
8.
.... . . .
. . . .
. .. . . .. . .
. .2
~1: ~ [Jj~~~~~~~:""~~:=:.~~-:.:~ lD~"i-~~~=~-=-~
CSS: The Mi~sing Manual

ANNOUNCBMENS
Lorem lpsum Dolor
LCf8111Pa/111 :* 5.:
QIA1'11:8Nma8'dolaorl8ll-.
&.as .. tenpen n
.....
..'4'118
. . ,..,.~
. qu~,......"...,.Ln......,..
--~I'IOtl~
Sat
Slllclut~------1\111.&5:.vrJC~~~
~.ll:ll':altl\ren~~~~.e:tt'!ore...._tlt~~tctD
~.~
........
ft8110cniiii_..~~WOi.CIII:---..odl.._,_..
r-.w~--~--pam)
~-.q,~~e~~r:~~~nm.-q,~~~~,dc*lr,...~ .-s...__.~nan
fllemgfll8n~~
~--mad---~\fi!!enltcta'tfiiiO'*I\ . . . . ~
~IAIPD..,tN'ItN~qtA~a~*n~~
fl&lo'o8n.ttlilut..,.rcs(llllllllf'I'IC~
qw..-., .,.eum~"'
~. ytlla...~-....an~UJW
__..,..
C8CquI
tfl........_
........ ,_.~
Nisi ut Aliquid
--...ut_.. ...
~t'Niit.,88'81NW88m.48~t1~'*"'~SIECIII~
CJOIIil'l'ai~~_..,.Yfl .................., ..
Y'CILtll*.".._.4alrl\fiN~~.'td._Wdat:lrelriN'niUQI8tlll'8)
' !~. ~.
,,
"
.. . .
~~~~.~-~-~Sa~~~-~-w~----~---------
sedtA.~UDC:k!OCI!Na"*"or st ~~~
-..,...CicD.an.n--.
~11:181mrtm1Ptf11m,.~-q.QcaC) 6> 11'1wcntottwtW8d.q;lllld'I&:Io
f!IIOPII~~QA---sc~octta.~Si!fCIUI
~IN!IJI!dotlrOCIO&OoJQCfi::)nt~~~NoQwpono
~-q,Jidotwmt~-ckO'..s.~.~ vtlt. -4.81'10n
ANNOUNCIJ.8N1'S
t
UWti'I\~OdOf$1(
=~-==
----QI8~'WI8.1t.
.............
..
Soci(JII rCIP ~-mct
fiUn.!41IMOCitemP~\A~ti<:IO't'~__.~
~ut*n.ad l'l\t'irNV8iWQ. IPsflDW\81til~\IIVII a:Jtii(Qt
~nlllut~--~~)'
~---------------sea~~~Ol'IW'8ilkNamcr 'i'Cii.ipQttm~oaemQUe
.......... .um rt'lll'~ ~OWCI*I I:) twrncwe'l'lttotCq181Jfdtao
----
. . . . 'itdt:;taJUreeiQc.. N'IO"'"(I!Am . . . . . . .*~- ........

UOIII:Ntug(..dqA~~INIQnitftcc,A,.....~~
~Ni1!4Jtpono~-.-dc*ltaa'*""dc:D stl<!!. ~
..-a.wd48non~d.S'I'IOiiWIIPOUmdWitUIIIitll:n&c81:*n
...
-.
8.14.
- () ()
n page_bg. jpg, I(OTopoe

-. images.
, -
.1:1 .
3:
233
- -
.
, , -
, .
,
background- repeat,

, .
,
.
-----------------------------------------------
, ,

2,
ackground:
3.
#FFF
url(images/g_page.png)
repeat-x;
.
- -
. , .
, .
4.
<di v>,
bg_ i mages . htm l.
#wrapper {

<di v>
. ,
5.
4,
#wrapper {
background-image: url(images/bg_main.jpg);
background-position: top left;
background-repeat: no-repeat;

<div>;
no-repeat
background-repeat
, , .
. ,
.
234
8.
6. :
#banner {
margin-top: 48:
}
#announcement {
margin-top: 115:
,
, , ,
,
. ,
. 8.15.
Lorem Ipsum Dolor Sat

s.t\l:~urtde._.8R,_.8"1'01'Jt~~~
~toenrwn....-,..-...
ANNOUNCI!NS
I.tenlpunOci!DrSir
~.-....-
............................
Qu4&1t8"t'l'de.;m~~
..........."_"_
S:IQUinon~Nmodl~hitun
.-aJ~_...d:..,.
~...>ARCIIaaUit~.
....., _ _ _ q..-_ .. _
........ ,.... .....
_IA_od
__. .--....-.--801..
--.
. .--.
~I'glll dolola-quil'ltlelnc~ ......
nectunt.. Nieq\ttparro
, qult _ _ _ _ a.cjpil
non nutfIU' t tnOdi tl8'tlpcn incifl.lnr: \1: iiort' et dolott ,...,...". 8llqiA8I\ . , _ .
~.I'IWutllcrJ'daQitIICidl~?
Qull.m'41unU.~qWin~"""-.-mi\NII\ICiiI:IIIc
~. Wl11umqill dolof8'n
quo 't'Oia8 " . . ~?
-.-..................
........._.,__ ..... ___ _
____
.,.._
----.....--....--...-..
ru;a.
Nlsl ut Allquld
S.Sioltper!l\'idlds"*~*n~.~a~-~~~
_......
~1:1881t...C~tr.ltltoPIQo. Nemotnllfl_...~
. . ~
.".,~.adlpilrj.._ .Squi,lnon~tmod-.or--.-..IA'
IIared:cil:*n.".....,liQcamql.l8'1t~.
\tdn ldiWN~ . . NJn.am~UIIIm<Df'PO'N...-~

1\i\.CIIQuido~~Qultu.n ."....,.'"~quln
~wlt:-~1\N~~. "'I~cP~"'"'--quo
....,,.. ..... _,
. 8.15. CSS n3 36,

3 3
border (. . ~ . 7) -
-, CSS
. , ,
, .
border -
3:
235
<h2>
, .
1.
bg_ images. html

<h2> <di v>:
#main h2 {
background-image: url(images/underline.png)
background-image
main;
no-repeat
<h2>,
, .
, ,
, .
!
2.
#ma i n h2 background- repeat :
background-position: left bottom;

.
,
<h2>.
:
.
<h2>,
,
. .
3.
#main h2
#main h2 {
background-image: url(images/underline.png);
background-position: left bottom;
padding-ottom: 7:
, (
) . -
7 .

4.
h2.
- .
<h2> .
, ,
.
236
8. -r
, ,
, .

background-image,
. , ,
, - .
1.
sidebar. html
L-.
#announcement li {
list-style: n:
<di v>
announcement,
( <l i>) <div>. .
.
-----------------------------------------------

list-style: n; <ul> <ol>,
-n n.
2.
#announcement l i
background-image: url(images/flower_bullet.png):
. ,

, .
- ,

(.
8.16, ).
.
ANNOUNCEENS
ANNOUNCENS
Larem Ipsum Dolor Sat

Quls nostrum tDa!"tittccnen ull8m
8usmodltnpora
Qukai!m'!!I!Um-..re~
Quiseutem veleum iure ~
Sed qui8 non numqum eiul m tempora
Ssl quia non numquern eius modi ternpora

inddun
._",
[_____________ - - - - - - - - - - "( Nsno s1im 1pslm
8.16.
n:

3.
#announcement 1i
padding-left: 25:
3:
237
, ,
.
, (. .
8.16, ).
.
, .
backgroud-positi .
4.
background-position:
4:.
:
#anouncement
li {
list-style:
n:
backgroud-
image: url ( images/bull et . png):
backgroud-repeat: o-repeat:
backgroundposition: 4:
paddig-left: 25:

(
0), 4 -
, ,
, .
~--------------------------------------------------- ackground
list-style-image
n. n n
.
5.
- .

(. .
8.16, ).
, ,
,
.
,
.
8.14,
<div>.
, ,
, ,
. ,
; ,
, .
,
(.
8.17, ).
238
8.

), r
<div> announcement (
<h2> ( ~Announcements)
( <ul>). ,
L- (
<h2> ),
- L- ( <ul>),

(. .
<d i v>,
8.17, ) .
ANNOUNCENS
ANNOUNCEENS
1.0/Wn lpun Oolot Slit
1..0/Wn lpun Dolor Slt
Qull _ _.....,.-n
Quiii'IOIINm iJ...ii ullln
EU 1110(!118d lrdllunt
. modllllmpot8 Jnddunt
Qull-..... ..."""
Qull- wlemo u..
11111. . . . .
'~~"
Sed qul8 non .numqu1111 . . modl

t8npola li>ddl.n
Sed Q\118 non numq.-n

c.mpora hdd\ln
......
modl
N8notnh . . . ~
.nonnfp8n~
1..0/Wn lpun Oolot Slt
Qull- _ ....... ullln ...

EU modll8n1)0tll Jnddunt
.........
Qull_wl.,m.
Sed qul8 11011 IIUI'IIQI8n . . modl

toempore~Ddd\8~
<div id="announcement">
<h2>
<ul class="last">
.8.17. , ,
, ,
1.
239
3: n
#announcement
bg_ i mages. htm l.
) :
#announcement {
background: url(images/scroll_middle.jpg) repeatY center top:
margin-top: 115:

<di v> ,
, .
, ,
<di v> , .
, ,
, . ,
,
.
2.
#announcement
l i, ,
#announcement li {
list-style: none:
background- image: url i mages/bull et. png):
background-position: 4:
padding- left: 25:
margin-left: :
margin-right: 40:

,
. ,
3.
<h2> .
<h2> :
#announcement h2 {
background: url(images/scroll_top.jpg) no-repeat center top:
.
, , ,
(.
8.18).
. ,
<h2>
, . q,
, ,
padding.
240
8. -
~""-ANNOUNCENTS -- ~ .."
1
... l..o11!111 lpsum Dolor Sllt

Quis nostrum exercitltionen ulllm
. :\. Eius modl tempora lncidunt
. :r:
Quis autem vel eum iure
reprehenderit
::
Sed quia n numquam eius modi

tempora incidu
8.18.
Nemo enlm ipsam volupte
( ),
, . n,
n n n
4.
, n ,
:
#announcement h2 {
background: url(images/scroll_top.jpg! no- repeat :
padding-top: 70:

70
, ,
<h2>
.
Announcements

<di v>.
-----------------------------------------------
, n , n . , ,
n, n
. ' , n

CSS HTML,
n :
www.vertexwerks.com/tests/sideox www.sperling.com/examples/ox.

<u 1>.
L-.
5.
<ul> ( <di v id=" announcements"> <h2>)
class;"last":
<div id="announcement">
<h2>Announcements</h2>
<ul class="last">
? . 8.17, (
) ;
, .
, #announcement
ul,
241
, .
, ,
#announcement . l ast.
HTML , l ass=" l ast"
( <h2>; ,

#announcement . fi rst
<di v> ).
l ass=" fi
rst"
6.
#announcement .last {
background: url(images/scroll_bottom.jpg) no-repeat center bottom:
padding-bottom: 65:
,
<ul>.
<ul>
, .
, ,

7.
<di v>.
.
, .
8.14, .
IE 6 IE 7.
, , - ,
, . IE,
,
, , .

8.
IE 6 IE 7.
bg_ i mages. htm l zoom:
1 #announcement
. :
#announcement
background: url(images/scroll_middle.jpg) repeat-y center top:
margin-top: 115:
zoom: 1;
,
IE, ,
, , .
CSS,
, , ,
( -)!
, ,
.
( styl es. css ),

242
8.
-r

( , ,
#announcement,
).
" ,
.
(,
#announcement)
#announcement
(,

styl es. css ).

g_ex_further.
,
08_finished/g_ex
08_finished/

"'

, .
-, , ,
, ,
.
.
-
, .
,
. ,
, ,
, - . -
CSS
. , ,
CSS,
, ,
CSS , ,
, .
-
. ,
CSS,
r
:
;
( , ,
URL-apec );
( );
( ).
244
9.
3, CSS ,
: l ink, : vi sited, : hover, : active. ,

, ,
-----------------------------------------------
Iteret
Explorer 8, Opera, Firefox Safari :focus.

:focus,
.
,
10.
-. :
a:link { color:
#F;
, .
-, :
a:visited { color: #900; }

~--------------------------------------------------- ,
, <>, .
,
a:visited,
- .
: hover
).
eJavaScript,
CSS (. . ~
1> ). ,
n :
a:hover { color:
#F;
~---------------------------------------------------
CSS
:hover.
, , ,
. , ,
, ,
. .
!> -,
.
, ,
. :
a:active {color: #B2F5ll; }
245
: l ink, : visited:
:hover.
, ,
:
l i nk, vi s i ted, hover
act i ve.
LoVejHAte
( ~/).
a:link { color: #F: }

a:visited { color: #900: }
a:hover { color: #F: }
a:active {color: #B2F511: }
,
hover active
l i nk : vi si ted,
. , : hover :
-----------------------------------------------
? (. .
5).
, ,
, .
uvisited ( )
hovered (
, ), a:lik, ,
(),
a:hover

, ,
<>. ,
,
-. ,
, -?
, -
, (,
, , ). ,
, , - ,
.
:
<
href=http://www.hydroponicsonline.com
class="external">Visit this great resource</a>
:
a.external :link { color: #F: }

a.external :visited { color: #900: }
a.external :hover { color: #F: }
a.external :active {color: #B2F511: }
246
9.
, <>,
:
.external :link { color: #F: }

.external :visited { color: #900:
.external :hover { color: #F: }
.external :active {color: #B2F511: }
,

externa l .
------------------------------------------------
8 n
SS-. n
, .
-, ,
. , ,
.
,
.
:
<di v>
<di v i d="mai nNav">.
#mainNav
#mainNav
#mainNav
#mainNav
a:link { color: #F: }

a:visited { color: #900.: }
a:hover { color: #F: }
a:active {color: #B2F511: }
,
- - (
.
~ .
15).
-------------------------------------------------------
( n ).
<ul> , <ul id="mainNav">,

#mainNav a:lik .

, , ,
, , . !
CSS,
-
. , ,
.
, -,
, .
247
, . ,
, .
, ,
, -,
.
(, ), ,
-
.
~---------------------------------------------------- order <img> ,
- , . ,
:
img {
order: ;}.
: , -~.

-. -
, (.
9.1, 1).
, .
. ,

text- decorat i on
none:
{text-decoration: none:}
, .
, - (. . 9.1, 2).
, -
, (. . 9.1, 3), ,
.
.ii ii u.
- ,
- ,
, .
9.1, 4.
, ,

: hover:
{
text-decoration: none:
background-color: #FOO:
}
a:hover {
bac~ground-color: transparent:
text-decoration:underline:
248
9. 8Q ~
;-------"- --- --------

... --- -~ ------- ----"
: Nonnal Llnk
; : No Wnder11ne
1
1 Lorem ipsum dolor sit ~ consectetuer
: adipiscing elit. sed diam ii5hummy nibh

f
~ euismod lincidunt ut taoreet do!ore magna '
: aliquam erat volutpat. Ut wisi enim ad
; minim veniam . quis nostrud exerci ta\ion
; ullamcorper suscipit lobortis nisl ut aliquip
j commodo consequat. Duis autem
vel eum iriure d
,.,_ ...,. '"'"* '
... ~~ *
- .......
......- -
- ...........
..... ..
" "
! Lorem ipsum dolor sit amet. consectetuer
---------- -
~~~~~~- eum iriure d
..... .........
-.. . ....
,_,,

adipiscing elil sed diam nonummy nibh
euismod tincidunt utlaoreet do!ore magna
aliquam raivoiuipai. uiwisi enim ad
minim veniam. quls nostrud exerci ta\ion
ullamcorper suscipit lobor\is nisl ut aliquip
commodo consequat. Duis autem
vel eum iriure d
9.1.
''"""" " " -' '-""
- --................ ----
Underline on Hover
Lorem ipsum dolor sit amet, consectetuer '

adipiscing elil sed diam nonummy nibh
euismod tlncfdunt ut \aort ~
magna aliquam erat volutpaL ~ enim
ad minim veniam. quis noslrud exerci
talion ullamcorper suscipit lobor\is nisl ut
; aliquip commodo consequal Duis
i.autem vel eum triure d ............ ..... .... ... ...

:;~kg~~~~d ,;~9~---
: Bottom Border
-- - r
~--
No Under1ine Highlight
Lorem ipsum dolor sit ame1 consectetuer ,

adipiscing elit. sed diam nonummy nibh
euismod tlncldunt ut \aoreet dolore
magna aliquam erat volutpat. Ut wisi enim
. ad minim veniam, quis nostrud exerci
: talion ullamcorper suscipit lobor\is nisl ut
1 aliquip commodo consequal. Duis
: adipiscing elit. sed diam nonummy nibh

'
euismod lincidunt ut!aoreet dolore magna
aliquam erat volutpaL Ut wisi enim ad
minim veniam. quis nostrud exerci tation
ullamcorper suscipit tobortis nisl ut aliquip
commodo consequat. Duis autem
vel eum iriure d
;
:
'
:
... 111
Lorem ipsum dolor sit amet consectetuer

adipiscing elit, sed diam nonummy nibh
euismod Q9!.0.!.!!1lt9~~-c!Q!.Qt~. magna
aliquam erat volutpat. U! wisi enim ad
minim veniam. quis noslrud exerci tation
ullamcorper suscipit lobor\is nisl ut aliquip
coinmodo consequat. Duis autem
vel eum iriure d
(7)
n: (2, 3, 4)
n

border (5)
(6)
101 IDi r.
, ;
1 ,
border-bottom, . 9.1, 5.
border-bottom: dashed 2
#9F:
, r.
,
padding.
249
101 101.
, . , .
9.1, 6, ~
~ 2
r .
8.
Fireworks
Photoshop, Brush (),
, . . ,
.

.
:
background: url(images/underline.gif) repeat -x left bottom:
padding-bottom: 5:
( 1-3 ),
, ,
Internet Explorer 6 7
(IE 8 ~

).
n
,
.
border,
background-col paddi ng.
(.
9.2).
1 CosmoFarmer 2.0 1
1C08111ofanr 2.0
1CosmoFarmer 2.0 1
CosmoFarmer 2.0
s r.1tJ 1 ;,
1~
r.11
CosmoFarmer 2.0
; IJ
1. 9.2. n n ,
- , ,
, , .
: < link~stale.html "
class;'"button">Free Donuts Here!</a>.
250
9.
- (. .
}, :
9.2,
a.button {
border: solid lpx #000:
:
a.button {
border: solid lpx #000:
------------------------------------------------
a.butto, .butto . a.butto
<> butto, .butto

. ,
, :
CSS - ,
. a.butto, , .
: ,
- . ,
- .

, .
9.2.
, ,
. , ;
. - ,
(
).
~ ~.
SS- -,
. 9.2, :
a.button {
background: #BlBlBl:
color: #FFF:
fot-weight: bold:
border-width: 4:
border-style: solid:
border-top-color: #DFDFDF:
border-right-color: #666:
border-bottom-color: #333:
border-left-color: #58585:
( )
:hover.
,
.
:
,
. .
251
.
, ,
, L-
<img>.
SS- background -image,

.
. 9.3 (
1
).
... ... """""' -""""'-' """"""" '""'"

! Normal Link
"
""""""'"""
...... -
...
~ Lorem ipsum dolor sit amet, consectetuer

; euismod tincidunt utlaoreet dolore magna
; aliquam erat volutpat.
........ ..... ........ -
euismod . . .
!; magna
atiq-uam erat voitPai - - - -
.. -~... ~.. ~- ............ .......... ~... -~-...--- "- - --- ~- - ---- - ---J
. . . .... .
j lmage in Button
Lorem ipsum dolor sit amet, consectetuer
! adipiscing elit, sed diam nonummy nlbh
. . ..
_ _ _
; .......,_, ..................... ......... ......... .._........ ... , ............._

1 Bold + Border + lmage
;""' " """""
:
;
.................................................................. ................. .
!. lmage + Background
i
~
! :
l
......
0 _..., ' '0 0 -' 0
-~--
' ' ' ''''' _..._ 0
'" 0 ''' '
+~'>
-- '''' ' '''"'' -
0- 0 H J
...... ....... .......................... _, .... _, .. ... - ........... ........... ... .. _ ........
Lorem ipsum dolor sit amet, consectetuer

euismod laoreet dolore ~ kasdfktj dsk~
; ksajdf kljsad fkljs adfklj sadkl~ lskadjf kljs
~ dflkj sakdl~lksjd
9.3.
.., ..
- -- -
-- .. -
- .-
,_,-.,._,._.,_.1
.........
!'' " '"'"""""'"""- '"""" "'"""''"''"""'""' " ""'" " '""'" " "'"- """"""'""'""""'. . .
! i Vlslted Links
Extemal Llnk
~ ,_-k,."---
[ Lorem lpsum dolor sit amet, consectetuer

! adipiscing elit, sed diam nonummy nibh
~ euismod laoreet dolore.; kasdfklj dsldj
ksajdf kljsad fkljs adfklj sad lskadjf kljs
dflkj sakdl~lksjd
!
!
: (5)- ,
(6) ,
background- image , ,
. .
8.
.
101
no-repeat.
. ,
, (. . 9.3, 2).
, ,
:: - :
background-
repeat: no-repeat: .
-,
9. n
252
background-position.
, backgroundposition (. . ~ . 8).
,
, SS
:
background-position: right center:.

em.
. :
,
,
:
background-position: lOpx 50%:.
----------------------------------------------------
n n n
( n n) ; -
( n ) .
,
. ,
,
1;1. ,
.
,
.

backgroundposition; background-position: right top;. ,

:kgrund-sitin: 90% 75 %; -
,
90 %
, 90 %
. ,
( ,
,
~ . ~ .
8).
padding.
(. . 9.3, 3, 5 6),
; . ,
9.3
30
( Home~) ,
5
.
-----------------------------------------------
<> ,
( n) . n n n
. n n . 7.
. ,
n. n n.
253
. .
: hover : vi s i ted.

, , ,

,
, ,
(.
9.3, 6).
: hover ,
J:f, ,
.
, .
. , ,
.

:
-, , -,
.
. , ~~.
~ ~. ~ ~ . .
, ,
.
.
CSS
, . .
, , ,
. .
1, HTML
, . ,
,
. ,
<u 1>, .
,
-:
<u 1>
CSS. . 9.4.
HTML -
. ,
( , ).
254
9.
f6 .
~~ ------:
. __
Features
-----
... i
FEATURES ,_ '
- -------- ... i
~ ---,,-------+:~ EXPERTS
'
- - - -i
~
: ~QUIZ
~
f
- - - -i
Horoscopes
: ~ PROJECS
QUIZ
... J.-- ... --,.. ........... - - ...........
PII. 9.4. CSS,
" "
PRO)ECS
&.---- . --------.......... ,
<ul> , ,
(n }

(10-)
<ul>:
<ul class"nav">
<l i><a href"index. html ">Home</a></1 i>
<l i><a href"news. html ">News</a></l i>
<li><a href"reviews.html">Reviews</a></li>
</ul>
SS- ,
.
.
1. .
, , l i st- s ty l - type
n:
ul .nav {
l ist-style-type:
n:
2. .
, .

paddi ng, - margi n,

0:
ul .nav {
list -style-type :
n:
padding-left : :
llarginl eft: 0:
, ,
- (
: ).
. ,
;
, .
255

- ,
. ,
( ), ,
, ,
1.
. <>
, ,
. (
,
Home Our Products) .

(.
9.5, 1). ,
. ,
:
u1 .nav {
disp1ay:
k;
1ock ,

. ,
, (, ), -
( Internet Explorer 6
; ).
2.
m .
, .
-,
(. .
9.5, 2). .
<>. , ,
u1.nav {
disp1ay:
8 em, wi dth:
k;
width: 8em;
, ,
<1 i> <u1>, .

,
, .

: { height: 1.25em; 1ine-height: 1.25em; }.
-----------------------------------------------
width,
-, . 3 ,
, -r.
, -
.
256
9.
fJ
11

... .... . -- --~
...
~- ~
'two
'
tkree
fov
................. --- . . ~
- -- ----~
......................... .J
hfo
~
for
11
9,5. n
, <>, Internet
Explore 6 . -
(. .
9.5, 3).
IE 6 , .
IE 6
. , , ,
,
IE 6
,
.
, r . ,
<> ,
IE r.
3. Intem et Explorer.
, IE
ul .nav
zoom:
{ zoom: 1: }
257
IE 6 ( IE 7)
12,
zo0111: l . CSS - ,
IE.
zoom -
CSS, .
,
htm1, * htm 1
u1.nav { zoom: l : }. , CSS

..
IE ,
.
, ,
. , , ,
. ,
n , ( )
.

n n
n
n ,
. ,
. ,
n , , ,
, n ,
( n
n, .
).
<u1>,

CSS n ,
, , . 9.4.

.
di sp 1 : i n1i ne -
, n
. , n

<u1>.
,
<u1~, .
9.6, 1.

lock ( )
disp1ay i n1 ine ( ). CSS.

1. cpoeiUI.ie .
, ,
258
inl ine
9.
display
(. .
<l i>
9.6, 2).
ul.nav li { display: inline: }

, -
. , ,
.
2.
.
.
,
. .
, .
,
.
9.6, 3 4:
ul. nav {
border-bottom: none:
padding: 5 15 5 15:
margin-right: 5:
background-color: #:
text-decoration: n:
color: #333:
-----------------------------------------------

,
display
k. ,
, -
( , ).
3.
<ul> . <>
7.6. , lnternet Explorer
. <>
<u l >,
( .
9.6, 3).
<ul>,
n ,
<u l >
<u l >
(

<ul> ).
em
259
n r
11
tiO.I
~
cgrnorate pbt!osoobv
~--
Heading for this page
~-~~?.':'!-.':'..~~???~~-~ ~~?-~~~-~ ~-- ........... --~Heading for this page
11
!
; .! Aout us !- j <:otJ>ate Pho1osophy ~ ~ Sto\_j ................. .

. 9 .6 . n n
n
<ul>, JI
2,
ul .nav {
margin-left: ;
list-style: none ;
padding- left : ;
padding-top:
padding-ottom: 5;
border-bottom: lpx dashed #000 :

. 9.6,
r
<ul>.
4,
, ,
, r ,
.
.
------------------------------------------------------ n -,
r <ul>
text-align:
cente;.
260
9.
n ~r i
n
,
, ,
., ,
Menu -
n n
n. n
n m
: n
n n n.
, n
Pure CSS
, -
n.
HTML css (http://purecssmenu.com). n

CSS
, , - , n
.
n CSS Son of
Suckerfish ( Suckerfish).
n: n SS-
n- JavaScript-o n
) n h~://
n ( n
www. htmldog.com/articles/suckerfish/dropdowns/.
JavaScript ,
).

, n
h~://www.tanfa.eo.uk/
a;sfexamplesjmenu/tutorial-h.asp.
JavaScript nn
jQuery Simple Drop Down Menu (http://javascript-array.
comfsaipts/jquery_simple_drop_down_menu).
, .
n JavaScript
http://www.tanfa.eo.uk/css/examples/
menu/tutoriaf-v.asp.
Superfish. n
http://users.
tpg.com.au/Lblrch/plugins/superflsh.

. di sp 1:
; n1i ne
, :
. <1 i > <>
, .
, -
.
-------------------------------------------------
n n
-r. , n
., .
1.
<l i > float

:
u1.nav 1i { fl oat: 1eft: }
261
( )
, ,
.
8 (
( ) ,
).
2.
display:
lock.
, ( )
.

:
ul .nav
3.
{ display:
lock:
. , . .
,
4.
2.
. ,
, <>.
wi dth
em, .
, ,
, .

Corporate Philosophy
. ,
, .
,
.
------------------------------------------------------ n,
5.
overflow: hidden
<ul>.
text-align: center;.
<ul>
, ,
~. <ul >
- (

<ul >).
ul.nav {
overflow: hidden:
6.
Internet Explorer 6 .
zoom: 1 IE 6.
ul.nav {
overflow: hidden:
zoom: 1:
.
<< ~ ,
262
9.
, ,
. 9.7. ,
.
u1.nav {
margin-1eft : :
padding-1eft : :
1ist-sty1e : none:
border-bottom: lpx dashed #000:
fl oat :1eft :
width : 100 %:
}
u1. nav 1i {
f1oat : 1eft :
}
u1 .nav {
width: 12em:
di sp1ay : lock :
border : lpx dashed #000:
border-bottom: none:
padding: 5:
margin- right : Spx:
background -co1or: #:
text-decoration :none:
co1or: #333:
text-a1ign : center:

. 9.7. n n n

s, s nn r
-
n n n
z,
, ~ n
. 01, 3//
n nowaroo
. -
R ?
llstutorial/.
. n n
http://css.maxdesign.rom.au/
~ r. n, war waro n
n http://
n .
css.maxdesign.rom.au/listamatic/.
n .
3i n n
n
, ,
-: http://css-disaJss.
Amazon.com),
incutio.com/?page=UstTas.
263
WJ
n n (
, ) SS-
-, n
r .
list-0-Matic
no http://www.accessify.com/tools-andwizards/developer-tools/list-o-matic/.
(
).
r
, ,
: hover, ,

.
&w

:hover
- . , ,
, ? ,
. ,
. , ,
- , ,
, (.
9.8).
PII. 9.8. n n { ): n
, SS- n -,
, n-
264
, :
Opera -
9.
Internet Explorer 7 , Firefox, Safari, Chrome

: hover
-, .
, ,
p:hover { background-color: yellow:}

: !
hover -:
; .
<di v>. ,

<di v>
. news Item,
.newsltem:hover { background-color: #333: }

, Internet Explorer 6 ( )
. hover
, .
, ( ,
-
HTML)
. ,
.
hover,
, . , ,
. :
, . i
,
CSS.
L- r
.
:
<li class="story">
< href="' vi rgo. html "><span cl ass="ti t l e">Vi rgo: It' s Your Month! </span>
The stars are aligned in your favor. Next month? Not so much.</a>
</li>
, ,
li .story a:hover {
background-image: url(highlight.gif):
L- ( <&Virgo, It's Your Month!~) <span>.

:
.story span.title {
display: k:
text-weight: bold:
font-size: 150 %:
265
, : 1ock
di sp 1
<span>
. ,
, -
<>.
-----------------------------------------------
,~
JavaScript
, .
v www.creativepro.com/article/
view-source-make-your-liks-uforgettae.
SS-
CSS,
cpe
caJavaScript. CSS
: hover .
: hover
( ), ,
, -
.
,
, - -
.
jvSrit
,
CSS
Pixy),
CSS Sprites (
.
-----------------------------------------------
Pixy ( , )
http://wellstyled.com/css-opreload-rollovers.html. CSS Sprites
,
Yahoo
Google,
, .
www.mezzoue.com/archives/2009/0l/27/sprite_optim.
, .
1.
m
.
, :
, ,
.
. :
, -
- .
266
2.
9.

.
.
9.9,
, -
3.
39 .
SS- .

(. .
9.9, ).
{ background:
4.
url(images/pixy.png) no-repeat left top: }
#777
:hover. background-pos i t i on,
. , ,
, , - (. .
a:hover { background-position:
-39:
9.9, ).
-,
, , .
-------------------------------------------------------
CSS
, , . ,
-.
- -: d
top; }.
ackground:
url(rollover.gif) no-repeat left
-. -
, -
.
, -

(. .
12).
CSS
<div>,
, .
~-,
39
l_~
~
QUI;
-39;
:~
,_____ j
---1
~~
~~
.
9.9.
CSS Sprites,
- ,
-
267
-----------------------------------------------
.
Yahoo!,
Amazo
Google
)
, .
Amazo : www.flickr.com/photos/mezzoue/3217540317.

15 .
http://veerle.duoh.com/idex.php/iog/commets/the_xhtml_css_template_phase_
of_my_ew_iog_part_2.
.
Amazon
. .
:
~ ,
.
(. .
9.7).
CSS- .
,
,
Photoshop Fireworks.

. ,
-.
, :
,
L-. ,

. ,
Photoshop, .
, ,
- .
Store, - Contact Us Today!,
- , - ,
(.
9.10, 1).
9.10
, , ,
(3)-
, ,
( )
, ,
(5).
-. , -
(Douglas Bowman)
268
9.
<! ~ ,
,
(. .
9.1 , 2),
(. . 9.10,3).
.
. -
. , ,
.
n n
<>(
11
<li>(npaoe
11
. 9.1 . n w,

-----------------------------------------------
w - SS-. r

http://www.alistapart.com/articles/slidingdoors. r n
http://www.alistapart.com/
, n ,
articles/slidingdoors2.
?
, .

, ~
. <>
.
<1i>, ,
269
<li>,
. - ,
< l i > , :
background: url(images/right_tab.gif) no-repeat right top:

~ ~ ,
, .
, ,
, ,
<l i >, .
-----------------------------------------------
,
Photoshop,
: http://www.explodig-boy.
com/2005/12/15/free-css-avigatio-desigs http://www.explodigoy.com/2005/12/21/more-free-css
avigatio-meu-desigs.

<>, :
background: url(images/left_tab.gif) no-repeat left top:

<>
<l i>, <l i>.
,
.
, <l i> ,
(. . 9.10, 4).
~---------------------------------------------------n -
. - 09/slidig_doors.

- , : -
, - , Adobe Acrobat, W ord,
ZIP
. ,
, ,
. ,
.
CSS),
CSS 3 (
~MEAHE-----------------------------------------------
Internet Explorer
. , , ,
17 %),
IE
270
9.

, ,
. .
3,
HTML, ,
<img> 1t, Our Company.

, .
, ,
URL,
http://,
http://www.yahoo.com.
, ,
URL,
a[hrefA='http://'J
= ~.
, <
href="http: 1/www. googl . !">,
www. sawmac. com/mi ssi ng/css2e/ "> .
<
href="http: 11
, . .

, ~ ,
,
.
,
. ,
www.mysite.com,
, , :
a[hrefA='http: 1/www.mysite.com']. ,
,
, :
a[hrefA='http://'J {
background: urlCimages/globe.png) no-repeat center right:
padding-right: 15:
}
a[hrefA='http://www.mysite.com']
background: n:
padding-right: 0:
-------------------------------------------------
CSS,
:t() CSS 3 ,
URL, , :
a[href ='http://']: not( a[href = 'http://www. mysite.com'])
,
,
Itemet
http://www.mysite.com.
Explorer ( )
http://,
: ,
:t(),
JU~.
271
: .
, .
,
. -
, .
,
.
mailto:, ,
a[href"= 'mai lto: 'J

.

, -.

PDF-
ZI- (, , -
. )
. , ,
n ,

PDF, ( ),
. ,
,
100 !

. ,
-
. ,
<
href="annual_report.pdf">,
PDF
ZI-- <
URL
href="tutorials.zip">.
URL- .df .zip.

CSS 3 , ,
- . ,

PDF,
a[href$=' .pdf']
$= ~ >, , ,
. pdf.
href
a[href$=' .zip'] /* zip archive */

a[href$=' .doc'J /* Word document */
.
272
1:
9.

, -
.
, ,
. , .

2.
09.
1.
l i nks. html
( .
09\links.
9.11 ),
- ,
.
.
l i nks. html
L-
2.
<style>.
- , -

<style> .
-----------------------------------------------
n ,
n n . , nr
3.
{
color: #207EBF;
}
</style>
<> .
,
. ,
.
.
4.
#ma i n
text- decorat i on:
n:.
, -
. , -
273
1:
Eploriug yposrapblc Possibllities

novemtr
30 ROO DBBLE
ESSE QUAM NULLA

Ut enlm ad mlnlme venlam, quie notrum
ercationem Ullem ~ aue<:ipil
QUIS AUTEM VEL EUM

ut enlm 8d minime wnlam, qula .-17um exercilllllom uJI8m c:orport8
....... I8orloNm....., ul81quid8< c:onmad ~.. .......

.."" U'8 iop181~==vell-qo8m n malo81illll
COII88qUIIIIur, wl
~ quova-,.... poriiiU?Ut.- 811
- - 1 1 i.illm ~
,...,..llilaflaoem,
".._ venllm. qui8 --
opide111
cormodi ~ Qula-... .."" U'8

qui in- vci*8 ... qo8IJI n 1"11111181188 CQri88qUIIIu", .......... qui
dolot8m .."" fug'.8 quo ~ ..... p8li8lw?
nlai ul81quid . . -
Copylght20~18
.
9.11.
6~
, ,
.
9.11 , -
.
- .
5. font -wei ght : 1d: .

(
) .
, ,
decoration .
text -
274
6.
9.
border, Q
#main {
color: #207EBF:
text-decoration: n:
font-weight: bold:
order-ottom: 2 solid
#F:
,
, (.
9.12).
7.
: vi s i ted
a:visited {
color: #6E97BF:

-
. ,
(, , ,
),
1i nks. htm~.
. ,
,
6.
(. .
5):
vi si ted
, ,
, .
-
hover (),
Corpora!! Oraphlcll
Pwent Corpond! 8118

oreUnka
9.12.
:hover,
8.
a:hover {
color: #FFF:
background-color: #6E97BF:
border-bottom-color: #6E97BF:
: hover:
1:
275
,
.
, ~-
(. .
9.12).

-
(.
9.13, ). mai l t
-, riporpay.
, .
nlai ut ellquid commodl conaequatur? Quis autem vel eum iure

qul in voluptate velit 8888 quam nihll molestia8 conaequatur, vel lum
clolorem eum fugit quo voluptas nulla pariatur?
Copyrlght 2010. E-mell commenta to caOcoemofarmer.com
nisl ut eliquid comrnodi consequatur? Quis autem vel eum lure

qui in voluptate velit quam nlhll moleetlae conaequatur, vel illum
dolorem eum fuglat quo voluptaa nulla pariatur?
Copyright 20181 commenta to
caa0co8mofanner.com
nisi ut aliquid cornmocli consequatur? Quis autem vel eum lure

qui in voluptate vellt esae quem nlhil moleetiee consequetur, vel illum
dolorem eum fuglat quo voluptaa nulla pariatur?
Copyrlght 2010. IS2J E-mall commenta to ~.
9.13.
11:
11 () 11 11,
()
1. l i ks. html
)'I:
#legal {
color: #666666:
border: :
backgroud: url(images/email .gif)
o-repeat
left
ceter:
276
9.
<di v> 1ega 1,
6.
border: none ,
background
no-repeat
. , (
) ,
(. .
2.
9.13, ).
# 1ega 1 20
:
padding-1eft:
20:
,
,
20 ,
. :
3.
1 .
#1ega1 {
co1or: #666666:
border: none:
background: ur1(images/emai1.gif) no-repeat 1eft center:
padding-1eft: 20:
margin1eft: lOpx:

- (. . 9.13,
). ,
.
~--------------------------------------------------- 10
. , .

,
. ,
- , , ,
. , , ,
,
, -.
-, ,
Resources
, ,
.
, .
1.
1:
277
#resources {
border-bottom:
l i nks. html
n:
, ,
<di v> resources, #resources
. ,
.
.
2.
links.html:
a[hrefA='http://'J {
background: urlCimages/globe.png) no-repeat right top:
.
,
http://.
, ,
. .
--------------------------------------------------
. ,
. ,
IE
IE
, .extemaiLink,
: < class="externaiLink" href="http://www.twitter.com">.
,
PDF,
Word
. .
,
n
IE
CSS 3 -
n- ,
,
,
,
.
,
. :Ei , ,
( ).
,
, ,
#resources
3.
#resources {
border-bottom:
n:
padding-right: 22;
1.
#resources
278
9.
,
.
.
4.
a[href$=' .pdf'J {
background: urlCimages/acrobat.png) no-repeat right top:
}
a[href$=' .zip'J {
background: urlCimages/zip.png) no-repeat right top:
}
a[href$=' .doc'] {
background: url(images/word.png) no-repeat right top:
, href,
Adobe Acrobat (. pdf), ZI- (. zi )
W ord (. doc) .
5. , hover (if )
:
#resources a:hover {
color: #FFF:
background-color: #6E97BF:
(.

9.14).
09_fi ni shed/ l i nks 1l i nks .
html.
RESOURCES
AnnU81 Report
J9
:=~~:;~
81'8t Corporate Slte
9.14.
~~oreunka
2:
-
.
'
1.
279
2:
nav_bar .html
09\nav_ar L-
_, .
CSS
,
-.
<body>
HTML ,
9.15, 1.
. - - , .
L-,

..
!!!lt
fu!J/W
fJsadJ.
CSS .
fEAUES
EXPERS
QU!Z
2\
PROJECS
OROSCOPES
~
L
11
fEAI\IRI!~
exi'E~cs
~~~~~
........ -
.........................
~RTS
......... ....................
QUI~-~
4>f>J~S
GROS<::OPI:S
~..
......................... ,
i'/toJECS
:.
....................... 1
~OSCOPES
9.15. n,
n n n n
n .

2. <u 1> i d ; "mai nNav",

:
<ul id;"mainNav">
i d ,
, (
-).
3.
#inainNav {
margin : 0:
padding : 0:
list-style: none:
body :
280
9.
carct
<u 1> ma i nNav.

, ,
.
4.
9.15,2.
#mainNav {
co1or: #000:
font-size: llpx;
text-decoration: n:
:
, ,
(. .
5.
9.15, 3).
#mainNav border padding:
border: lpx dashed #999: padding:
7 5:
-
(. .
9.15, 4): ,
. , <>
. ,
(
. .
7).
6.
di sp1 :
1 ock;
#mainNav.
<> ,
,
, .
. ,
<u 1>
-----------------------------------------------
- Intemet Explorer
, w n . . 1
.
7.
#ma i nNav wi dth:

175;.
175 - ,
- (
<u1>).
- -
(, ), ,
( , ,
).
281
2:
8.
#mai nNav
background :
#mairiNav {
color: #000:
font-size: llpx:
text-decoration: n:
padding: 7 5:
display: lock:
background-color: #777;
background-image: url(images/nav.png);
background- repeat: no- repe.at ;
background-position: 2;

. (. . 9.15, 5).
- : ,
1 ,
2 (
2 ).
-----------------------------------------------
ackground, :
ackgrouncl: #777 url(images,lnav.png) no-repeat 2;.
9.
#ma i nNav,
:
#mainNav {
color: #000:
font-size: llpx:
text-decoration: n:
order-ottom: n;
padding: 7 Spx 7 ;
display: lock:
background-image: url(images/nav.png);
: ,
. .
. ,
border-bottom,
<u 1>,
282
9.
( ,
<ul> ).
10. ul#mainNav,
:
#mainNav {
margin: ;
padding: ;
list-style: n:
width: 175;
order-ottom: lpx dashed #999:
, ,
, (. .
9.15, 6).
. -,
. ,
, .
, ( )
.
.
. ,
,
.
, .
1.
nav_bar. html
#mainNav a:hover {
font-weight: bold;
background-color: #B2F5ll;
background-position: 50%;
-
hover.
,
. ,
CSS Sprites, .
8 -
(. 9.16).
, .

( -
).
""
IXPI!ItS
'" '
283
2: nn
FEAURES
.
,_
F!AURES
-~
. 9.1 6. SS-
n n ,
, ,
,
. , ~ L-
: , , ,
. ,
.
-----------------------------------------------
r , w , n
n . - n n I
: < hef="/horoscopes/" dass="u_r_here">oroscopes</a>.
2. <body> id;"home":
<body id;"home">
, ,
,
SS-, -
Features.
, -,
3. L- Features
i d~"homel i nk ", :
<
href="/index.html" id="homelink">Home</a>
,
, .
284
9.
,
.
4.
4 , :
featurelink,expertlink,quizlink, projectlink horoscopelink.
L- . SS-.

, -
Features.
5. - :
#home #homelink {
background-color: #FFFFFF;
background-position: 97% 100%:
padding-right: 15;
padding-left: ;
font-weight: bold;
.
Sprites
CSS
97 % ',
. ,
(. . 9.16). ,
, .
8.
#home #homel i nk.
, ,
homel i nk, <body>
qui z,
home.
, ,
Home
- , :
.m .
, .
6.
#home #homelink.
#feature #featurelink,
#expert #expertlink.
#quiz #quizlink,
#project #projectlink.
#horoscope #horoscopelink {
background-color: #FFFFFF;
background-position: 97% 100%;
padding-right: 15;
padding-left: :
font-weight: bold:
, SS-.
, .
i d <body>,
2:
285
qu i z, Quiz ,
Features.
.
-----------------------------------------------3 n n J(, .
7.
3.
id <body> feature :
<body id="feature">
-, ,
Featue
(. .
9.16). , <body>,
, . ,
-
<body> id="horoscope".
-----------------------------------------------
n ? ,
, ( :hove
: #quiz #quizUnk:hover). n
Horne ( home.png images).
Internet Explorer
n , Intemet
Explorer? ,
( IE 7 8 ). -,
. ,
, (. 9.17).
-
, (
). , .
1.
#mainNav
zoom: 1:
#mainNav {
text-decoration: n:
color: #000000:
font-size: llpx:
border-bottom: n:
padding: 7 Spx 7 :
display: k:
background-image: url(images/nav.png):
zoom: 1;

IE 6.
286
} (o;111of '" mt>r
QUI2
. .. . . . . . ..
9. n n
/.\ilrosolt lnter r1et (xplorer
,
. . .. . . . . - . .. '
..
. 9.17. - lteret Explorer nn

nn
n-
2.
Internet Explorer 6, .

, lnternet Explorer 8, Firefox,
Opera Safari.

09_finished\
nav_bar\ nav_bar_vertica l .html.

-----------------------------------------------
n ,
lntemet Explorer, . n, ,
CSS, Itenet Explorer.

, , , , SS-, n
. n , w ,
n Microsoft. n
. n
lntemet Explorer . 15.
n

,
-.
. ,
- (
2:
287
v _bar.
html,
, , ).
1.
,
, av_bar .html L-.
, .
- , . ,
<ul>
. ,
. ,
<u l >
, ,
2.
#mainNav width:
175:.
3.
#mainNav):
#ma i nNav l i {
float: left:
width: 12em:

<l i> ( ,
).
. ,
<l i >
8). ,
<l i >,
. 12ems

, .
, .
~--------------------------------------------------- n em . n n
, n em .
I n , ,
, , n
, n, .
I n n n .
- ,
. (
.

9.18, 1). -, ,
10, <ul>, ,
, . ,
, .
, ,
,
.
2 .
288
9.
"\-
&~--
"\-
FEAVI\E.S
~ EXPERTS
~ FEAVRES
"\- EXPERTS
FEAVRES
~ EXPEiiTS
'"\-
"\-
"\-
~FEAVRES
.... EXPE"TS
QU
QUJ%
~ QU
6 .... PROJECS
" "
OROSCOP~
PROJECS
"\-
O"OSCOPJI
....
:. 9.18.
;
n , n
4.
#ma i nNav
border -bot tom :
n :
border -1 eft:
n: .
, .
<u1> - ,
(
. 9.18, 2). -

5.
<u1>.
#999999:
#ma i nNav border-bot tom : l px dashed

border -1eft : lpx dashed #999999 :.
- ,
,
(. . 9.18, 3).
. ,
<u1>.
,
(
, ,
- . . 12).
, , ,
. SS- .
6.
#ma inNav:
#mainNav {
margin : 0:
paddi ng: 0:
l i st -style : none :
border-1eft: lpx dashed #999999:
overflow: hidden:
zoom: l; /* for IE
*1
289
2:
overfl ow:
hi dden '): .
12. zoom: 1
? .
, , Quiz,
(. .
9.18, 4),
7.
,
).
6 (
background 97% 100% 100%.
#home #homelink.
#feature #featurelink.
#expert #experlink.
#quiz #quizlink.
#project #projectlink.
#horoscope #horoscopelink
{
background-color: #FFFFFF:
100%:
padding-right: 15:
padding- left: :
font-weight: bold:
- , ,
,
(. . 9.18, 5). , Internet
Explorer.
-----------------------------------------------
, - .
: #mainNav text-align: center
left-padding , .
-, ,

nav_bar_horizonta l. html
09_finished\nav_bar .
10
CSS
. ,
,
, ,
. ,
CSS
-. ,
HTML,
CSS.
, ,
.

L-
.
,
HTML,

,
.
CSS
-.

(.
10.1 ).
HTML XHTML
, .
HTML
, .
<t>
<caption align="bottom">
1: CosmoFarmer.coms Indoor Mower Roundup
10.2.
291
) l11door /.\o,ter Rou11dup ll.ozrlld f rr<'fox
l;J(Q)l8J
COSMOFARMEPf~
Your online guide to spsrtment fsrming
Yow feedock
lorem ipSUtn dolor oite
ornet.
lhls onth's Survey
lorem ipsum dolor &iie

omei.
lndoor lowns: sod or seed?
lorem ipsum dolor oiie
omei.
LoremiP'U"'
Lorem ip.s:um dolor site
ome!.
Oolor.siteomet
lorem ipsum dolor siie

omei.
Adiplsclng etil
lorem ipsum do!or siie

omei.
Wismod linc:idunl
torom ipsum dotor cife
amet.
Oolor sile omel
Lorem tpsum do1or site
omet.
. 10.1. CSS , ,
n, r ,
n
</capt;on>
<colgroup>
<col id="brand" />
<col id"price" />
<col id"powe'r" />
</colgroup>
<thead>
<tr>
<th scope-"col">Brand</th>
<th scope "col ">Price</th>
<th scope"col ">Power Source</th>
HTML
292
Brand
Power
Sourre
Price
Chinook
Push-omali.:
- t-- <ht>
ini-Re,iew
The late~t model of lhe Chinook nwer is ig

improvement over la.~t year's ndel. lt's smoolh gliding action is perfect for even massively over
grovm sod. lt~ handlig around comers is super -perfect for lhose tight areas around sofa.o; and coffee -
S247JIO
Mcchanical
Idoor
Mowcr
<td>
taJes.
San1pso
Dcluxc
Apanment
Mower
$370.00
Mechaical
i
.
10.
1:
In our battery of 7 nwing tests. lhe Sampson

scored 9 or v cach. h fine ladcs tum
Cosfarmer.com 's
10.2. Price ,
--
even Iarge weeds into tiny cunings, perfect for

composting or salad gamishes.
lndoor Mower Roundup
<td>
</tr>
</thead>
<tbody>
<tr>
<td>Chinook Push-o-matic Indoor Mower</td>
<td>$247.00</td>
<td>Mechanical</td>
</tr>
<tr>
<td>Sampson Deluxe Apartment Mower</td>
<td>$370.00</td>
<td>Mechanical</td>
</tr>
</tbody>
</tale>
HTML: <t >, <capt i on>, < l group>,

<col>, <thead>, <tbody>, <tr>, <th> <td>.
HTML - , , ,

CSS.
<th>,
<th>.
, . tab l eHeader,
.

.
------------------------
L
www.456bereastreet.com/archive/200410/bring_on_the_taes/.
293
CSS,
. l or,
, , .
,
, ,
. , L-,
,
CSS.
<tab l > .
CSS,
,
HTML,

. ~> .
7,
,
. ,
- ,

(. . 10.2). , cellpadding
<tab l >,
. ,
, <t>. ,
10 , :
td. th { padding: lOpx; }

.
1 ,
, :
td {
padding-top: lOpx:
padding-right: 5:
padding-bottom: :
padding-left: 5;

padding:
td {
padding: lOpx
5 5;
~--------------------------------------------------- <img> ,
, k display
(. J .
. 7). , n http://developer.
mozilla.org/en/docs/Images,_Taes,_and_Mysterious_Gaps.
294
10.
,
text-al ign
vertical-al ign.
l eft, ri ght,
10.3). (. . 4,
center
justify
(.
).
, :
t
{ text-align: right:
right
ceter
left
1
Brad
Price
Power Sor~e
Chinook
Push-o-malic
Indoor Mower
S247 .00
Mechaaical
Sampson
Deluxe
Apartmenl
Mower
5370.00
Mechaoicl
1
~lii-Re\iew
latest model of the Cinook mo\\er is ig improvement
O\"er last year' s model. It' s smooth gliding action is pertect for
"""" massi\ely over gro\\'11 sod. Its haodling around comers is
suptJ -- petfect for tos. tight areas arouod sofas and cofu
tables.
Jn our battery of 7 mowing tests, the Sampson scored 9 or
justified
1 0.3. CSS
\.., on each. 6ne blaoo 111m e.en large \\'eeds into tioy
cuttiogs, perfect for compostiog or slad garnishes.
1: CosmoFarmer com's lndoor Moer Rouodop
1 000
<td>
<th>,
.
th { text-al ign: l eft: }
CSS text-a l i gn ,
al ign <td>. CSS,
.
,
,
.
, .
(.
mi dd l
vertical-align.
: top, base l i ne, mi ddl bottom. top
, mi ddl - , bottom -.
base l i ne ,
top, ,
(. 10.4). ,
baseline. text-align
vert i l - l i gn ,
, <th> <td>.
.
10.4).
295
-------------------,--------
, .
( ),
. ,
- <taie class="stocks"> -
.stocks td .stocks th, .
, <td
class="subtotal">
Bra..t
Pri<~
Pow~r Sorc~
:\fi8i-Re'i~w
M.ocanical
Thc lalest model of t, Chinook m is big
Chinook
Push-o-matic
Indoor
Mo\ver
S1-.
Samoson
Deluxe
Apartment
Mower
$370 00
Mecaoical
$370 00
M.ochanical
Sampson
Deluxe
Apartment
Mo\ver
Chinook
Push-o-matic
Indoor
Mower
imprO\em<nt O\'et last year's model. lt' s smooth 8)idiog

t--action is perfect for even massively oer g>"O\\'D sod. lts
aodling arouod comers is super -- perfect for those tigh!
areas around sofas aod coffee taes
$247.00
Mechaoical
ln our ballerv of i IDO\\ioJ> tests t, Saosoo scored 9 or

\- each. Thc 6ne hlacks 111m \' large \\'eeds iolo
tioy cunings, perfect for compostiog or salad gamishes.
ln our ballerv of i mo\\ing tests, the Sampsoo scored 9 or

'" . The 6ne ades tum even large \\'eeds ioto
tioy cuttings, perfect for compostiog or salad g....US.,s.
The latest ndd of t, Chinook mower is big

impro\emeot over 1ast year's modeJ lt's smooth 8)idiog
actioo is ped'cct for e\'<D massively O\'et g>O\\'D sod lts
haodling around cO'I'De'l's is super -- perfect for those tigt
areas arouod sofas and coffee taes
top
baseline
middle
bottom
1: CosmoFarme.coro s lndoor Mow~ Roundup
10.4. CSS vertical-align- align <td>.
: ,
CSS border
(. . ~ .
7)
, , - .
-, ,
<tab l >, , - .
( td { border: lpx so l i d l ack: })
, . 10.5.
-,
,
ll spaci ng <tal >, CSS border-co ll apse.
. ,
2 .
, .
296
CSS 2.1
border-spacing,
10.
. Internet
Explorer 7 ,
spaci ng <tab l >. HTML,
10 : <tale cellspacing="lOpx"> (
ll
CSS border-co ll apse,
).
. ,
, , . ,

, ,
(. .
10.5, ).
( ) -
border-coll apse. - separate coll apse.

separate , :
, (.
10.5,
1tu). ll apse :
tale
border-collapse: collapse: }
J===BI'3=d=~'~3
EJ
Chinook
'Push---o--mallc-----'
$24 i.OO
_Jndoor ~ower
Power
Sorce (
MU.i-Re>iew
\.. 4he latest modcl of the ik mower is ig impro'~ ~ver

Mecaoical
last year's modeL It's smooth gliding actioo is pettect for evm
massivdy over grown sod Its handliog aroond comers is supet
.. per(ect for those tigt areas around sofas and coifee tahks.
1: CosmoFarmer com's lndoor Mo\\er ROUIIdup
....d
Chinook
Push-o-malic
Indoor :\1o"er
\.. J Price
$247.00
Power
Soarce
Mecaoical
Brad
Chinook
Push-o-malic
Indoor ~O\\'er
h latest model of the ik IDO\\'et is ig imprO>-=enl over

last year's model. It's smooth gliding action is perfect for -
massnoe!y O\'er gro\\'D sod. Its handliog around coroers is supa -perfect for those tigt areas around sofas and co:tfec tak:s.
1: CosmoF anner com' s Indoor Mower ROUIIdup
Price
Power
Soarce
$2-.
Mcchanical
J,
M.iai-Re>iew
M.ii-Re>iew
h latest d1 of the Chinook mower is ig improverneol over

last year's model. lt's smooth gliding action is perfect for even
massn'ely O\'ef grown sod. Its handling aroood comers is super -perfect for those tig1 areas around sofas nd coffee tables.
! CosmoFarmer.com's lndoor Mower Roundop
.10.5. n
297
-------------------------------------------------
L-, , ,
CSS.
d .
CSS
w, .

,
. 10.6,- .
,
. ,
CSS ( ,
) : ,
!
lnslgn~
-=
Player
URW [Oyptlenne
si.s~lf
C..nildaT~
slaurlf
URW++
losofla
ur11
seril
tmlgre
Unotype
Linotype
Monotype
Monotype
Emigrt
lntellecu Oeslgn
Sitstrum
FontMeso
Font Garden
CO<fodlne Fonts
Unotype Oldot
Nw C.ntury Schooll>ook
==
3
setif
~"'
"-rpetua
Onl')l
serif
Pltttlt
Erued l)'pewritr 2
Eltgrawn Old Enollh
monosJW:c.ed
lock
FC
"-ul
bl&ckltttor
blklettor
Nt
scrlpt
scrlpt
scrlpt
ldwrltlng
SWan Song
10.6.
mono.p;ac~
c..n.doT~
=
=
~
~
1= .
=
<tr
class~"odd"> ,
.odd { background-color: red: }

.
(. . . 8) !I ,
, .
10.6
298
10.
1 ).
. ,
,
,
<td 1ass="pri ">.
, ,
:
. odd . pri .
-----------------------------------------------
, CSS
3,
. ,
,
JavaScript
www.creativepro.com/
article/view-source-javascript-desigers.
HTML
< 1group> < 1>,

. < 1>

ID
(. L-
. << ~ ).
:
width
(background-
. .). .
,
co1or, background-image
HTML
, ,
< 1>.,
HTML: < 1 i d="pri ">.
200
#pri { wi dth: ZOOpx: }

< 1group> .
. , ,
,
. < 1group>,

< 1group
i d= "dates >.
ID
#dates{ width: lOem: }

wi dth
< 1group>,
- lOem -
, .
, < 1>,
#price { background-co1or:
#F:
pri :
, , ,

.
<td> <th>,
299
r
- - .
, , -
, ::..
- , . ,
,
.
CSS,
, : ,
. SS- ,

~.
(.
10.7).
lnternet Explorer 8
"_.
Firefox 3
1
IONS
........
!/t(~(1
,. FON'S
. .
! ,..._,..,.,..._
........._.._
, ... .., 11:)t1 AREA
.....
Satari 3
! ,_..._.
ii .._..
,__ ---
--
_;1
---~--
!
--~
. .!i841
...
i ca..
,_~
- ,.. .. :..
i1 ....
~
~-~f '
:t
;.
_" Q
-
-..
1-!
'""
....
-r----~
---
... -=;:
-~
---------- ---r----1
w-t -
-- ---
---
........ .
.....
_ ..,.....
-~
. 10.7.
: lnternet Explorer (), Firefox () Safari ()
300
10.
Safari 2
<fi l dset> <l egend>.

, , - .
Safari
3 Apple, , .
Internet Explorer Firefox

Internet Explorer ,
, Firefox - . ,
-.
, - ,
. ,
,
, .
n
n ,
n , n
CSS,
(. . 10.7), n,
n n.
- n
n ,
, , n n
Submit ()
nn
(. n . 10.7,
). n
n n ,
n Sumit ()
, nn
. , ,
. - , n
n n n.
n,
, - .
L-
L- .
(, ), - (
). , ,
.
Fieldset.
<fie l dset> ,
. ,
r.
Internet Explorer
(
.
10.7, ).
301
<fi l dset> ( Internet Explorer, ,

, margi n
<fi l dset> ).
Legend. <l egend> <fi l dset>,
. fi l dset.
<fi l dset> , , , :
<legend>Shipping Address</legend>. CSS
<legend>, ,
.
. Te<input
type="text">(<input type="text" />L),

<input type="password"> (<input type="password" />) <textarea>
. . -
, ,
, .
Internet Explorer, Firefox

Opera ;
Safari 2.0 .
SS- wi dth. hei ght
<textarea>.
. , <input
/> ),
type="submit "> (<input type="submit"
- .
Safai
2.0
-
text-al ign.
. , <se l ect>,
, . Safari 2.0
, ,
,
.
-------------------------------------------------

CSS
, www.456ereastreet.com/archive/200701/stylig_
form_cotrols_with_css_revisited.
, (Christopher
Schmitt) (www.webformelements.com). 3520 05,
Windows, . ,
CSS Cookook , 164 (, !)
: http:f/oreilly.com/catalog/9780596527419/appendixd/
appd.pdf.
.
.
Opera
302
10.
Internet
.
,
.

: n
,
- 3 .
n.
text sum1t,
, , , ,
n - n
lnternet Explore 7 8, Firefox, Safari, Chrome
Opera
HTML-er <i nput>. 200
n n, ,
, n n.
, 3
lnternet Explore 6
nput> .
n (n; n
, ,
IE 8 n
, },
<;nput type"text"
class"textfield" name"email" />,
JI .
. n
n
- n .
n
n , n
CSS-
http://www.cosmofarmer.com/:
a[href="http://www.oosmofarmer.oom"].
, n
, n m .
HTML .
type , n 3
<1 nput>.
n n - text.
CSS 3 n
(,
:
,
- n
http: 11)
n ,
- n (
: lnput(type"text"J
n,
{ background
n .
color : l ue :
}.
n n
, ,
jpg .pdf).
CSS
-.
(.
10.8, ~).
n (. .
10.8, ).
HTML.
303
Sign Up for our E-Mail Newsletter
Sign Up for our E-Mail Newsletter
Fl'tiNI
Fnlmt
~~~,------------------~
Yrtle-
s~"~~:~-.
~ f\ toundit~
r ctf'wlting 11rm r- ottttr
Str1addt~1
O.vant:ltlon
("
nor.p&
foul\dlc\01'1
t0fisu!1"'9 flrm
'
othtr
&tttlacsdl...
Slt!t
....
. - - - - - - - - - - - - - - - - - - -- :
Upo-pottltoelt"
~1
IWO<Jid pt'ffer lottct.,. lr~tJOn "',~

t' E~ot
s-..]
Fu
v.... p._.
...
< ) - ~
1 1 -----'
1~'~ pttftlf IO ICt'Jft ~~011 'fl~

t'"
I'N!I (" Ft.t
,s.-J
. 10.1.' n , n ,
n (). n n
()
,
. (, . .)
,
, .
10.8 (
CSS,
HTML). .
1. .
<label>, .
.
?~ , <l l >.
<span>: <span>What' s your favori te l or?</span>.

<span l ass;"l 1" >
<l l >, (
. 10.8 First name, Last name . ., <l l >
).
:
-------------------------------------------------

<lael>.
www.htmldog.com/guides/htmladvanced/forms/,
304
2.
10.
,
.
wi dth
, :
.l abel {
fl oat: l eft:
width: 20em:
wi dth
fl oat
,
.
3.
. ,
. :
, .
, l r:
l eft,
. ,
,
. l abel {
fl oat: l eft:
width: 20em:
textalign: right;
clear: left;
marginright; 15;
. ,
, , .

.
------------------------------~-------------------

-, www.smashigmagazie.com/2006/ll/ll/css-ased
forms-moder-solutios, ,
CSS.
1:

HTML
CSS
. .
!> ,
HTML
305
1: n
, L-,

CSS.
, ,
, .
, ,
www.sawmac.com/cr.s2e/.
10\taie.
1.
tae . html.
HTML.
(.
10.9).
, < 1>
. , < 1>
,
~ .
<taie
id="inventory" >
1: CUreot lnvcotory
Pritt
Product
*****
***
*****
**
***
*
****
****
*****
$19.95
Sl4~5
Pri~Jess
S29.9S
S1S.99
$82.00
S1.9S
S!7.9S
Venenatis Non Adipisciog
1
col id="product">
Ra.t1n&
$44.00
<caption>
<th>
(n )
<td>
( )
1
1
<col id="price"> <col id="rating"
PROOUC
Vltae Q\J4m
~m
S19.95
ln Tempus Vellt
s1~.ss
a.-m tpsum Dolor Sat
Pliceless
QJ11 Fells Frl"91lta
S29.9S
Nunc Sem Ptwetra
S75.99
Ve\ f4uc1us Etlt
S82.00
Adlplsclna Vitae
S1.95
Aenean Orcl Ante
S17.9S
Vel>et1s
Non AdlplscJna
****
****
*****
1 0 .9. n 30 ,
CSS, n n3 l'L- (),

()
306
2.
t .
html
10.
i nventory,
ID .
-------------------------------------------------
nr ,
.
3.
<style>
#inventory {
font-family: "Trebuchet MS". Arial. Helvetica. sans-serif:
width: 100%:
,
. ,
100%,
<di v> ( ,
Welcome to the Lorem Ipsum Store ).
<tab l > ,
-
<capti on>, <th>, <td>
. .
4.
#inventory captiQn {
text-align: right:
font-size: l.em:
padding-top: 25:

).
<caption>,
i nventory ( <t >
<capt i on> .
,
.
paddi ng- top
, ( )
.
----------------------------------------------
_ ,
J'I
<caption>.
margin
: n <taie>,
Firefox
, r
. nonrraeec
<caption>, Firefox , IE
Safari .
<caption>.
,
m
1:
307
, .
. ,
.
5.
#inventory td. #inventory th

font-size: 1.4em:

( <td> ),
( <th>)
. ,
,
(. 10.10, .). -
. . .
- -
Vltae Q!Jam Lorem
$19.95
ln Tempus VeLtt
$14.55
Lorem lpsum DoLor Sat
qnceLess
Quts FeLts FrlngtLLa
29.95
Nunc Sem Pharetra
S75.99
VeL Faucibus ELtt

~
:::~~-
___-: _-_-:_-_
.:-_-
---~.:-_-_
:::. :-_ -_
r
-
$82.00
, ; . -__
Non Adtptsctn Vltae
--
$1.95
Aenean Ord Ante
$17.95
Venenatls Non Adtptsdn&
$44.00
$19.95
ln Tempus VeLtt
$14.55
Lorem lpsum DoLor Sat
Prlceless
Quls Fells FrlngtLLa
$29.95
Nunc Sem Pharetra
S75.99
VeL Faudbus ELtt
$82.00
l-~~~-~~~-~-~~t~
$1.95
Aenean Orci Ante
$17.95
, Venenatls Non Adiplsctn

.
10.1 .
*****
***
*****
**
***
*
****
****
*****
-
Rattn
Prtce
Product
Vltae Quam Lorem
--- -------
Rattn
Pr1ce
Product
$44.00
*****
***
*****
**
***
*
****
****
*****
- ----------
--
().
.
()
border-collapse
308
6.
10.
border-co ll apse , 3.
#inventory {
font-family: "Trebuchet MS". Arial. Helvetica. sans-serif:
width: 100%:
border-collapse: collapse;
border- ll apse .
, ,
., .
border-collapse,
, ,

2 . . ,
, ,
. ,
.
7.
5:
#inventory td. #inventory th

font-size: 1.4em:
border: lpx solid #DDB575:
padding: 7 2 7;
-
, ,
.
8.
td. th;
#inventory th {
text-transform:uppercase:
text-align: left:
padding-top: 5:
padding-bottom: 4:
.
td. th
. ,
<th>,
.
,
padding-top
padding-bottom
7.
,
,
7.
<th>
1:
309
- ,
, , ,
. , .
9.
th,
#inventory th
text-transform:uppercase:
text-a1ign: 1eft:.
padding-top: 5;
padding-bottom: 4;
background: url(images/bg_th.png) no-repeat left top;
color: #FFF;
,

, .
---------------------------------------------------, n , .
,
, ,
. ,
, 1l .
,
, .
1.
-:
#inventory tr.a1t td {
background-co1or: #FFF:

<td>,
<t r>,
1t, ,

i nventory.
, 1t .
11.
L-
:
Vitae Quam
<tr>,
Loem.
<td>,
<tr> c1ass="a1t",
<tr class="alt">
<td>Vitae Quam Lorem</td>
.
310
10.
.
,
JavaScript,
www.alistapart.com/articles/zebrataies/.
12.
11
<tr>.
<tr>,
.
, ,
Price Rating.

. < l >,
.
rati ng.
10.9,
pri
13.
#price. #rating
width: lOOpx:

100 .
IE 6
... .
100 %, IE 6 ,
, , ,
.
.

14.
100 %.
#i nventory, ,

98 %:
#inventory {
font-fami ly: "Trebuchet MS". Arial. Helvetica. sans-serif:
width: 98%:
border-collapse: collapse:
, ,
IE 6
( , ,
98%
IE 6 ,
,- ).
. , ,
.
lO_finished\taie.
10.9, .
311
2: n
2:
CSS
. form . ht ml

10\form,
, n
CosmoFarmer.com (.
10.11 ). ,
n , n ,
. ,
, .
, ,
.
806
Subscrib~
to CosrnoFarmer.com
http:/ /css.loalftutorials/chapt~r.10/form/form.htm
(0. Google
1(
8ookmuks
'A'go: l's Your nt
lorem ipsum do!Of s~e
omet.
Whot is your name?
Your~ock
lorem ipsum do1or
omet.
Whot is your email odd.ress?

Rote your oportment forming sl::ills
1'h Monlh's SlriY
locem ipsum dolor sne
omel.
Novice lntermediote Advanced
Where did you heor oboul us? { ~tton~
lndoor lowns: sod or seed?

Locem ipsum dolor sRe
omet.
!. . . .______.
Any odditionol comments? ...
Lormlpsum
Lorem ipsum dolor site
omet.
( SubscrJe)
Oolor Slte omet

lorem ipsum dolor sJ!e
omet.
Adlplsclng eat
Lorem II)Sum dolor s
omet.
fWmod llncklunt
Cosmor-armEII ,-. be1<eves '1101 yOIJ pn <=> 1s mporont tn'e<I'IO <On lcc'c~ Ql\111~
s f<rtted ! our <
1e!V,ok 9 872 por.C 1\lto!es ., ov >n O!Jnoon "'' only hoed
O<"onQ hem oncJ os 1 of our nev.pk s on~-spot pot,cy you "11 lmrted !
e-mo:l per porne othl~e pE'r doy 110! ~;;r.ceed torol ' !!72 r>'a's do'{ 1' vou
m~h ro opt ou! ol :J poqram plea~ cotl '" beiW< E.n lhe hours 9 01-90Jom Gr
Lorem ipsum doiOr s
omet.
10.11.
<taie> n n .
n CSS, n n n
n ( , ) n
n
312
1.
form.htm1
10.
.
, .
2.
<sty1e>
#subForm {
font-size: .8em;

ID - subForm,
<form>.
.
, ,
( ), - ( ).
3.
#subForm .11
fl oat: 1eft;
width: 230;

. 1 1,
230 ,
fl oat
.
. ,
.
, , ,
.
.
,
.
4.
L- <1abel for="name">
class="label ", :
<1abel for="name" class="label">

.
5.
for="refer">, <label
HTML: <label for="emai l ">, <1abel
for="coidlents">.
skills.
<labe1>,
- Rate your apartment farming
,11
, . .
<span> ,
6.
labe1.
Rate your apartment farming skills

1 l:
<span
class="lael">Rate
your apartment farming skills</span>
<span>,
2:
313
~)9~.-~.: ..~-~~-~~~-~-~~-~~~.~~-~-~~~~---: ................

Whot is your nome?
Whot is your emoil oddress?
Rote your oportment lorming skills
Where did you heor obout us?
Novice lntermediote Advonced
1SelectOne
~1
Any odditionol comments?
1 Suscrie
What ls your name?

What ls your email
addrs?
'-------.....J
Rate your apartrnent farrnlng skllls Novice lntermediote Advonced

Where dld you hear .,..ut us? 1Select One
~~
Any addltlonal comments?
1 Suscrie 1
. 1 0.12. n ,
(), n ,
nywe
(. 10.12, ).
,
.
7. #subForm . l l, 3,
:
#subF orm . l l
float: left:
width: 230;
marg;n-r;ght: lOpx:
text-al;gn: r;ght:
font-we;ght: old:
314
10.
. ,
, .
10.12, .
, ,
. ,
clear.
-------------------------------------------------
.
8.
7.12
lr#suFrm
.label:
#subForm .l abel
fl oat: l eft:
width: 230:
margin-right: lOpx:
text-align: right:
font-weight: bold:
clear: left:
, Subscribe,
, . ,
.
9.
#subscribe {
margin-left:
240:
<i nput>, Subscrie, ID, subscri ,

240
#subF orm . l l.

,
.
10.
Subscrie,
:
#subscribe {
margin-left: 240:
background-color: #CBD893;
font-family: "Century Gothic", "Gill Sans", Arial. sans-serif;
.
11.
#refer {
font-family: "Century Gothic". ;,Gill Sans". Arial. sans-serif:
2:
315
Subscrie ,
?
. .
12.
#name. #email. #comments {

background-color: #FBEF99;
font-family: "Lucida Console", Monaco. monospace:
font-size: .9em:
(
) -,
,
. , ,
13.
CSS .
,
:
#name. #email. #comments {

background-color: #FBEF99:
font-family: "Lucida Console". Monaco. monospace:
font-si ze: . 9em;
wi dth: ;
margin-top: -2;
,

!> .
14.
9).
: focus
(. .
#name:focus.
#email :focus.
#comments:focus.
#refer:focus
{
background-color: #FDD041:
: focus
Internet Explorer 8, Firefox, Safari Opera.
, , Intemet Explorer 6 7,
: focus .
. ,
.
10.13.
316
806
Subscrit
10.
to Cosmofarm~r.com
hnp://css.loalttutorlals/thapttr_lO_finlsd/forrr.
(0. Gle
Seii!Ch
Lo<t1on
COSMOFARMEFf~~~
Your onllne guide to pertment ferming
,,,
1#1
..,"
~jg~ __t).p~-~-~~-~~~-~~-~~~-~!P.~~~.f~~-~............................. .
vtroo: ll's &~ Monlll

torem II)Sum ootor s4e
omer.
Wllat ls 11 name?
&~ feedock
Lorem 1psum oolot s~e
Whall yow emol oddre ..?
omer.
lote 11 opart.,..nllormlng skJIIs Nov~ lntermediclle Ad\lonced
hlaonlh'sSUrvey
torem II)Sum do!ot .sile
Where dld you .r ooutus? { Setoct
omel.
lndoorlow: sod or seed7
torem 1psum do!ots~e
orner.
Any addltlonoJ comments?
l.ofemlpum
Lorem ~sum oo!or s~e
omet.
OOJor dte o.,..l
Lorem ipsum oo!or sae
omel
Adlp!Jclng ell
torern ipsum dOIOr sJe
omel.
blvnod nncldunt
tO<em ipsum dOIOr s~e
j!J
:::::::~~~~~~~~~~~
:r
( SUbroie )
Cos<"oFormer.COfY' bel.eve> '1>01 yovr "'" s rmpol1onl. ln iormoon collectco ot lhis

sote rs 1rr;ned to ov rr~!wol. /9.812 ar. roa.>s Your informot,on w 1ll only sha<ed
omong ohen1 ond os pqn of ov IIC'vork s onh-sponJ polocy yov w!ll llrnltod lo o ne
e-mool pcr par1net otloi>O'e dOy no! ' r'xceed lotol /9.872 e-motls day. lf you
w.zl1 ro opl oul of 'hl$ progom piEIO\~Cnll ute~'>voer.ttt.: hours of9:01-?.0:!om G.
omel.
t 2006. CosmoFormer.com
1 0.13. 3 :focus, :
.
,
lO_finished\ form.
11 .
12.
CSS
13.
14. CSS
15.
16. CSS 3 -
CSS
11 css
CSS
, ,
-, -
, -.
HTML
CSS
, ,

( ), -
CSS -
. ,
CSS.
, ,
.
-
- .
?
Flash Player?
, ,
, ,
. :
15-
640
480
5 000 000 4 300 000 .
30-
. -
: ': .
,
.
, , ,
, ,
.
( ,
) ,
319
.
.
.
, .
11.1, .
, .
~ ,
, . ,
, ,
( ) .
1000 , ,
1024 768.
960 .
-----------------------------------------------
, ,

www.alistapart.com,
www.esp.com
www.nytimes.com.
. ,
. ,
. ,
(. . 11.1, ).
,
, ,
.
,
, .
-----------------------------------------------
,
http://maps.google.com.
. ,
. ,
, m-.
em
, ,
(.
~ ,
em . ~
6).
-
.

.
,

. ,
Internet
Explorer 8, Firefox 3, Safari 4, Opera Chrome, Ctrl-+
( ).
320
11.
CSS
-----------------------------------------------
max-width
min-width
n n
(. n n ) .
.. ,.. .... ..
___
-Jt Y ~~
..
.. ..,_~_:.... , ,
~,..
..
..
o---..
..::~::_:_:JJoSo':.,:~
......... ......... .. _........ --
.".
- . . ..
...... , ;. ..
<Jo .;,. ~~ ...._~ ~
!.,
~ ~
.:: .. -'!..
,.,."
~-..
'- ---
.... ........,.-_
.....
' ' ..
.. .
.~-
.. ~to.. ,.._ ,.
........... ,..,-_...
- ..
11 .1.
,
. ,
,
,
, .
, ( ) .
_.
SS-
.
1, HTML
. -
321
SS-
<tale>, , n,
.,
. L
,
(.
11.2).
, <t> ,
. n (
, ),
. , L
. ,
CSS.
11.2. () <taie>
(),

<tab l >,
CSS.
( ) .
, HTML .
, ,
, .
CSS - <div>.
,
. , ,
CSS
<di v>
,
n . , , SS- n L- .
<div>
CSS <div>.
1, e<div>- L-,
. ~n L- CSS~ .
322
11.
CSS
(
,
).
, .
<di v> L-,
. , ,
,
<di v> . ,
<di v> ,
, , ,
. .
<di v>
. L
<body> <div>.
,
CSS n~.
<di v>, ,
( ID) , CSS
, ( . . 12),
(. . 13).
:~
di v SS-,
. <di v>
n r < ocquote>,
. ,
n fl oat,
<di v>
. ,
(,
~ n
n, , .
<di v>. n ,
. 9). , ,
, n <di v> :
<div> n n
<di v
, ,
1d~"ma1nNav"><ul> ... </ul></div>.
<div>. , <di v>- n

J< <di v>,
<ul> . r <ul>
n,
n ID : <u1 1 d
HTML
<div>,
''mainNav">.
n n HTML-
<di v>,
n , n
n , .
HTML. , n
<dl v>
- ,
n ,
323
CSS
CSS -
. -
SS- fl oat. , ,
.
8,
, .

<di v>:
, ( <di v> <<

<di v>, ).

fl oat
<di v>,
. ,
,
<di v>
. , ,
100
15 .
InDesign Quark Xpress,
. , -,

.
13,
,
.
, .
.
-----------------------------------------------

Firefox, Safari
CSS,
Iteret
Explorer 8,
. ,
-,
.
IE
7.
16.
CSS -
, .
HTML CSS. , ,
CSS
. ,
CSS
), , ,
, - .
, ,
.
, . ,
- , .
324
11.
CSS
, , . , ,
.
-- (,
, , , -,
, ).
, . ,
, , ,
. ,
, r , .
, . ,
,
, ,
.
, .
HTML CSS
, ,
. ,
Photoshop, Illustrator Fireworks,
.
, , ,
,
HTML CSS.
,
, .
,

,
.
, Illustrator,
- ,
, ,
( ).
------------------------------------------------------
Yahoo
(Stecil
ypatters/wireframes),
Kit) (http://developer.yahoo.com/
Illustrator, Visio, OmniGraffle
-.
, , , ,
.
325

, ,
HTML CSS .

, . ,
11.3 , :
(
.
11.3).
, ,
<div> (
HTML,
).
<di v>.
, ,
, , L-
<di v>,
, , (,
.

<di v>.
11.3), ,
L-, ,
,
(, , ).
<di v>.
<di v>,
, .
11.3
news
footer
<di v>,
<d i v>. ,
. ,
( )
, .
, .

.
, :
.
, , . .
. ,
,
<di v>
, .
11.3 <di v> - banner, mai n, news footer -

<body>)
. ,
,
.
CSS, <di v>
326
..
Chla Vet .uu...,.,c,.., ...~..c"'.vtt
11. CSS
s>ioo""-~
'
_00........ . .
-,....,
. . - (...)JU.UU
....,~(III)t.JtiJ
1<div id"anne,">
\810/SD-1 ...
<div id=''signup">
~padding-top:1
<div id="main">
padding-left:585px
...
1
<div id="tag"> 1
<div id-" news" >

<div id="news1">
<div id="news2">
<div
id="news">
<div id="footer">
1<div id="testimony"> 11
<div id="contact">
11
.
<div id=
1
"location">
11 .3. L-,
Photoshop HTML CSS, n
L- <div>

, , , n -,
, . background- image
327
<i mg>.
, <i mg>,
, .
, .
11.3
()
. <div>

Compassionate ... >>
(),
. , ,
<di v>.
.
-----------------------------------------------

<div>
HTML).
-, , ,
- ,
<img>,
. , CSS, , ,
, <img>
alt.

~.
, , .
, .
8 , ,
HTML (. . 8.17). , ~,
, .
.

<di v>,
11.3.
.
( , ,
, ),
, ,
, ,
.
Photoshop,
Illustrato
Fireworks, , ,
. ,
. -,
.
(. ).
328
11.
CSS
, , - ,
, -
?
,-
position.
CSS,
13,
-
.
SS-, .
, ,
, . ,
( .
11.3)
11.3,
<di v> ( <di v i d="ma i n"> ).
, , -
, <di v>
. .
12
, ,
fl t , -
. . <<
~ . 7,
, , , ,
.
<di v>,
fl oat
( ).
L-, ,
.
float : left, right none.
,

<img>:
.floatRight { float: right; }

,
<di v> ,
#sidebar
float: left:
width: 170;
-----------------------------------------------
n n ( ).
, . ,
, , "sidebar",
. , , ,
, . SS-
(. . . 5) float: none,
.
12.1 .
. ,
, .
, .
.
330
12.
COSMOFARMER
Your onl>nc gu.de to ope<lment f&rmong
%&
~ Bathtub
Hydr_oponlc.s
Lorem lpsum Dolor Sof

, 0 ,",,".,,"..,""""'"
Loremlpsumdolo<sll omet.consecretver
....,...
odiplsc'ng eit ~ed diOm nonummy nit>h
1-u.~
--.-,
---, -t 1 evismod tlncidvnt ut tooreet dolore mogno
lo..,.
oiQvom eror .olv1pot Ul \vlsJ enlm od
t-"""'-'-----llrninfrnvenk)m Qutsnos1rude~erct1oti0n
~ ~? u8on1eorper su~fpit IOor1JS nisl u t OliQ\.kP >.
convnodo conseqvor. Dvls aurem vel
evm iriure dolo< ln hendrerll1n '~put ole
veill esse moleslie consequot. vel iltum
dolore eu reuglot nula roc;
11
'::;:..::;:;:ttw
Ookws.ile<J~nt:t
I..C ..~fl" r-
.... d
...
;;J'
--'~
tc""'~ P~,~
rw..od ....ldurol
\.ore-1'1"' . """dofc +
.,.,_~
ut wisl enlm od mlnim oliqvlp

LO<em spsvm d010r111 omet consecletuer odlp<sdng elil sed diom
nonummv nlt>h eUilmOd 11neidvn1 vl loOteet dotore mogno ol1quom erol
,okJtP01. Ut wtsi enim Od minlm enlam. qurs noud eercl totn
ullomcoroer susclpfl toorl~ nlsl ut ~ 8) commodo cons9QU01.
0\ o\Jieme! evm<e doi..'Vn hencirrl ln~pvtote. vellt ess&motest~
conseqvot vel illun' dOIOfe eu leUQiO t nullo loci
Dolor Ev
Lorem ;p~vm dOIOr sl omet consectetuer aolpfsetng QRI, sed dlom
nonummy nh evismod tinctdvnt vl looreet dOIOre mogno ollquom erot
t..:_.:.__
___,_ __, 1VOiutpor Ut VIIi enlm Od .nm verm quls nostrud exercl1otlon
'---------,1 ulamc<>e( ~vse>plt loor1is nisl ul olqu"p < eocommodo consequor.
'----- n
12.1. n float -
, .
12.1,
1.
12.1
(<div id
2.
<div>
ID.
, ,
(<div id
"main">).
"news">),
r <div> .
, n (n,
HTML ). HTML n
HTML , .
.
12.2 n
n n L- : r <di v>
,
<div>
, , ,
<div>
. n .
HTML,
( ), ().
331
12.
SS-
HTML
OJ
1
-- -. -
width:
.
760
1:Z.:Z. - n R <div>
(). R (),
(55-
float: right
332
3.
12.
.
.
, .
, 170 10 em.
,
(. . <~ -~ . 11
<< ~ ).
20 %, - 700 ,
140 . 1000
, 200 .
, .

, .
-----------------------------------------------
,
n .
n.
4.
.
,
. , ,
, :
#main { margin-left:
180
: }
, :
.
,
.
di v
, .
,
, .

, ,
.
- .
<div>
(,
<div id
"wrap">),
-, , ,
(. .
.
12.2, ).
960
333
----------------------------------------------
ns n n

<div>, :
7.
<d>.
n .
(. 12.3).
<di v> .
, ,
, .
['=~
1
1
::
SS-
HTML
11
1
n
11

12.3.
n n
n . n n
L-, n , -

CSS, , ~~.
s n n
w , potmll
3,
3/lttI, JI r,
. layout Gala
.. , :m
40 SS..3,
war 3 waro n 1 n
n s, lntemet
31< <t n CSS.
Explorer S (http://iog.html.lt/layoutgala/).
n, r ,
- n , r
w SS- .
<div> SS-, . ,
. , - n
8 n
334
12.
, n
, n . . h Grid System Generator
(Jacob Meyers)
(www.grldsystemgenerator.com) n
224 ,
http://layouts.ironmyers.
com.
no
.
r
- n
HTML CSS, n
. www.pagecolumn.com
.
r
,
.
, - , . 12.2, .
.
,
, .
,
.
, ,
<di v> , n
( ,
~ n
. ),
, n ,

div
HTML. , , . 12.3,
<di v> .
,
.

<di v> HTML
- ,
- CSS,
, ,
.
CSS
( ,
, )
, . ,

, . ,
, ,
335
1
1
SS-
HTML
IJ

IJ

11
Im
12.4 .
1
n n. n3 3
, 3 L- ().
n 3 3 -
,
. L-,
. -
, ,
. ,
336
12.
L-,
. ,
, ,
L- . ,
,
Internet Explorer 6 (. ~>

Internet Explorer 6>> ).
. 12.4 L-
, ,
.
HTML- ,
<di v> . <di v>
, - (. . 12.4,
u). ! L- <di v>.
12.4
. ,
(3) (4) ,
(2) (5).
~>
, ,

. ,
(3 4) ~>
(2). ,
.
, .
-, .
.
12.5, ,
.
, .
, ,
,
() . ,
~> (.
~> . ~> )
, , .
.
12.5, .
, ,
. ,
,
.
12.5,
, , ,
( - ),-
337
Bathtub Hydroponics
Bat11tub Hydropon:::l.::.
c.:.
s .:.:
n:t:e:.:.
s_ _ _ _ _ _ _ __
Wolchl)eWateft~
v..,., ..
.:0\~t!;
CQ,I.Ifon -s
...,.,..."....
~.
r!a6
-.:i
~~I>,,.di'J'Qd
.tff'l'\.lo 01"7"<1
:'Of\wc::"t~ ~ 0011'-
""0 .. 'Nrd
d~~n.N-~
:;JQflt~t~~
t)
J'OI""'tii'O~QII'!
od
12.5. 3
338
12.
n n1 n

,
L- .
,
. ,
<di v>
L-,
, , , ,
. ,
, - ,
,
L- .
CSS.
, .
,
(
) ..
"114na - n

n .
he1ght.
min-

, .
min-~;idth r <d.>, n
n ,
: d
1000 ,
n, ,
n ,
{ min-width:
760:
}. n
500 ,
760 ,
min-hei9ht ,
11
,
.
, max-
, ,
, ,
. ,
WI,
, ,
r . ,
<d> : max -wi dth: 1200.
SS-,
, n
min-width, min-height, max-width max-
1800 ( --
339
n n
mi n-W1dth:
II),
,
1200 .
max-height ,
max-w1dth:
760:
1200:
3.
Explorer
6 n .
, lnternet
,
, http: 111
-,
JavaScript,
: www.doxdesk.
com/software/js/minmax.html.
-----------------------------------------------
, ,
, . n
,
( ), www.alistapart.com/articles/
holygrail/. n rn
n ( ) Flexie
Web Design
(Zoe MickJey Gillenwater)
New Riders).
,
.
1. <div>, i.

,
.
2.
<div>.
<di v>,
. , 960 - ,
, 1024 768
.
3. OIDIDIe <div> ID JDI class.

- , ,
. n (. 12.6, ).
4. n div . n
. , '
. -
, - (n
<di v>
).
1,
-----------------------------------------------
rn <div>, 1, n n
. n n ,
n .
340
5.
12.
m . :
.
, . ,
SS- wi dth,
, .
. ,
<di v>,
4
(.
~> . 4 ~> ).
~---------------------------------------------
width , . ,
. , .
..
6.
7,
CSS.
.
, .
, .

- 160 ,
160 : ma rgi n- l eft: l. . 12.6,
, , .
(3)
, ,
160 ,
10
. 10
: l eft edge: 170.
, ,
. ,
160 2
1 1
. , ,
. , 160 ( )+ 2 (
)+ 10 ( )+ 10 ( )+ 10 (
) =
7.
192 (margi n- l eft:
192).
<div> .
, ,
L-,
(. .
12.6, ). ,
,
. -
, ,
,
: . ,
<di v>.
341
01
SS-
HTML
~IJ-r
[ fJ
81

11
-,.
-
1
g
... ...
111
119
..
1-------+----------------~1111
n
1------ - - - - -- - -- - - -- - - - - - - - - 1 11
n
12.6. n div 8
L- ( )
n n (). n
n , n 8 n, ,

342
12.
, ,
, . ,
400 , 1 ,
10 - 15 ,
192 .
, :
400 + 1 +
+ 1 + 10 + 15 + 192 = 619. ,
, : left-margi:
-619:. !> - ,
8.
Itemet Explorer.
,
Internet Explorer 6
1t .
Internet Explorer
, , .
di sp l :
i nl i ne
, (
.
Internet Explorer 6>>
).
, ,
, .
. ,
. ,
CSS,
, -
, ,
() .
. - ,
,
3.
-----------------------------------------------
, Iteret
Explorer ,
. ,
(. . Iteret
Explorer
).
, , <<!>
(. .
12.1).
343
n n
, ,
. ,
, -
, .
, ,
,
,
(.
12.7, ) .
c1ear ( . .
. . 7). ,
. -.
.
( 1ear :
1eft : ). 1 r: ri ght;
. ,
, , :
#footer { clear : both: }
CD:iD
....,..._... . . . _~~tf'fi<I-....c"'t~:o4
...... ....
.-..,..,-,~.."..".~~t*"tot"~
flot~tll,_..,.....
-..-..
............ ...
vt~---<..,__..c- ..~.411-.- -""~~
~----~p.o~loqeOI,
--~---
_.... ..
... ...
U"_"_ ..... .,._, (><n-----
...
- ....-~ -,_~~!\!! ........... ..., ...
........
... ..........",,""'"~"""''"--'"'--.....
,.......
.
..
~~..__".n.;...,.,..,.._,_...,.~
_.~,..
"~-w "'"""f'"'
-~_."".
--~--"J...
._,.._,,...~\;JO'ot
OOII~:~>t~J
,..,_.....,.~.'\lt....--~
.....
--UP.I...,_~_,..~"'""""-"IIC..,.
CIIU-(~IoI
...... "'''i~ .........
____..
-..
......._,.
. 11.7. , n
. , n
clear
,
r ,
<div>.
, ,
. ,
~ . - . 12.8 <div>,
<hl> , .
, ,
<di v>, . ,
344
12.
, ,
.
. 12.8, .
<div>,
. , ,
. , , ,
,
~ .
) Contdng Flo~ts
/.\ozilla f ~refox
;~-;:, ,-
Bathtub H_ydroponics Ti~

& Watch the Water Leve)__
& Cast-Iroi_! No-No_s _ __

consectetuer adipisdng elit, sed diam
nonummy nih euismod tinddunt ut
volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerd ttion
ullamcorper susdpit lobortis nisl ut
aliquip commodo consequat.
Ouis autem vel eum iriure d
lorem ipsum dolor sit amet,

consectetuer adipisdng elit, sed diam
nonummy nibh euismod tinddunt ut
veniam, quis nostrud exerd tatio
12.8.
n .
n ,
, (). , n
, n ()
----------------------------------------------4 , r r n
, www.c;omplexspiral.com/publications/containing-floats/.
345
i . , .
. . . , , ,
,
<di v>,
</ di v> ).
l r,
, .
-
-<br cl ass
<br> (HTML) <br/> (XHTML)- :

"cl ear" />. :
br.clear { clear: both; }

, ,

HTML.
-. ,
<div>,
<div> ,
. . 12.9, , <div>,
, .
- - ,
, , -
. , .
, , l r
, .
, .

overflow:hidden.
-:
overflow: hidden;
zoom: 1:
overfl ow: hi dden -
CSS.
1)
. ( zoom:

Internet Explorer 6 ( )
. ,
,
.
IE
zoom: 1
7).
. ,
,
. ,
, , , ,
-. ,
- .
346
12.
r . ,
Aslett),
CssCreator.com,
PositionlsEverything.com,

<di v>,
. ,
~ ~ , SS-
.
:
Firefox, Safari, Opera, Internet Explorer 8

Internet Explorer 7
. :
.clear:after {
content : " . " :
display: k:
height: 0:
font-size: 0:
clear: both:
visibility: hidden:
}
. cl ear {
zoom: 1:
,

div, ,
<class div = "clear"> (. 12.9, 1t). ,
, ,
HTML.
-----------------------------------------------

zoom
, SS-
. , (
Itemet
Explorer)
-, , .
15.

L- -.
,
, , . ,
,
.
, .
.
12.10, , ,
CSS,
. ,
. -
347
' ) Contoiing Floats Mozillo Fitefox
G]!i
-~
--
Bathtub Hydr~onics _
! .i. . _s_______
& Watch the Water Level
& Cast-Iron No-Nos

nonummy nibh euismod tincidunt ut
veniam, quis nostrud exerci tation
utlamcorper suscipit toortis nisl ut
aliquip commodo consequat.
Duis autem vel eum iriure d
lorem ipsum dolor sit amet,

consectetuer adipisdng efit, sed diam
nonummy nih euismod tincidunt ut
veniam, quis nostrud exerci tatio
h Latest Addition
---------- --------------Lorem lp.sum doJor sit 41met. consectetuer ..
1 .:
.
12 .9 .
. () n n
CSS, n . ()
. , .
IUi , r
, ,
.
12.10, .
348
12.
(! t
lofem IP*-"' doiOf 1111. wt. CQnC.tft.uet: ~ ellt. d

d! ~ ntlh fUISmOd ~t i Llooft <tolot m.tgna
'*"'am ~ ~q>~t.. Uc ""' f!fWn ~ irwl\ vt:n..am. qutS
nostnt t)WtJ UiUOf\ IA~tne011)er ~t 8oOttJS r8Sf ut ilqulp
~ ~t. DuiS ~t. v~ eum nre. vou11 flnd
mote infonnon hoete.
const~a.au ~ ellt. sed

~ nonummy nh et.I&IDOCI tilneloC'!t ut ~eet OOIOt'e trl~
~ ~t ~t.. Ut wwt t!fWn oild nwwn venam. ~
nootiNcf 4((ef'CI QtiOI." ~ ~t kJortlll NtJ Ut . . . .
Ltm 1psum cld srt .amet.
commodo
consequac. OVrl ~tom vet eum 111ute.
u:em IJ)5tml
dofor ~t ~~ consecte.....- adiipls)O tit,.. se.d

<Nm nonummy nitl ~ oncldw'lt ut &actt dolore m..aqu.n erctt volutpi1L Ut ww ~ <1d rnnm ..........n, qu'$
nos'Vd ~ tatw'l ut.mtorper SU5aplt loOoa+tct t1 ut ~
c0f1Wno60
&
conqwc.
Ouis .Ntem ~~
e\.m ...."...
Ruber Duckies Need 't Apply
LOI'etn lp5Vm
t.
concten.w ~
d
tuasod ~t ut ~et dolofe ~
dolor t _,.!,
cUm nonunwnv
~ ~t
'*'
v<Jq:..tt. ut Wi$i ..... lld"'""' ~. qiJIS.

nottiUO 8)'ttCJ QhOn ~ICorp.tl' IUS(fC JoIis nesl Ut ~
'f).. U CornodO cante<~U~f. Oul$ ~ vtl'l ~ "*118
LotI !pSUm d' SIL ..wr.. c:onctetuer .adlpd<::II"'Q elit. Ud
r..h et.ISinOd ~t ut la'Nt 6010tt ~
cNnt f'IOI'UWnY
J~tqU&m
lf.at
vtNtp~t.
x.en:.
Ut ._.. erwn ad""'""' v~.
kOotor,..., ut ~
sttud
t.t~ ~f' .U.Ciplt
t1t 8)' commodo c~~t ~ aut.tm "" tu1n
n"re.
& Cast-Iron No-Nos
.pam dol s.t ~~ consectet\1 ~ t. Nd

nonunwny nh ~mod ~t ~t ~t ~ ~
L.oft!m
dlm
~ tt;1t YOivtPat. Ut "'~&~......." ~ ~t~nm ~. qi.A$
nostrud exen:::t ton !Aamcotpef' s-.utc:~t lootOt 1 ut lliqulp
:~ ~.at. eu. .:..t41 .,., ...- .-.... You'l ~
more .,fm.taon r.
& Watch tJJe \Vat.er Level

I.Otetl\ IPS'A'fl' d- Stt ;amet, C~4!C[~tuef' ~'"IQ . .t, sed
nih ~ ~tut ~eet~~
~ et~t YOiutpat. Ul ws erwn ~ ri8VJ' wtl.1tl1 ...,.
nostrud uerc1 taon ulamcofJ' .u!plt kiOorDt tiiSf tJt - . .
e~t ~ commodo constquat. O...S auttm vfl eun -.nu-e.
cNmnonummy
u:.rem .,..n dotor Slt .ntt, conc:te.tul!f a~II'IQ ~t. .S8d

(Qm tvJtUrltffll nif'l eiJIAIIOd tJnclunt Ut ~OfHt dolof't: ~
qu4\fn
volutpaL Ut WtSt ~ 41<1 ,.._1 @,..., q.a
nostrud exete1 uon umcOfPN SUSC:IIPtL ki<OC"ts nr$1 ut ~
COf'IOdo conqu;at. OUis ~ut.,., vf w.A ........
&
Rttber Duckies N~ 't Appl)'
LI ap:;un dokw
Stt ~~t, CotiSKtt~.~~~r ~"'Q tll'* lt:d

f'I.JtttnOd O'ladunt Ut ~' dolate thlgN
~ r\Ih
-~~ VOIYtp.tt. Ut 11 OI"Wtt . , 1'I'WWft; ~ qtli!S

tXtfQ tataon ~ tut~ 1oott,. n86l ut ~
u~~t.OU.. ~1\vt.J
e.,.mnn.
lorem IP5U"' dolof tet .a.'fltt.. c.on..cc.tutr ~"'9 ..t,

~ ntii'U\y ~ tuiCmOd ~t IJt ~t
dolote ~
altquam: tlat volutpJ~ Ut o;rrt;.~ .-n .-cr nwwn ~ qu.s

nosttu<J extra uocn titnc:Ot'P'ft' RtSQPt ~s ..- aiqulp
tU C:~~t . ~.8Utttfi"V4tt:U!'inur9.
Cast-I ron No-Nos

1..0m ~ dok>f' Slt .;met,
1:
tth
ccnste.tu!N adlpc:sQtlg ek, sod

eutsmod ~t tit lacrt ~~ .gn.a
ut w.sa enm ~ mll"'lm vtnioI
.12.10. () ,
3 . n
(), ,
349
, ,
CSS,
. , ,
, L- <di v>,
:
<div id=''sidebar">Sidebar content here</div>

<div id="main">Main content for page. this column has
much taller than the sidebar.</div>
lot of text and is
<di v> ,
170 .
, ,
. , -
<di v>
<div id="wrapper">
<div id="sidebar">Sidebar content here</div>
<div id="main">Main content for page. this column has
much taller than the sidebar.</div>
</div>
lot of text and is
,
, ,
#main ,
di v . :
<di v> ,
, . ,
,
,
di v (. 12.11, ).
#wrapper { background: url (images/col_bg.gif) repeat-y 1eft top: }

,
, . ,
( Dan Ceder-
holm}, ).
-----------------------------------------------
. n ,
, .
. -,
<div id="wrapperl">
<di v i d="wrapper2">
<div id="sidebarl">Sidebar content here</div>
<div id="sidebar2">Second sidebar</div>
<div id="main">Main content for page, this column has
and is much taller than the two sidebars.</div>
</div>
</div>
lot of text
350
......
.......
12.
,.
#wrapper {
background-lmage: url{column_bg.gif);
background-position: left top;
.
l[i:;
#wrapper1
#wrapper2
. 12.11. n n
n <div>. ,

-----------------------------------------------
n ,
n .
. , ,
, n - n
. .
n n ,
- n , .
<di v>,
; r n <di v>,
(.
12.11, .).
#wrapperl { background: url(images/coll_bg.gif) repeat-y left top : }

#wrapper2 { background : url(images/col2_bg .gi f) repeat-y right top: }
351
,
~ ,
.
-----------------------------------------------
,
, . - . ,
, www.commuitymx.com/cotet/artide.cfm?page=l&dd=AFCSB.
,
(.
12.12, ).
, ,
, . ,
.
, ,
. ,
. (
) ,
. ,
CSS:
<<
. ~ .
7,
, ,
wi dth. - ,
, ,
. ( )
.
, , ,
12.12.
. , .
:::>
. <div>
.
760 , ,
, .
::>
( ).
::>
150 ,
170 ( 150
10 ).
+ 1
390 , 1
15 ,
422 (390 + 1
+ 1 + 15 + 15
).
352
1S1de~-
12.
Main content for this page.
content here
lnaccurateC.y c5culated widths are one of the main c.auses of
-cotumns that drop betow other col.umns. ln this case the
.width of the ieft stdebar and main content are too wide to
~ow the r1tjht sidebar to fit 1t (.
Stdebar
content here
L------------------------------------------------
r ~:~~; he<e- at~-~=~te:t~for th~s-p~e :=,~--~~~--l

lnaccuratel.y caicutated Wldths are of the mi!llln causes of
cal.umns thot drop bet.ow other cdum.ns. ln this case the
wtdth of the left sidebar and mrin content are too wide to
allow the r1!ht sldeb to
l_______
Sldebar
content here
~~
lnto ptoce.
Sidebar
content here
1
__________________________j
Main content for this page.
Stdebar
lnoccuratel.y c5cutated w;dths are one of the main causes of

.-col.umns that drop bet.ow other cotumns. ln this case the
content here
wtdth of the left sldebar and main cOntent are too wide to
allow the r1!ht sidebor to flt into ptoce.
. 12.12. ,
().
, , n ()
( ).
150
10
170 , :
762 .
2 , <di v>. .

<di v>
12.12, ,
. (
) , .

14 ,
15
, .
353
Intemet Explorer
-
, . ,
.
. ,
.
,
. ,
, , .
100 %.
Itemet
Explorer 6. Internet
Explorer 6 , ,
, .

6 ,
. ,
. ~ ~ .
Itemet
Explorer 6. Internet Explorer

6 3
. -, ,
, .
, << ~ .
. ,
, ,
Internet Explorer.
overfl ow: hi dden
.
, ,
,
<< ~.
, ,
,
.
Internet Explorer 6
Internet Explorer SS- ,

, .

.
Internet Explorer
, .
354
12.
,
, .

, .
-----------------------------------------------
. . ,
, , .

. ,
, ,
. .
12.13
.
,

10 .
, Internet Explorer 7 8, Safari Firefox
(. . 12.13, ) 1 .
Internet Explorer 6 (. . 12.13, ) 20 .
.g
. , ,
, ,
(. ~
!> . ~ !> ).
-----------------------------------------------
, ,
, ,
.
di sp l : i nl i ne:
SS-
#sidebar {
fl oat: l eft:
margin- left: lOpx:
width: l:
display: inline;
di sp l
Internet Explorer.
, ,
, ~ !>.

zoom: 1 di sp l : i nl i ne.
di sp l
i nl i ne ( di sp l
~ !> . ~
in<
355
Intemet Explorer
IAIHIIB
10
Lorem ipsum dolor sit ,

diam nonummy nih et
magna aliquam erat V<'
quis nostrud exerci ta
aliquip commodo
You'll find more inform.
lt. Watch the w.

Co~mof:..trm!:tt . cotn
bett ct v~~ that vour
priva-t:y S rmportant. All

mon1tn9 that t;ak~ t
pi<E: s you vf$t <'tur
s.1tct 1s p rotct4!d.
Ln(Qrt.m tion c:o ll ~tr..:d '

' mit~d t,~ t>\f ""!'t\l!']r't.- ...,1
#sidebar {
tloat: left;
margin-left: 10;
width: 160;
}
Lorem ipsum dolor sit ,

diam nonummy nih ~.
magna aliquam erat vc
quis nostrud exerci ta>.
aliquip commodo
Lorem ipaum dolor sit ,
di.~m
non.1mmv n1bh
t:-
>m armer . IICrosoft lnternet E.xplorer
IAIHII B \
20
Lorem ipsum dolor sit

diam nonummy nih
aliquam erat volutpat
nostrud exerci tation ,
commodo cons ~
fin.d more information
&
: ." "'(f a!~r. ~r , .~ n
o~f'"" '"' c>i
tt,lt\.ut
~'"'i'. ,S( '.' l i I1POrt~"t
J.l!
"r'l()<'\ltOt)r9 t h ;;' t ~ k<:::
f:'l iH ~ IJI :;. (\.'U :~S. t ~ r
: .~ ~ : ~ { : . ~':...... .
,, ..,
Watch the \ '.
Lorem ipsum dolor sJt

diam nonummy nih
aliquam erat volut:pat .
nostrud exerd tation '
commodo cons~
L~rem Jpsum dolor sit
rti"":trn r'f)"'''"'"'\' 11ibh
. 1 2.13. n, n ,

1 n
. Flrefox () n,
lnternet Explorer 6 () ,
356
~ .
12.
7).
, ,
Internet Explorer,
#sidebar {
fl oat: l eft:
margin-left: lOpx;
width: l;
html:
* html #sidebar {
display: inline:
}
-----------------------------------------------

CSS
Intemet Explorer
, r ,
* html.
, ,

Internet Explorer

Interet
CSS Intemet Explorer

Explorer . 15).
n
Internet Explorer
.
.
D1 .
,
.
, , ,
(.

12.14 ).
, , ,
~ ( ).
* html #mainColumn { zoom: 1; }

.
- ,

(.
12.15,
). , ,

(. .
12.15, ).
357
Intemet Explorer
n n
veniam, quls nostnl exercl tilt:i

commodo consequat. D . ,
rtate vellt esse molest1e consequa.t
ero eros et accunsan et iusto odlo df<o
utem vel e;m iti..re dolor ln hendreti
el i\li.tn dolore eu feu<!l&t rntla fac!Us
n n
.
12.14. ,
n.
r (
Internet Explorer 6
):
* html #mai nColumn { margin -left : 0: }

3 r
. _ ero :
* html #sidebar { margin-right:
- :
.
SS- (,
) ,
Internet Explorer
. ,
http://www.positioniseverything.net/explorer/threepxtest.html.
,
. , .
12.14 12.15,
ero ,
358
12.
n t
L.tt s!CS...r 1\onod his cotumn has !At wldttt, whlch . left (wldth 160)
plxek ( whlt. spac .tw.... slc~war ar
10 drop.
Q_ 'ps>.rn dola< slt amet, consectet....-
~ tlncl<krt ut Laoreet dola<e 11>0!\N

mfn1m ventem, quis nosuW exercf tcttiOn t.lt
llqulp ~ . <Omi10do consequ. Duls "'
V\Apuut<." veUt"""' mole<tle mnscquot, V<

vero eros et iiCXtmS8\ e-t. tusto odfo dlgrtk-~
la<em lps>.rn doiO< slt amet, consectetuer
eulsmod tlnci<\t ut Laoreet dola<e magno
rnlnfm vef'ltam, quis nostrud exercl tation ""'
allquJp 1< .> corrmodo consequat. Duls
V\jputeh? veilt ~~ molesde> consequat, v<
vero eros et aca.msan et iustO odlo dtgnls-s
nn1lorem lpsut1 dotor s1t W?t, c.onsecte
n ih e..rt~ ttncidu\t ut L10reoet: dotofeo
12.1 S.
hls column has -
wldttt, which 8"-

plxol of whtw spac .twn sic~war an<'
todrop.
lorem
lpsur~ doiO< sit amet.
,..tt~ ,...., "'
~ t~ollloPf
conoectetuer .ar
fJn' ,......t'l'\4(!1\!1
n ,
" ,
lnternet Explorer 6
n (). 3
()
n n n
n:
#mainColumn {
float; left:
, , n
n n .
-----------------------------------------------

IE 7 , .
http://css-discuss.incutio.com/?page=IE7. , IE 8,
IE 7, CSS .

r.n
Internet Explorer
n, Internet Explorer 6 n
, n .
, n
. n n,
n n .
lntemet ~plorer
359
~u1G zwzomu.

http://www.positioniseverything.net/explorer/guillotine.html.
r , r
,
. peek-a-boo ( ).
http:/jwww.positioniseverything.net/explorer/peekaboo.html.
, , n,
lntemet Explorer
zoom, SS-,
n n
lnternet Explorer: pos1tion.

absolute:,float: left:,float: right:,display
inl ine-tae:, width height.
zoorn , ,
CSS.
SS-, lnternet
Explorer 8, Firefox Safari, lnternet
Explorer 6 . , nn IE 6
, n
r ,
, 1 n3)1.
CSS, w1dth height,
n Safari, Firefox n
, n n
. 3 , n
1ayout. n CSS
zoom , r
HJML. n
n, n lntemet
Explorer ( 7 ).
!, n n
n,
CSS n
W (.
n r .
n r ,
. . 2).
8 lntemet Explorer n , nyThl

n 11 n
lntemet Explorer 7 ( n r)
n- ,
. 8 n n
, .
lnternet Explorer iQ 2 . 9 ,
lntemet Explorer
n n , r n n
. n,
: min-width, max-width, min-he1ght maxheight (. n
n :
. n n
* html
.nav
( zoom: l: }
, n.
zoom n lnternet
, 1
).
n ,
n , n
fJcplorer 3fl w~
(n JavaScript). zoom
www.satzansatz.
lnternet Explorer.
lnternet Explorer . n
Microsoft, n
de/cssd/onhavinglayout.html. , Microsoft
..-
http://msdn.microsofl:.oom,len-us/lirry/
n .
250481(VS.85).aspx.
360
1:
12.
,
, . ,
.
, www.sawmac.com/cr.s2e/.
, . 2. 12\layoutl.
HTML
CSS, -
. , L-

1.
<di v>,
start. html
L-:
<! -- sidebar goes here -->.
, HTML :
. -
, .
<di v> .
2.
<div>:<div
Enter,
id
= "sidebar">.ae
- ,
L- , ,
, . .
.
. .
si debar. txt, ,
start. html. L- <di v>,
2.
. <di v>.
4. , , </di v>.
3.
.
, .
.
5.
L-:
-->,<div id = "main">.
).
</di v>,
. L
, ,
L- .
3.
<div id
"secondary">, Enter L-,

1. Enter
</div>.
<di v>,
L-
. .
4.
#ma i n,
#secondary {
float: right:
width: 180:
, ,
.
(. .
12.16) -
. ,
#ma i n .
5.
#ma i n :
#main {
margin-left: 180:
margin-right: 200:
.
6.
. , ,
, .
-----------------------------------------------------8 n , ,
, .
,
,
#main.
, , ,
.
364
12.
r
.
.
1. #secondary, , .
:
#secondary {
float: right;
width: 180:
background-color:
#29456:
,
, .
2. ,
:
#secondary * {
color: #FFF:
(.
<< ~ . ~ ~ .
3).
, ~
. #seconda ry~. ;
, : #secondary
#secondary
#secondary
hl, #secondary h2,
. .
, ,
.
3. :
#secondary h {
font-size: 1.5em:
background: #73AF87:
padding: 5 lOpx;
}
#secondary h4 {
font-size: 1.2em:
margin: lOpx lOpx
5 10;
#secondary {
font-size: 1.2em:
margin: 10 lOpx
line-height: 110%:
10;
, . , -
365
1:
, .
; ,
.
12.17.
SMOFARMER
YOU< onhne guiO$ to penm""" f"'"""9
Feature Bathtub Hydroponics

torem ..,~um Oolor '
LOI'err) 'PS.Un1 tj010f iil o.n,el
C~KII!Iut'! Od:J><'CI<Y.) eit
dm r'\\')f)\!rmy nibh eut.m d
krladunr IJIIo()f'-toet d060r
magrO ~m erof volufpol. 01

'WISt er1.m od rrtnm 'YPniOm.
~u~
rstrud f'txerc- l(}t.or) ulomcaper

w ..clp,t IOot11S Ml \JI oqalf) ~-.
commodo cO<>seqvof, Dui<;
outem "'~ eu,,, i dofor'"

l>er>0/.":1 '> vv~:tote NI mcles r.~t. ei41Vm
OOIOfe eu tevgt n.. foci
Ut WISI en!m od n1rrum oliqurp
Lorem ioS<Jn dolor 141 011'(:1 conctetvl>< (lc!<pi>cing eil sl'(l
omnorn>ml n:t>l'l )t.N\mO<! '"'cO\JnlutloO<tJefOQ!cJ<>
mogno o~QVOm erof vofutpat ut ..._,;\1 enifn oct f'l"\\lrWn 'ef'!trn
ovrs nostrvd '"~'~ loi>Ot\ IJI1omcorper wp:t lot>o<t~ 1 vt
oloQv.pexoo cnn n>q<jo consf'q<lot Dv~oulem'ffll"''"' w
dolor .n .hentkent ~ vt.pvrntu vebt &.~ ntQ1es.bf" ('orof'Q't:ol ..,,
illum clotote w teuljiot nvll<r ICic:
Dolor Eu
Lorem ipwm do4or ~~ on>el <O<W!CieJve< ndiP:"9 e<t
dm "M\tmmv nit>t\ '~)t1)d lif1Cick.tnt utiOcwr?fl1 dc""'arr
mogno o>quom / vo4vlpol. Ul ""''" enim od nm<n' ven
quis no-std e.~rd totion uom~Qfoer SW"JPI\ loort.s n;-.J
ot-qu!p . ccvnn1odo con-sf'!Qol Dvt~ nurem vol
dOiot "'hend1enllt1 vUtpvlot,; vekt <>$> I\'ir1\tl!' c:onsriO<.,Cit
..,_,m do~c eu rcuo'OI nvlfo fnc:
ellllum do!orP eu fegooJ /lutlo taco

dotot <Jt amel. conV>Ctel<ler- od;p.scng ~~~~
LO<IIPI<ml
11.17. n , ,
n1 . n
, ( ).
-------------------------------------------------
8 #secondary, n , .
~&'JI n , n n
. i1, n h n
h4
, n n. n
,
cet1i .
(In the News Aound the Web)
4. :
, . ,
.
366
12.
.
,
,
.
5.
body :
body {
background: url(images/bg/bg_column.gif) repeat-y right top:
bg_ l umn. gi f
, .
,
right
repeat-y

(. .
~ .
11 ), , ,
. , ,
, ,
.
. L-.
1.
<body> (<body id = "feature">)
<div>:
<div id="wrapper">
>.> ,
. , .
2.
</ di v> </ body>:
</div>
</body>
, ,
, .
3. body, , ,
:
#wrapper {
width: 760:
, , ,

760 . ,
, .
, .
#wrapper.
4.
1:
367
body,
#wrapper, :
#wrapper {
width: 760:
background: url(images/bg/g_column.gif) repeat-y right top;
.
, .
12.18.
Feature: Bathtub Hydroponlcs

Lorem lpsum Dolor .Sal
Lorem lpsvm dolor
sltomet,
consectet uer
odlpisctng t. s1
d!om nonvmmy
nih euism od
tinddunt vt
tooreet dolore
mogno oliqvom
erat volvtpot. Ut W1~ enlm ad m!nim veniom,
qvls nostrvd exercJ tatlon u!lamcorper svscJplt
loortls n~ vt ollqvip commodo
conseqvot. Ou!s ovtem vet eum lrlvre dolor in
hendrerit ln vulpvtote vetlt esse molestle
con!QUOI, vel~m dolore ev fevgiot nvlla focJ
Ut wlsi erum od min!m ollquip

lorem ipsvm dolor slt omet, consectetver
odiplscing elit, sed d!om nonummy nih euismod
tlncldunt ut looreet dolore mogno oliquom erot
vorutpot. Ut wisl enlm ad mlnlm veniom, quls
noS1rvd exerei totlon vlomcorper suseip!lloortls
~ vt oquip commodo consequot. Dvis
ovtem vel evm Jrlvre dolor 1n hendrerit 1n
vulputote velt esse molestle consequot, vet ilum
dolore ev fevglot nvllo focl
Dolor Eu
lorem ipsum dolor $11 omet, consectetver
odlpisclng elit. sed dlom nonummy nih evismod
tincidunt ut laoreet dolore magna ollquom erat
volutpot. Ut wisl enlm Od mlnlm venlom, qv!s
. 12.18. -
L-
<body> <div>,
- 12_finished\
layoutl.
368
2:
12.

,
, ,
>.> .
>.> .

12\layout2.

, L- .
, , - SS-, .
,

1.
<di v>
ID.
start. html
12\layout2.
12.19 L- ()
, . ().
,
SS-.

2.
<head> L-
<styl >.
.
,
,

3.
CSS>.>
. >.> .
2.
wrapper:
#wrapper {
border-right: 2 solid #000000:
border-left: 2 solid #000000:
background: #FFFFFF url(images/column_bg.png) repeat-y right top:

.
.
>.>,
>.> . >.>
.
<di v>
~ .
2:
369
SS-
HTML
wrapper
11
#main
11
#news
#mainNav
11
#legal
width: 760
.
12.19. n ()
().
<div>, <div>. n
n , ,
4. #wrapper, .
, , :
#wrapper {
width:
760;
auto;
margin-left: auto;
margi-right:
border-right: 2 solid #000000:

border- left: 2 sol id #000000:
background: #FFFFFF url(images/column_bg.png) repeat-y right top;
wi dth
760 . di v,
auto. ,
. , ,
, .
,
~. .
.
, ,
. .
370
5.
12. n
<body>:
,body {
margin : 0:
padding : 0:
background:
#66
url(images/page_bg .png) repeat-y center top :
, ~~ .

background. -,
(# ) . - ,

. cent er .
,
(. . ~ ~ .
8).
, ~~ . 760 ,
. ,
(.
12.20).
1psum dotor sit amet, consectetuer adipiscong e~t. sed diam nonumrny nih euosmod nddunt ut laoreet
magna aliquam erat volutpat. ut woso enim ad monim veniam, q..as nostrud exerci tatoon ullamcorper suscipit
nosl ut aliquop commodo consequat. Duis autem vel eum onure. You'll find more ~nformatJon here.
~psum
dolor s.t amet, consectetuer adlposctng e5t, sed dtam nonummy nih euosmod tincldut>t utlaoreet
magna aliquam erat volutpat. Ut wtsl enom ad mnrm venoam, qutS nostrud exerco tation ulamcorper 5USCJ!>1t
nisl ut aliqiJip commodo consequat. Duos autem vel eum iriure.
ipsum dolor sit amet, consectetuer adoposcong ebt, sed doam nonummy noh euosmod ncodunt ut laoreet
magna aliquam erat volutpat. Ut wosi enom ad minom veniam, quos nostrud exercl tatJon ulamcorper suscopot
rnsl ut aloqutp commodo consequat. Duis autem veJ eum iriure.
Rubber Duckies Needn't Apply

ipsum dolor s1t amet, consectetuer adlposcong elit, sed diam nonummy nih euismod nctdunt ut laoreet
magna a~quam erat volutpat. Ut w1s1 enim ad monn veniam, quis nostrud exerci tation ulamcOfJ)8r suscipit
rusl ut aliquip commodo consequat. Duis autem vel eum irlure.
ipsum dolor stt amet, consectetuer ~diposcong elo~ sed diam nonummy ntbh euismod ~odunt ut laoreet
magna aliquam erat volutp~t. ut wisi enim ad monim veniam, quis nostud exerci tation ulamcorper suscopit
nisl ut a6q1Jip '"' commodo consequat. OUos autem vel eum inure.
opsum dolor sit amet, consectetuer adiptsc~ng elot, sed doam nonummy nobh euosmod ncidunt ut laoreet
magna altquam erat volutpat. Ut wiso en1m ad minim veniam, quos nostnJd exerci tati~ ullamcorper suscipit
nisl ut altqulp commo<lo consequat. Duis autem vel eum inure.
ipsum dolor stt amet, consectetuer adipiscing elot, sed doam nonummy noh euosmod nctdl.nt ut laoreet
~ a5quam erat volutpat. ut wisi enom ad rmnom veniam, qu~s nostrud exerci tation ullamcorper suscopot
nosl ut aliquip commodo consequat. Duos autem vel eum iriufe.
ipsum dolor sit amet, consectetuer a<foposcong , sed d<am nonummy nob~ eursmod tincodLwlt ut laoreet
magna a5quam erat volutpat. Ut wosi enim ad rmnim venoam, quis nostnJd exerco tation ullamcorper susciptt
commo<lo
Duis autem vel eum ltiure.
. 12.20.
<body>,
2:
371
12.19 , L- mai n,
, L-
ID, mai nNav, ID, news.
.

, . L-

( ma i n)
, ,
ma i n -
, .
.
(.
>) .
~ >) ),
.
1.
ma i n:
#main {
float: left:
width: 419;
padding-left: lOpx;
border-left: lpx dashed #999999:
.
, ,
.
news.
2. , :
#news {
fl oat: ri ght;
width: l;
, .
3.
#nav {
fl oat: 1eft;
wi dth: l.;
, .
12.21. , ,
, .
.
:
, -
.
, .
372
12.
Lorem lpsum dolor slt amet, coi\Se<tetuer ~dlpJs<I9 ellt, sed

FEA1VRES
dlam nonummy rt4h eulsmod tlncldunt ut taoreet dolore
~ ~~- ,.
magna llquem entt volutpat. Ut wtst enlm ad mtnlm venam, "'" EXPERS
quJs nostrud e)terd tatJon ullamcorpe:r susclplt 'r.s nfsl ut " " UIZ --
allqulp commodo consequat. Outs autem vel eum ltiure.. . Q .
..
You,l tind more fnformatJon ~re.

"'" PAOJECfS
& Watch the Water Level

L.orem fp.sum dolor sJt amet, c.onstctetuer
nih
dlatn nonvmmy
adl~sdng t,
eutsmod tfnctdunt ut laore-et ~lore
sed
~~.~;::.~~~ lt..twt:~
magna aHquarn erat volutpat. Ut wlsl enlm ad mln1m venlam, ~t"')."ftf>t ,11 I'!Wti\Crl"9
quls nostnJd exercl tatlon ullamcorper susdplt toortls nfsl ut t,..,~ tt~ ~IC't ~ 110\1 v.~
allqutp commodo consequat. Ouls autem vel eum lriure. "::_~:,~.:n~~t:IJ. ,s
1
torem lpsum dolor stt amet, consectttuer adlpisclng ellt, sed ~tm"'!:d t' ~ ~ cr
dl.am nonymmy n4bh eulsmod tfnc:Jdunt ut faoreet dOJore
~~a;n:~ ~=~ vor
magna elfquam el'at volutpat. Ut wfsl enfm ad !"ln(m venlam, ~"~~~ ~- rht1!\ .., .,
quts nostrud exercf tetlon ullamcorper susdplt loortfs nJsl ut ~" ~ "' ~nr~;; ~~
oiJqulp commodo conquat. OUis autem vel eum trture. ,,:.;~~,~~.;~lt~f
&
Ruber Duckies Needn't Apply
(N.f'll'\fo(ll'ti,M!olfp('f'O")' IYA
~,.::;':.: ";~; ;:;::...
:=.
l..orem tpsum dolof" slt amet, cons!detuer adtpfselttg ellt. sed ;~:;/'::
tfle
dfam nonummy nlt>h e~smod tlnadunt ut laoreet dotore
ot: !Jo:Olt.t)'-!>n i
magna allquam erat volutpat. Ut wfsf enlm ad mlntm venlam,
nostrud exe.rc1 ta:ticm
loottls ntsl ut
.
12.21.
L-. () , n
. , n
4. #main margin- left : l:
#mai n {
fl oat : left;
width: 419 ;
marginleft:
l:
paddi ng-l eft : lOpx;

border-1eft: l px dashed #999999 ;
3, , (,
, )
160 ,
main (
160 , .
5. #nav :
#nav {
float : left :
wi dth : 1;
marg;n-left:
- 590:
, -590 ?
nav ma i n .
, L-
373
2: n
, ma i n.
,

ma i n .
ma i n n
160 (
)+ 10 ( ) + 1 ( ) + 419 ()= 590
. , - 590 ,
- ri .
, , . , :
, ,
. 12.22. , Firefox Safari.
- n .
(. . ~ lnternet Explorer
). mai n ,
Internet Explorer 6 , . ,
.
I..Ortm lp$um dotor srt emet.. c:onctt'tuer ~Citptln9 tll\,. sod

d1oam fiOI\Utnmv nll)h: e~s,mod tirkSUI'\t ut 1-aort dolo,..
magne ~llquam trt v~utpa,t. Ut wl$1 enlm ad minlm vniamf
QUis no'trud tallo.n uflamtorper susclptt ~Ortts 1\i.sl ut
..fquip <ommodo cot:qu.c. Ouil illutem \lef *Utn rr,ure.
You'lt nd MOfO fnlorn18tlon ~re .
& \Valrh the \\later J.,e\e\

LOro tpsum CS010f omet~ c.on.a:o(...or ecJipis<-lng ellc, std
diam nonummy f'IIh tutsmod Ut~Cidunt vt ~et 6otort
m~n~ atlquam >ret volutp.-t. Ut wts) e.nlm od mtNm VCI"'ii~tt,
qws noS-tud ox~rd t~~on iAiem,orper sdpit loortls ntsl ut
IIIQUip tx: 'omfl'\odo CO/'$equat outs outttn vel eum 1fiurt
Loem itum dofor 4it met, (Oflsoctetuor edlpisang ellt, sed
Oiam nonumy nrh tufstnod unctunt ut laore:et dotore
mogna 1llquam t YoJuts>at Ut wlsl tNm ad m1n1m ven~m,
a;uts nosttud tl(trcf t6tron tJit4mcorpe.. s:usctplt loonts ntsl ut
aiiQuJp . commodo tO$equ~t- Outs autem vcl e-um triUit.
&
RM>t!l' Dckies Necd 't Appl}'
I,.Ot~ lp$Um dOI-Or .J1t atnt.t.. COMtctttuer I!t<:fn9 Ollt, $od

dlom nonun1my rwl;ttl ~Lsmod dncJ<Nnt vt IOOfOit dolore
M19f\& oiiQui!lm Ui!lt vetutp.at. Vt wi,. et\Jm ;s,d mlnlm venfam,
Qufs r.osttud t:~o(CI utaon ullamcof))Of susC'I~t toorot nfll ut
t:'""'
oltqulp ew commo60 cor\quat. ouJs :tuttrn vet

L.Ort:m tf)S-W'I'\ dOior Slt amtt, conctetuer I<ptSt;tflg ttltt.
nibh euasmod tHIOdurtt: ut IOf"t d~o(e

magno tJ!qu.m e,..t volutf)ot. Ut. wlsl orn ild mln.im vtnlam,
dl. ~t)l.llf\11'\Y
cau;s strud exorc' tAt.lon uiJamcQt1)8r susctl)tt lo~s nltl vt

8l1qufp ~ commodo conseqU-'t. Dt.ls atrtem vel eum lrture.
t.orem tpwm dolor Jlt tmet~ tonse:ctotvo,. dlpjWng, 114 s.td

dlam nonummr nin eulsmocf tlnddunl tJt laortet dolore:
Mt9n1 altquam rt vo&utpat Ut w1sl eni. d man1m v~am,
~~~
..,.....,.._-
:.12.22. n n,
374
6.
12.
di sp l : i nl i ne #ma i n:
#main {
display: inline:
float: left;
width: 419;
margin-left: 160;
padding-left: lOpx;
border-left: lpx dashed #999999:
,
(. .
12.22).

,
CSS. ,
.
!> (. .
12.22).
, .
1.
#legal {
clear: both;
margin-right: 160;
padding: 5 5 160 20;
border-top: lpx dashed #999999;
font-weight: bold;
color: #666666;
.
l r,
.
, (
) .
. -,

CSS. ,
-
. , , - .
2. #nav,
fl oat l eft ri ght.
, ,
#nav {
float: right:
width: 160;
.
.
375
2 :
3. #news margin-1 eft :

left:
-590
float
#news {
float: left ;
width: l ;
margi n-l eft : -.S90px ;
(. 12.23).
- L-. ,
,
. ,
, ~,
,
, , .
1 {n,mof.:>r
- -
1- ' ~ : ~
Monllo) f ar""f('IX
Ft:AtURES
Lorem IJ)sum dolof sJt amet, consecttu.r ac:fipd:ang @lit~ sed
dtam nonummy nih eUtsmod tin<:IOurlt ut lioreet doiOre rn.gnil .. .. ~TS
aJiquam erat volutptt. Ut W l$1 entm 411d '"""'"" ventam, qut5
nostrud exerd t uiAmCOf'J)ef susciiJ)tt Soots rst ut 3liqtJ!p ~QU;~
el( . commodo consequat. OU.S autem veJ t~um 1'1Ufe. You"'l
find mQfe tnformatJon here.
"'~.~---
~~OI'ES
Lorem lpsum dotor st arnet. conse:ctetuer ,adip1sctng eJ1t.. sed
doam nonummy nih tuismod ljnc:Jdunt ut i<IQ(eet dolore ""'~~""
aliquam
erat votutpat. Ut Wt51 enim ad m.nm vl!ntam, qutS
nostrud e.xerc tabon vlmcOfPer sutpat loors nisl ut a~quip

c:ommodo C:()()Sequat. Outs aut.E-m veJ Eum rrure.

Lor&m 1psum dolor srt amet, c:onsectetuer adtptsc~ng elit,
6am nonummy nil>h eU!Smod llnC!dnt ut laoreet dolore magna

aliquam el'at volutpat. Ut w151 enim ~d nUnim vef\i.arn_, qu~s
nostud xerct Qtn ulamc:Ot"p susc:!plt Joortis na:st ut Dqu.p
eJr . commodo cOiequat. OUts avtm vet eum 11U8.
&
Ruber Duckies
Neednt 1
I..Otem .psum dokw stt am43~ consectetuer adtpiscing

d!
noh
no"""""y
Ht, sed
euosmod tinctdunt ut ioO<eot dola<e magno
al.quarn .,-.tt voJutp.at. Ut wJ$1
...W ~ 'III'Wm verm.
quis
nostrud exerc1 tatiOn tJttJ,mcorper sust loOrtls nis1 ut ahq~

ccmnodo
con.sequat. o...s CJutem vel eum nure.

t.orm ipsum dotor .stt .amet, consectetuer adipcsong ellt, sed
diam I'\Of14Jmmy nih ewsmod t:mc:ldunt ut taoreet dolore magna
al!quam erat votutp~t. Ut WISI entm 4 rwnam ventam, q1Jit5
nostrud exorc totion ulam<:~r suscopt lotrli no$1 ut o!oquop
12.23. SS-,
. n
- L-
12_finished\layout2.
13
SS-,
, , -
, PageMaker,
InDesign Quark XPress. i SS-
,
100
200 .
CSS- ( }, ,
, ,
,
. .
, ,
CSS- , . ,
, CSS. ,
, , , .
, .
, .
.
-, , .
, , , ,
,
. :
, , SS-
.
, ,
, -
. .

SS-
pos i t i ,
. , , ,
, , ,
377
CSS .
.
,
left, right, top
bottom
em
(
. . 6). 20
200 , .
13.1,
( , ).
,
, L-. ,
, acOJSITHO .
, ,
.
-----------------------------------------------

float
( ). (
t) r .
r.

HTML. , ,
top - 20 l eft - 200
, 20 200
, .
,
L-
. ,
t 4<i), .
. 13.1, . ,
,
. ,
,
, (
4<
!) ).
10.
. ,
fixed background-attachrnent (. 4<
!) . 4< !)
.
8).
,
.
L-,
. ,
.
378
13.
-----------------------------------------------
Intmt
Explorer
flxed) .
n n
HTML (. . 13.1, ).
? ,
11 StltleaUy pos1ttoned <lv>

othlna to r.
I.Orem tpsum do\or slt omet, consect~tt!r ad1ptsdnt ~Ut, Sf!d dlam nonummy nih eul!mod
ttncldunt ut e.c>rt doto.... mas o\lquam trot .otutpat. Ut wf11 tntm od mlntm vtnll, quls
nostru<l ~xerd tatton utlameorper susdplt \oortiS ntst ut atlqulp commodo conuat.
Duls aut~m ve\ eum lr1ure do\or ln
lum dolore eu l~u&lat nutla lad
#2 Absolute
hdrer1t
ln vulputat~ ~llt MSf!
nAsokhlyposltlod
motest~ conquat, vel
<41V>
rm 11Dit1nt- tlle P~F. 20 ~S c1own
, Lomn tpsum dotor slt omet , rm tlle t09 or the l)ale lnd 2110 p\JC81s
nth ~ulsmod
~ ttncldunt ut taol'l<!t dolore
overtrom the teft edt- n..otller P8le
m venlam, qul$
: nostrud exert:t tatton ullamco e~~u don'
llnow rm here.
consequot.
~ l>uts autem vet eum trlure do\or tn hendrer1t ln vutputate ~Ut esse mottle conuat, vel
(J~~~~~J ~~!~_.. ... ~. . ,..~--~----.-,..... ____,._..,. ............_.,._ ....~. .
_____________________
-.
868
')
Rtlai!Ye Posltlonlng
' hnp.locaJfchl2/rtlatiJ Ci Goo9

Lo<otJot\
S<m/1
(!)
..-.,.,
#3 Relative
Pwc. 13.1. CSS n n

-
379
, . - ,
.
HTML
( ).
, ,
- .
, , ~
, .
position, : static, absol ute,

re l at i ve, fi xed. - ,
:
position: absolute:
-
, , ,

abso l ute, re l at i ve
fi xed,
. ,
, .

- ,
.

, ,
, , .
SS-:
top, bottom, l eft
ri ght.
. ,
. , ,
1 em 20 em .
PMEAHE-----------------------------------------------
Internet Explorer
ottom
, n
right
(. ).
em,
CSS : ,
. .
l eft: -lOpx:,
( ).
,
~ . ~ .

positi (top, bottom, left right).
, , (,
),
width.

, :
380
13.
#anner
{
position: absolute:
left: lOOpx:
top: 50:
width : 760:
, .
left:
100
top: SOpx
top: SOpx
.
13.2, .
right:
100
13.2. n n
n (). ,
n n ()
: ,
381
ri ght,
(. . 13.2, ).
100 ,
1eft ri ght:
#anner
{
position: abso1ute:
right: lOOpx;
top: 50:
width: 760:
,
pe-
ry ,
.
13.2, . ,
.
,

. , ,
100 100 .
, ,
top,
1eft ri ght 100 .
(.
13.3, ).
100
100
. ; , .
, , .
-(. . 13.3, ). ,
. , Internet
Explorer 6 , 1eft ri ght
wi dth
.
width
height,
7,
. 50
50
, :
.
position: abso1ute:
right: 0:
top: :
width: 50:
height: 50:
background-co1or: #333:
, . ~
~ .
7:
. -
382
.,,,fl
14
''/>jlll.tllt
13.
'"11
!lltljojl!flcwGo~r
.
-
+ . f!i ~ ID Nlp:/!cso~~.-...m
1&1- t:>css
- ""
ln
~ ....... "'.._.. w.-..... 1 3 ) - ~- c:J- 0oo~oo!tJ
_ __iti
Absolutely positioned <div>

: 100
100
Left:
Rftht: 1
"
.1
c:I' Dont
. 1.
) '
,..
'
&lt
,_
r.,..
.-.
.: :.. . ~ ~ ~ ! - ~- :' ~-~
o liJ
.....
,.;j a ~
..i,h;.[f]h._;:/!csoJO<II/c!t-291>-.h;..

: 100
Left:
100
Rfght: 1
--
. 13.3. , Firefox
(epxy). lnternet Explorer 6, , right

, ,
. 200 ,

ero
383
200 ,
. , ,
,
, 4: .
, ,
(. 4: ~
overflow . ~ .
, . SS-
7,
overfl ow).
.

. ,
(, <di v>,
100 ),
L-
<di v>
, , .
-------------------------------------------------
n, n, n n
HTML
. .
3.
13.4 -
5 em .
<di v>, .

.
bottom
J} , .

right
(. .
<div>
13.4, ).
, ,
,
, .
:
,
,
, ;
,
,
.
384
13.
-r
top: 5em
left: 5em
Nf~ttd
Asolutely
<dlv>
posttioned <div>
Left: Sem
mttiti'iii1111

:
Sem
right: 5em
Left: Sem
bottom:
13.4.
()
()

n
, r:
n,
. , n <hl> ,
.
,
. n, n
>) .

<hl> , ,
, ( - .
13.5).
385
111101 IYIII ..IICI
- - - ----- - - ~-~---- ------ - -- ------ - - -
.Jo- . .
t.orem lpsum dolor slt amet, consectetuer edlpls.clng ellt. sed

dlem nonummy nibh eulsmod tlncldunt ut l~ott ctotore fna9na
111ll quem er1t volvtpat. Ut wltt entm a<l mintm venlm. quls
nostruct exerd tat1on utlamGOtper suscipit loOrtts nlsl ut attqulp

cornmocto consequ.t. Duls
flnd n1ore Jnfof't'nllltlon ht:r.
autem vel eum i?Jure. You'll
IIIII IYIIIfiiiCI
, ; ~e~~~z-~;~;;;;,~~~;;;;~~~-~~-dlam nonummy nlbh ttJISrnod tlrtdunt ut Jaoreet dolore maSJn.a
ellquam entt volutpat. ut wisl enlm ad mtnlm venam, q~s
' no$trud e)(ttCI t..tion ult11mcorper susctptt loOn:ts nlsl ut allqulp
commodo consequat. Ouls aute:m vet eum lrture. You11
tind mor;t tntorm1tlon here.
Watch the Water Level
-~ lam11 IYIIIfllll!!_
,
,..
: U>rem lpsum 6ol0f slt amet, consectetuer adlpisc:lng ellt#

dlam nonummy nih eulsmod tlncldunt ut IAOret't dofore mag
at~quam trat votutpat. Ut wlsl enlm ad mlnlm ventam. Quis
nostrud ercl tatlon ullamcorper sulpit JoOrti J n(~ ut lllqUip
c.ommodo conquar. Du's autern val eum lrlure. You'll
t~. tr~or
i4
lnlormltfon
htr~ .
Watch the Water Level
l.ort:rn II)SUI"'" dolor
lmP.t. C' OI'\\~rf('f~JP.r ~dipi scing
eltt. sr.d
thls lmportll't $tOty with art even mof'e

de.monstrat.on of css. Not:Jce hOw tne esotutely
n~wtrsary 6adge'" moves 11009 wlth lts parent
<hl> . rn. <ltl> has &
posluon appHed \0 1t.
We
lntervpt
~mpot'Uf't
poslttoned
,.,..,tlve
1111111 IYIIIfiiiCI
torem ipsum dolor slt amet. c:onse:('tetuer adip1sc:ng elit,
dCam nonummy nlbh eu(smod t:lncJdunt ut l~oreet dolore mag
<t11(fulltn
PIII.
~r.at
vO(utpf. U, wisl enlm ad mlnJm VP.ni an\,
13.5.
ui s
.:r n
~_
386
13.
-------------------------------------------------
ackgroud-image (. . . 8),
<h1>. , <h1>, ,
(. - . 13.5),
.
re l at i ve
pos i t i on,
, (
l eft
top ),
HTML.
,
(. .
13.1, 1t).
. - ,

<hl>
(. .
13.5, ).
ri ght: - 35:
top: - 35:, <h 1>

(
)
(. .
13.5, ).
- <hl>
posi ti on: rel ati ve,
<i mg>.
top
right
<img>
(. .
13.5,
). ,
(. .
13.5, ).
,
. ,

<img>,
<hl>
<hl>
, <img>,
<hl>, .
CSS :
hl { positio: relative;
hl img {
position: absolute:
top: 0:
right: 0:

top ri ght
, .
CSS <<!> (relative) ,
. , <img> <hl>,

. , ,
, ,
387
CJ!Ocr&a
relative.
relative
~ .
, ,
, ,
.
~-----------------------------------------------

n r, n top, ottom, left
right. <hl>
positio :
relative,
top,
ottom,
left right.
lnternet Explorer
n m n
ottom right, n -
, n
n r
. ,
pyroro t. , XOifl! 3
Contact Us ymy .
n - ,
layout.
n < ,
right
n Ottom
, .
n , lnternet
Explorer

lnternet Explorer 6
, n n
. n n, m
n . lnternet
Ottom right r
Explorer 6 . 12 n , n
.lntmt Explorer n I10
II n 6-< ,
' r n n
, n n
11 n, I\.
r.
13.6,
n -
( ) .
(z-index).
Photoshop, Fireworks Adobe InDesign, ,

: ,
,
,
~ . .
13.6
: n
, z- i ndex . ,
388
13.
-r
.
z- i ndex,
1000. <di v>, ,
. , z- i ndex <di v> 1000,
( z- i ndex) ,
.
,............................................................................
z-index: 2
( Attention CosmoFarmer and

; Nationaf Exosperator Readers
z-index: 3
i C0$1IO/'orrnerls prou<l t<l announc:e ~ 54\'\ni$
z-index: 1
l oppo<t\lnfty tl\~ )'OU wotl't Wac>t tO P05S up. SUb~-
; to&y for thetow,lowprtc.. of$~49 andyoullrecel"" "

1 one Y.OI'wt>salptroo to oth ~s ("'""lnf6
months of , antl611'10<\tof tl\& <lth.)
L............................- ........................,.................................................."
r..
z-index: 1
....................
j Attention CosmoFarme.r and

! National Ex;ssperator Readers
1CosmoF~ proud to aounce H<l~ngs
z-index: 3
l opportunity Utat wu won'l. wan t to pass up. S<Jb,:Ji118111

1 to&y for tl\& tow, low p::c:e of $249 anQ"youV r<>C9\ve ~
[ one ""' subsalption to >tl\ ~n. ( - i n! 6
; months of one, ...,d 611)011tl\$ of the other.}
......... ...............,___,...........-...........................- .............._,_, ..,
j Attentfon CosmoF4rmer and

j Nattonal Exasperator Readers
f Cosmof- is proud to 3CIJIOUI\ce S<!Vfngs
: opportunlty 1/rat j/011 WOR' t W3C\t t\> POSS </):>. su~:~~~~~
} to&y for tlh>low, lov< prlt@ of$249 ..,dyou11 telv.e 4
; one - wsqlpllon \ oth ~ (mtt<ll'llnv 6
-----1- - ; months of C)Cie, 4nd 611'10<\thf of the,othe<.)
z-index: 200
z-index: 1000
L..,_,,......".......................................................c....................... ..........:
.
13.6. -
, -
, - ,
. ,
, ~ n. , ,
- n .
L-
. 'F <di v>
r
HTML <di v>.
, , SS-
z- i ndex.
z-index : 3 :
, . ,

389
. ,
, (. .
13.6,
).
,
(. .
13.6, nocepeu1te).
~--------------------------------------------------- , .
10, 20, 30
1, 2, 3.
.
, ,
, z-idex:
, ,
10 000;.
Firefox, 2 147 483 647.

SS-,
,-
visibility.
). , ,
,
. ,
(vi si i l ity: hidden),
. .
(vi sii l ity: vi sil ),

13.7
.
, .
13.7,
1t,
JavaScript, SS-
: hover.
hidden visiility n display
(. . ~> . 7), .
di sp l n,
, . vi s i i l i ty
hi dden ,
, .
,
,
vi s i i l i ty: hi dden
di s l :

- epejavaScript.
ajavaScript, visiility (

~> .
: hover (.
display).
3), .
~--------------------------------------------------- SS-
, ,
,- http://psacake.com/web/jl.asp.
JavaScript: the jQuery Tooltip
,
tooltip.
jQuery: http://bassistace.de/jquery-plugis/jquery-plugin
390 -
13.
.Jottl~ut.John
Cnattonl'&en
er~asne~a
banCI ~s,ped
ftl'leg.ICtS VIWI. N OOf'oltofS811'1
U01a. ~ W\"0 sr.p ~ ~ous
RtMI.We
1118
***'
$
11\l#f"'....
-----.;
1118
1118
***
$,... ....,_..
***'
&
!'
....., _ ....
~~==" ':.Jn....
cnnt.a NstO on t":.fAarlnt- .-".nonr

$WOIIOI'Itt Olt*'IO mtmot~t \11 OOtllton
swo..
Otk~t Stom\
hrt 9fUC'IJ'C'J rntntot.
'fiO) (PNt Si.itSfWdl. ancJO)t "" Of 1t1ot
ut\C f tC) ~tm indUWi.Cl\&lmOt ff'!
ordotf to dtil ~ 1t1e ur.oear.W nut
"~" f'l'lt$$ion5 jnd uncttialo '!'lltf
t..-<N\1!1 Jam! fOO.CCLn atS91
13.7 . visibllity
. .
()

, SS-
, -
391
.
,
CSS
~. ,
.
, ,
, ,

,
.

,
.
, . .
,
CSS
13.8 ( 1)
,
L-. <span> (. ~ .
: ~ .
3)-
<h1?<span c1ass="date">Nov. 10: 2006</span> CosmoFarmer Bought
Goog1e</hl>
. -,
(-
<h1>)
relative
). (
abso 1ute)
, , -. SS-
h1 {
position: re1ative:
width: 100%:
}
h1 span.date {
position: absolute:
ottom: 0:
right: 0:
font-size: .5em:
background-co1or: #999:
1 : 1 ack :
padding: 2 7 7:
13.8 ( 1):
392
~~-~ . 10, 2006
CosmoFarmer
13.
C~~m.oFarm.er..B()IJ8.~~ G~lf!.... ...
Celerates
6 Years
CosmoFarmer Celebrates 6 Years
The dreaded dandellon
1~.8.
n n n n ,
n n (7),
(2) n
(3)
border-bottom,
. :
pos i t i on, bottom ri ght.
<span>, ,
bottom right .
PMEAHE-----------------------------------------------
n n ,
ottom right. widtt!: 100%; <h1>
Internet Explorer
, .
, >) - . .
. ,
13.8 (2)
<img> r
<hl> .

top
1eft
393
.
SS-, :
h1 {
position: relative:
margin-top: 35:
padding-left: 55:
}
h1 img {
position: absolute:
top: -:
left: -:
, ,
. -,
top l eft
30
30
. ,
. ,
( )
. ,
,
,
-
<h1>.
.
,
, . 55
- .
, Internet Explorer .
, , wi dth: 100% .
<h1> , 100%
,
100%
(. .
. 7 ).
, SS- zoom.
zoom: 1 <h1>:
h1 {
position: relative:
margin-top: 35:
padding-left: 55;
zoom: 1:
~------~-------------------------------------------
zoom , , SS-
(. .
. 2). Intemet Explorer, .~
, . n Intemet Explorer . 15.
, .
394
13.
-r
SS-

,
.
,
- ( ).
, ,
. ,
,
.
-------------------------------------------------
,
.
.
, ,
: . ,

.
, ,
, . ,
, .
13.9, .
L-
- SS- (. .
13.9, ).
: 4
, ?~
13.9, ,
, L-
(ID).
13.9, ,
<di v>
: -
<di v>,
(. .

13.9, R); -
(. . 13.9, ). ,
,
( .
13.9).
, .
13.9,
(1)
. ,
,
. ,
<<>> (,
).
<d i v>
(2 ).
, , ,
395
.......
SS-
HTML
...
--
-lr:il

11 D
1i
~
!
!
l
'-
+--
. 13.9. n SS-n
.
,
.
-----------------------------------------------
, n , n
, n , .
.
(3). ,
,
.
. .
13.9, , (4) ,
. ? , .
, .
. ,
, (5) .
,
- .
. . 13.9, , .
(6)- , ,
.
396
13.
-------------------------------------------------

. ,
( )
, .
, .
, , SS-
,
.
1.
<div> .
,
. . ,
<di v>
ID
, , SS-
(,
<di v>
<div id = "">).
13.9 , ern
L- .
(
)
<di v> L-.
</body>
<body>,
- .
, , L-.
2.
L- , 100
<div>. <div> (. . 13.9, 2)
<<~.
(,
<div id
ID ,
"contentWrapper">).
,
.
3.
<div> J.
pos i t i on
re l at i ve,
#contentWrapper { position: relative: }

,
top, bottom, l eft
ri ght
, ,
<di v>.
(
), n
top
4~.
. ,
,
<di v>
<div>
top.
397
4.
101 101 .
,
, .
<di v>,

3, top l eft
top ri ght .
#leftSidebar {
position: absolute:
left: 0:
top: 0:
width: 175:
}
#rightSidebar {
position: absolute:
right: 0:
top: 0:
wi dth : 180;
. ,
,
.
~------------------------------~-------------------
top, left
right
n,

5.
lefl:
top,
lOpx
r .
,
. , ,
.
. , ,
, .
, <di v>
. , ,
:
#mainContent {
margin- left: 185:
margin-right: 190;
,
. ,
.
, .
, (
398
13.
),
,
HTML (. 13.10).
, CSS
. ,
, - , .
n
ID
HTML
fJ

1
[11
SS-
~5Q!!2.1 "'
..1
CosmoFarmer 2.0
YOW'OII!!ne gu!C!e \ apart,ln8DL ~
cOsmoFaner Celebrates 6
Years ofUseful Advice for
Apartment Farmers
. 13.10. n ,
, n , n .
n ~, n
6.
101 ,
. - ,
399

. ,
'
,
.
----------------------------------------------------
, nn JavaScript-peee
, n
www.shauninman.com/plete/2006/05/clearance-position-inline-
absolute.php.
.

right-margin
<div>
, .
, ,
.
.
<di v>
#banner. #contentWrapper { width:
760:
SS-
- ,
, ,
, , , - .
HTML
,
. L- .
-,
L-, - (
, ).
, J1
.
L-, ,
, -
, , .
CSS
. ,
, .
fixed
position,
13.11.
L-,
-.
400
13.
-r
-t.
1#1!<11 ipS<rn dolor S>t ame<, ~ adipiSOng e11t. secl<lom nonunmy nih eul:smod
ncld\rt ut - - dolore megna olkjui!m mot IIOiu!po~ Ut wlsl orlm 8d mlnim ..,....",, quh
nos1rud ~ IJ>tloo ull.>rnawpor susc1p1t 1o1>arns niSI ut ali<J,IIp "" a>mmoclo
Duls
aUO>m Yel eum I<Ue.
& Rubbc1 D.:kies Needn'tAppJy

1#1!<11 IPSU dolor Slt met. consecte...., IOPIS<It>g eht, secl diom """""""V n.l>h eul:smod
tloodun! ut looreet dolore mogra afoqwm erat IIOIU!pat., wisl ad mlnim - . quh
nos11uc1 e>erd "'""" uflamcorper $U$0Pft loOor1ls niSI ut allquip mrnmoclo - L Duls
.-oe~
...... lrkn.
LDrem IPS""' dolor s4 ame1, Conse<%etUer <~Cpisclr>g ebt, sec1 dlam """"""" nih eul:smod
tlncldunt ut dolore mogna ollquam erat \IOiu!pot. Ut Wlsl m ad mlnim - . quh
nasi>'Ud ._d "'""" Ullamcorper W ! d p l t - nls! ut ollquip a>mrnO<Io - L Duls
ouwn "'' eum lrkJr.
&
Cast-Iro No-Nos
1#1!<11 lpwm dolot "'' amet. ~ aOplsclng ellt. secldlam nonunmy nih eul:smod
tlncldunt ut laoreet dolote megna allquam "'"' \IOIU!pat. Ut wbl orlm ad mlnfm ..,...m, quiS
nosoud ~d ~J>tloo ui~J>mcorper SU$(jplt k>ol1fs risl ut allq> a>mmoc1o -~ Duls
1 3.11. ,
CSS.
) ;

-----------------------------------------------
Iternet
Explorer .
5 )
w SS- (n
n
Intemet Explorer ( n
Internet Explorer 7 8 n
).
, n
n .
top, bottom, 1eft ri ght
. ,

HTML. ~~
, , .
13.11,
, ,
.
1.
<div>
ID .
<di v> 10, banner, sidebar, main
HTML,
footer
(.
13.12). ,
. ,

L.
401
-------------------------------,----------------
n. : r 11Ji n
Intemet Explorer ,
L- n L-
,
2.
5 .
div
<div>.
, , .
, ,
.
<di v>.
r
<div>.
, ,
.
, (
) ,
.
SS-
anner
#main
#sidear
#footer
13.12. n n
n n n. n r (1),
(3) (4) , (2)

n
3.
J1 J . top, bottOOJ, 1eft
ri ght , ,
, ~ , . r,
.
402
13.
------------------------------------------------
,
.
1,
13.12
#banner {
position: fixed:
left: :
top: 0:
width: 100%
}
#sidebar {
position: fixed:
left: :
top: 110;
width: 175:
}
#footer {
position: fixed:
bottom: 0:
left: 0:
width: 100%:
4.
' .

HTML,
, . ,
<di v> , ,
. ,
(
, ,
).
#main {
margin-left: 190:
margin-top: 110:
5.
Explorer 6
Internet Explorer
Internet

. ,
L-,
Internet Explorer 6
- ,
, ~ ~
.
403
Internet Explorer 6
f(,
*
*
html #banner { position: absolute: }

html #sidebar { position: absolute: }
----------------------------------------------
r
Explorer
* html, , Intemet
(. . n
7).
(. .
Intemet Explorer
#footer
Intemet Explorer
15).
,
.
,
,
( ,
1,
L-
L- ,

Internet Explorer 6).
Internet Explorer 6
,
. :,
, ,
. ,
-,
Internet Exploer 6
Internet Explorer 7 8, Firefox, Safari Opera -
:

,
,
. , L
<di v> iD ,
HTML .
CSS.

, ,
sawmac.com/css2e/. , . 2.
www.
404
13.
-t

-, ,
. , L-r
ID
, n ( ).
1.
index. html
- (.
13.
13.13)
Fie
Edt
\'lew
F"""""'"
Tools
..
13.13. L-, .
2.
i ndex. htm 1 .
<style>.
<style> .

. CosmoFarmer 2.0
. , SS-
, , , ,
.
405
3. :
#banner #badge {
position: absolute:
l eft: -18:
top: -18:
}
<di v>
ID, banner, ID
badge. 18
18 .
, , ,
.
.
4. , :
#banner {
position: relative:
SS- ,
( #banner),
, ( ,
t:
3).
, SS
. #banner
, L-.
#banner

#badge ,
SS-
. .
15).
#banner .
, l at i ve ,
.
,
18 .
3.
,
, .
5.
<body>.
, :
body {
margin:
20:
(.
13.14).
CosmoFarmer .
.
, .
406
13.
r -r
lpsum dolor slt amet, consectetuer adlplscing ellt, sed

nlbh eulsmod tlncldunt ut laoreet dolore magna
erat volutpat. Ut wlsl enlm ad mlnim veniam, quls
exercl tatlon uttamcorper susclplt lobonis nlsl ut allqulp
con~mt)do consequat. Duls autem vel eum lrlure dolor tn
.,.,,ntlr..rlr ln vulputate vellt esse molestie consequat. vel lllum
eu feuglat nulla factllsls at vero eros et accumsan et iusto
lo dlgntsslm qul landlt praesent luptatum zzrrl delenlt augue
ls (!f)lf'tP t!' f~11 0<1i ! n11ll ~ f;ili<i 1nrPm ;..,SII m dnlnr <i! .1 mor
nt>rm,mv
1 :J.14.
=~~~-=~-
n. ,

6.
.
, :
#banner #logo {
margin -left: ;
, ID - 1ogo.
,
.
Internet Explorer 6 7:
, . ? ,
.
7.
#anner
#l ogo,
#anner
#logo {
margin-left: ;
position: relative:

- , top, bottom,
1eft right. , Microsoft,

Internet Explorer.
407
, SUSCRIBE U
US
, ~ .
-----------------------------------------------
- n n, n
. n n ,
n , n .
n . 9.
8.
#banner ul {
position: absolute:
right: :
bottom: 5:
,
( ).
<u l > ,
, .
, ,

relative. , SUBSCRIBE
US .
.

( ).
. , .
--------------------------------------------------- n
Internet Explorer,
, n -
9.
#anner, 4, zoom:
1:.
#banner {
position: relative;
zoom: 1:
- , ,
Internet Explorer, .
10.
.
,
. 13.15. -
,
.
408
13.
lpsum dolor slt am~t. consectetuer adlplsclng ellt, sl!d

my nlbh eulsmod tlncldunt ut laoreet dolore magna
erat volutpat. Ut wlsl enlm ad mlnlm venlam, quls
exercl tatlon ullamcorper susclplt lobortls nlsl ut allqulp '=~-=~'='...._
cornmt~do consequat. Duls autem vel eum lrlure dolor ln
ln vulputate vellt esse molestle consequat, vel lllum
eu feuglat nulla faclllsls at vero eros et accumsan et lusto ~~~===:::r.::=
dlgnlsslm qul landlt praesent luptatum zznl delenlt augue
dolore te feugalt nulla facillsi.Lorem lpsum dolor slt amet, le!Sa~:::-==--===
"~
-,....rt1, . ,.,..,
~"" : f""" ' ~,~
1. J; ,
13.15.
. L- ,

n r
. 8 r (.
(< ~ . (<
1: ~
r ). r r,
. -
r, , ,
, .
1.
ndex. htm 1 .
moFarmer.
Cos-
align
<img>, .
CSS, -
L-.
2. <img>,
ld_home. jpg, al ign ~ "right".
, . :
<img
src~"images/old
home.jpg"
alt~"The
he i ght~ "l86" alig~"right" />
Original Cosmo Home Page"
, L-,
<di v>, - SS- .
3.
<img> <div class
"figure">.
<img>) -
</> (
409
</div>.
, L-
<img src="images/old home.jpg alt=he Original Cosmo Home Page
height="l86"/>
<p>The Original CosmoFarmer Home Page</p>
</div>
;
.
4.
<div>:
#main . figure {
float: right;
width: 200;
margin-bottom: 2;
margin-left: lOpx;
(
. 8). ,

, .

. ,
. , <i mg>
( ),
.
fi gure
<di v>,
5.
pos i t i on: re 1at i ve , :

#main . figure {
float: ri ght;
width: 200:
margin-bottom: 2;
margin-left: lOpx;
position: relative;

<di v>,
, .
6.
#main .figure {
position: absolute;
width: 168;
left: lOpx;
bottom: lOpx:
background-color: #FFF;
#main. figure,
410
13.
-r
10 r r <div>.
width
background-color
, ,
. , ,
, .
7. , , :
#main .figure {
position: absolute:
width: 168 :
left: lOpx :
bottom: lOpx:
order:
lpx dashed 16666:

font-size: 13:
font-weight: old:
text-align: center:
padct; ng: Spx:
~~argin:
0:
. r
, r
, ( ,
Internet Explorer, Firefox).

(, ) -
(
. . 10). ,
r: CSS,
.
8. :
#main. . figure img
display:
lock :
. rr
, . 13.16.
1.
1 1.16. <S104 :~ n3n

n , . n, n
411
: ~ r

.
, . , ,
(
). ,
, ,
( ,
).
, .

HTML
13.17.
13.17.
SS-
- n
. , (,
)
<di v>
ID. , ,
ID, contentWrapper (. . 13.17, 4).
<div> ID wrapper (. . 13.7, 1).
, <di v> ,
.
, <di v> ( s idebar, mai n

adverts) .

(6 7)).
(. .
13.17,
) n ,
. ~
(. .
13.7, 5).
412
13.
,
.
1.
(. .
13.17, 3).
:
<di v>,
#contentWrapper {
clear: both:
position: relative:
clear
#contentWrapper
( .
.
4:
7,
).
re l t i ve
pos i t i
, (.
4: SS-
. 4 ~ ).
2.
CSS- ,
1:
#sidebar {
position: absolute:
,
. -
, , ,
. ,
3.
top l eft.
top l eft
, :
#sidebar {
position: absolute:
top: lSpx:
left: :

,
l eft,
<di v>
, .
top
. top ,
;
15
,
.
413
: ,
19 ,
.
4. width #sidebar.
:
#sidebar {
position: absolute:
top: 15:
left: 0:
width:
170;
5.
#adverts :
#adverts {
position: absolute:
top: 15:
right: 5:
wi dth: 125:
, ,
, .
,
r i ght,
, .
,
13.18,
. ,
.
6. #adverts, ,
:
#mai n {
margin- left: 170:
margin-right: 135:
#ma i n ,
.
.
7. #main:
#main {
margin-left:
170:
414
13. -
CosmoFarmer
2.0
Your online gutde apa.rtment farmmg
to
lf'kt)yewh
Jtdtnology
A1!D!11a1s11t
'ltt. consectetuer adlplsclng ellt, sed dl~m
~:.:' ::'.:S~
td tlncldunt laoreei dolort m11gna allquam
.....,. ".....,mr .. /ISII\Od 1\ ad mlnlm vtnlam, quls nostrud exercl
- - ut.
ltloortls nlsl ut allqulp ta commodo
Cmmqfntt m li
el eum lrlure dolor ln hendrent ln vulput
..",.." '""' <~o~or '" ..... quat, vtl lllum dolort eu feuglat nulla faclllsts
~::;<'"..' ~':::'...:.s.-.1 tt tusto odlo dlgnlsslm qul blandlt praestnt
~.-.
~ut duls dolort tt teugaJt null~ faclllsi.LOrem
-""~
1Stctttutr adlplsclng ellt.
"':;
"""*"""
CpmpoatPJ
lottm ,....,. d\>lor '"-.
'et,
consecttttr
adlplsclng tllt, sed dlam nonummy
:.::,ec":,:,::t;ng -:' d lllquam volut~t. Ut wlsl enlm ad mlnfm vtnlam,

tlt loortls nlsl ut ~llqulp tx u commodo conquat.
.r! Jalt
n wlputatt vtllt esst mo\tstlt consequat, vtl lllum
::.:.,::;:,.:~"::: ...J :cumsan et Justo odlo dlgnlsslm qul andft
) rJ1 ;'1 r:tr isl
I.(HP.m
'"~1
r.fnfQr
~ ;Jmf'1
( ()M ~ct~IIJPf
1. 13.18. n ( )
J , n L, n
n
margin -r i ght: 135:

padding: 15 lSpx 20;
order: lpx solid 1666666;
ordertop: none;
order-ottom: none:
n , n
. , n
r, n
,
.
. -, border
(> ;
.

(border- left border-ri ght),

(lpx so1i d #666666) 7 ,
, .
, .
n . :
Intemet Explorer 6, ,
415
185 l
, _
. , .
(. .

13.17, 4), ero <div>

Internet Explorer , l ayout (.
~ ~ . ~
Internet Explorer 6~ r. 12).

8. width #contentWrapper:
#contentWrapper {
position: relative:
clear: both:
width: lOO.t:
(. 13.19)
, .
. ,
.
CosmoFarmer 2.0
Your oDl!ne guJ.de to apa.rtment ra.rm.g
Trdtnofoar
lrpltshatugb
~
Lotcm ~pJum dol si1

cot{Ufr
nt'
diptKIDO tlft. std
....., n!to .....mod
tinddu:nt vt.
Comafmtr
Iums
\.ortrn 19~\&m cSofot sit Jmt(.
constotttr 1.dipis<tf\9 fllt, std

d.~ nonummv 1'\Jh Nismod
ddtint uc bott doiOtt
1J1>9Molli
s.auft
Eattt
csW<t}ons
on Anmt;nt Hnfropcmtq
Ltm lopsum dofcw sjt ~~
<otctttVU ~~il~ dlt, std
CII'I 1'16N.in'I"'V Nh tW:srd
tinddvnc ut taofttt dofote

m~n~all.
Comoost
Do
dolor f"it ~m~.

ldiplsdl'lf t11t. ~~
dt.am AOnUR\.IIIV nlbl\.
Lotem
JUtn
coecmttr
traQ IA\tl
Lartm \ps\Nt'l dotor srt ~mt(,
(Ot'll<t(ttt\ltf bl$1p)\(iPO tfit.. SC!d
CosmoFarmer Celebrates 6
Years ofUsefulAdvice for
Apartment Farmers
Lor- lpsum dolor
slt amet,
consectetuer
adlplscrng ellt. sed
dlam nonummy
nih eulsmod
tlncldunt ut laoreet
dolore magna
allquam erat
volutpat. Ut WISI
!nim ad mlnlm
wnlam. quls
nostrud exercl atton ull~mcorper susclplt loortls
nlsl ut allqulp commodo consequat. Duls
autem wl eum lrlure dolor ln hendrertt ln
wlputate wllt esst molestle consequat , wl lllum
dolort eu feuglat null~ faclllsls at wro eros !
accumsan et lusto odlo dlgnlsslm qul andlt
pr~esent luptatum lzrll delenlt augue duls dolore
te feugal! nulla faclllst.Lorem lpsum dolor slt amet,
consectetuer adlplsclng ellt.
. 13.19. 3
n , R
nR R n
n n nR
,
.
416
<div>,
13.
(. .
13.17, 1),
#wrapper {
width: 760:
margin: auto:
ma rg i n .
,
.
- l_finished.
14
css

-
-. ,
,
.
, ?
, , ,
.
? , .
- ,
, , , ,
, , .
,
, . ,
CSS
- ,
, , - (.
14.1).
,
.
, .
14.1
. , ,
. ? - .
CSS -
. ,
. , ,
,
. -,
418
14. CSS
-r
--
...__
.....
......
Topior
..-.
....
ur~ae~a
___
Snapohot
fN~fllo.....
...............
... .. ..
(WOC) __.,._. t
-'llfl ...... -~
-'-,...,.,..",...
n-;t,.....~~cn:W.OIIOdirf~U'Icmoa~-~
~--.~
....... .,"'-'--~
w..""*~~nw
~"'~ltltC*,htpiOt"tO~aodc."..,._tot!WCS.M~~
........... ..-. ltr!\8IIO'tlt..ll'ttllrt6CICIIWIt.16et1'1180Coi.......O,,
...,.,
~ -.
'*"...,........,..
w.,..,...,.--..
...............
WIII. . . cr.-cl.~
,...._IIWJ~retc:tl\8t'U,....
II\Qa,1.t..., . . .
'it'flldO fJI Qoloil {WOC) .___,. <1o1t t10t m~t N
p8CCIJ8;.,.. "'""' lfl 91'0WIW
-i:IWr'"*t...0ifllho'._.,~81!'19"'r'~~Liuc~~--I
~t~d\111191.
me no'l!t.W..ct. .!\ ....._ W 1t ~~~~~ 0\t.crowd ....r.r. if!
f8C&,.t/'Illtty tincW~
h W~adom
or Comrnunlty
t)> OI:A.ftt f'OWAtCit
l\\01'1tf/ltemo~CNJJCCC801'~.....0~.".".,~tor--~CI!.ot ...
oorlht--~ooo.\fP!tf'l)ll"...$ii~""''t4!1t~o/~1n20G4,.~i.htftOC:If
trhtand!'WW'd~t_,.OIY'CNIIOO'r~N....,.1.cr .... IOII~Mtw'Nf0~1111~
tothoaccI . . . ~UicVC8n~tNrfvl~
n..~o~O'OWdl {') 1'0 tt NC .,..
""*' ~~t<f'N: noc. ~ ,......,
.-lt'9"YOO~ILht~pt'88lf'IQ:O"'It~l"*"sshl'~an&dle~~C8'1tle_".._
WI'II\ ~~fiCQC~'AidlfiiO>iW,Iftrtt.1.1J\tn<NI~~.
14.1. , - ( List Apart),
-() ()
, ,
, -
.
419
CSS
,
.
CSS : ll, bra i ll ,

embossed, handhel d, pri nt, project i on, screen, speech, tty tv.
, . ,
,
, Baille
Reader (
), ( ,
, ), .
, ,
, .
: ll,
ll
screen
pri nt.
ll, , ,
(
,
,
).
screen
- .
, .
,
pri nt -
pri nt
,
, , . .
-----------------------------------------------
Opera projection, .
, www.opera.com/support/tutorials/
operashow/.
- , (
internal
external, l inked imported).
, . ,
. ,
.
. .
-
: ,
, .
420
14. CSS
n -
-------------------------------------------------
n - ( n,
- - , n n n,
). n n n
, , .
-

-
CSS:
, . ,
, ,

, <l
i nk> medi .
, ,
L- -:
<link rel="stylesheet" type="textlcss" media="print" href="print.css"/>

-----------------------------------------------
CSS n n , n @import
(. . . 2)
:
@import url(print.css) print;.
, n
Internet Explorer
n.
, ,
, ,
. . , ,
. ,
, :
<link rel="stylesheet" type="text/css" media="screen. projection. handheld"

href="screen.css"/>
, , ,
.
------------------------------------------------------ n , media="print"
, n . n, media="saeen"
media="speech".
n n ,
n. n n
, n print n .
421
, @medi . ,
, .

, . ,
@medi , :
@media print {
/*
*/
}
( ),
.
@medi
, :
@media print {
hl {
font-size: 24pt:
}
font-size: 12pt:
@medi
(,
printer .css). ,
screen. css
pri nter. css

, ,
.
- , , ,
. ,
SS-,
. , ,
,
, .
, ,
,
(.
14.2).
422
14. CSS
n -r
------------------------------------------------------ n n, , n
Print Preview (
n) .
Windows
File Print Preview ( n). i File Print

( ), n - Print Preview ( n). n
n n, n, ,
, , n .
. ... ....
i#@iii!ijQI'~
__
__............._,__
-----..-..
___
-----. . ______
------- ---------... --.--..-"""
....__ _
.-...""-=;::;.=......----.. .. ____ _
------.....,_
..- ...............
------.-------'---__________
... ___
_
__
________
___.__
~--=~-==-=-=.:---.:::....~~
.... _._.._...,..,_.,...
\\\d . . W....~
::::-.:::.:...._...-~----.....,_ """
_
,& \\tattn thr '''ater i..t'\~1

_
.... ....,.,.,......_W~Ct._~dlt.Wd~
........
: ..:::~-.:::=..~===.:.::-Ooh
,_",.,..IIII'I~~~---."..~-.......
... _._ltel,..,.\41'1011111.... ~'*0
...
t..ttoo'lue-.Pt11~1o11or11$NI\&
--~...---
. . . . . t.t~
...... 0 ..... 1\...t.'tA~
-...--
LOf-0-8oW8L....C,-..utr~811t.IIN!t
,..,.".......,I'II'I...-.4~\oll:~~~ao.
M~ utw..,_,..... ~..,~--<'~
...
~....__....--.rlloDo!ti8NIIIutNIOu~
~c.-u""'..-.v
4>
.......
.."""""""'~-----...,.
.,.,-------.
:.::::.-::::---
...
,..
... _~_
_____
._.......,.. ___
_.,. ____ ___ . ". . _..... .__.._. . .
Ru.rDu<Ju.. !'..,.S")App~
.,
.,.
~--.,_:t....__
~~~~~~~
-~"'
. . . . . - . _ . . . . . _ . _ _ Q _ _ .. _ _ _
:.::::::.-....
- ................
-.._._...
-...
_ .. ____..,.__._.\~>
_____
_
_ _ . . . . . . . . ._.,.~ ... @'U
ut\Ofl~lldalltiOtW!Jofilr.t-...oou~
.._'lit ......... ,..,.
~--..-..C.Ot_ _ _
AIC".''f<"""Nolt<f'IOfk.d~~~~\It--611111'-.~ .......
...... ~tA---act--"..._Wtf'CNII'IfCJ
II~8;11dpit~".. . . ~.(fl~
.. _._.._... ______ __
---.-..,..
--~
______
=-=-==--==.::...~~:::===--
___
~0.4~Un~vtf..,_~..,.
...,.._
_ _..
... ... _t_.._...
.._....__...._..,.
....... _ _ _..
........... ,.
-...----~-
......
1 4 .2.
......... ._.....__
.........--..
"""
n , n ().
- n ()
!important

, ,
(
medi ;" 11" ).
- ,
, ,
.
, <hl>, , ,
, ,
. ,
,
, .
, ,
, <hl>.
423
, ,
,
. , .
5, :
SS-
.
, , -

! i mportant.
! important SS-,
.
! important , ,
<hl> :
hl {
color: #000 !;mportant :

#main hl.
h1
#main
hl.title#wrapper
hl.
r r
, , .
-
font- s i ze
l or. .

12 12 ?
600 dpi
( ), .
, ,
- .
: em (. . ~ ~ . 6)
, .
W ord
em
.
-
16 -
12 .
, ,

.
12 (
), :
{
font-size: 12pt:
-----------------------------------------------

12pts.
em,
s,
12pt,
424
14. CSS
n -
- .
, , - . ,
, ,
, .
, .
,
:
{
color: #000:
,
! important, ,
:
{
font-size: 12pt !important;
color: #000 !important;
,
(. ~ .
~ .
3) ! important ,
, :
* { color: #000 !important }

, ,
. ,
,
, .
-. ,
, .
,
, ,
.
, ,
, . ,
,
- .
4 25
----------------------------------------------

. ,
( ), .

-
. , ,
, . , ,
. headHi gh l i ght,
.headHighlight {
color: #000:
background: white:

. ,
n n ,
.
bacl:ground-color,
EUi n ,
, /111 <
. n1 n, eUI
, n r
n r ,
bacKground-color: white.
: ackground.
. , enapaIIII, background:
white:, ,
white.
, ackground (. .
. n}'II
background . 8)
bacground,
n , ,
nR, .
, COIJ(eM .

, ,
, .
n, ,
, , .
, ,-
: ? , n

<di v>,
( ), .
, , ,
426
14. CSS
.
.
<i mg>
. , ,
, - ?
,
, , <i mg>.
, . ,
.
1. <img> HTML, ,
:
<img src="l ogo.png" height="lOO" width="lOO" id="logo" />

2.
(, n
) , :
#logo { display:
3.
n:
.#logo { display: inline: }

n n , - .
--------------~-------------------------------------- , nr, r n
n CSS, n n
. n http://we-graphics.com/mtarchive/001703.php.

n n
n, n
3 . ,
, .
lntemet Explorer 7. lntemet
.
, n ,
Expforer 8, Firefox Safari, , ,

URL n,
3.
:after
content
, ,
.
,
n,
URL
, ,
URL n
(http://www.
pyramind_scam.com/). n
:aft er SS- content,
,
r ,
, :
a:after {
content: " (" attr href) ") .. ;
}
427
r n

SS-
, ,
content, .
(../..flndex.html).
CSS 3,
fter
(. . 3),
URL (,
htt:p://), :
,
, URL-apeco.
a[hrefA="http://"):after {
content: " (" attr(href) ") ":
ww.
alistapart.com/artides/goingtoprint/.

-
, , , u,
. . -r,
. - ,
,
. ,
, .
,
,
<di v> :
, , . .
<di v>,
, ,
.
, , di sp1
.
disp1ay
none,
. ,
,
di sp 1
none:
#si debar {
disp1ay: none;
,
: ,
, , . r
:
#banner . #mai nNav. #sidebar. #ads. #newslinks {

disp1ay : none;
428
14. CSS
, ,
, ,
.
-
.
,
. , , ,
, , . (
), , , ,
, ,
, .
<img>,
ID
ID
none;
di sp l ,
di sp l
ID l ock .
2.1
SS-,
-:
(
www.w3.org{R/CSS21/page.html). ,
.
-
page-break-before
page-break-after.
. , ,
, , ,
(.
14.3).
page-break-before: always
. ,
,
page-break-after: always
page-break-before
.
, ,
,
. ,
, ,

page-break-before.
, .
, .
, , ,
.break_before { page-break-before: always:

.break_after { page-break-after: always: }
. break_after . break_before:
: n
429
::Artlclnof8al!\tubydroponla
__
_...-. -.. .-............-._.....
__----.---...---or------ftt--.
.----. -..
.
---14-
-______ .. ___
--------...-------__..__,_... _____
---_...
__
__ ..........___.._______.. __
__ ..__
__
____
h
..... ,
NtkJos of a.tlltu ydroponlcs
.,.
......__._..............
_..__,....
..,._,..,... _.,
..,
... ~
--
o'~------.. .-........ _ _~
-"~" --w-..-
...
_.....,
:~~
__ __
..... ............_
....,_".
,._......,.......,._..".,.,
............... ~-.,.,..,.--.. _....,_....,..
---aot--~
......"""....__
~-
] "
~: ~~~
---
-I'
..,.............,..
_..._
..,.
__ ....
:::::..=:--~-::::-~.,.---
___..,,
-----.-..:,.._,IA
..
___
______ _
.......,.
..,..
.."
..,.
......._.._
_~
_ _ _ "1: _ _ _ _._ ... _ _, . . _
-IIf,.... _..,.
__------------_
_ _ _......,...._.._ .... ........ - -
._,_."....._-
----
-----_._..~~.
... .._
. . _.,_.._..
=-...=-~::.-=..==~~=::::"......
--...-~'"'-----~tJt-
---.--------~-~
!,'_ _ _ ..., . . . . . . . . . . . . . . . . . . . . _
._
_____
__
--------..ji-
......-
. -._.
"""---------........-.-...._:::.=:.::::""..::..:7"'
.,._"-"''C--.... - ...
_.... __.
--... ......."'---'-
_____
-- _____
.-.~..,._,
_ . . , __
14.3.
...,..'
<!~>_ _ _ _ _ _ _ .......,
(). ,
)(, page-break-before ()
)i< ,
. ,
, : <hl 1ass;"break_before ">.
,
: <hl
class="sectionTitle break_before"> (
15).
. .
:
...,

- .
- , ,
,
URL-apeca .
, . ,
.
2.
14.
n
, , ,
, .
430
14. CSS
n -r
1. pri nt . html 14.

- , <d; v>
(. 14.4). , , ,
(
). - ,
.
#banner
avwrapper
#mainWrapper
#main
1#footerNav 1
#sidebar
1#footerMain
#footer
11
#footerWrapper
.
14.4. n .
w, n. , n

2.
pri nt. css,
14 .
,
,
.
3.
di sp l , ,
' :
#sitet ools . #nav. #news {

displ ay :
n :
431
di sp1 , none,
, .
-,
.
4.
pri nt. htm1
14.
- mai n. css.

. ,
<1 i nk> medi ,
. , ,
main.css, .

5.
mai n. css
L- .
<1 i nk> , g1 1 . css

(main.css). ,
:
<1ink href="print.css" re1="sty1esheet" type="text/css" media="print" />
,
<1 i nk> <1 i nk>. ,
ma i n. css , . copyri ght,
10- , ,
. copyri ght, -
12 . ,
,
(. . :
.
).
6.
print .css print. htm1, print. htm1

.
, .
Print Preview (
) .
7.
Windows,
File ~ Print
(~ ).
Preview
File ~ Print (~ ), Print ()
Print Preview ( ).
Print Preview ( ) ,!,
.
. , .
, .
432
14. CSS -r

:
, .
, .
. .
14.4
, ,
<di v>.
#ma i nWrapper
#footer
900 .
#footerMa i n -
#main
. ,
,
.
1.
print.css.
,
, :
#banner. #mainWrapper. #footer. #main {

width: auto:
margin: 0:
padding: 0:

- wi dth: auto -
. ,
900 ,
main.css
<di v>
auto
, .

- margi n paddi ng -
div.
footerMain,
<di v>
. ,
.
2.
pri nt. css:
#footerMain {
margin: 0:
,

fl oat, ,
3.
#main {
fl oat:
n:
pri nt. css:
433
.
,
-,
. :
hi dden:
overflow:
-.
, .
.
4.
pri nt. css:
#mainWrapper. #footer
overflow: visile:
,
di v
.
,
. ,
. .
, ,
. ,
.
,
.
5. pri nt. css:
html. body, #banner. #footerWrapper {

background: #FFF:

. ,
~About Us!), - .

( , ).
.
,
, .
,
.
6.
#banner {
height: auto;
text-align: center;
border-bottom: 2pt solid #000;
border-top: 2pt solid #000;
padding: lOpt 0:
margin-bottom: 15pt;
pri nt. css:
434
14. CSS
<di v>.
, .
text- 1i gn ,
,
. , ,
.
print.htm1
Print Preview ( ), ,
.
, ,
. ,
. , :
.
1.
print.css
SS-:
* {
co1or: #000000 !important:.
- SS- . ,
.
* (
(. ~ .
~ .
3), !important
-
, . , *
, 1or
,
#mai n hl #nav #inai nNav
2.
hl {
font-size:
!important:
}
h2 {
font-size: lpt !important:

font-weight: bo1d !important:
}
font-size: llpt !important:

.
!important
435
: , ,

main .css.
------------------------------------------------
hl, h2
- ,
print.html,
,
. .
,
.
3.
#footerMain {
margin-top: 15pt:
border-top: lpt solid #000:
padding-top: 5pt;
}
#footerMain {
font-size: 9pt !"important:

CSS
, ,
,
. ! i mpprtant
#footerMa i n
. , 2 ! i mportant.
#footerMa i n ~ (
), , ! important .
URL
,
URL-apec . ,

Click here to found out more Click here to found out more
(http:/ /www.outmore.com/), , ,
, .
SS-, Internet Explorer 6

( 7 ) ,
.
, IE 8, Firefox Safari.
1. , pri nt. css:

:after {
content: " (" attr(href) ") ":
content: URL-apec ( attr(href))
( :
after).
436
2.
14. CSS -
print.css. cosmo.html
.
, .
14.5, -
, .
_..o\Jt Us
~'> 1 ofl
eDesign
List
About The Design List

Ut l oore etdolore mogna al>qua. Sed do ..,,..,od ton\por tndcldlnt.., i"uglot rdla pwtur. vet ...
cil~m
dotore ukrna> laotis n~ ut mlm ad mlrom ...... ..,.
Ut II~ >< . . a>mmodo a>-L C:adatot non prcodent, .r11tn sed <lo euomod tompor
indddlnt. f>apll!ur ""' oa:OOQitmcllt anm klest l"""" . Ut lol>ort tt <lolort mogna lliqUit. ~is
nostrud .....-citaon wll ..se d~m dotor-e.ut enm ad mlnm v<n/!1111.
Related Sltes
Pnlltig&ll{http://www~
~Aits(llltp://www.--.rts.azm/)
NGA(.I/www..",._/)
8 58t11'!:rd'...,_(Jottpo//www.--.cotn/)
Not Just Another
Discuslon
Ut loore etdoloremognalllqua. Std do S.~mod ten\por inciddlntevl"ug rdlapanatur. Velt~

...~.. dolort ut.na> laotic n!li ut.,.,. ad mirlm ......,.
Ut lliclu11> eo.commodo consequeL (iidatol non prcldent. Sl..r\tin
sed do elusmod -por
lndcldlf\t. Ex<$Ut !lnt oo:-mot't ani!l td .., l"""" . Ut laore et dolore mogna aliQua. ~IS
noctrud exorcl\a~onwltesse d~ dolore uterom ad marom -
Could it Actually From Another Planet?

Utloort otdoloremognaal~qua.
ci~m
dotore
ullm laotis
fi!t>!Z.~02 wri
Seddo ..,,..od ton\por lndcldlnteu l"ugiot rdlapntur. Veitecse
..... ut <nim ad mlrlm .....,..,,
\00 css mm
2"2
tutocillo\14\
hcl
14.5.
, , n,
, n
14_flnished.

CSS
15

. ,
CSS,
. , ,
CSS, )r
-,
, SS- ,
.
CSS.
, ,

,
, , :
? ?>> , ,
, . ,
CSS -
CSS.
/* * 1. HTML, CSS
,
. , ,
Internet Explorer:
* html .imageFloat
display: inline:
, , , ,
? , -
438
15.
CSS
, , ,
:
/*
n w n
Internet Exp1orer
*/
* htm1 .imageF1oat {
di sp1: i n1i ne:
,
. / *, ,
*1.
, :
15.1.
,
SS-.
!
CSS:
Creetedt
Author:
u.,
u.,
DevDays
2009
Mike Jl:us
http://www.carsonified.coa
http://www.tbethingsweaeke.co.uk
1
Copyrigbt () 2009, Yabool Inc. All righte reserved.
Code licensed under the BSD License:
http://developor.yahoo.net/yui/license.t.xt
version: 2.7.0
1
htal{color:#OOO;beckground:#FPF;}ody,div,dl,dt,dd,ul,ol,li,hl,h2,h3,h4,h5
,h6,pre,code,fora,fieldset,legeod,input.,button,texteree,p,lockquote,th,td
{aergiO;pedding:O;}tale{order-collepse:collapse;order
apaciogtO;}fieldset,iag{order:O;}addres,caption,clte,code,dfn,ea,strong,
tb,var,optgroup{font-tyle:inherit;foot-veight:loherit;}del,ina{text
decoration:none;}li{list-style:none;}caption,th{text-
15.1. CSS n
n

.
, ,
, . ,
439
- , .
,
SS- .
.
,
ID #. , ,
ID ,
, &, * ! . ,
.
i, .
. ,
. redh i gh l i ght,
- , . ,
(, ) , , -
? , ,
. redhi gh l i ght,
- , , ,
. , .
, ,
, . error.
Jf ,
. l ert.
,
.
JIr , .
,
, .
#leftSidebar,
: << ,
!>) , ,
- ,
. #l eftS i deba r -
. , ,
#news, #events, #secondaryContent, #mai nNav-
. , ,
#ga ll ery, . fi gure, . banner, #wrapper . . -
#header
#footer
( ,
),
.
, ! ,
#header.
#brandi ng
. , :
440
15.
CSS
.
,
. ,
. fl oatleft . fl oatRi ght -
. ,
#s, #sl #s2, r
, r
. , ,
- . , :
#banner ,
#sidebar, #copyright
--------------------~-------------------------
www.stuffadosese.co.uk/
archives/whats_i_a_ame_pt2.html. ,
, . -,
.
, .
,

-
. , ,
.
. , ,
,
(.
15.2).
float
margin.
, ,
, . ,
?
, , ,
!
, .
15.2.
, .
, . ,
,
; , -
.
,
,-
, r. , ,
l as s , ( )
:
<div cl ass
"note alert">. <div>

. note . l ert.
441
r;
COSMOFARMEFf~
Your online guide to epertrnent ferming
Bathtub Hydroponlcs
LOt'em ipsum doiOt' sit amet, consectetuer adipiscing elit. sed

diam nonummy nlbh eulsmod tincidunt ut laOt'eet doiOt'e magno oliquam erat volut pat. Ut wi~l
enim ad mlnlm venlam. quis nostrud exercl tatlon ullomcorper susciplt lobortis nisl ut a~quip
gr, t;')"1Y''"C'':"f"J; r~..., ~oro ~~-~ , ") ~ i ~ (" !':''"'" . .c,l 0 1 ,.,., 111 ' '"? .~.'"1.1<"~ 1"'; "'i~""t"~l"~rf t 1,... t~ ''"""' 1 1""'1 \~CI!i f 1:1.((')
MOFARMEFf~
vour online gujde to epertment tormlng
Bathtub Hydroponlcs
LOt'em lpsum dofor slt amet, consectetuer adiplsclng elit,
sed dlam nonummy nlbh euismod tlncldunt ut laOt'eet
dolofe magna allquam erat volutpat. Ut wisi enim ad
mlnlm veniam, quis nostrud exerci tatlon ullamcorper
susciplt loortis nisl ut aHqufp commodo consequat.
Duls autem vel eum ifiure dolof in hendrerlt in vulputate
ve1it esse molestie consequat, vel illum dolofe eu feuglat
L-__;~.;.__, nuta facflls~ at vero eros et accumson et iusto odlo dignisslm qui andlt
praesent luptatum zzn1 delenit
15.2. n , n
, , - .
.
1.
, ,
.
. imgFrame,
2 , .
2. , - ,
, - , . floatleft
. fl oatRi ght.
442
3.
15.
CSS
<img src="photol.jpg" width="lOO" height="lOO" class="imgborder floatleft" />
<img src="photol.jpg" width="lOO" height="lOO" class="imgborder floatRight" />

, . ,
,
. imgFrame.
, .
~------------------------------~------------------- ;

..
,
, ,
, .
, ,
.
,
. , 300
200 - . (
. s i deba r)
, . w . w200.
: <div cl ass = "sidebar w">.
. - ,
, SS-
150 .
, .
,
. ,
, .
mm J, .
, ,
, ; ,
,
mm Jt iI ( r r
). <i ,
,
. .
. ,
, ,
CSS,
. , , -
443
, .
:
/* ***
*** *!
/* --------------------------
--------------------------- */
/*, -*!,
, ,
, .
, -.
, ,
:
www.wired.com,
www.mezzoue.com
http://keikibulls.com.
-,
~ i> . ~
i> .
.
------------------------------------------------------ ,
,
www.stopdesign.com/log/2005/05/03/css-
tip-flags.html.
14,
- , . ,
,
, , ,
, .
- ,
- ,
Internet Explorer . . ,
, ,
, , ,
30
SS-, ,
,
, ,
,
: ,
@import, .
.
15.3
444
15.
CSS
, .
1.

. , l or. css
forms. css,
layout.css main .css,
(. .
15.3, ).
main.css
D
page.html
base.css
layout.css
color.css
D
D
forms.css
15.3. L-
n SS-
(base.css
)_
L- ,
.
base.css,
@import
-------------------------------------------------
. ,
.
n SS- www.contentwithstyle.eo.uk/content/
modular-css.
2.
~r
,
global.css, site.css
1. base. css,
- . SS-
- . @import,
:
@import
@import
@import
@import
url(main.css):
url(layout.css);
url(color.css):
url(forms.css):
445
, ,
, . .,
.
---------------------------------------------------- 1 ni) Intemet Explorer n.~ . n
Intemet Explorer .
3.
, 2 L-
r,
<link> @i.mport
( ,
, . .
2).
<1ink re1="sty1esheet" href="base .css" type="text/css"
/>
, - ,
base. css,
, ,
.
n, n .
-
(.
.
2).
, L-
. .
@i mport n
2 ).
, , ma i n. css nd
type .css, - .
@import :
@import ur1(type.css).
(.
~ . ,
, . i
, 1or . css,
(, surrrner_fun. css) .
@import 1or. css,
(, @i mport
ur 1(summer_fun. css) ).

n n w
!{) , n, n
n n .
, , n
. n,
446
15.
CSS
q mm
n, , cail,
1n. css, ~
ma 1n. css < CSS caila.

<1; nk>:
JJ. 811 , r,
r n
<1ink rel"stylesheet" type-"text/css"

href"main.css?vl">
r -
<, ,
r mai n. css.
, ma1n.css,
e<llnk.> :
<link rel"s1ylesheet typec"text/css

href"main.css?v2">
SS.
n -
<1 i
nk>
l-. <1, nk>
<ii :
ma; n. css
-.
<link re1"sty1esheet" type"text/css

href"main .css">
?vl
, . -.

n n
SS- (anpep,main.css?vl),
ma1n. css?vl, ma1 n. css.
<1 inl:>
HTMl-aiia
, ~
. 1 ~ ,
: http:f/lkeif.nel:/2009/03/27/stJp
cachlngfiles-PP-y.

-, CSS, L
: ,
<hl> , n , .

. , ,
Internet Explorer,
Firefox, Safari.
Fiefox CSS
L-. ,
Firefox, ,
Show package contents ( ).

Contents ~ MacOS ~ s html .css
Windows
Fi refox\res\html .css.
\Program Fi l es\Moz) ll
447
r ri1
-
r :
, n 11
HTMl, CSS, , ,
. .

r ,
(Chris Pederick),
di v. Display Element Information ( ) n
Firefox (. 15.4). Firefox,

- n
r !fr ,
(www.mozilla.com/flrefoX).
n (
HTML-, CSS, n
). Dlsplay Id & Class
Details ( ID ) -
3rr G1J, r !f
, .
,
, .
. , ,
.
css ~ Vlfffl css (CSS ~ CSS),
r , re,
.
- r < :
?-
.
css Edit css (CSS
Dlsptay Blodc Size ( ),
chrispederlck.com/worl</wedeveloperf),
Informatlon ()
. n
. - (hJ://
CSS),
Tools (}
-
HTML CSS,
-.
r -
Microsoft n n lnternet
Explorer. www.mk:rosolt
. n --
log
~ Work
L....;:.__.;.;.;.;..;,;;,..""_.,......,..J.,,nw - wilh variout web
;;;. Web Developer

"; User
9ent Switcher
....~ oonate
(iiJ Pl\otos
IE Developer Toolbarnonenoca.
Videos
tP Forun\s
developor toolr. lt is designed for .~!!!'!~~.
fto~ ~..1.!!!!1!!!.~ and ~'!.!.".!!!!!!!:~ ond

~Vill
""' on any platform lhat thtse browoets

support inctuding \Vfndows, o.s and
unux.
.13-!~Q-:_!>_QgJ_~-~IO'bliO!!
&
.!.~I .!.. ..~Q....~.
.!?. ~ .~-~
! QIIIIII<Styio
- ~
;
:
:
Oii!Ur C5S
<wCSS
t<t!CSS
-s~y~ornfoc
: 6dd--....
: ~ -
......,.,..,
~ ...~.~-~
)... ; Re-sun1e
firefox/Fiock Download
.
15.4.
"' w Install
- n n
, L- , n ,
:, n SS-
448
15. CSS
-
, ,
(. 15.5). , , -
,
.
IPat"i!ranh of text.
no space etween this paragraph and tht one di.reclly v and elow.
paragraph.
. 15.5. 3n . n n 3.
3~ , non, n 3 w,
3 3
, ,
.
.
- ,
<>, .
, ,
. ,
,
.
. <>

1 em,
1 em,
. ,
. ,
, .
rpaiU .
, ,
449
r r
.
, . ,
<th> <td>
r . Internet Explorer, Firefox

. , ,
. ,
.
iI .

-, , ,
.
.
. -
<q>(<q>
err is human</q>
(<q>
</ q> ), ), , (Firefox,

Safari) ('') ,
(Internet Explorer 6 7)- . ,
, . , IE 8
(' '), Firefox (" ").

. ,
:
html. body. hl. h2. h. h4. h5. h. . ol. ul. li. pre. code. address.
variale. form. fieldset. lockquote {
padding: 0:
margin: 0:
font-size: 100%:
}
tal
border-collapse: collapse:
border-spacing: 0:
}
td. th. caption {
text-a l ign: l eft:
}
img. fieldset
border: 0:
}
ol {
padding-left: 1.4em:
list-style: decimal:
}
ul {
padding-left: 1.4em:
; 15. CSs
450
list-style:square;
}
q:before. q:after
content: ;

,
.
(font-size)
<hl>
. , :
hl {
margin-top: 5;
font-size: 2.5em;
}
,
, (. .
5)
reset. css
15
.
-----------------------------------------------
-
(Tantek Celic)
L- .
http://tatek.com/log/2004/udohtml.css.
ID
()
, . ,
<
cl ass=" i ntro">
. i ntro.
( ), .

'.
HTML.
,
,
( ).
-
. .
3,
.
, ,
. :
,
451
n .n
. ,
L- -, ,
, , (.
866
~
descendt.nt.tlff (lmage/tiff Object)
{i;
~ ~~ fi~:/1/Us/dave/D
... , Q
"
f&::J
'(
);J1 ~CooldoJ ~CSS dFonm ,0trNg.. O tnformotlon @)lollellaneous ~utffne

11
(<1\t:o> tag)
15.6).
C:JI\
~-~(-:-!!l..~_f_!9}.- ---------------
Arles, thls month ls

looklng groet for yau. ln
addltlon \D t!te huge
11
reise work, voun

meet t!te lovc af your
llfo, end ltnd stray
L8brador puppy who wlll
m th nattonal
oodlence champlon ln 2
Ari... thls montb i.s looldhj;gr<OI for )'OU. ln ocJdltJon to the hue
rniJe ot "or1c, )"OU'II m~t tho \'.~ oi your lift, ond lind
>' L.:abrador puppJ'
\vho wi\1 be<ome the nationol aedlen.. ehampion in 2 "'- ( <> t.ag)
yeara. ( <:> t.g)
._
.._._
----
Jevents lndude: ("'"'

-u.. <:> t.g).
Other notnt op>ming t\'tnts indudt: (and e.o othr <> tllg)
1 Ottler notable upcomlng
!t;;;;l
.
<li>p
Novcm~r ut
--
--
- geat day for

roma.otic rendn\-ou.s.
---
Done
:r:.
15.6. L- n.
n n L-r
(<h1 >, <>, <ul> <li>)
n-,

n n

<di v>. n
, , , . .
~ . ~ . 3,
, L
<di v>.
<div>
<h2>The CosmoFarmer Revolution</h2>
<ul>
<li><a href="pagel.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<1 i><a href="page. html ">Page 3</a></l i>
</ul>
</div>
<di v> CSS l ass
(<div class = "pullQuote">), id (<div id = "banner">).
452
15.
CSS
(, ), .
, , ,
ID-.
, L-, ,
: .
:
<div class="storyNav">
<h2>The CosmoFarmer Revolution</h2>
<ul>
<li><a href="pagel.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page.html">Page 3</a></li>
</ul>
</div>
----------------------------------------------------

<div>,
, ,

<div>
<h2>,
<ul class = "storyNav">.

<di v>
<di v>.
. :
.storyNav {
color: red:
background-color:
#:
- ,
storyNav.
page4. html)
(,
, L-, ,
. ,
.
<di v>-
(. storyNav),
, .
<h2>,
. storyNav h2.
<div>,
<body>
_
, , -
453
,
. , <h1>
, .
<h1>
class
id
<body>
<body id="home">
<body class="home">
<h1> ,
:
#home h1 (
i d)
. home h1 (
l ass ).
. , : , ,
. l ass,

<body>.
id
L-:
<cl ass body = "news">,

<class body = "events">.
-------------------------------------------------------
, ,
(, , ).
,
.
, , ,
.
15.7.
News,
, .
,
, .
1.

m. ,
<body>,
<body id = "home">.
, :
<body
i d = "news ">.
2.
.
. ~
~ .
3.
9.
"homel ink">Home</a>.
id
<href = "/i ndex. html" i d =
( ,
class id).
"newsl i nk ">News</ > . .
<href = "/news/" id =
454
15. CSS
6 0
CSS: h Mlssing Manual
@@@
( ( flle:///UsersfdavetDocuments/02_wrillng/OO_css_mm_2e/des1goQ
About Us
VERO EOS ACCUSAUS IUSt

praesentium voluptatum dele
quas molestias excepturi sint occaecati
sunt in culpa qui officfa deserunt molli
anditiis
l.orem lpsum
-----------:----{
Eulsmod Venantis
attis
Euismod
15.7.
, class
id home,
id <body>. ,
Home (). id feature, JI
n About Us ()
L-,
,
CSS.
<body> i d,
home, .
Iteret
4:
455
Explorer
,
-. ,
.
#home a#homelink

id, #home.
#homel i nk,
(. . << >> .
3),
.
, ,
.
. - :
#home a#homelink.
#news a#newlink.
#articles a#articleslink.
#links -a#linkslink {
background-color: #FBEF99:
~------------------~--------------------------------n , ,
, .
, .
, ,
:
, . (. ~ .

9).
. , #home,
. na vl i nk.
. navbar, ,
. L-, ,
-.
!
Internet Explorer
, . ,
Safari, Firefox Internet Explorer 8, SS-

CSS -.
, Internet Explorer 5, 6 7,
. ,
.
456
15.
CSS
. (.
~ .
Internet Explorer 6~
. 12), Internet Explorer 5 (.
~ .
>> .
7).
html (. ~ .
>> .
7). .
Internet
- ,
Explorer m .
-------------------------
CSS
http://cssdiscuss. icutio.com/?page=BrowserBugs.
Internet Explorer 6 7 , m -
.
-, SS-,
, . ,
Internet Explorer 6
7 ,
, - ,
,
IE 8, Firefox
Safari,
, . ,

,
Firefox Safari, Internet

Explorer 6 . -
, Internet Explorer 8, Firefox, Chrome Safari. ,
SS- , ,
CSS.
, ,
Internet Explorer 6 7.
, .
, ,
, . ,
.,
,
Internet Explorer.
--------------------------
Internet Explorer
-, www.positioiseverything.net/explorer.
html www.positioniseverything.net/ie-primer. html.
457
Intemet Explorer
CSS n Internet Explorer
* html, .r. 7,
Internet Explorer 6
. ,
, .
,
SS- (
zoom : 1), ,
SS- .
Internet Explorer
- (. 15.8).
Microsoft L- Intemet Explorer.
.
) Cond1t1onal Commets
Flt
Edt
F......nt.s
Tocl$
Ek f<lt
..-.
{io
M011ltd
t"ltE"fox
!oolo
- :) t!i ~ [!:
Go
~l@rRJ
1]
'\
lfCJ.:11 1.2/a>rdonoi.!Wn l
Conditional Statements
Conditional Statements
~~
All Browsers
IE6
All browsers display the above header

and this paragraph. hey're aren't
enclosed in conditlonal comments.
ti!!J h headllne above, the logo and
thls paragraph only appear in IE 6.
All Browsers
All browsers display the above
header and thls paragraph. They're
aren't enclosed ln condltJonal
comments.
1 1 1
.
1 1 8 rntnot
-="' Ooror
t'.:
15.8 . n , L-
lnternet Explorer (). n

()
Internet Explorer 6
( IE_styles .css)
, . ,
,
Internet Explorer 6 r
. .
, ,
. ,
.
.
458
15.
CSS

,
@i mport:

1te ~. i f 1te I
Internet Explorer~.

(. . ~ .
2),
Internet Explorer ,
- , . -
, , .
, ,
Internet
Explorer ,
, .
Iteret
459
Explorer
, , :
Internet Explorer 7;
<link href="global_styles.css" rel="stylesheet" type="text/css" />



-----------------------------------------------
n Iteret
http://msd. microsoft.com/e-us/library/ms5375 12(VS.85).aspx.
Explorer
16
CSS 3 -
CSS 2.1 , ,
Intemet Explorer 8, ,
CSS. , ,
, W3- CSS 3
(. 16.1 ).
CSS.

, r .
,
CSS 3 .
,
, .
: -
.
, , r
Internet Explorer 6
Firefox 3.5.
,
(, ,
<< .
12), ,
.
, ,
, . ,
text-shadow
. ).

Safari, Opera 9.5, Firefox 3.5 Chrorne,

Internet Explorer.
, IE.
, CSS, ,
css 3
461
~-~-
,<;~~~~3 ft'!'!~.' - .
SdefiQrt 1CYfl
'~:Z:2:
~-~ --- -
~.~Pf!'?Z
:&m:
'P.Wd.Mlmi)
Qs fml ,.; ' .

c;vaiOd,m i mi ;~
,:.dw....--;:;;,
__~~~-~------ ~~-~ -- --_-_:_-_-_-
:::: ::-- ~i'r!":: _-_-_~ .. ~-- .:.-:
-r.,.,.._.1"~~~~~;.-~.l'""'!.:""' ~ n-: -"'
~-:-~- , ~:,!)'~4.-:~~:
.16.1 . W- n n CSS
www.w.org/Style/CSS/current-work. n
CSS 3
, n n n
SS
1996 CSS
.
CSS
, , . CSS 3 W
, .
,
CSS Transitions
, ,
CSS Web Fonts
). ,
CSS Math CSS Namesace.

,
CSS
, , ,
.
,
, .
CSS
3 ,
462
Internet Explorer).
16. CSS 3 -
.
----------------------------------------------------
W3-,
CSS 3
www.css3.ifo.
CSS 3
CSS 3
,
. ,
~ . ~ .
3,
CSS 3. , Adobe
: a[href$=" .pdf"].
Acrobat,
$= ~, ,
href) . pdf.
"'= , ,
( . 3

-).
, ,

Firefox, Safari, Chrome, Opera Internet Explorer 7

IE 6, ).
, IE.
(
-----------------------------------------------
,
CSS 3 ,
(CSS Selectors Test Suite) www.css3.info/se-
SS-
lectors-test.
JavaScript-popaa
( - ,
Safari 4, Firefox 3.5, Opera 9.5

22.
Chrome
43
CSS 3. _
Intemet Explorer 8-

CSS
. .
~ .
3,
. , , , ,
<strong> <>.
<l i >
, ,
<ul>.
:first-child-
~ .
3.
CSS 2,
463
CSS
(.
16.2). ,
, :
u1 :f i rst -chi1d
hild Selectors
1:first-child
ul :nth-child(odd)
ul :last-child
one
two
two
two
three
three
four
:five
six
four
five
four
~ve
six
one
ODC
1:nth-child(even)
ul
&r
ul :nth-child(4n+2)
:nth-child(n+ 1)
one
one
two
two
three
three
our
tive
lliix
six
. 16.2. n CSS
. n n, n,
n n n
: fi rst-chi l d.
<u1>>>.
ul
u1: fi rst-chi 1d : (<

<u 1>, - >) .
i ,

di v announcement, :
.announcement :first-ch i 1d { co1or :
#FF :
<hl >, <h2>, <>
<di v>,
. ,
,
.
<di v>,
: f i rst -chi 1d
IE 6 .
: l ast-chi 1d-
CSS 3
- . , ,
<di v>
(. .
16.2, 66) .
Iternet l .
464
:nth-chi ld() -
16. CSS 3 -
, .

.IJ
(. .
16.2).
,
, .
- even odd.
. ,
, -
, :
t
t
tr:nth-child(odd) { bacground - color: #09FOFF: }

tr:nth-child(even ) { bacground- color: #FFFFFF : }
(.
16.3). nth -chi ld() . n
, , ,
. n ,
( <td>), . :
tr
td:nth-child(n+2)
bacground-color:
#900: }
n ( 3) n .
4n- . +
( +2) ,
: +2 ~ , +5 - n
. , nth-child(5n+4) ,
, n ,
Rows
16.3. nyr - .
,
, , .
Firefox 3.5
- Safari, Opera, Chrome lnternet Explorer ero.
, ,
~ ~
. ~ ~ .
10.
465
CSS 3
CSS 3 , ,
, ,
, .
,
, ,

<h2>,
<>.
: fi rst-chi l d ,
<h2>. <> ( <> -

), .

: fi rst-of-type
: fi rst-of-type.
.
: fi rst-of-type- , : fi rst-chi l d,
. , ,
id="sidebar".
#sidebar p:first-of-type
, .
:last-of-type-
:last-child,
. ,
, ,
(,
), :
#sidebar p:last-of-type
-----------------------------------------------
, . r
p:first-of-type
, .
:nth-of-type- ,
:nth-child,
. ,
, .
<irng>
, ,
. ,
,
, .
16.4.
img:nth-of-type(odd) { float: left: }

img:nth-of-type(even) { float: right:
,
(, 2n+l), :nth-chi ld().
( odd even)
466
16. CSS 3-
Selecto~s __ ----------Ullamco J.aoris nisi sed do eiusmod tempor incididunt excepteur sint
occ.aecat. In reprehendcrit in voluptate velit esse cillum dolore ut
laore et doloremagna Ullamco 1aoris nJsi mot ani.m id est
Jaomm. Cupidatatnon proident, excepteur sint occaecat qui officia
deserunt. Velit esse cillum dolore nt aliquip commodo
consequat. Eu fugiat nulla pariatur.In reprehenderit in voluptate. In
rqmenderitin voluptate lorem ipsum dolor sit amet, caliqua. Sunt in
culpa quis nostrud exercittion mollit ani.m id est laorum.Sed do
'usmod tempor incididunt lorem ipsum dolor sit amet, excepteur sint
occaecat Ut aliquip commodo consequat. Ut enim ad minim
eniam, consectenu adipisicing ellt, sed do eiusmod tempor
incididunt.Cupidatatnon proident. Velit esse
cum dolore sed do eiusmod tempor incidjdunt ut
enim ad minim veniam. Consectetur adipisicing
elit, ullamco laoris D.isi in reprehenderit in volnptate. Duis aute irure
dolor quis nostrnd exetciWion eu fugiat nulla pariatur. Sed do
eiusmod tetnpor incididunt consectetur adipisicing ellt, ut laore et
dolore magna aliqualn reprehenderit in voluptate
t aliquip commodo consequat. Sunt in culpa sed do eiusmod
tempor incididunt duis aute irure dolor. Ut enim ad minim veniam,
Jorem ipsum dolor sit amet, ullamco laoris nisi. Sed do eiusmod
tempor incididunt eu fugiat nulla pariatur.Quis nostrud exen:itation
nsectetur adiplsiclng elit, in reptt.henderit in volnptate. upidatat non
proident. Ut enlm ad minim veni.am. con.sectelur adlpi.siclng elit, sunt
in
.
16.4. 3
:th-typeO, ~ 3 3
3 ,
, n Intemet Explorer.

Firefox 3.5, Safari, Opera Chrome.
-----------------------------------------------
n
CSS 3
www.w3.org/R/css3-selectors.
36
SS-,
W- w.
f/0J/1011101 n -moz-opacity -wekit
. ,
onltr-radius. JmO ?
-nz-,
Safari, -ms- -
Firefox, -webkit-lntemet Explorer, -- n
'l , Apple, Mozilla, Opera
Opera. , W n
Microsoft, r ,
n 11, n
t , n. , n
n n. n, w
OtiM &, nw . n-
Firefox n30 -moz-opacity,

n, 3, 3 n
1 ty CSS.
3I n, ,
II t CSS, n
467
, ,
CSS 3 -
opaci ty -
n . n n
, n, .

cJavaScript opac i ty
. ,
:hover
, -
16.5.
16 .5. n 50% {n
). n . (s) n
opaci ty (
) .1 () . ,
see -thru ,
:
.
.see-thru { opaci ty: .5 : }
Internet Explorer.
IE
, .
468
16. CSS -
IE 6,
.see-thru {
opaci ty: . 5:
filter: alpha(opacity=50):
fi l ter
IE
. l pha
( )
(). , 75
100
%,
opacity: . 75:
.
16.5
50%- ,
, .
, <>,

: hover:
img {
opacity: .5:
}
a:hover img {
opacity: 1:
filter: alpha(opacity=l00):
,
opaci ty:
. ,
<di v>.
<body>.
, . ,

opacity
<di v>,
, ,
<hl>
<>. , . , CSS 3
RGBA.
RG-
, #FF0066, .
, .
RG-: rg25.
255. 0). CSS 3

RGBA,
(Red), (Green), (Blue) (Alpha). RG
, -. -
469
RG-
, .. ( i ty ), .
1 , :
1 ~ ,
, ,
.
, <di v> caption,
, , ,
, (.
16.6).
.caption {
background-color: rgba(95.156. 140 .. 75):

(95 . 156. 140),
75% ( . 75). RG- ,

CSS : , , . .
, RG- Firefox 2,
Opera 9 Intemet Explorer. ,
r, .
: -,
. , , ,
. , .
16.6 ,
. 16.6, RG- CSS
3 - n n
n . nn
470
16. CSS 3 -
--------------------------
Photoshop
Fireworks,
, RG-.
RGB,
: www.javascripter.et/faqfhextorgb.htm.
RGB-
. .
, RG-,
IE.
.caption {
background-color: rgb(95.156.140); /* Opera
background-color: rgba(95.156.140 .. 75):
*/
background-co l or RG-,
. ,
Internet Explorer 8 Firefox 2
, ,
RG-.
Opera 9 IE 8, IE 6 IE 7
.
,
IE,
( <<
CSS Internet Explorer >> .

Internet Explorer~ . 15). ,
IE:

101 RG-
Intemet Explorer. ,
opaci ty,
IE RG-~.
Internet Explorer fi l ter ,
, RG-.
,
, . , ,
, ,
:
<! --[if IE]>

.caption {
background-color: transparent:
471
RG-
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#BF5F9C8C.endColorstr=#F5F9C8C):
zoom: 1:
</style>
<! [endif]- ->
, :
.caption { background-color: rgba(95.156.140 .. 75):

, .
-,
IE
, ,
IE (
CSS Internet Explorer
~ Internet Explorer~ . 15).
. ~
~ .
,
t.
IE 8
.caption.
transparent.
fi lter, ,
: bacground-color:
,
.
fi 1ter:
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#BF5F9CBC.endColorstr=#BF5F9C8C);
, ? , ,
, .
startColorstr endColorstr-
#BF5F9C8C. - BF -
, ,-
75%.
- 5F9CBC -
255,
, -
( .
16.1
).
www.javascripter.net/faq/hextorgb.htm). (
)
startColorstr endColorstr.

zoom: 1.
IE 6
IE 7. ~
~ . ~
~ .
7.
472
16. CSS 3-
16.1. - n
-
Wii ~
(n n)
00
.1
19
.2
.3
33
4
.4
66
.5
7F
99
.7
62
.8
.9
1 ()
FF

, , .
, -.
CSS 3 ,
, ,
(.
16.7). text-shadow.
text-shadow: -4 4 #999999, 1 -1 2 #000;

. 16.7.
text-shadow- n
(, , \11) .

no
text-shadow
lnternet Explorer Firefox 3.5
473
), (
), . , n

text-shadow:
text-shadow , . 16.7:
-4 4
#999999 ;
- 4 n
4 n
, .
4 .
n .
. ( )
, .
, n .
,
, .
16.7.
,
:
text- shadow:
-4 4
#666 . lpx - lpx
#000:
, ;:tr . ,
Firefox 3.5, Safari,
Chrome Opera. Internet

Explorer, ~ Firefox 3
.
. , .
16.7,
, , ,
, .
IE :
.
-----------------------------------------------
, n ,
, ,
:
(http://eyebulb.com/dropshadow).
CSS ,
m r. m
n 'l'l.
(no , 2005 ,
Web 2.0). .
, ,
CSS 3 n ,
, n .
. n
n m CSS ,
, ,
, n .
bor<Jer-radius
Firefox, Safari Chrome)
474
16. CSS 3 -
10n n <div>
. n,
, n www.css.info/
preview/rounded-order.
. ! no
dlV {
-webkit-bo~-shadow. lOpx lOpx 5 #888:
-moz-box-shadow. lOpx lOpx Spx #888:
, n nn
. - shadow
JI. n,
n n
n w~m~ ?
. , n
, n n
? nn!> Order-1mage
. , 11
Arefox .S 11 Safari ( -moz -order
text- shadow,
Firefox 3.5 Safari. _
image -webl(i t -order- image).
n n
, ~n Firefox 3.5 Safari n
(. n
www.css..info/preview/order-image
). n,
http://ejohn.org/iog/order-image-ln-flrefux.
6,
font-fami ly
. SS-. , ,
1 ,
font- fami ly.
,
, .
, -
-~ ,
(. .
6).
@font-face CSS 3 1
. , -

Open
( . otf)
True
( . t t f),
@font-face,
. , ,
.
@font-face ~, Firefox 3.5,
Safari 3, Chrome , Opera 10. ~~ Internet

Explorer : ,
. ,
:
Internet Explorer, 4 , @font-face,

- Embedded Open ( . eot ),
, -,
Windows
(http://msdn.microsoft:.com/en-us/library/ms533034.aspx).
475
-------------------------------------------------

@font-face
IE,
i3. , n n
http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work.
n n n , n
JavaScript: http://wiki.github.com/sorccu/cufon/aout.
@font _face, ,
. .
, (
, ),
172 .
.
, ,
. ,
, , , .
, .
.
, .
, , ,
, Adobe.com
Fonts.com, ,
, ,
, .

@font-face. , ,
.
@font-face.
: www.tinyurl.com/font-face-rule.
, , , @font- face
-.
: -, ,
, -,
URL,
. , ,
@font-face:
@font-face {
font-family: Lavoisier:
src: url('lavoisier.otf'):
,
font-fami ly ,
La voi s i er.
, .

Site Fonti>
MyFont.
476
16. CSS 3 -
----------~-----------------------------------
n , n .
n, n:
font-family: Site Font;

:
font-family: "Site Font";
s rc URL-apeca
True (. ttf), Open (. otf). ,
URL (, ),
SS-. ,
, ,
.
.
,
. ,
<hl>
Lavoi si er:
hl {
font-family: Lavoisier. Arial. Helvetica. sans-serif:

color: #FF993E:
font-size: 48:
-------------------------------------------------
-
n n
serif.
@font-face,
n n ,
n :
font-family: Lavoisier, Arial, Helvetica, sans@font-face.
n , n
@font- face . ,
, , ,
, . , ,
Windows
Windows,
Apple
( ),
, .
. ,
. :
@font-face {
font-family: Lavoisier:
src: local(Lavoisier). url('lavoisier.otf'):
,
( ). :
_ Lavoisier,
. , .
477
-----------------------------------------------
, ' n n ,
n, n
Microsoft Word.
, n
Windows n
(WWW.ehow.com/how_2148826_
n n n
access-fonts-control-panel.html). Apple
: Application ~ Font k ( ~).

- ,
, L- .
Announcement~
(.
16.8). , , HTML,
. ,
.
, .
Announcement~ News~.
.
, ,
.
CSS 2.1
(generated content).
Internet Explorer 8. , IE 6 IE 7,
.
-----------------------------------------------
n,
n n (. n
n . n . ).
: before : after.
content
: before ,
, : after
. , ~
.
:
p:before {
content: .. , .. :
:
content
before
, .
~ ,
: . !
, , ,
478
16. CSS 3 -
J)
L-r . , ,
, . ,
:
p:before {
content: '' <h2>Announcement</h2>'':

}
Generated Content
~iam~o laoris nisi sed do eiusmod tempor
~~ sint occaecat. In reprehenderit in voluptate

velit esse cillum dolore ut laore et dolore magna lamco laoris
nisi mollit anim id est laOO.l11Dl.
(;'0-t aliquip comm.odo consequat. Ut enim ad minim veniam,

~sectetur adipisicing elit, sed do eiusmod tempor
incididunt.Cupidatat non proident. Velit esse cillum dolore sed do
eiusmod tempor incididunt ut enim ad minim veniam. Consectetur
adipisicing elit, ullamco laoris nisi in reprehenderit in voluptate.
Duis aute irure dolor quis nostrud exercitation eu fugiat nulla
pariatur. Sed do eiusmod tempor incididunt consectetur adipisicing
elit, ut laore et dolore magna aliqualn reprehenderit in voluptate.
@ut aliquip commodo consequat. Sunt in culpa sed do
etusmod tempor incididunt duis aute irure dolor. Ut enim ad minim.
veniam, lorem ipsum dolor sit amet, ullamco laoris nisi. Sed do
eiusmod tempor incididunt eu fugiat. nulla pariatur.Quis nostrud
exercitation consectetur adipisicing elit, in reprebenderit in
voluptate. upidatat non proiderit. Ut enim ~m veniam,
consectetur adipisicing elit, sunt in culpa.\::J
. 16.8.
n L-
, <h2>Announcement</h2>.
-----------------------------------------------
: 01
pilcrow.
..
, :
p:before {
content: url ("images/symbol .png"):
479
. r
, :
p:before {
content: "Paragraf" urlC"images/symbol.png''):
~ Paragraf~ .
symbol .png
n ,
, n
, :
, . ,
( n
, ,
.12
13 ).
, n
.
,
.
, n:
CSS 3
,
template layout (www.w.org/R/CSS

layout). n
- .
, .
, .
, , ,
, -
. n
-,
mu l t i - l umn 1ayout
. Firefox Safari n
bcd-
di splay:
""
"d" :
.
n www.css.
info/previewjmulti-column-layout
grid pos itiorng-
CSS 3,
(www.w.org/TR/css-grid).
-
#head { position:
tnav { position: }
#adv { posit1on: d }
#d { position }
- ,
, 10 head .
n .
. n , ,
, , , ,
150 n ,
nav, adv d ,
, .
CSS, ,
.
480
16.8
16. CSS 3 -
, Announcement~>
. announcement,
, ,
.announcement:before {
content: "ANNOUNCEMENT":
font: bold .m Arial. Helvetica. sans-serif:
color: #FFF:
padding: 4:
background-color: red:
margin-right: lOpx:
NNUNN~>,
: before.
1.
2. CSS
3.
CSS
Dreamweaver CS4
CSS
css
(CSS)
CSS,
, , .
, ,
.

CSS 2.1 -
.
------~--------~~----------------------------
, .
, .
CSS 2.1 (W) www.

w3.org{R/CSS21/. CSS 3 . 16. ,
.
CSS
CSS . l or,
, , ,
. l or: #FFF: .
,
: , ,
URL.
, ,
CSS .
n
, ,- , white
black ( ). 17
, : aqua, l ack, l ue, fuchsi , gray, green, l ime, maroon, navy,

ol ive, orange, purple, red, si l ver, teal, white yellow.
, CSS 3
(h'J://www.w.org/R/css-color/). , RGBA, . 16.
483
CSS
RGB
, ,
. RG- .
,
RGB,
CSS RGB .
SS-.
-. ,
. -
16) . #FF0033
RG-, (FF,
),
(00)
(33).
255
CSS,
, .

#,
----------------------------------------------------n , h-,
. ,
RGB.
#361
#336611.
, :
rgb ( 100%. 0%. 33%).
,
, .
JIi iUI. ,
RG -,
. ,
,
( 255.
255
rgb
33).
, ,
RG-
. Windows
,
, RG-.
www.ficml.org/jemimap/stylejcolor/
wheel.html ,
, http://kuler.adoe.eom.

CSS
. ,
, , , , ,
em ,

, .
.
,
em
6.
484
1.
CSS
72
72
,
.
800 600, 1024 768, 1600 1200 -- 72

1 0,5 - .
.
-------------------------------------------------
: , Itemet
Explorer
, , .
-, ,
(. . .
em -
6).
em
. -
1 em-
, 16 .
, 1 em
16
24
. ,
em -
em
. 9em
14
. 9ems, <strong>
. 9ems <>, m- <strong>
14, 12 (16 0,9 0,9). ,
16 .
<>
m-.
CSS , ,
,
. . ,
. , - 16 .

200 %, 32 .

,
, . .
text- l i gn,
right, left, center justify.
485
CSS
, , ,
, .
, ,
- i nheri t.
i nheri t
. ,
border, . , <em>
<strong> <>, ,
i nheri t:
em. strong {
border: inher1t:
, <em> <strong>
border, <>. , <em> <strong>

, .
border,
( ,
).
<em>
<strong>
border <>
-------------------------------------------------
, , iheit
. , .
URL-apeca
URL . ,
background-image URL- -
,

(. . ~ ~ . 8).
CSS URLa: url (images/ti le.gif). ,
, t i l . gif, ,
:
body { background-image: url(images/tile.gif): }

HTML, CSS URL ,
url ("images/tile.gif"), url( 'images/tile.gif')
url (images/tile.gif)
-----------------------------------------------
URL ,
L-
href,
, ,
URL, http://www.missingmanuals.com/images/tile.gif,
, /images/tile.gif, URL , .. / .. /images/
. . 8
.
tile.gif.
486
1.
CSS

-.
,
, ( <>).
<body> ,
, . .
.
color
. , ,
<body>, ,
<body> .
101: .
:
color:
#FFFF:.
-----------------------------------------------3 <> .
n <l> .
, , .
.
9.
font
,
font-size,
line-height
font-style, font-variant, font-weight,
font-family.
font- s i ze font- fami l ,
. .
, ; ,
.
101: , .

l i ne-hei ght, , (/),

1. 25em/ 150%.
font: italic small-caps bold 1.25em/150% Arial. Helvetica. sans-serif:.
, :
~:
font-family
, .
- ,
,
(. . .
6).
: , .
, ,
.
, ,
:
seri f, sans- serif, monotype, fantasy curs i ve.

font-family: "Lucida Grande". Arial. sans-serif:.
font-size
. ,

em.
JI:
CSS (. <<
CSS ), i
xx-small, x-small, small, medi um, l arge, -1 arge, - l arge, l arger smaller;
.
:
medi um , ,
- .
. ,
, . , - sma ll
9 ( ,
);
32
x-small -10 , small -13, large -18, x-large- 24 xx-large-
. - ,
i , ,
em
font-size: 1.25em:.
-----------------------------------------------

font-size
(1,2
).
font-style
. ,
i ta l i
l i que
JI:
i ta l i , l i que, norma l.
font-style: italic:.
font-variant
, :
norma l
JI:
:
SPECIAL PRESENTAION.
, .
sma ll -caps, norma l.

font-variant: small-caps:.
488
1.
CSS
font-weight
,
.
:
CSS 14
font-weight,
: l d norma l.
: font -wei ght: l d:.
letter-spacing
, (
) ( ).
CSS, em
.
. ,
, , .
l etter- spaci ng - .
norma l
letter-spacing: -lpx: letter-spacing: 2em:.
line-height
(
1t 1lm).

~ .
120% (. . ~
6).
: CSS (. ~
>> . << css~ ),
em,
.
:
line-height: 200%:.
text-align
,
- .
l eft, center, ri ght, j usti fy
just i fy
).
:
text- l i gn: center:.
text-decoration ( JJ)
, .
, ,
. , ,
. l i
nk,
( ink).
489
iUI:
under1 i ne, over1 i ne, 1i ne-through, 1 i nk, n.
. , ,
. ,
(
Ilp~ep:text-decoration:
none) .
underline over1ine 1ine-through:.
text-indent
.
( )
.
t:: CSS. em
; , font- s i ze.
, ,
. , 50 %
(. . ">
7). ,
.
ma rgi n- 1eft, /
.
Il:
text- i ndent :
m: .
text-transform
,
.
:
uppercase, 1owercase, capita 1i ze, none.
aBCDefg -,
HTML, none
- aBCDefg.
Il: text-transform: uppercase:.
HTML.

vertical-align
()

. ,
.
top, mi dd1 , bottom
, _
base 1i ne
(.
~ . >> .
10).
base 1i ne, sub, super, top, text- top, mi dd1 , bottom, text- bottom,
(, em).
1i ne- he i ght .
Il: vert i 1- 1i gn: top: vert i 1- 1ign: -5: verti 1- l i gn: 75%:.
:
490
white-space
1.
CSS
()
HTML.
, " ll
Da ve",
- " ll Da ve". pre
, HTML.
, L- <pre>. ,

, .
, nowrap.
,
( , ,
).
nowrap, pre, norma l.
- pre- l i ne pre-wrap
.
:
whi te- space: pre:.
word-spacing
,
l etter- spaci ng,
, .
:
CSS, em
; .
, ,
, ( ).

(word-spacing),
normal
.
:
word-spacing: -lpx: word-spacing: 2em:.
( <u l >)
(< l > ).
list-style

.
, .

l i st-styl : outside l i st-styl e-position: outside.
, , (,
. .), . ,
, , ,
.
491
1i st-sty1 e-type, 1i st-sty1 e-image

1ist-sty1e-position.
: 1ist~sty1e: disc ur1 (images/bu11et.gif) inside:.
list-style-image
,
.
:
:
URL n.
1i st-sty1 - image: ur1 ( images/bu11 et. gif):.
~--------------------------------------------------- ackground-image
n (. . . 8).
list-style-position
.
, , ( ,
). outs i de
.
:
:
inside, outside.
1ist-sty1e: inside:.
list-style-type
: , , . .
()
(),
1ist-sty1e-type,
Internet Explorer Windows).
n, .
ae~:disc,circ1e, square,decima1,decima1-1eading-zero,upper-a1pha, 1owera1pha,
upper-roman, 1ower-roman, 1ower-greek, n.
: 1i st-sty1e-type: square:.
,
.
border
.
:
CSS ( ).
492
1.
CSS
: so l i d, dotted, dashed, doub l , groove,

ridge, inset, outset, none hidden (. . 7.7,
). none hi dden - .
, ,
CSS
( ,
border:
green,
so l i d #f33:.
h-,
#33fc44).
border-top, borde.r-right, border-bottom, border-left

. ,
border-top
: ,
:
border.
border-1 eft: lem dashed red:.
border-color
, .
CSS ( , green,
h-, #33fc44 ).
:
border-color:
rg(255.34.100):.
,
.
CSS
: ,
, . ,
,
:
-
border-color: #000 #F33 #030 #438F3C:.
border-top-color, border-right-color,
border-bottom-color, border-left-color
,
border-color,
. , ,

border.
border,
.
:
:
border-color,
border-left-color: #333:.
border,;,style
, .
: : so l i d, dotted, dashed, doub l , groove, ri dge, i nset,
outset, none hidden (. . 7.7, ).
none hi dden - .
: border-style: inset:.
493
: , , .
: , ,
. ,
,
- .
border-style: sol id dotted dashed doule:.
border-top-style, border-right-style,
border-bottom-style, border-left-style
,
border-style,
().
border-style,
il: border-top-style: n:.
border-width
, .
CSS,
- em .
border-width: lpx;.
,
.
: CSS, , -
. ,
,
border-wi dth:
-
lem 2em 3. 5em:.
border-top-width, border-right-width,
border-bottom-width, border-left-width
,
border-width,
: border-width, .
:
border-bottom-width:
m:.
outline
-
style
outl ine-width
outl ine-color, outl ine-
( ). , ,
, , ,
( )
. -
, .
Opera
out l i ne Firefox, Safari, Chrome,

Internet Exploer.
494
: ,
1.
border,
CSS
(.
out l i ne- l or ).
out l i ne: so l i d #F:.
outline-color
(.
CSS
out l i ne ).
i nvert,
(, )
. ,
,
:
i nvert
border-co l or.
outline-color: invert:.
outline-style
: , , . .
101: ,
:
border-styl , .
outline-style: dashed:.
outline-width
. ,
101:

:
- em
outline-width: :.
border-width.
CSS, .
padding
, .
, ,
(. .
7.1
).
iI: CSS, em.

. ,
<body>, ,
20 % 20 %
. ,
.
, ,
top, right, bottom, left.

paddi ng: 2em m 2. 5em :.
paddi ng:
20:
padding-top
,
.
paddi ng- top:
20:.
paddi ng,
495
padding-right
,
paddi ng,
20:.
paddi ng- ri ght:
padding-ottom
,
paddi ng,
padding-bottom:
20:.
padding-left
,
paddi ng,
padd i ng- 1eft :
20: .
margin

(. .
7.1 ).
:
.
-----------------------------------------------
r . , <
, ,
(. . n .
7).
: CSS,
em. . ,
<body>,
, , 10%
1 % .
, . ,
, ,
margin:
top, right, bottom,

margin: 2em
20:
left~
2.5em 0:.
margin-top
, margi n, t.
.
margin-top:
20:.
496
1.
CSS
margin-right
, ma rgi n,
.
20:.
ma rgi n- ri ght:
margin-bottom
,
margi n,
ma rgi n- bottom:
20:.
margin-left
,
ma rgi n,
ma rgi n- 1eft:
20:.
CSS
,
, .
background
,
, , .
( ) ,
.
,
. , ,
,
(. . ~ .
8).
: , ,
. ( ,
), :
background- 1or, background- i mage, background- repeat, background- attachment,

background-position.
: background: #333 ur1 (images/logo.gif) no-repeat fixed 1eft top:.
backgrou11d-attachment
, ,
. -
497
, .
-,
attachment,
fixed
background-
Internet Explorer 6
<body> ).
: scro ll fi xed. Scro ll - :
. Fi xed .
: background-attachment: fi xed:.

background-color
.
- , ,
dashed
dotted.
: (. <<>.> .
CSS>.>
).
background-color: #FFF:.
background-image
.
, ,
, .
, .
background- repeat.
: URL-apec .
: background- image: url images/photo. jpg): background- image: url http: 11
www. examp l . org/photo. jpg):.
background-position
( )
. ,
. ,
background-position
, , ,
.
,
.
:
CSS, em, .
, , - .
: l eft, center ri ght top,
498
center bottom - .
1.
CSS
ern
, ,
5 10 ~,
5 lOpx.

,
50% 50%
(.
~ .
.
8).
: ,
Ilp~ep: background-position: left top: background-position: lem

background-position: lOpx 50%;.
m;
background-repeat
, , , .

, .
repeat, no- repeat, repeat- , repeat- . repeat ,

No- repeat
, - .
- . R~peat-x
- .
Repeat- ,
, .
Il:
background- repeat: no- repeat;.

-
.
bottom
,
bottom
- ,
.
, .

(. -
499
.
.
13).
3aeiDUI: CSS, , em
. .
bot tom: 5em: .
------------------------------------------------
8 Intemet Explorer
n n n ,
n ottom (. .
n .
13).
clear
, .

3Jt:
l eft ,
ri ght
. both
l eft, ri ght, both, none.
,
.
none
l r.
: l r:
both :.
clip
, .
,
, ,
. ,
. l i
, ojavaScript,
.
, .
3iI: .

.
rect,
rect(5px.ll0
35px.l0px):.
, :
5, , .

- - .
lOpx, ( 9 ).
100 ,
llOpx.
500
1.
CSS
( ). ,
30 (
:
+ 5 =
35).
cl i : rect(5px .llOpx. 35px.l0px);.
--------------------------------------------------~
,
, .
display
,
(. ~
>> . ~ ~ .
7).
, .
, ( )
- , , , ( ).
: k,
inl ine, none.
di spl
17 ,
. l ock,
i nl i ne
n, ,
. l ock ,
, (, );
i nl i ne
, (
,
);
<strong> ,
none .
, JvSrit
: hover
(. . ~ >> .
3).
- (
Intemet Explorer 7 6).

.
:
di sp l :
ock;.
float
,
,
. ,
fl oat
. ,
, ,
( ) (
), . ~~
; -
, - , . 12.
:
l eft, ri ght, none. n ~~,
, ,
~~ ,
, ~~ .
:
fl oat: l eft;.
501
height

, ,
, , . -
, , ,
.
em
CSS,
.:,
height: 50%;.
-------------------------------------------------
r : r,
, .
-:
Internet Explorer
npocro
r ,
r r.
r
r
.
overflow (.
overflow . n
7).
left

(. . >> .
13)
,
. ,

20 .
CSS,
em
left: Sem;.
max-height
. ,
, .
,
max-height,
. overfl ow.
Internet Explorer 6
max-height.
CSS,
em
.
.
max- hei ght: lOOpx;.
502
1.
CSS
max-width
.
, , .
,
max-width, ,
overflow. max-width
(. . -~ . 11 ).
-

,
.
CSS,
em
.
.
max-width:
950:.
min-height
.
, .
,
min-height,
Internet Explorer
, .
CSS,
em
. .
:
mi n- hei ght: 20em:.
min-width
.
, , .
, ,
, mi n-wi dth.
, ~
. ,
mi n-wi dth,
Internet Explorer 6
CSS,
em
. .
min-width:
760:.
-------------------------------------------------
max-width
min-width
(.
. .
12).
503
overflow
, ,
, , , ,

wi dth.
PMEAHE-----------------------------------------------
Internet Explorer
~:~ ,
(.
. n .
: visile,
hidden, scroll, auto.
overflow
7).
visile
. hidden
; scroll
, ,
,
. auto , ,
.
:
overfl ow: hi dden:.
position
,
.
3iI:
stat i , re l at i ve, abso l ute, fi xed. stat i

- ,
; re l at i ve

. ,
abso l ute
.
.

, ,
.
fi xed
, , ,
HTML. Internet Explorer

fi xed.
: pos it i on: abso l ute:.
-----------------------------------------------

relative, absolute
fixed
13.
left:, right, top
ottom.
504
1.
CSS
right

. ,
, - ,
.
~.
.
.
CSS,
em
ri ght: 5em:.
--------------------------------------------------
8 Internet Explorer
r n
right (. .
13).
top

bottom,
. ,

.
- ,
.
,
.

.
CSS,
em
top: 5em:.
visibility
, . ,
, ,
<di v>.
di sp l ,
hidden vi sii l ity
, .
vi s i i l i ty
,
.
,
. rJvSrit- -
505
vi s i bi l i ty .
: hover (. .
3), vi si i l ity ;
: visile,
hidden.
collapse,
.
:
visibility: hid_den:.
width
, ,
. , ,
, ,
, .
:
CSS,
em
. .
.
wi dth :
250: .
z-index
.
,
pos i t i on abso l ute,

re l at i ve fi xed. , Z.
,
, , .
: ,
1, 2 10.
,
-. , . z- i ndex,
20,
) (. .
z-index,
100
13.6).
z-index: 12:.
------------------------------------------------------ .
z-idex, 2 ,
. 5, 10 . ., , ,
. , , ,
, ,
,
Firefox,
10 000. ,
2 147 483 647,
z-idex .

CSS,
. 1 CSS
HTML.
506
1.
CSS
border-collapse
, .
,
. ,
ll spaci ng L- <t >,
. ,
, ,
coll apse
border-coll apse
!l
, (. . (< ~
10).
, <t>.
: ll apse,
:
sepa rate.
border-co ll apse: ll apse:.
order-spacing
. L-
ll spaci ng
<tab l >.
Internet Explorer 7
border- spaci ng, ll spaci ng

<tab l >,
-----------------------------------------------
, ,

collapse
r order-collapse.
: SS- .
( ), -
(, ,
) 7
:
border-spacing:
lOpx:.
caption-side
, ,
. ,
HTML, <capt i >
<t>,
.
iI:
:
top, bottom.
capt i - s i de: bottom:.
--~-------------------------------------------
, Itemet
Explorer
7 (
), L-: <captio
alig= "ottom"> <captio alig
= ''top">.
507
empty-cells
, ,
.
HTML
<td></td>.
hide
, , ,
.
, <t >.
:
:
show, hide.
empty- ll s : s how: .
-----------------------------------------------
r
empty-cells
Internet Explorer 7
taie-layout
, ,
.
fi xed
, ,
- .
auto -
~. , ,
, .
, ,
<tab l >.
:
:
auto, fi xed.
t - l ayout: fi xed:.

CSS 2.1 .
-, ,
, . .
, .
content
, , .
: fter
: before (.
~ ~ . <<
~ .
14).
Internet Explorer 6 7,
: (" "),
close-quote, no-open-quote,no-close-quote.
normal, open-quote,
508
: .
:
advert: before {content: "And now

after {content: " ( attr(href) ")": }.
1.
CSS
word from our sponsor ... ";}
-----------------------------------------------
( )
.
www. westciv.com/style_master/academy/c:ss_tutorial/advanced/generated_content.html.
cursor
,
. , ,
- ,
- .
: auto, default, crosshair, pointer, move, e-resize, ne-resize, nw-resize,
nresize, se-resize, sw-resize, s-resize, w-resize, tex~, wait, help, progress.
URL-,
( ). ,
, , , , -
, , -
cursor: poi nter.

cursor: he l ; cursor: url ( images/cursor. cur);.
-------------------------------------------------

URL .
www.quirksmode.org/c:ss/cursor.html.
orphans
,
. ,
,
,
~>>, ,
, ,
Opera
).
i: ,
1, 2, 3 5.
orphans: 3:.
page-break-after
,
. ,
, .
509
auto, always, avoid, left, right.
auto-
, ~
; l ways , ,
, ,
avoi d ;
, , , ,
.
l eft
ri ght ,
- ,
. ,
.
:
left
right ,
always.
page-break-after: always:.
page-break-before
,
page- break- fter, ,
.
. ,
,
- .
: ,
:
page-break-after.
page-break-before: always:.
page-break-inside
: , .
,
<di v>,
pagebreak-inside ( Opera ).
: avoid.
: page-break-inside: avoid:.
widows
orphans, .
, .
.
>> ,
widows,
; ( Opera ,
).
: , ; 1, 2, 3 5.
:
wi dows : 3: .
css
Dreamweaver CS4
Dreamweaver CS4 Adobe - , _

HTML/XHTML- SS-.
,
,
. ,
.
,
SS- , ,
,
Dreamweaver, .
CSS, ,
Dreamweaver.
-----------------------------------------------
n
CSS Dreamweaver CS4.

Dreamweaver n , n r
Dreamweaver CS4: h Missing Manual ( O"Reilly).
Dreamweaver
CSS
, Window ~ CSS Styles (~

CSS)
. 2.1
Shift+Fll).
CSS Styles (
CSS).
All
()
. -
Current () -
.
~------------------~------------------------------- n (-) ,
( , ).
511
CSSSYUS
<5lyle>
d
1:
slt~tylcs.as
l[r
hl
. ptoduct
r,:
.611(
11
.<e>mp;~nyNarne
~
~.
Pt~l
Add Proptay
, --
~
-
1 1
L____

. 2.1 . n
All (),
CSS Styles ( CSS) n
n ,
<style>.
. 2.1
(
<body> ).
(ma i n. css ).
(, hl,
.copyri ght
. .). - (,
L-) , - (
) .
Properties ()
. !'{ ( . 2. 1)
, .
1. CSS .
Dreamweaver :
CSS Styles ( CSS) (. . 2.1);
, New (
) ( Format CSS Styles New (
CSS )). New CSS Rule ( CSS) (. 2.2),
. .
Selector ( ). ,
:
Class (), ID () Tag () .
- Compound () -
, , ~
.
512
2. CSS
Dreamweaver CS4
, - (, ,
),
Dreamweaver Compound ()
. ,
, <di v>,
main,
Dreamweaver
#main
Selector Name ( ). Class ()
ID (
) , .
(,
(,
#banner).
. copyri ght ), ID Dreamweaver
, .
Tag (), L-,
,
Tag
() (
).
--------------------------
n,
HTML, n
Tag (). n,
ul.
Name
(),
Compound (), Dreamweaver
SS- Selector ().

,
,
.
, ,
(Selector Name)
Dreamweaver , HTML
. , . 2.2 New
CSS Rule
CSS)
copyri ght. ,
HTML, l ass copyri ght
( , , copyright).
, ,
,
, .
Rule Definition ( ).
New CSS Rule (
CSS) , CSS,
. This document only (
), .
, New Style Sheet File (
). SS-
( - ),
, .
.ii ,
, ,
Dreamweaver
513

n n
N-CSSRul~
canc:e
1
1
Selector :
Choose" con~ seJtor type for VO<X css nk.
!Oass (CIIII !IPPiy to ~~ny . ele<nent)

Selector ""me:
Choose ot 1!1\ter ~ for s:elector.
copyrit
--- ........_
...
n.s selector ~ \\.. "Pjjly < rUe to

"'th dass copyrt".
al . elements
<
1 t~ Speofic
+--
J :;~ Speok
'
Rule Oefinition:
Choose '\!f~ VO<X nk "'.. !< clemed'
1(l1is doo.ment )
C1is dorument onM
'
:
1
-n
New CSS Rule ( n CSS) n ,

- .
n Dreamweaver, ,
. 2.2.
-------------------------------------------------------
, n n,
n , n
fl, .
Dreamweaver
. , .
, ,
Save Style Sheet As ( ).

SS
CSS ).
---------------------------------------------------- , , ,
n, n .
, site_styles.css main.css (
- Dreamweaver ).
514
2. CSS
Dreamweaver CS4
Define in
( ), CSS
Rule Deffnltlon ( CSS).
2.
CSS Rule Definition
CSS)
,
- (. 2.3).

CSS, , Dreamweaver S
font- fami ly font ( CSS). , ,
Dreamweaver CS4 .
Cate9Qry
.r-
kckground
Fom-hmlly:
lo<k
lord~r
Fom-slze:
Font-sryle:
Ust
Posilionlng
Extnslons
fahomo, Con~. sans-rlf

Jz
lffi (
Jltallc
un.-h~ght: J15o
~~
Font-welght: Jotd
ffi
jffi (,..."---.,.
'.~IH
font-varlant:
J no_r_rm.l-.--;1 ~
TxrAnsfD<'m: \upperaso j(!J
Toxt-doratlon: f!l undotll
Color: J!jj.tOOF
Qetiln
lln-through
Q ink
O non
. 2.3.
Dreamweaver
CSS Rule Definition (n
, .
CSS)
Dreamweaver
CSS Styles (
CSS).

, , , , , ,
, ; .
-
, .
, L-r , - ,
, ,
515
: -
. ,
Dreamweaver .
-, ,
.

- ,
SS-, ,
. Dreamweaver,
, . , -,
. Attach Sheet Sheet (

) (. . 2.1) CSS Styles ( CSS)
, Window ~ CSS Styles (~ CSS)).
~---------------------------------------------------- , Property inspector ( ) Dreamweaver (

). n Attach Style Sheet ( )
n
Style ().
Attach External Style Sheet (

) (. 2.4 ), Browse (). Select
Style Sheet File ( ) SS-

. Dreamweaver
, Yes ().
.. ...
"" ' ~ ........-
---~ - ------------
-:'"~- ,...-~
Ae,UU.: sitejtyles.css
1 erowse...
Add as: @) Lr
~>t
k:
You!y*entzt a ~atedhtofmedatypes.
Or~- has SI1!!: stm mts 111 ~ stllfted.
. Z.4. w n Media () ,
, n . print ()
screen (), n ,

Attach
External Style Sheet ( )
,
:.

Add
as ( ) Unk () Import ().

2.
Medla () ,
. print ()
, .
, ,
516
2. CSS Dreamweaver CS4
. , tv () tty (
), -.
. <~: -
~ r.
14.
all () Media () ,
, ,
( ) . .
Dreamweaver CS4
,
(. 2.5).
Style Rendering
) Dreamweaver (. . 2.5 , ),
View ~ Toolars ~ Style Rendering ( ~ ~
). , ,
, ~:~
.
screen
() (. . 2.5, )
print
()
(. . 2.5, )- ,
SS-,
None ()
(. . 2.5, ).
_J : ... c;..,
Aout
The Desig List
IA----S..do___
_,a.glltnl
ca..m~~lil:lcnnlfutd'f'lld..tn-*"-
, The Design List
:About h Design List
. 2.5. n
Style Rendering ( }
Dreamweaver
517
---------------------------------------------------- ,
Preview
()
Attach External Style Sheet
).
Dreamweaver
L- -
L- . ,

.
,
, ,
.

, ,
, .
r
. Property inspector (
)-
HTML (
Class () (. 2.6, )), CSS (
Targeted Rule ( ) (. . 2.6, )).
,
( :) Property inspector ( )
. ,
Dreamweaver <>.
class , < class="company"> (
. company).
---------------------------------------------------- ,
Property inspector ( ).
, , ,
.
, ,
, , ,
<sn> :
Dreamweaver
<span cl ass="company">Chi Vet</span>.
,
.
r
, ,
(
518
) . aass () Property inspector (

) (. . 2.6, ), .
icss
Cucade
d
~Rule
~wCSSR~>
<New lrW\1: S>

ApplyOass
<Remove Cl&ss>
PROPERES
<>.
. 2.6.
Property inspector (n ) - n
n WI
-----------------------------------------------
n , 04.
, n Courier 1r
, n-.
,
Text ~ CSS Styles (~ CSS),
CSS Styles ( CSS),
Apply ()
. ,
, . 2.7.
, ,
Set Class ( ). ,
. , .
. 2. 7 ,
(
<ul>).
. products,
519
1m1
Sd Class
SdiD
ccmpyNom~
!~ Novigotor...
dnt
Convtrt lnlont CSS to Rul"-
prcduct
prcducts
Collopst Full 9
Co11aps~ Outside
Full ag
. 2.7. ,
n

-, ,
None () Oass () HTML ( Remove Class (

) Targeted Rule ( ) CSS) Property inspector ( ) (. . 2 . 6).
, , , None
(He:r) Ctass () Property inspector ( ).
Format ~ CSS Styles ~ None,
( , ).
---------------------------------------------------- n ,
, . -
N ()
move Class
Class
()
( ) n
Property inspector ( ) ( ReTargeted Rule ( n)) . Dreamweaver
, , l/1 . n
, Dreamweave
class.
n , n <s>,
Dreamweaver .
L-.
,
<h2>.
( <h2>) ,
, <h2> .

<h2> ( CSS
(. .
: n .
5)).

, ,

ID ()
L-
Property inspector (
520
) (. . 2.6, ) .

ID ,
, ,
.
Property inspector ( )
Property inspector ( )).
, . 2.7.
Set ID ( ) ,
.
---------------------------------------------------- ,
ID
ID
#,
. 2.7, , ody#catalog , <d>
ID
catalog.
,
L- . ,
ID , Dreamweaver
ID #copyri ght,
HTML : < id~"copyright">.

ID , ,
None () ID () Property inspector
( ).

.
- ,
, , , -
.
Dreamweaver -
r
, -<
tere <head> - (
), SS-
. ?
( ).
, ,
,
,
, , Dreamweaver n
521
n .
n ,
, ,
HTML , n
<head>.
(n, <
, n.
company
r, n, n
c1ass - comparly''),
r
, {. .
. 3). , n
, , n <hl>,
. , n
hl, <hl>
HTML,
. ,
, ,
(c1ass
"company") ,
, n
, , n .
n.
-----------------------------------------------
n1 ,
Dreamweaver
Dreamweaver .
CSS Styles (
CSS) (. . 2. 1),
Edit Style (), CSS Rule Definition

( CSS) ( , ,
(. . 2.3) ). ,
, .
Dreamweaver
, , ,
.
CSS Styles (
CSS) CSS Rule Definition ( CSS).

CSS Styles
CSS) ~ CSS Code view (
). , Preferences
() ( Ctri+U),

CSS Styles ( CSS)

Edit using CSS dialog (
).
CSS Styles (
CSS)
CSS
Edit (),
Rule Definition ( CSS).
, , .
522
Dreamweaver n Design Time Style

Sheets ( )
Style Rendering
{ ) (. . 2.5)
, n
Format ~ css Styles ~ Deslgn nme {

CSS ).
n Design nme Style Sheets (
-, .
).
CSS n -.
{+),
n
Dreamweaver. ,
L-,
n -. I
Dreamweaver Library ( Dreamweaver) -
SS-, ~
n ;
n Dreamweaver.
L-, n
, ,
, , , 11
n .
, ,
. , n
, ~ <head>,
'-' n (+)
, n
().
Hide
. ,
n
(, , ). , n
Dreamweaver.
. , n.
Design
l/1ew ( ).
Dreamweaver
,
,
11
. n,
XML Dreamweaver,
n XSL
-- no , n
XML HTML. ,
, -, n
, 1
, n
. ,
Oreamweaver
,
n
Properties
(). CSS Rule Definition
( n CSS) (. . 2.3)
SS- . .,
r ,
523
CSS. , , Dreamweaver ,
Properties ().
. Properties ()
, , CSS.
: , , CSS Styles (
CSS), Properties () SS- .
:
(. 2 .8);
Allltulu
1> !WOCoiAxR!dr.us
SptyCollapslbltPanel.us
~
Splyenu8arotizootal.us
g loal.css
hl. h2. h3. n.. , ul. ol, blockquce, foon

11
--+--~:d
o:hovtr
.clorAII
lconuJner
lneader
fi09o
f!egolmg
ltlotlage
lffF urtt./lmagesJgPage .png>
. 1000000
1~ Tahorn~. Ver<N.
re~at
Arlal. elvtt
OOlSpxO
ctnter
a.dcground-amcrm
adcgrou.ad-celor
adcground-frn~ge
adcgroundJSillon
adcground-r~t
lrdtr
trderollom
order- rlght
lrder
. 2.8.
ri\ll't l
CSS Styles ( CSS): All () ( ) Current ().

Properties () n , n
-, Current ()
524
SS-
, CSS
Rule Definition (
CSS) (. 2.9, );
CSS
(. . 2.9, ).

CSS Styles ( CSS)
( . 2.8
2.9).
CSSS'YYU.S
1>
tWOComxRIdr:" Spryeoll~p<ibltP,nol.c:ss
w.
css SYttS
lulos
IWOCoiFixRtdr.~s
SpryeollapsitP~nol.c:ss
~nuhrolizOIIUI.c:ss
Sprytnutl.tJiiorlzonul .css
gloal.c:ss
glol>al.css
hl. h2, h3, . , ul, ol. blockquato.
ra.l
hl. h2. h3, 114. , ul, ol, blockquott,

11
11
d
a:hovtr
A:hovtr
.dt~rAJI
.clt.arll
" lodcOraund
l>ackground
#Ff url(-11 -ges/...
font
l>ackground-coiOr
1111rgin
l>ackgroundf-ge
pAcldlng
00 lSpxO
ackground-atuchm..
n-,11\)n
ctnttr
kground-~po,t
- moza~ranct
l>ackgroundpaslt1on
.. ~
~--------------~1
.. lord*f
-moz-ick9round-dlp
- moz- ackground - lnJin _
- moz-icltgroundorigln
-moz-ndlng
- mozordtr-oom-c.
-moz-orderltftcolors
- mozordtr-rac!lus
. 2.9.
Properties () (
. 2.8
<body>, (

background-color, margin) (#333333, . .).
, Acld Property
( )
Properties ()
.
. Dreamweaver , ,- -
, : ,
; ,
repeat,
Repeat-y
i!J
background-
. 2.8; Browse ()
, , , ,
background-
image.
, , -
CSS,
Properties
. ,
() ,
CSS.
, ,
Properties ()
. -, -
. -, ,
, , ,
Properties () , .
, .
Dreamweaver , .

()
Delete
, ,
(. . 2.8).

, ,
. , ,
.
Dreamweaver
. ,
, ,
.

- , ,
. , L- <code> ,
. ,
.
, , CSS Styles (

All
CSS)
() (. . 2.9).
, ,
Delete
).
, (
CSS Styles
CSS))
Delete
<style>
526
, ,
SS-.
,
.
.company,
, , Dreamweavet
<span> , .
, ,
<span cl ass="company">CosmoFarmer</ span>, ,
. ,
Dreamweaver- Find and Replace ( ).

r
z, z , ,
~. ,
, z .
. ,
. ?
,
,
. , n,
n ,
-.
Dreamweaver nn
, < ,
n ,
i -,
, ,
{
Edlt Undo
), n
8
Edit Undo ( ),
Oreamweaver CS4.
n n JII
(Related Files), n
-. 1111 1111011oii
, n ,
n
Edit Undo ( ).
n Source
-,
Code ( ),

, CSS Styles ( CSS),
. ,
. ,
hl, , ,
<> <hl>. ,
, hl .
SS-
(Code view)
. ,
, ,
527
HTML , . ,
, . (< .
, .
Dreamweaver
.
, .
1.
Class ()
Property inspector ( )
Rename Style (
Rename ().
) (. 2 . 10) .
(~~~ .~ )
Rename sty!e: : conpanyName - -- .:.:c_t.;J

New name: J._c_om_pa_n_v_ _ _ _ ___,
Cancel
Help
. 2.1 . Rename Style ( ) ,
2.
,
. n ,
, .
3.
New name ( ).
,
. (< : - .
3.
- Dreamweaver
4.
, ,
,
Dreamweaver .
Dreamweaver
Dreamweaver
Find and Replace ( ),

,
. .
5.
, 'nl (),
. ,
Find and Replace
Yes
(),
( ),
Replace All
( ). ,
, .
-----------------------------------------------
No () nn, 4, Dreamweaver,
, n , .
528
6.
Yes ().
Dreamweave
, ,
.

Deamweave
CSS, ,
, , HTML-era, ,
.
.
.
CSS Styles ( CSS),
, ,
Duplicate ().
Duplicate CSS Rule ( CSS) (. 2. 1 1 ),
,
, Deftne in ( ),
, . .
1]-,]
Sdedor :
Choose 11 contextu/11 s*ctor t)-pe fur
1 [.
css nk.
[- ("~ ., 1 lnY 1. dement)
<X . ..
Selector N ml!:
~ ot 1!11~ 11 n[\
fur yo.s selector.
.~INooc~
Thos ~lector ~ ' ~ vour ro.h to

all !"t ~nts .,..,th dass 1~QIIINotic!
1
1
.........................,
Mol'e- Soe~fi.:
i
!
IW~ O..linition:
Choo~ ~
your rule 1n ~ d!fined.
!' [. . . . , .\
. 2.11 . Duplicate CSS
. New CSS Rule
Rule ( CSS) ,
CSS). ,
, Deamweave -
.
, , .
529
CSS,
. . ,
CSS
CSS
,
, .
- ,
, ,
, ,
- , - .
.
,
, .
SS-, -
. ,
, - ,
,
, ( , . .).
, - ,
.
Dreamweaver

CSS
Styles ( CSS)
(. 2.12, ). ,
CSS,
.
, Ctrl , ,
( ,
Ctrl ). ,
, ,
Shift:
,
.
-----------------------------------------------
( ),

All
()
CSS Styles
CSS)
(. . 2.12, ) .
CSS
Styles ( CSS).
530
. 2.12. CSS Styles ( CSS)

, .
, ,
.
( <style> CSS Styles ( CSS))
( ,
ma in.css),
(. 2. 13,
).
Dreamweaver
CSS
.
' .
WotAd you lke ID movt! ~ rule yw~v? ovfng ~ rule wil not ~ ~ o.ent rule. lt wil
~ ~~ ID 11-r o.ent rule in ~ destmlion style ~t.
Destlrwllion CSS R.,:
d{
font.farr'v: 'Atlal elad<', ~t. $l!RO-t

}
11
No
11
c-:el
. 2.1 . ,
.
, , ,

531
,
, . ,
<body>, .
, ,

<body>
( , ).
,
.
Dreamweaver .
-----------------------------------------------
,
Dreamweaver
. n
. n,
-, ,
.
, . n
Code view ( ) / .
HTML
: No (), .
Yes (),
Dreamweaver .
. ,
.

CSS
( ),
.
,
.
PMEAHE-----------------------------------------------
Dreamweaver ,
, , (. . 2.13),
Dreamweaver

, .
~;~,
.
,
.
CSS,
(- ), ( -

CSS).
, , .
. .

CSS Styles ( CSS)
532
Move CSS Rules ( CSS) (. 2.14, ).
Move to External Style Sheet ( )

(. . 2.14, ).
, ~ Browse () SS-
,
new style sheet (
), .
, - SS-
, .
. .. . -
GOtoCod~
Nf!W.
t:drt
Dupf1UI~~
RenameCI<Iss.
Eci<t Sdt<tor
Movt CSS Rules~

Appty
Cut
Ctrt+X
COfYY
Ctrt+C
s\(
Ctrl
Oefett
Dtl
Site
Ust Exttrnal Edotor

Atth
Stytt Sh~ ..
Oesignttme...
~
Cfose
Close Group
Style ~t:
maon.css/
~style~t. ..
. 2.1 4. -
n. n ,
n Move CSS Rules (
CSS)
- n Dreamweaver,
SS-
CSS Styles
533
CSS)
Dreamweaver
CSS
Dreamweaver ,
.
---------------------------------------------------- ,
Dreamweaver
<style> -. ,
CSS Styles ( CSS), Delete (
<style>
) .
SS-
( CSS)
.
4 5,
CSS.
CSS Styles
, , , .

<body>
, ,
.
, ,

24
36 .
. ,
, , Dreamweaver CS4

CSS Style ( CSS)
(. 2.15).
Current (),

(Current Selection mode),
- , , -
.
CSS, .
,
. ;
, .

Summary for Selection ( ).
,
, ( ,
534
2. CSS
Dreamweaver CS4
, <hl>
)?
Summary for Selection ( )
. , ,

, . .
. CSS
,
Dreamweaver.
About
()
(. . 2.15, ). ,

<hl>
, ,
.
,
Summary ().
, , Aout () ,
Rules (), .
.
, m m ,
m Rules () (. . 2.15, ).

CSS,
,
, .
m Rules () (. . 2.15, ).
, ,
, , ,
. .:._ . , ,
, , , .
,
Style ( CSS),
CSS
2.15
CSS, (
) -.
Summary for Selection
( ) ,
Tahoma , , ,
14 , 130% 5
. Summary for Selection (
), Show Property Information (
) (. . 2.15, ), ut ()
, . ma rgi

(#ma i nContent ),
gl l . css.
. Properties
(), ,
.
, ,
), .
Add Property (
~ SS- lja n
css S'I'YUS
--.
535
CSS Styles ( CSS)
."
--,.----...-
All
l()(a ~homa. Vtn!Ana, AIW, ffwua,...
1000000 ,
ltft
14
lD
SpxOOO
llntlltglll
CSS,
---
SS-
css S'I'YUS
All
,_
l()(a T&homl. VetdAna,
."'-
<odv>
lco<Ufntr
<dN>
.tmafnWraPI)er
<div>
.twoColflxRtdr .. <div>
hl. 1\2,113, . . ...

.....fnCOIIttnt
SS- ,
----
<>
<>
1. 2.15. n
Property _lnformation
( ) ,
Cascade
()
(),
536
2. CSS
Dreamweaver CS4
---------------------------------------------------- ,
. ,
, -,
.

Show cascade ( ) (. . 2.15, )
, .
, -
(hl, h2,
ID (#container
h,
h4,
#mainWrapper),
<body>,
) , ,
#mainContent
. , ,
, .
, . ,
, ,
, .
---------------------------------------------------- ,
Property inspector (
).
, , CSS,
Targeted Rule ( )-
, Rules () CSS Styles ( CSS).
Properties
Rules
()
() .
, ,
. ,
.
, . 2.16 ,
:
(. hi gh l i ght ).
( <body>, <h2>
<h2>)
h2
. , .
font-fami ly, , , , ,
MS. h2
Trebuchet

Rules (),
, ( ), ,
. ,
(. highl ight
),
,
.
. hi gh l i ght
(. . 2.16, 11 ) , -
-------------------------------------------------------
, , ,
, . r
, Dreamweaver , .
SS- nn
537
CSS Styles ( CSS)
Tips for Enjoying
..
x~~ ~hi.~..l.............................................................................
"rreuchet s,
Atial, ...
90%
fonH!m1y
font~
ine-heght
foot-51ze
colar
#900
colar
::900
order-tgp-wlth
Spx
order-top-widtn
Spx
order.Oom-wt ... 2
order.Ottom..-., ... 2
order~~
soid
orde--top-style
order-tttom-5t.
dotled
order .Ottom-5t... do~
order-lxlp<Oior
order-top-color
:>999
order.Ottom-c. ..
pj66
order.Ottom-c...
soid
Ru6a
"rreuchet s,
48
<d>
h2
h2
<h2>
<h2>
Ari<!l, ...
orcler .Ottoln-wt... 2
order-tgp-color
orclertop~~
order-top.width
color
foot-srre
,;999
soid
. #900
Spx
Add Ptooertv
. 2.16.
Current () n CSS Styles ( CSS) n
n -
- .'
, , ,
CSS
Styles ( CSS). , i
CSS, , -
.
538
2. CSS
Dreamweaver CS4
--------------------------------------------------- , nn
, n . n,
d n ,
. n
n n
All
CSS Styles ( CSS):
()); ,
(Code Navigator)
Dreamweaver CS4 CSS (Code Navigator),

CSS, ,
. , CSS
Styles ( CSS) ( ).
, n
(. 2.17).
t.Q~n
''
mrsJmT~!!!J 'i ~
, @coc~ei8
Sptlt
h&j Dl!si;l\ \ 11!)1. ~ ~~
_ill tmco<~o
Sourct tm~li!:!:~ID Spfy(otJ~psiePinttJs
11tlt: Cl\lo li
~tnukrJs
8t.
Sc>r/Collo!ibltP~ntl .us
CliiO.
~nukrozontal.as
+ Sfgn up
Shla Vet .L..t...

"'"""~"' c!!""""c"''v
.. !
..... .........
~
~ ..... ..&.&....... - .........
TIPS
VES
r:" ,nvr
Fcn
Wisdom from
~....
SERV1CES
vn11n
ABOUT US
.~ .
01R10
'
I"'UTA
~ gloai.C$$
'
odV
fcontalner
1 mainWr/lpper
font-wetght: IIOI'II;
Lorem~mdok
hl, h2, h3, h4, , te-transrorm: upPErCSe;
convals Vctus ru
lrinCont1!t1~ font-921!: ><;
aecenas uma
~ twoCoiRxIdr.
lettepacing: lpx;
quam ut lacus.
.twoCoiRxIdr 1 matVIn: ;
How to
-
-- --
Cmd+Opt+dkk tD show
Q. Whatu
tpittle
LJ Disaie
Place holde
lndlc.IJIDr
Lorem ~m dobr st amet. consectetutr ~lng elt. Praeent alquam, justo

convals Vctus rutrum, erat nulil fetmentum diam, at nonummy quam ante quam.
<
'
Pha9e!Jus
"""' , ....
Dreamweaver CS4, n
CSS
. 2.17. -
n n
cl<:tum9t. Al
n . (Code
539
Navigator)
Alt
(
c-Qption).
CSS,
, , , , . . . 2.18
Alt ( Windows) ips ()
, , .
Code Navigator ( ) ( . 2.18).

,
( , r . ).
,
(it+ -tin+).
n ~
Code Navigator ( ) .
(, , . .),
View ~ Code Navigator (~ )
Ctri+Ait+N ( Windows) c-Option+N ().
S/11'/enula
SprjCollapslbleP&nel.css
S/11'/tnuSa rl
TIPS FOR ENJOYING YOUR CHIA

WtSdom from the experts in OUa Pet care.
~f;,CO(IsectEtuer adpiscng e1t. Praesent .uam, justo
convals klctus rutnJ.....-:-r- fermentum dem, at nonummy quam ante quam.
aecenas uma purus,
<k lndlator to ring up the Code vtgotor. fels. Nam andt
quam ut tacus. ,
Lorem
. 2.18. , ,

Code
Code Navigator ( )
(. . 2. 1 7)
Navigator ( ) ,
CSS, . . 2 . 18, ,
540
2. CSS
Dreamweaver CS4
Enjoying Your Chia~
<$
Tips for
- gl l . css
- twoCo l Fi xRtHdr. css.

,
CSS.

, . . 2.18
30
#mainContent hl
font-si ze, 1 1etter-spaci ng . .
Code Navigator ( ) -
, ,

CSS Styles
CSS),
Current ()
( ) .
,
CSS -
Code Navigator ( )
,
, , ,
. CSS Rules
(
CSS), ,
, ,
.
, ,

Dreamweaver,
CSS. ,
. Dreamweaver Split ()
( ), CSS .

CSS
, , CSS.
, ,
CSS,
-. ,
CSS
CSS, -.
SS- , .
, -,
,
CSS.
>> .
(W)
CSS 2.1 (www.w3c.org{R/CSS21/).

- W3C - ,
~
CSS- 2.1.
CSS 3 ( ) (www.w.org/Style/CSS/current-work).
,
CSS 3. -
, , , ,
, , .
ID DF-
Cascading Style Sheets: The Definitive Guide (Eric Meyer) (

O'Reilly). ! CSS
CSS Cheat Sheet (www.addedbytes.com/cheat-sheets/css-cheat-sheet). DF

CSS, SS-
. ,
.
r -
SitePoint CSS Reference (http://reference.sitepoint.com/css).

CSS, ,
542
3.
CSS
WestemCiv's Complete CSS Guide (www.westciv.com/style_master/ac:ademy/css_tutorial/

index.html). - CSS.
CSS3.Info (www.css.info). CSS 3
SS-,
CSS 2 3.
Mozilla's CSS Center (https://developer.mozilla.org/En/CSS).

Firefox - ,
. CSS,

.
CSS
( )
.
,
CSS
CSS- Discuss (http://css-discuss.org/).

CSS. SS-
.
-------------------------------------------------

CSS-Discuss
47 000
n - , nn ,
. n
n, n n
CSS.
http://css-discuss.incutio.com/.
1
CSSCreator (www.csscreator.com/css-forum/).
CSS
SS-
SitePoint.com
(www.sitepoint.com/forums/forumdisplay.php?f=S).
CSS.
CSS- Ticks.com Forum (http://css-tricks.com/forums).
javaScript, .
CSS
, , -
CSS, , , .
CSS .
CSS-Tricks.com (http://css-tricks.com). ,
, CSS.
,
.
Sitepoint (www.sitepoint.com/sucat/css).
CSS Sit.epoint
, .
Smashing Magazine (www.smashingmagazine.com/category/css).

,
CSS
-.
SS-
, .
-- . ,
,
.
.
Listutorial (http://css.maxdesign.eom.au/listutoriall).
30 Excellent CSS Based Navigation and Buttons Tutorial (www.instantshift.com/

2009/01/11/30-excellent-css-ased-navigation-and-buttons-tutorial).
, .
Create Apple's Navigation Bar with CSS

navigation-bar-using-only-css).
(http://westciv.com/style_master/iog/apples
Apple.com, ,
CSS.
CSS Vertical N vigation Bar with Teaser ( www.sohtanaka .com/we-clesign/cssvertical
navigation-with-teaser). ,
, ,
JavaScript.
CSSI
CSS Navigation Bar Code Generator (http://lab.mattvarone.com/navar).
? -
,
.
CSS Menus (http://13styles.com/category/css-menus). SS

, !
544
CSS Showcase (www.alvit.de/css-showcasel).
no CSS
SS-.
Listamatic (http://css.maxdesign.com.au/listamaticl).
CSS
. .
Listamatic2 (http://css.maxdesign.eom.au/listamatic21).
SS,
CSS Play Menu Showcase (www.cssplay.co.uk/menus/index.html).
, . .
CSS
, (. .
8),
. ,

CSS.
CSS Play Slideshow (www.cssplay.co.uk/menu/slide_show.html).
CSS
(Stu Nicholls).
Sliding PhotoGalleries (www.cssplay.co.ukfmenu/galleryI.html). ,
SS-.
CSS Image Maps (www.frankmanno.com/ideas/css-imagemapl).
: .
CSS Photo Caption Zoom (http://randsco.com/_miscPgs/cssZoomPZ.html).

,
Revised Image Replacement
(www.mezzoue.com/tests/revised-image-replacement/).
L-
.
CSS
CSS
, . , ,
. , , -
CSS .

Interactive CSS
Model (www.redmelon.net/tstme/ox_model!)
On Having Layout (www.satzansatz.de/cssd/onhavinglayout.html).

Internet Explorer (
) CSS,
Internet Explorer 6 ( IE 7).

CSS
545
Perfect Multi-Column CSS Liquid Layouts (http://matthewjamestaylor.com/iog/

perfect-multi-column-liquid-layouts).
() , , IE 5.5
iPhone.
Position is Everything (www.positioniseverything.net/articles/onetruelayout/).
, ~ ~ ,
,
.
CSS Discuss Float Layouts (http://css-discuss.incutio.com/?page=Fioatlayouts).
.'

CSS- Discuss Absolute Layouts (http://css-discuss.incutio.com/?page=Absolutelayouts ).
BarelyFitz Designs (www.barelyfitz.com/screencast/html-training/css/positioningl).
, SS-.
Making the Absolute, Relative (http:/ /stopdesign.com/archive/2003/09/03/absolute.

html).
.
:J
CSS Layout Generator (www.pagecolumn.com). ,

, L
SS-. , ?
Even More Layout Generators (www.wedesignooth.com/15-extremely-usefulcss-grid

layout-generator-for-web-designers). ,
HTML CSS, 15
-.
960 Grid System (http://960.gs). CSS,

,
,
di v
http://nettuts.com/videos/screencasts/adetailed-look-at-the-960-css-framework/).
YUI Grids CSS (https://developer.yahoo.comfyui/grids). t SS
Yahoo. 960 Grid System, ,

Blueprint (www.ueprintcss.org). n CSS.

Intensivstation T~mplates (http://intensivstation.ch/en/templatesl). ,
Adaptive CSS Layouts (www.smashingmagazine.com/2009/06/09/smart-fixesfor-fluidlayouts). ,

.
546
3.
CSS
TJK Desigh (http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp ).

, L-

Variale
CSS.
fixed width layout (www.clagnut.com/iog/l/).
,
.
3-Column Layout Index (http://css-discuss.incutio.com/?page=ThreeColumnLayouts).

.

CSS - -, Internet
Explorer 6 Windows- ...
CSS ? , :
,
, (
).
Windows Internet Explorer
How to Attack an Internet Explorer (Win) Display Bug (www.communitymx.com/

content/article.dm?page= l&cid=07EO).
CSS Internet Explorer.
RichlnStyle's guide to IE SjS.S Bugs (www.richinstyle.com/bugs/ieS.html).
, -
. ,
Internet
Explorer 5, .
Explorer Exposed! (www.positioniseverything.net/explorer.html).
Internet Explorer , .
CSS ,
CSS,
, SS
.
ZenGarden (www.csszengarden.com). - CSS:

L-.
CSS Beauty (www.csseauty.com/).
SS
CSS Elite (www.csselite.com).

css~
~ ,
...
~u 110
547
CSS
CSS Mania (http://cssmania.com/).
-,
.1
CSS .
2004
Shov.-case (http://css-discuss.incutio.com/?page=ShowCase).
SS-.
CSS
..1, ,
CSS!
\\'
Standards Solutions (Dan Cederholm) (

Friends of Ed). CSS,
, L-. -
, ,
, L-
..1..1 , , ,
.
BulletproofWeb Design ( New Riders).

.l , , SS-,
,
. ,
.1 .
CSS Mastery: Advanced Web Standards Solutions (Andy Budd)

Friends of Ed).
CSS, , CSS,
CSS L-.
(
Head First HTML with CSS & XHTML

O'Reilly). , ,
HTML CSS.
(
Flexile
Web Design
New Riders)
, (
.1) .
SS Cookbook .
<U
CSS.
CSS
(CSS).
.l Windows
OS, TextEdit.
SS-,
-,
CSS.
Dreamweaver,
548
3.
CSS
http://css-discuss.incutio.com/?page=CssEditors
, SS-.
Windows
Style Master (www.westciv.com/style_master/product_infol).
SS-
, ,
, -,
SS-.
Dreamweaver (www.adobe.com/dreamweaverl).
CSS, - ~ ,
CSS -
, .
Windows
Style (www.newsgator.com/NGOLProduct.aspx?ProdiD=TopStyLe).
SS-, L-
,- ( ) -
. .
~ .
Microsoft Expression Web (www.microsoft.com/expression/products/Web_Overview.

aspx).

.
SS-.
CSS.
CSSEdit (www.macrabblt.com/cssedit/).
css
15
3 541
DD-
HTML 15
23
547
542
Design Time 522
40
510
525
em, 45, 484

319
287
136
50
541
544
doctype,
40
Firefox
overflow, 183
View Formatted Source, 113
152
447
42
41
Dreamweaver 22, 510

SL- 522
522
SS-
515
Internet Explorer
* html, 185
520
CSS Styles (Ji CSS) 533

Properties () 522

53
526
484
153
353, 546
528
520
134
39
113
517
50
L-
134
455
457
447
550
s 153
title 83
]
JavaScript
ID-
68
260
399
209, 404
165
()
389
298
(inline)
Intenet l
202
. 544

overflow
hidden,coco 189
padding, 168
pojection,
419
198
260
Safai
Inspecto ()
152
39
134
300
300
294
144
URL 485
427
427
XHTML 19
XML ( )
Document Definition (DTD) 40
77, 153, 508
175
l
Internet
177
188
449
177
203
251
18
cellspacing 296
295
class 67, 451
id 69, 451
544
189
234
257
179
181
83, 389
113
L-,
237
349
s
Web
173
173
46, 482
HTML 19
URL 485
265
551
(RGB) 483
483
484
484
483
482
543
253, 453
255, 278
260
257, 286
257
262, 267
543
96, 107
98
113
485
100
98

203
218
219
251
408
218
209
243
265
544
449
109
135, 137
106
107
11
119
111
245
423

458
.,
Firefox

453
261
437
( Internet Exploer) 457
138
171, 495
47, 48
152
149
149
149
254
134
(Cascading Style Sheets) 15

249
263
45, 46
() m
188
188
46
185
L-
213
Internet Explorer 456, 546
@import, 420
ftr, 426
ntnt, 426
peek-a-boo ( ) 359
359
201
354
353
249
381, 387, 407

229
552
356
256
285
546
!important 423
@import
Internet Explorer 420
@media 421

css 50
HTML 39, 68
48
185, 318
clear, 189

336
228
342
351
260
189
342
332
221, 408
position, ,
379
377, 391
flt, 377
visibllity, 389
(z-index) 387
545
383
399
391
148
208
208
59
208
387
252
after 78, 426

efore 77
first -child 79
first -letter 77, 148
first-line 77, 148
112
active 76, 244

focus 79, 244
hover 76, 244, 247
Intemet Explorer 264
253
250
link 76, 245
visited 76, 244
253
112
376
134
403
383
359
376
394
545
SS-
389
399
390
377
Internet Explorer 400, 402
399
, 73
394
329
319
319, 332
Intemet Explorer 353
342
545
319, 332, 333
553
396
165, 177, 491

img, 247
203
249
334
545
498

318
339
minmax- 338

332
296
247
295
179
bode-collapse
295, 506
296
d-l 492
bode-spacing 506
bode-style 492
bode-width 493
bottom 498
caption-side 506
clear 189, 499
191
343
EditPlus 22
FontPage 22

doctype 42
HTML-it.21
skEdit 22
TextWangle
22
()
73, 96, 105, 107, 108, 109, 113
~_<>
46
backgound 216, 496
clip 499
l 132, 482, 486
424
132, 486
content 426, 507
cusor 508
display 175, 500
nn, 175
I>
179
249
192
424
backgound-attachment
189
216, 496
fixed, 216
Internet l 216
scoll, 216

backgound-colo
216
249
425
216
203, 497
backgound-position 211, 252, 497
211

backgound-image
266
background-epeat
visabllity 389
257
Internet l 359
354
427
empty-cells 507
float 185, 329, 500
204
187
l 189
188, 330
351
Internet l 359
188
304
font 145, 486
font-family 126, 486

497
343
304
214
216
213
209, 498
209
554
page-break-inside 509
position 503
right 504
tale-layout 507
text-align 144, 488
294
font-size 133, 487

135, 137
font-style 138, 487
font-variant 139, 487
font-weight 138, 488
height 181, 228, 501

181
overflow 183
left 501
letter-spacing 141, 488
line-height 142, 488

174
144
ljst-style 154, 490
list-style-image 153, 491
list-style-position 151, 491
listcstyle-type 149, 491
margin 146, 152, 166, 448, 495
254
170, 495
191
172, 229, 338
r 354
168
169
max-height max-width
180, 338, 359, 501
orphans. 508
outline 493
overflow 183, 503
auto, 183
hidden, 183, 188
scroll, 183
visile, 183
padding 152, 165, 448, 494
254
174, 252
293
r 179
203, 252
249
168
169
page-break-after
page-break-efore 428, 508

259
text-decoration 140, 488

247
text-indent 146, 489

text-transform 139, 489
top 504
vertical-align 294, 489
visibllity 389, 564
white-space 490
widows 509
width 181, 255, 505
298

181
346
word-spacing 141, 490
z-index 387, 505
zoom 346, 393
96
252
359
45
ID 68
#( ) 93
L-
68
69, 322

92
JvSrit

82
[]( )
70
83
70, 455
88
80
(>) 80
80
82
68
555
65
. () 65
ID-
322
440
89
65
71, 73, 450
_ 246
204
91
82
() 63
() 71
437
100
98
52
114
438
439
53
76, 243
421
46
149, 213, 218, 236, 254

151
264
490
81
82, 137, 150, 159
243
( )
276
246
246
251
346
330
398
396

( )

360
352
544
298
290
294
295
293
505
293
272
247
243
76, 246
304
297
15, 47
- 417
Internet Explorer 420
420
419
47, 49, 57
@import, 110, 443
@media, 421
Design Time 522
Dreamweaver 511

261
15, 44
Deamweaver
514
CSS Styles ( CSS) 533
520
51
525
53
442
106
303
298
426
253
267
121
420
556
114
@media,
51, 59
422
47, 48
138
421
49, 56, 512
438
421
429
!important 422
428
427
426
424
423
147
139
486
149, 159
21
140
, link
140
154
131, 486
126, 448
228
<> ()
18
all 419
braille 419
embossed 419
handheld 419
print 419
projection 419
screen 419
speech 419
tty (teletype) 419
tv 419
<div> 35, 321

-
169
451
343
<img> 203
rdr,

247
293
215
175
<span> 36

391
142, 156
146
()
156
77
144
156
background-image,
251
background-image,
URL 207
141
141
138
138

146
179
247
231
215, 425
209
210
background-image 204
231
139
264
145
300

( )
134
216
272
557
Safari 300
311
299
302
399
399
482
301
30 1
301
fieldset 300
legend 301
301
68, 173, 187
74
36
173, 187
388
+ () 82
427
- 168, 187
345
,
L-
301
nw
CSS
2-

O'Reilly
. IUR
. /R
. , .
.
.
. , .
13.03.12. 70100/16.
. . .
45,15.
1000.
000 r>>, 198206, -, , 73, .

JI -
005-93, 2; 95 3005 -
>>.
180004, ,
. PoIUI,
244.
29.
34.
n3DAT~ncnfi
DOM
~>;:nnTEP
WWW.PITER.COM
11
n n103 , ,
,
POCCSI
-
.j: (812)
. , . ., . 29
703-73-73, 703-73-72; e-mail: sales@piter.com
; , ., .
2/1,
1, 6-
.j: (495) 234-38-15, 974-34-50; e-mail: sales@msk.piter.com
., .
169; .j: (4732) 39-61-70

e-mail: piterctr@comch.ru
. , .
11 ; .j: (343) 378-98-41, 378-98-42

e-mail: office@ekat. piter .com
. , . 13; .:
office@ov.piter.com
(8312) 41-27-31
e-mail:
. , . 36; .: (383) 363-01-14

: (383) 350-19-79; e-mail: sib@sk.piter.com
--
. , .
26; .: (863) 269-91-22, 269-91-30

e-mail: piter-ug@rostov.piter.com
. , . 33;
223; .: (846) 2-89-79

e-mail: pitvolga@samtel.ru
. , . 12, 10; .: (1038057) 751-10-02

758-41-45; : (1038057) 712-27-05; e-mail: piter@kharkov.piter.com
., . 6, . 1, 33; .: (1038044) 490-35-69

: (1038044) 490-35-68; e-mail: office@kiev.piter.com
. , .
34, 2; .f: (1037517) 201-48-79, 201-48-81

e-mail: gv@misk.piter.com
1:?;1 , .
: (812) 703-73-73. E-mail: fugaov@piter.com
1:?;1
: ~r- (812) 703-73-72, - (495) 974-34-50
1:?;1
.: (812) 703-73-73.
- e-mail: kozi@piter.com
1:?;1
:
ICQ413763617
www.piter.com;
.:
(812) 703-73-74
nDATEncnfl
t;>nnTEP
''

WWW.PITER.COM

.j: (4232) 23-82-12
e-mail: ookase@mail.primorye.ru
r,
.: (3952) 20-09-17, 24-17-
e-mail: prodalit@irk:ru
http:fjwww.prodalit.irk.ru
, , . , . 1
.: (4212) 36-06-65, 33-95-31
e-mail: dkiga@mail.kht.ru
,
.: (4212) 32-85-51, : (4212) 32-82-50
e-mail: postmaster@worldooks. kht. ru
,
.: (4212) 39-49-60
e-mail: zakaz@ooksmirs.ru
r,
.j: (3952) 25-25-90
e-mail: kkcooks@bk.ru
http:/fwww.kkcooks.ru
,
. , . 86
.f: (3912) 27-39-71
e-mail: ook~world@puic.kraset.ru
, n-
.:
, , . , .
.: (8182) 65-41-34,65-38-79
e-mail: marketig@avfkiga.ru
, , . , .
.: (4732) 26--
, ,

http:fjwww.amital.ru
.: (843) 272-34-55
e-mail: tais@acorp.ru
, ,

.j: (4012) 21-56-28, 6 5-65-68
e-mail: shibkova@vester.ru
, 000
. , . 12
.j: (343) 358-18-98, 358-14-84
e-mail: domkigi@k66.ru
http:fjwww.vester.ru
, ,
, .15
.: (846) 331-22-33
e.-mail: chacoe@chaccoe.ru
,
. , . 1
./: (343) 228-10-70
e-mail: igm@luma.ru
http:/jwww.luma. ru
,
. , . 58
.: (4732) 51-28-93,47-00-81
e-mail: maager@kmsvm.ru
.
e-mail: rossy@kmw.ru
, , . ,
.j: (87934) 6-93-09
(383)336-10-26
(383) 336-10-27
e-mail: office@top-kniga.ru
http:fjwww.top-kniga.ru
:
424
, 000
.,. 124
.: (351) 247-74-03,247-74-09,
247-74-16
e-mail: zakup@itser.ru
http:fjwww.fkiga.ru, www.itser.ru

Язык

Большая книга CSS

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Большая книга CSS

Загружено:

Авторское право:

Доступные форматы

css

David Sawyer McFarland

....... / ......... 203

........... : ........ 290

11. CSS .......................... 318

CSS ..................... 482

Dreamweaver CS4 ...................... 510

CSS ............................ 541

1. CSS - HTML ........................ 30

......... , ....................... 318

Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . 353

CSS 3 .............................................. 461

Dreamweaver CS4 .....................

Design, Developer's]ournal Macworld,

Macintosh G4. : nanarer@oreilly.com.

(Phyllis), (Les), (Del),

Cascading Style Sheets (CSS),

- Wold Wide Web Cosortium (W),

<html>, <>, <hl>, <t> . .,

(www.htmldog.com/guides/htmiegier/) WSchools (www.

Web Sites: h Missig Maual (Matthew MacDoald)

head (~. ), body (~. ),

www.missingmanuals.com. - href- , URL

<!D html PUBLIC "-//WC//DTD XHTML 1.0 Tran5itional//EN"

, World Wide Web Consortium) XHTML

Mozilla (Firefox) Apple (Safari), ,

jEdit (Windows, , Linux, http://jedit.org/). ,

TextWrangler (Macintosh, www.barebones.com/products/textwranglerl).

EditPlus (Windows, www.editplus.com)-

skEdit (Macintosh, www.skti.org)- -,

Dreamweaver (Macintosh Windows, www.macromedia.com/software,ldreamweaver) -. ,

Expression Web 2 (Windows, www.microsoft.com/expression)-

- CSS 2.1 CSS 2,

System ~ Library ~ Fonts (~ ~ )~.

XieW Sooxce O>art

Text Size ~ Increase (

/Oeve 1oper 1 1i cat i ons.

O' Reilly Safari.

8 Saucy Succutents to Splce Up Your ledroom

Lorem ipNm dolor ~i t e

Lorem ipsum dotor ~i1e

lrtdoor urwt.s: sod or

8 Saucy Succulents to Splce Up Your Bedroom

L'O'f'm' ipsum dolor site

The Urban Agrarian Lifestyle

Revolutiort in Indoor Agriculture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed

<hl>The Urban Agrarian Lifestyle</hl>

<di v> <span> , .

<> <i >,

leftmargin, topmargin, marginwidth,

ChJ.a Vet e<

BOARDING YOUR CHlA

........ ,,ch...., ....... ch;.v.,

v.tltUI.Imvt.l1.. c.. .. ",. .. t\.llpl&lialgiltiluoollt

L!Jre'n II)Urldo'tltam8. ~adisOnpdt.. ~~.~

rnoAe!Itii'I,CICIIICIOQ ~.-. f81n~

_." ,.". . . Ooi

n, HTML, XHTMl, XMl.

World Wide Web

Firefox, Web Developer

Valodlte docvment on1ine

h W vaidators rely on c0011111ity )111 for hosting and development.

~~~~ .~!~cr~n~~:~.- ~~~~~.~!~~n<mumllr' hh t"''"rr.J

11r ~~~,.,. <~tlopoxl l~ <1mr111~