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>

<style type="text/css">

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 type="text/css">
</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-color: #FDFBAB:
background-image: url(images/bg page.png);
background-repeat: repeat-y;
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 ......

,,

The Amazing World of CSS

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

-
.

The Amazing World of CSS

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
Lorem ipsum dolor sat.
dolor sat.

ipsum dolor sat. Lorem

Lorem ipsum dolor sat.
dolor sat. Lorem ipsum
Lorem ipsum dolor sat.

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%:
font-weight: normal:
}

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:
font-family: "Palatino Linotype". Baskerville. serif:
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).
, (

) , ,

, .

CSS: The Missing Manual

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-family: "Palatino Linotype". Baskerville. serif:
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).
! , ,
, .
, ,

CSS: The Missing Manual

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 ,

, .

, . ,
, ,
. ,
, . :

font-family: Arial. Helvetica. sans-serif:

,
.
,

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

Class aptent taciti sociosqu ad litora torquent per
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:
:

font-weight: normal:
:

-------------------------------------------------------

, ,

,
. :

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,

consectetuer adipiscing elit, sed diam
nonurnrny nibb euismod tincidunt ut
laoreet dolore magna aliquam erat
.volutpat.
Ut wisi enim ad minim veniam, quis
nostrud exerci tatio tincidunt ut laoreet
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
nostrud exerci tatio tincidunt ut laoreet
dolore magna aliquam erat volutpat.
3 incidunt ut Jaoreet dolore magna
aliquam erat volutpat nonummy nibh
euismod tincid.

1. iLorem ipsum dolor sit amet,

consectetuer adipiscing elit, sed diam
nonurnrny nibh euisntod tincidunt ut
laoreet dolore magna aliquam erat
volutpat.
2. Ut wisi enim ad rninim veniam, quis
nostrud exerci tatio tincidunt ut looreet
dolore magna aliquam erat volutpat.
3 incidunt ut laoreet dolore magno
aliquam erat volutpat nonummy nibh
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:
margin-bottom: lOpx:
: ,
, ,

text-transform,

<h> . ,

margi n.

7.

#main {
font-size: 1.5em:
line-height: 150%:
margin-left: 150:
margin-right: 50:
margin-bottom: lOpx:

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:
text-transform: uppercase:
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%:
font-family: Arial. Helvetica. sans-serif:
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
commodo consequat. Duis autem vel eum iriure.

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
commodo consequat. Duis autem vel eum iriure.

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:

border-bottom: 4 dashed #333:

178

7.

, ,

,
. ,

SS- , ,
. , ,

border: 2 so1id red:

border-bottom: 4 dashed #333:

.
,

border-1 eft.

SS- .
: ,

border: 2 so1id k:
border-bottom: 4 dashed #333:

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: #FDFBAB:
- .

-,

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 {
background-color: #FFF:
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:
text-transform: uppercase:

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:
letter-spacing: lpx:
color: #85All0:
text-transform: uppercase:
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:
letter-spacing: lpx:
color: #85All0:
text-transform: uppercase:
background-color: #24:
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-top: 2 dotted #8DA516:
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-top: 2 dotted #8DA516:
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.

, ,

.
: .

.
Internet Explorer 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.

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-repeat: no-repeat:
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.
Lorem ipsum dolor sit amet. consectetuer
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 {
font: bold lem/normal Verdana. Arial. Helvetica. sans-serif:
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 {
font: bold lem/normal Verdana. Arial. Helvetica. sans-serif:
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="figure">
<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.

<style type="textlcss">
.photo img {
border: lpx solid #666:
background-color: #FFF:
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 {
border: lpx solid #666:
background-color: #FFF:
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:
background-color: #FFF:

<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 {
background-color: #FFF:

<di v>

. ,

5.

4,

#wrapper {
background-color: #FFF:

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-repeat: no-repeat;

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-repeat: no-repeat;
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):
background-repeat: no-repeat:
. ,

, .

- ,

(.

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:
margin-bottom: lOpx:

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:

margin-bottom: lOpx:

(

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-repeat: no-repeat:
background-position: 4:
padding- left: 25:
margin-bottom: lOpx:
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

..... .........

-.. . ....

,_,,

Lorem ipsum dolor sit amet. consectetuer

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.

text-decoration: none:
border-bottom: dashed 2

#9F:

, r.
,

padding.

249

101 101.
, . , .

9.1, 6, ~

~ 2
r .

8.

Fireworks
Photoshop, Brush (),
, . . ,
.

.
:

text-decoration: none:
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:
background-color: #333:
------------------------------------------------

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

adipiscing elit, sed diam nonummy nibh

; 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

adipiscing elit, sed diam nonummy nibh
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 . -

, Internet Explorer 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: lpx dashed #000:
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 ................. .
Heading for this page

Heading for this page

. 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:

Heading for this page

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

background-position:

background-position:

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

<style type="textlcss">

{
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-transform: uppercase:
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-transform: uppercase:
text-decoration: n:
border: lpx dashed #999:
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-transform: uppercase:
text-decoration: n:
border: lpx dashed #999:
order-ottom: n;

padding: 7 Spx 7 ;
display: lock:
background-color: #777:
background-image: url(images/nav.png);
background-repeat: no-repeat:
background-position: 2:
: ,
. .

. ,
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:
text-transform: uppercase:
border: lpx dashed #999999:
border-bottom: n:
padding: 7 Spx 7 :
display: k:
background-color: #777:
background-image: url(images/nav.png):
background-repeat: no-repeat:
background-position: 2:
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
Internet Explorer 6.

? .

, , 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:

background-position:

- , ,
,
(. . 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:
border: lpx solid #008575:

( <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 _ __

Lorem ipsum dolor sit amet,

consectetuer adipisdng elit, sed diam
nonummy nih euismod tinddunt ut
laoreet dolore magna aliquam erat
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
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim
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

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 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
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim
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-repeat: repeat-y;
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 6 .
, Internet Explorer 6
. ,

, ,

Internet Explorer.

overfl ow: hi dden

.
, ,

,
<< ~.
, ,
,
.

Internet Explorer 6

Internet Explorer SS- ,

, .

.

Internet Explorer

, .

354

12.

,
, .

, .

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

Internet Explorer 6 ,
. ,
, ,

. .

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">.

<!-- main content goes here

. L-
.

6.

start. html

story. txt,

<di v>,

. </ di v> ,

4.

L-, .

CSS.

361

1: r

, , ,
. ,

.
.

1.

</head> . <style type = "textlcss">,

Enter.

.
- ,

, .

, ,
. ~ .

2.

2.

#sidebar {
float: left:
width: l:
margin-top: lOpx:
,
160 , ,
.

wi dth -

, ,
.
,
.

3. Ente </ sty l >,

. .

,
. ,
, . 12.16.
, , .
,

.
.

4.

#main {
margin-left:

180:

160 ,

180
20 ,

362

12. n

12.16. .

n , , ,
( ). n n

,
.

, ,

r , .
, n
. - ,

n , .

1.

1:

363

secondary. txt.
start. html.

L-,

L- .

2.

</di v>
( <!--

Enter,

main content goes here

-->).

</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.
Internet Explorer 6 .
- 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:
,
(. .

Internet Explorer 6,

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

. ; , .
, , .

, Internet Explorer 6
-(. . 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;..

Absolutely positioned <div>

: 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

Absolutely positioned <div>

:

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%:
border-bottom: 1 dashed #999999:
}

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:
border-bottom: 1 dashed #999999:
}

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;
border-bottom: 1 dashed #999999:
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 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 .

Internet Explorer 6 .

.
, Internet Explorer 6

( ).
. , .

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

<div class="figure">
<img src="images/old home.jpg alt=he Original Cosmo Home Page
height="l86"/>
<p>The Original&nbsp;CosmoFarmer Home&nbsp;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:
background-color: #FFF:
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%:
font-weight: normal:
}
tal

border-collapse: collapse:
border-spacing: 0:
}
td. th. caption {
font-weight: normal:
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 5 6
. (.
~ .

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,

Internet Explorer 6 7

, . ,

,

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

<!--[if Internet Exp1orer]>

Some HTML code that on1y app1ies to IE goes here.
<! [endi f]- ->
<!-- [i f Internet

1 orer]>- .

- Internet Explorer,

~>. , ,
<!

[endif]->,

Internet Explorer.

, ,

Internet Explorer.

-------------------------------------------------
L-
.

Internet Explorer 8

Internet Explorer 8

CSS

, ,

~> .
, ,
. ,

Internet Explorer 6 .

-:

<!--[if 1te Internet Exp1orer ]>

<1ink href="IE_sty1es.css" re1="sty1esheet" type="text/css" />
<![endif]-->
,

@i mport:

<!--[if 1te IE ]>

<sty1e type="textlcss">
@import ur1(IE_sty1es.css)
</sty1e>
<! [endif]-->

1te ~. i f 1te I
Internet Explorer~.

(. . ~ .

2),

Internet Explorer ,
- , . -

, , .

, ,

Internet
Explorer ,

, .

 Iteret

459

Explorer

, , :

Internet Explorer 7;
Internet Explorer 6 .

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

<!--[if IE 7]>
<link href="IE_styles.css" rel="stylesheet" type="text/css" />
<! [endif]-->
<!--[if lte IE ]>
<link href="IE5_styles.css" rel="stylesheet" type="text/css" />
<! [endif]-->
-----------------------------------------------
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:
filter: alpha(opacity=75):
.

16.5

50%- ,
, .

, <>,

: hover:

img {
opacity: .5:
filter: alpha(opacity=50):

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

<!--[if IE]>
<style type="text/css">
.caption {
background-color: rgb(95.156.140);
</style>
<![endif]-->
101 RG-

Intemet Explorer. ,

opaci ty,

IE RG-~.
Internet Explorer fi l ter ,

, RG-.
,
, . , ,
, ,
:

<! --[if IE]>

<style type="text/css">
.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 ).
-

,
.

Internet Explorer 6 .
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

Internet Explorer 6 ,
. 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

2. CSS Dreamweaver CS4

) . 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. CSS Dreamweaver CS4

) (. . 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

2. CSS Dreamweaver CS4

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

2. CSS Dreamweaver CS4

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
- moz- ordtr-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

2. CSS Dreamweaver CS4

, ,
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 ().

2. CSS Dreamweaver CS4

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. CSS Dreamweaver CS4

. 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

2. CSS Dreamweaver CS4

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

min- max- 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