Открыть Электронные книги
Категории
Открыть Аудиокниги
Категории
Открыть Журналы
Категории
Открыть Документы
Категории
Second Edition
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.
9.
................. 243
10.
3.
1.
2. CSS
3.
................................. 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.
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
........................................ 323
.............................................
329
. . . . . . . . . . . . . . . . 332
. . . . . . . . . . . . . . . . . . . . . . . . . . . 342
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
RG-
............................................ 467
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
........................................... 472
...................................... 474
........................... 477
1.
2. CSS
3.
CSS ....................
482
510
CSS ............................
541
. .................................. 549
(David Sawyer McFarland)
Sawyer McFarland Media, Inc.,
- ,
.
1995 :
- -
. -
(Berkeley Multimedia
Research Center),
-
Macworld.com.
, , .
- ,
(Electronic Art),
.
Practical Web
CreativePro.com.
Dreamweaver: h Missing Manual ]avaScript:
Missing Manual.
missing@sawmac.com
( , ,
3).
(Nan Barer)
() 9
Missing Manual
(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),
(Patricia)
(Mike).
-. ,
, , ,
.
,
, .
, ? !
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
HTML (
<fot>, ), .
www.codehelp.co.uk/html/
depecated.html.
CSS).
HTML (,
( -) ,
17
L-
CSS,
, -
L-.
HTML,
, .
-----------------------------------------------
HTML ,
:
HTML Dog
wschools.com/html/). ,
: Creatig
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 (
-< >),
-.
</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://
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
"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 (
2-
, XHTML,
, -.
: , , ,
-
. , ,
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
- .
,
, ,
CSS.
Notepad++ (Windows, http://notepad-plus.sourceforge.net/).
. ,
,
HTML-
SS-, ,
HTML CSS.
L-it (Windows, www.chami.com/html-kit/). HTML/
XHTML -.
: -
(
), L- . .
22
' ),
FTP
( ) .
:
.
FTP,
-. ,
,
FTP-
SF-
SS-.
(,
CSS.
Dreamweaver: The Missing Manual, O'Reilly)
CSS.
-------------------------------------------------
, , L/L
55. -.
HTML/XHTML, ,
55, (55- .
3.
- . , ,
, .
, ,
,
. www.w3.org{R/CSS21/, ,
.
23
CSS. ,
, , , .
- CSS.
, .
HTML CSS.
-, ,
.
, ,
, .
-,
~ ~. ,
-,
. , n
, .
CSS
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 (). . nn n
Library (); , .
n Fonts (). n
~ .
, .
0.1.
Page S!turce
CtrliU
E<J!Sal!en
F11
. 0.1. n n
, View ~
~ ~
)- : n View ()
Text Size ( ), Inaease ()~.
, .
URL,
, , .
, :
27
Safari
)'ll w w
, .
,
.
-----------------------------------------------
, , . n n
.
no
---------------------------------------------------
, , .
,
.
----------------------------------------------------- . no ,
.
Safari
Salari
ONLINE
ENABLED
SafariEnaed
, ,
. , 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
......, .........
DolorSAmet
IIUDnt8SCIY
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.
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):
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.
, , . .,
<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).
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
(. .
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> .
...
\<!;' ,,,,:J'JI.,;
<h2>
t...ar,.t...,..-a.,
~eg.<UI'U.Ii!rmsl.umut~.
Creature Cmforts
! ~:~.,.,..~~d* Pra!!!e'111110o8n.~
<h>
f'10tft* AtoQoy
DIJWJ
~.ucltrull\lrll\-nulll~....,.,.~"'*"---~
===~=-':=-==::...~
11
8taNI.urnllpu!Ut. ~
111.
.... ~ ... ~.
<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 -
HTMl. , n
(W) -
n l-.
- W
l-- n
()
Firefox ,
W http://valictator.w.org/ (. . 1.4).
r n n
<
- n , n
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
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
19JA.
=~~20Ct~~~~S:~=~==~W:=v
YOUR lf1'tAAC.1'1Q.11r$ Wtl'1'l ntiS Sl7t ARl
OUR
tiAC.COIAIIOf ;,m
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
(. ).
XHTML
HTML XHTML,
<font>,
HTML
, , ,
(trasitional) .
-.
HTML XHTML
.
------------------------------------------------
HTML XHTML ,.
<font> .
-,
(,
).
doctype
-:
"-//WC//DTD
"http://Wv.w3.org/R/html4/loose.dtd">
DTD.
doctype
<html >.
XHTML.
<!D
, -
html PUBLIC
XML ,
"-1/WC//DTD
-----------------------------------------------
- ,
.
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.
43
Intemet Explorer 8
" IE;edge" , r
i} , . . r
-!
n ,
. Windows,
i 6
lternet
Explorer,
,
n
IE 7 .
, .
- n ( ) Windws-.
Windows
Safari n
Firefox 3 Google Chrome 1.
com/macoSX/features/ootcamp.html},
n r n
OS n
-
lntel.
-,
n Windows
OS ,
. IE 7 .
n Windows OS ,
n.
n,
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,
n n n
, Apple n Safai
, , n
, Windows-a
Windows-a.
, n, 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~-
~----~ ....
_.".,,_,_
______
~----
. ,. _ """
,..._ .... .......... ...................
=:=::::.::.::-::::;.--..... ,. , __. ...._ ..............".
__
..._..
..,.._.._.._
......
-.. ..........
'"'"- -~
...~
.........
...
'"....__ .........
2.1
CSS,
-. .
45
-----------------------------------------------
, ,
.
, , ,
, .
CSS,
() -, - , ,
: ,
,
150
. , : ~, ,
-~.
: -,
. , , . .
, , ,
() ,
.
-----------------------------------------------
W, - SS- .
.
, SS- , ,
, . . ,
-,
:
<>,
em ( em -
m,
Cicero, -
,
, . .
(.
6). , ,
2.2). , ,
, , ,
, .
2.2.
( )
46
2.
. , ,
- : , ,
. . 2.2 <>,
, <> ,
, . ,
CSS,
- (
).
. , ,
, .
( {)
(} ).
. -
, .
. CSS ,
.
, .
,
,
: , , ).
CSS.
------------------------------------------------
8 1
CSS.
. ,
, SS-:
, , , , , . .
, SS-
-
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-
r - , -,
<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.
n n L- -,
. -
n L W (.
, SS-, ,
lntemet
)} .
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:
HTML
</ l i nk>.
XHTML
(!).
HTML XHTML
type="text/css"-
, ;
href-
, SS-.
SS- .
- URL-apec, ,
SS-. , s
href ,
-.
(08~--------------------------------------------------- - , <link>,
. -
SS- -. . . 15.
CSS
@import url(css/global.css);
</style>
L- <l i nk> @import -
CSS,
HTML .
href
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
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>.
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>
m:">
. Reload (),
, L-.
. ,
<h 1> - .
L-.
6.
<hl>
, .
- (
i n1i ne. htm 1
02_finished).
CSS,
. , ,
55
1.
s i
. htm l,
<hl>
-.
type="text/css ">.
L- (,
, ):
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.
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.
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.
, , ~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-, (
<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>
13.
(
):
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
, -
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:
->>.
-----------------------------------------------
,
<
>,
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
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,
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\
1.'\) H:-t'tf\1.\t
,,t ('\o.'it'
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>.
, n n . n
(. . 3.2) n .
n , n
L- (n .
3.2),
<span>.
, , ,
:
, .
.
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
u(farnwrper susctpit
{o~niS r( ut a(Ujf .
aute \'el
[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:
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
,
-
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 ,
.
, n
L-,
n !-
). <di v>
. 1 11<
<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, ,
.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
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.
1or: #FlCD:
71
-------------------------------------------------
-
,
. , ( ) .
CSS
( . .
5).
CSS
* -. , ,
, :
. .
h.
*-
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>
</body>
</html>
L- (. 3.3).
- . <html>;
r ,
<head>
<body>.
, , , r . ,
, ,
-.
. 3.3. L 3 , n
73
' , CSS ~~
-. ,
, ,
. .
. , L-,
<body>-
. .
.
. .
<head> <body>.
<>
<strong>.
101 . ,
, . .
<body>,
<strong>
3.3
<hl>
<>
<body>,
<>.
101 . ,
, . .
3.3
CSS
<hl>
<head>
<body>-
<>.
~ >> .
HTML,
-, , . , -
<h 1>
<strong>.
, , -,
.
- :
<strong> -.
,
.
. 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
Montbly Columns
A~k >
~~
DIY Proiecls
3.4.
--n () <html>.
. , <>
IIOTOMKOM
: ~ (),
(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
,
, . .
CSS
,Q_ - ,
: fi rst- l etter -
, , .
: fi rst- l i ne
-
( .
,
).
CSS
. ,
-
( ,
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
n lntemet
Explorer 6,
R -.
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,
. , ,
, .
: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 ,
:
: fi rst -chi 1d ,
<1 i>,
1i :first -chi 1d
-: .
-. . 3.4 : first-chi 1d
: <> -
<body>.
>) L-
, -,
,
: f i rst-chi 1d. ,
Internet Explorer 6 ~ - ~
, .
80
: focus -
3.
(
() -).
. -
, ,
.
: focus
. , ,
,
,
( ,
<texta rea> - : focus ).
- ,
:
: 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-
<h2> r, r,
, .
div
>
h2.
Heading 1
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
3.5.
() 3 L- ()
J n
n r r
? , 3
t. IICijle'laeYOI nwr
-.
t r n
r, n n i1 areropRX
6-, r
neporo 1111 n n,
82
. :
- r. , !<
.ma1nL 1st
, , .
ery <ul>
(ul
n -
n R
, ,
.ma1nL 1st.
sas-seif,
<1 i>,
<u 1>
-, , .
<l1> . n,
<l 1> ,
n : u1 .ma1nL1st >
11 > u1 > 1i (
n -
r).
Times n .
HTML.
, ,
. , ,
u./. .
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,
. ,
-. , ,
-
<i nput>. -
. ,
,
, -,
:
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,
.
, ,
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.
L-r. (. 3.6).
86
3.
-, .
SS- ~ - i
.
.
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?
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-
<>.
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.
,
(.
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:
la.or1osam,
1. 3.7. n n
, n -
"
, .
, . ,
<> - , ?
1.
- .
L-
selector_basics . html .
90
2.
3.
{.
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).
..----.................................. _.......,
N:: mtn~ma veroam, QIJIS nostnrn exercttabonem utlam corpons sUSCiplt laboriosam. IISI
. 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-
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
-, , .
<body id="article">
94
3.
: n
<bo,dy> , # rt i 1.
CSS,
.
<body> , .
body
, .
ID,
- -
6.
ID.
.
-
.
(!),
.
,
background-image
( ).
( ,
,
HTML).
1.
L-
# 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 ,
"'
.,
~ .
........ ....,
ft ......
,,
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
114em""'
dOIOromeutni\Jglatquo~,... par.a.r?
. .____ _...,:
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
~ 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.
Ci''
1.-k-1111
"
'~!} d1
I\.~1nt111 arfC'I1'SI!Lrt n~tlilt1.JWM l"t.\f\'\.!Jtllpril '~ ~1t rn!J'It 111) trllnli--'1 t''fiiUtn. ,.. noru
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
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
Ji.Qtt
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
4 .1. n3
, - ,
. , <st rong>, <em>
, ,
. n
, .
98
4.
,
. (. . :
~ .
3)
- ,
. ,
.
3.
, .
, - .
,
<body> (
). , -
:
-. , ,
,
.
<d i v> (.
. : ~
3) , , ,
<di v>,
SS-
, -
. ,
<>,
<hl>
<di v>.
, ,
. ., .
--------------------------------------------------
8 3
<div>
CSS.
. SS-
,
border ( -).
, ,
, . , <body>,
( ,
. .) (.
4.2).
-----------------------------------------------
SS-, , . .,
1.
99
. 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
3.
<sty l >
{. u Enter
}. <>, r
-.
4.
1or:
#FF6600.
color : #FF6600 :
.
. . .
5. ~ , .
r (. 4.3).
.-n
adipisci v.a
8Dtemveleum&e ~
ut lautan""' ..,." i
4.3. , , ,
<>,
102
4.
, <> .
<> . , ,
<em> <strong>
, ,
.
, , .
:
<em>, <> <strong> <>.
, , ,
em
strong, .
-
.
SS- . ,
-.
1.
L-
<>.
2.
Enter .pageStyle
Enter }.
{.
3.
<body>.
.pageStyle {
font-family: "Helvetica Neue". Arial. Helvetica. sans-serif:
font-size: 18:
color: #BD8100:
width: 900:
margin: auto:
4.
, .
(
).
<body> (
, , .
5.
103
. - .
. 4.4, -
, ,
. , , <body>,-
-
.
oplsclveJn
. 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-
<>.
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).
: -
50 !
, , ,
. : , *,
.
*-
, .
: <>
~(*, ,
).
105
adlplscJ VtiJ\
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
n SS- n n 1.
~~ ---------------------------------------------- -, ,
n
04_finished
r .
,
: -
? -
CSS,
, .
. , <body>
,
, .
- (, <> ).
, -
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- :
{ color :
#F:}
24 :
~ ('\ ()
GEJ ~~ ~ +)
@) tlle:/1/Users/dave/Do<uments/OO_we (Q,.
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.
Lorem
ipsum dolor sat. ,
Lorem ipsum
dolor sat.
Lorem ipsum
5.1. n
108
<strong>
5.
n :
, , ,
<body>. <strong> -,
24
. ,
<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.
5.1.
n, n
( <td>), - , ,
~ <td>,
-.
r
n
, ,
~ CSS. ,
. , <body>,
<> <strong>. <> <body>,
<strong> , .
<st rong>, ,
(. .
5.2). , , ,
.
, .
, ,
, -
. ,
<>. , .
~------------------------------------------------
, <>
tn, .
9.
110
5.
: r
, .
: -
~ <>. ,
<>. .
, <>
. ?
, ,
. :
. ,
.
.
,
-----------------------------------------------
, , .
.
(. . ~ ~ .
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"
/>. (
.
-----------------------------------------------
(,
: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-.
<:
-, -
:; :
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
) Preferences (). n
. n n
(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"':
</dlv>
~.
5.4.
n ,
r
n , .
, global.css,
.
SS- :
<hl>, . . ,
, () <hl> ,
. ,
,
. ,
g l l . css, ;
(<hl>, <> . .) .
,
, . ,
global.css :
hl {
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- -:
------------------------------------------------------
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-
-~
dolor-
ande""""' ;".
emlp..."Dolo<Soc
18 pcrspicios uode ocis & ...,. t:nor Ut v..._.., ocCU<IOiium doloRoaque
'
t::~ rem ~~~ qwte ilo iu\c:otore YefUris d ~ archit10
""""""""
od......,,........_
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
m. aisiuteiquid.
'lnea'~'""esS<<!"'""noiiDOiestiooc~. ,-diincpclolorcmcumfi>a>3t
SOkor
Sedut~uock""""'lsrnao
r ~ ~em
ac:CUSIDI:U.a
,_,..,.
_ _dolacmque
_ .".
laudooa
__
~sc<P.....a.nt. N-poro
ips1D quia dolor
....
_..,'*'""'..,..
... od...."........, qgi>-tiqwm
cxac:ioioncm- corporis
liooncom.
Ur
susciJ>i1
<---'~
... quo.....,...-
reprccaclc:rtqui;. ~velit
cssc
voloplai- poriotw?
' Ut!;qoid
5.5.
n n
HTML
120
2.
5.
n r :
ma i n . cs s 05 ~
, cascade. html.
: ,
.
, .
,
.
3.
- ID-
.
#main
#sidebar-
. 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>.
<body>.
121
()i :
Missing Manual
Sidcor
""*"*
.'
Uwt.t\tore~dqul
:bli<CIO.......;".,
dlct. , _ <>tplkao.
-.-~
>'OIII]>Utcn\ quiA wlupw
lit. uptn~~Wt aut odit .ut
rug;.....rq;.
~Nt~
>'01--
'
.. . ..
-
.. .
n::.
........
Nc:que pono
-ipoul'f"tlolor
iodduntut
- + - - . . . . . - ....... ~-
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).
, (
) , ,
, .
\"1)hJpt.t';tr1n quu
"t~tl): c~.ntw'
:~m
do.m~cr:u;;.dciot'~"~tox.~ d..-po.~~,t..1q~I\Citt.
\"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
....
tf'(W.
\'O!;.:tptatena~
d.~u.~~dan:.\J.O\o
t ~ aptfi.w\.
--qtbil!o
im~t~.c
1N.fJV ~ .otqui
. 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).
! , ,
, .
, ,
Sidebar
Xano """"ipwn
:(\\'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
~
~
~
_...,.
~~
NWCJCIIX .
~ illo~.-1804~~.dili1...,.,._~ddt81t.
--~ct-dokirll"'dqD801cstio~.aocc88CA~ -P~~
llaque oaIJII
~Ydli'.totodqN . .
w.~----dlc.-..-til
..........
~dalof~~WN8r-.,-.~~
... .-..~~Ya'iiid~~cat
v&.rdda,..CJk.O N-~\-~4U
~-__..
~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'
__
...,__..~.._
About Us
Vr:AO (QS : ~ IU$1'0 OIOIIS~IOS OUCUS OIII...ANCIC ArstW'I'1t>.
'fdllp~.._.v 4ut~O>ts
1 AQUE
EARU\1
.......
Ydlop~~'lllltlnt~l.wdtw. to~lola
lllodaf~Jf'iP'~f~fll;.il
,._~4P~II:..ta..,..w.~~t{'.c
~lft~, ...t"W"
.tfu-t.\OCI~COI'I'~tll<'""'tf\16t'n"".U
ftCIOII YC!Wptent .,.....S "...aiw>t..
-~~~-lt
~..........
.,.,.:11\111
Al>IPISCl\'tlJ.
SEO
"..,...,.".._~"'"'
"'o!C:~~h4rllf
\'CIIIr91~~ ~W'ItiO"'~"et.icli.W.,
lahrttltblCJO~'IU.J>tiii'IJ
totottl
._._~_.,..,...,~qa.II-uw~.tet
:t.
. 6.1. - (),
,
CSS ()
,
r ( ) (
128
-). ,
. , , ,
-
, .
.
(
). Times.
~----------------------------------------------------
'
- , Cufo
(http://wiki.github.com/sorccu/cufo/about). ,
JavaScript,
HTML.
Cufo ,
, .
, . ,
, ,
. ,
, . :
Arial.
Helvetica
sans-serif.
( sans-serif serif), .
, .
,
:
( ).
(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
. 6.2.
Macintosh ()
Windows
().
. - Arial, Helvetica, Verdana
11 Fomata:
::>
::>
::>
::>
::>
::>
,
. ,
- . ,
.
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
6.3. Windows
()
Macintosh
()
n
(, ) .
( n
,
).
6.4.
,
, .
, octrr,
131
mono~pace
.a.lll6t <11.
.;,.. - .J:.
-1 - " 1"'-
Arial Black;
Arial Narrow;
Impact.
n . ,
, font -wei ght font -sty1 norma 1.
, ,
, .
~ ------------------------------------------------------ , (
, 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,
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 . ,
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, ,
135
Smaller
( ~ )
( ~
).
CSS,
16 )
em, .
CSS ,
sma ll, medi um, l rge, - l rge - l rge.
SS- :
font-size: large:
medi um
, , , ,
,
. - sma ll
, ), - sma ll
. . ,
, .
,
, .
,
l arge, - l arge .
16 .
.
,
,
100 %.
16 .
, ,
-. ,
200%:
font-size: 200%:
, , ,
90 %.
i ,
. ,
100 %
, -.
32 .
. . , ,
100% 32 .
<hl>,
<di v>,
136
. 't
r <div>, 100%
-, 32 .
. . r6t-,
.....
-J
tr- 0 ~
.............,.___.____ -
~ -...
j Heading 2: 48 t
1
i
r
1
!
J.
i~
.i1
J....~ ~---------~----....-------..1
1!1 riJ
Heading 2: 1em
his
italcizd JXi
,;18,; ..........~....-...-....:li-...,._~~~..~-...-..;.;_-..~
Ofo
i Heading 2: 1000/
Textis 75%
"'1) 1r 1S"-
r,
t
t
L------~-------------- -------------------~- .1
Text is 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% :.
em.
, ,
s : n
2.Sem,
2.Sems.
em ,
. , , .
6.5.
. 75em, <>
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 .
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.
. ,
( 100-900) ,
(900) , 1> (100)) :.
( >>
, ,
139
,
.
,
. .
, :
font-weight: bold:
:
font-weight: normal:
:
-------------------------------------------------------
, ,
,
. :
<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
:
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
i:rtdiea~ edited
ntateritd
8tn~t
. 6.6.
text-decoration
.
:
,
,
. , , r
, . 1; nk
! (
, ).
141
-------------------------------------------------------
, !i , n
- - order (. .
7).
, order
: , , - -
, .
. - ,
,
.
: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
-1
No Letter Spacing
Positive Letter Spacing Spreads ext Out:
si t i v
t t
i n g:
10
-.sem.LoreipsudoloJ5iWnetponsectetueadipiscin!J!lit~
diannonumm)llill!uismod:incidun\t(aoreetiolonmagnailiquaralvolutpat.
. 6.7. r
CSS ,
, , . ,
, . .
(
) CSS
()- ,
, - 1i ne-hei ght.
, (. 6.8).
.
6.8,
120%. ,
, , ,
(. .
6.8, ).
143
auamde~t
!t. se
. 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
. ,
:
, , .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
, n
, . ,
150%.
n. n, n
:fnt ~
font: 1d
n 3.
<>,
n:
n n ,
n (
( ').
):
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
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
. i ntro:
148
. r
<:><\.~
:flrst-word, :flrst-llne
~load
LOQtlon
SUtd>
11
loortis
1!1
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
lli8
l!l
6.9. :first-letter n ~
: fi rst- 1i ne .
149
(:
fi rst-1 i ne).
: fi rst-1 ine,
. ,
.
L- : < 1 s s =
"i nt >
Safari text-trasform,
:first-line. , Safari CSS
<u 1> < 1> :
, , .
, , , ,
. ,
, ,
. .
( <u 1>),
\ , (< 1>)
CSS : (
), 1l (, ), (
). -
:
-,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
~'-
k an:h
Loatron
dlsc
item 1
item 2
ite
[!J
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:}
, .
( <1 i> ).
- . ,
<u1>,
.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
1.
. 6.11. n
list-style-position, n n
n
152
--------------------------------------------------
w
paddig-left: (. . . 7).
, <li>.
, list-style-positio outside (
).
, , ,
, ,
margi n- l eft
ul. ol {
padding-left: ;
margin-left: 0:
padding
margin
. ,
Explorer).
, .
,
margin-top
margin-bottom
. , .
, ,
<1 i >:
. ,
Photoshop Fireworks,
( Webdings).
---------------------------------------------------
. http://www.stylegala.com/
features/bulletmadness/ 200 .
www.cssjuice.com/38-free-icon-checkpoints,
.
153
SS-
src L- <img>.
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; }
,
,
....
, , , ,
CSS.
, ,
. , .
2.
1.
.
.
2.
text. html
L-.
3.
<head>
155
Possibilities
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....,-
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
, . ,
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.
.
.
#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 .
,
(
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:
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
. 6.1 . - n: ,
n
ero
, , ,
ero. CSS .
#main ul {
margi n: 50
width : 1 5 0 ;
float : r ight :
25 50:
: ( <ul >
160
. -, margi
.
, ma rgi
. .). : ,
, . ,
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
30
<strog>Rod Dible</strong></p>
161
<.,.. Q
;.~
-~
4
....
ID dcJ/JZ;,_"'o.ng/OO.mm.,2<102_t~""' Hl [~G
l"-!
ESSE QUAM
Rod
0\\
NULL
Ut en1m ad mtnima venlam quls noswm exercitationem
LOfem lpsum
Reprenendent quo '"
LOfem lps".m
;.
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 .
<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
<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 .
ROO OI8LE
t.etem lpSu'n
...___....."COfpoiiS--.csom, ......
6pfex<e.-c~a./is...",.,......"
RfP'~(J.tnea
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...,.
--~
---L.C~
Oic.onwnodi<OMeq<....-1
o..;,.._,yt~
a.-ner('CW~(~W\0.1---deeq.,a;;wn..,~
. .... llkmqudoiol<m....,"-QUO-"'*'"....u?UI..."
... .
~. ,..,."-....exe~CQ{rmOii~QasaJemwl01.81\u:e
. 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
.~
X!>lso~ IA}CookJoP
f}css
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.
:J:t'"'D;;.;.....................................................
.
-- ~ .
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- 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
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 padding
:
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, .).
~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
. -
. . ,
20
.1,
. .
, ,
. .1
<di v>, "1
10
, , . 10-
.1 <di v>. .1
. ,-
:J:
<div>.
----------~---------1
IITHTUI HYDROPONICS
<div>
.
& Do
<h 1 > _____....-
8if-iiiJ;Jj
IITHTUI HYDROPONICS
14
20 ,....l....\==""""""""""""""""""""""""""""""""""""'
1 1 )L----,--------,----,
20
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!~.
,
.
,
. .
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~
css-
Fonns-
<t"; IINoger
1 Go 1n
lltfannatlon
@) ~ ~ QJan
SEA
TUR
NAA
INLYOT
UR TUB
II::IE
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
'~~~~~~~~~~~::~~
"'"'ci
display: inline-iock;
ver1.ical-align: middle;
paddig: 20;
margin:
20;
-+-------------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
"""''O!ulpat
7 .6.
, n n
: ,
. 7.6 ,
.
, . , ,
. , ,
. ;
, di sp l :
8.). , ,
175
, , , .
, Internet Explorer 6 7,
, ,
<strong>, <em>
<span>.
6 7
-----------------------------------------------
n:
<img>,
-, .
, , ,
.
, .
, ,
, ? , ,
, , ,
, , ,
-.
, CSS , , -
di sp 1. :
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
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-right.
, border, ,
.
, :
border-bottom:
dashed red:
border .
, border-left, , ,
. , ,
, ,
-. SS
:
178
7.
, ,
,
. ,
SS- , ,
. , ,
border-1 eft.
SS- .
: ,
border: 2 so1id k:
border-bottom: 4 dashed #333:
border-bottom
border. border-bottom
, border
.
, SS- .
CSS, . 5.
none.
(, ,
). :
15 , ,
. ,
doub 1 #FFCC33:
border:
border-width: 2:
border-sty1e: doue:
border-co1or: #FFCC33:
, , ,
.
, . :
dashed
so 1i d.
179
,
,
border-width, border-style
border-color.
5 15 13:
(, , ).
2 ,
(, ). :
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 .
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
. ' .
'
'
' .. '
....
ia '~atc veolil
ri
Ifth~
IUIIOIIDt
of
tonfeatill
l'ixed lleight
is taU~r
tlaaa the
,
soe
w~ird
lhi.as
bappen.
....., ;.....,..- ...-'......... -~" .......a..w ....... ~.......,., _, """"" ~ ...... r..,'"".... ~ r..-.
.
--
J.lrt~ F"""41!:f.TOdit"'-
io
:1
bos, some
/:,
7 .9.
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
7. , n,
l;](Q}@
do'- .
"visiie"-aay content
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.
1>
<t
~I(QJ!Xl
-----~-------,
~~
__... . . ._______
!
1
1to "soll''-"a,-!
When heights
go bad
..,
GJLQJ~
~:~~0~--~
f to
"dden"-
f content outside
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 -.
, n
, n n
, .
12.
, n
n
lntemet
Explorer,
r n
* htm1
(n,
, n 11 . n
). n
n n
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
Aoou
LoatiO!\
)
ko~ir(h
[!J
J.ookln.ar'h
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
:=H=ec.a..:o
:.: d=
i n=--go,:2::-,--- -..,. 6...,...,.-.~;,
Lorcm .".... dolor s&
....... cooscctetuer
Heading2
LO<aD.ipoOID dolor ..
lg$ $tZf . . -
8IDtf. coosecteN~er
oad
dolor.-.
Oorc
Sldear
Jlcadlinc
cisploced .. s for 11
c:i
7.12,
CSS .
--~
-..
..
dolore- *"""'
c-..tiOOD"""""""'ctapis
cisploced ..dlc for 11
1 wict oad
cisplly d!cir~ oad
IOgS...,
orcle(as.,... ..
css-.>
"'
J:Oooe
. :
189
n n
-----------------------------------------------
. .
.
,
,
, r
n
,
. -
,
.
, - ,
. , , ,
, . ,
,
.
, . ,
, .
<!~ (.
7.13, ).
CSS clear.
overflow: hidden
overflow: h1dden
-.
n :
(. . 7.13).
ltemet
. - lternet
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,
t.'Ommodo cort~equat.
t)js IJUtt'\ \o\"l tUI
1riure doJor io
edrent 10
ensequar.
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
...
~-~----c~"-u -~~---L..--:..
7 .13.
, (),
clear (),
clear
n . n ,
-, n n .
, (
) .
191
: , ,
l r :
l eft -
, ;
right-
, ;
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
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
""""'*""'
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.
*/ :
html {
background-color: #FDFBAB:
- .
-,
background-color
<body>.
3. .
body {
background-color: #FFF:
border: solid #85All0:
<body>
<html>
, .
.
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>
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
".
'
fti :'
'
7.1S. auto
n n ,
. 44
. eJ\ry Georgia
, .
.
---------------------------------------------------- n
n. , ,
CSS , .
2. hl,
( ):
hl {
196
7.
, ,
, ,
. ,
, (
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
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
........,,
_,,
,,_
....
,_"_,,
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 6, , , .
,
<h2>
overflow,
, Internet Explorer 6
()
- . ,
.
-------------------------------------------------
n
, n n n
, n Iternet Explorer .
201
: , ,
per_..
.. odlt .. ~Soe'dqllia
_..----...........
_ ...-... .
'
..,.-.....
~mcwtil~
~~-~C8qllt'ipsaqat:
. i_ _<..,;
NoiMe'
....._
,_.....,._
N_....".._ ..
~N--
......-.odll
...... sed ...
....
...............
.
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
, :
background-image-
.
,
http://www.csszengarden.com. L-
-, .
8.1,
.
, -
,
( , L- -,
,
<i mg> ).
, , ,
-. ,
,
.
HTML
, .
205
. 8.1. csszengarden.com
, , n CSS
L- -
~-----------------------------------------------
.n n SS-
. n -
, .
206
-r
8.
. , JPEG n
, n n
n.
, - n.
GIF- JG-,
, PNG
. PNG
n .
GIF. GIF, nr 25
, ,
PNG
, GIF.
no n
PNG ,
, GIF.
n : ,
, n . . GIF- n
) 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
50%, -
, n. ,
JPEG n
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
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
, .
:
TnURL
()(!J
CSS n
, 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, ,
( ):
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
:
- :
-.
:
body {
background-image: urlCbg_page.jpg):
background-repeat: no-repeat:
background-position: center center:
-,
:
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 :
,
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: }
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~
)1
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.
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.
, . ,
:
218
8.
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
: gPattems (http://gpattems.com),
- n -.
.
, , r
,
.
1:
219
, ,
. , .
2.
08.
, .
(.
8.10). ,
- n .
U..Citl~a.
........
"'t*~
: -:s~-~=~~- .. -~~....
=--
-~
-~
Maintenance
-._
_ __
~u.....s
.-....
.....
ipsvm
do1or sit_
ame.t. (OQiolfl('ki;Utr
~
olit,S<dd>am
_ .,......,
-..-
tiodckwd\4~~ lnli!I~CI1
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
....
......
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
ipsumdo1otJttamt.t.,conN!t'tl;tut:rlld.ipapsUJ.
8.1 . -: () n () SS-
8.10 -
liTML. . ,
( . . 8.1 , ). CSS
(. . 8.1 , )
ero
3.
i mg .figure
220
figure.
8.
. 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.
<img src=" .. 1
images/grass.jpg" alt="Apartment Grass" width="200" height="200"
class="figure" />
,
.
7.
figure.
- . , ,
.
8.1 ,
-, ,
, -
, .
.
1:
221
, . . ,
,
, .
<d i v>, -
- , ,
-.
1.
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.
-.
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.
.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.
.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.
,
-
.
- :
, .
: ,
,
, .
,
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:
.
- ,
.
8.11
).
08_finished\caption_ex
224
~ ....
00
---Foqllotor
iJ
\\o--irnk3\-\DoamenbiD~writiogiDO.
8.
't 1! LiveS>td>
tlp
............................................................................................................................
---'"---
.:=:::::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.
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>
, . ,
#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 .
.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.
. 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), - ,
-
, , .
.
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.
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
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--.
f!IIOPII~~QA---sc~octta.~Si!fCIUI
~IN!IJI!dotlrOCIO&OoJQCfi::)nt~~~NoQwpono
ANNOUNCIJ.8N1'S
t
UWti'I\~OdOf$1(
=~-==
----QI8~'WI8.1t.
.............
..
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
----
...
-.
8.14.
- () ()
.1:1 .
3:
233
- -
.
, , -
, .
,
background- repeat,
, .
,
.
-----------------------------------------------
, ,
2,
ackground:
3.
#FFF
url(images/g_page.png)
repeat-x;
.
- -
. , .
, .
4.
<di v>,
#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.
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~.
....,,.. ..... _,
border (. . ~ . 7) -
-, CSS
. , ,
, .
border -
3:
235
<h2>
, .
1.
#main h2 {
background-image: url(images/underline.png)
background-repeat: no-repeat;
background-image
main;
no-repeat
<h2>,
, .
, ,
, .
!
2.
<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>. .
.
-----------------------------------------------
-n n.
2.
#announcement l i
background-image: url(images/flower_bullet.png):
background-repeat: no-repeat:
. ,
, .
- ,
(.
8.16, ).
.
ANNOUNCEENS
ANNOUNCENS
._",
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-
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
Qull _ _.....,.-n
EU 1110(!118d lrdllunt
. modllllmpot8 Jnddunt
Qull-..... ..."""
11111. . . . .
'~~"
......
modl
N8notnh . . . ~
.nonnfp8n~
.........
Qull_wl.,m.
<div id="announcement">
<h2>
<ul class="last">
.8.17. , ,
, ,
1.
239
3: n
#announcement
) :
#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
. :r:
reprehenderit
::
8.18.
( ),
, . 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.
class;"last":
<div id="announcement">
<h2>Announcements</h2>
<ul class="last">
? . 8.17, (
) ;
, .
, #announcement
ul,
241
, .
, ,
#announcement . 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.
1 #announcement
. :
#announcement
background: url(images/scroll_middle.jpg) repeat-y center top:
margin-top: 115:
zoom: 1;
,
IE, ,
, , .
CSS,
, , ,
( -)!
, ,
.
242
8.
-r
( , ,
#announcement,
).
" ,
.
(,
#announcement)
#announcement
(,
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
.
,
10.
-. :
a:link { color:
#F;
, .
-, :
a:visited,
- .
: hover
).
eJavaScript,
CSS (. . ~
1> ). ,
n :
a:hover { color:
#F;
~---------------------------------------------------
CSS
:hover.
, , ,
. , ,
, ,
. .
!> -,
.
, ,
. :
245
: l ink, : visited:
:hover.
, ,
:
act i ve.
LoVejHAte
( ~/).
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>
:
246
9.
, <>,
:
externa l .
------------------------------------------------
8 n
SS-. n
, .
-, ,
. , ,
.
,
.
:
<di v>
<di v i d="mai nNav">.
#mainNav
#mainNav
#mainNav
#mainNav
,
- - (
.
~ .
15).
-------------------------------------------------------
( n ).
, , ,
, , . !
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 ~
... ~~ *
- .......
......- -
- ...........
..... ..
" "
---------- -
..... .........
-.. . ....
,_,,
9.1.
- --................ ----
Underline on Hover
: Bottom Border
-- - r
~--
No Under1ine Highlight
;
:
'
:
... 111
(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 "
250
9.
- (. .
}, :
9.2,
a.button {
border: solid lpx #000:
:
a.button {
border: solid lpx #000:
background-color: #333:
------------------------------------------------
, :
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>.
. 9.3 (
1
).
""""""'"""
...... -
...
euismod . . .
!; magna
atiq-uam erat voitPai - - - -
.. -~... ~.. ~- ............ .......... ~... -~-...--- "- - --- ~- - ---- - ---J
. . . .... .
j lmage in Button
. . ..
_ _ _
:
;
.................................................................. ................. .
!. lmage + Background
i
~
! :
l
......
-~--
+~'>
0- 0 H J
9.3.
.., ..
- -- -
-- .. -
- .-
,_,-.,._,._.,_.1
.........
!'' " '"'"""""'"""- '"""" "'"""''"''"""'""' " ""'" " '""'" " "'"- """"""'""'""""'. . .
! i Vlslted Links
Extemal Llnk
~ ,_-k,."---
!
!
: (5)- ,
(6) ,
background- image , ,
. .
8.
.
101
no-repeat.
. ,
, (. . 9.3, 2).
, ,
:: - :
background-
repeat: no-repeat: .
-,
9. n
252
background-position.
, backgroundposition (. . ~ . 8).
,
, SS
:
em.
. :
,
,
:
----------------------------------------------------
n n n
( n n) ; -
( n ) .
,
. ,
,
1;1. ,
.
,
.
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
" "
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. .
, .
ul .nav {
list -style-type :
n:
padding-left : :
llarginl eft: 0:
, ,
- (
: ).
. ,
;
, .
255
- ,
. ,
( ), ,
, ,
1.
. <>
, ,
. (
,
(.
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;
, ,
, .
: { 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
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 ( )
258
inl ine
9.
display
(. .
<l i>
9.6, 2).
. , ,
.
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> . <>
. <>
<u l >,
( .
9.6, 3).
<ul>,
n ,
<u l >
<u l >
(
<ul> ).
em
259
n r
11
tiO.I
~
cgrnorate pbt!osoobv
~--
11
!
; .! Aout us !- j <:otJ>ate Pho1osophy ~ ~ Sto\_j ................. .
Heading for this page
<ul>, JI
2,
ul .nav {
margin-left: ;
list-style: none ;
padding- left : ;
padding-top:
padding-ottom: 5;
<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.
, , - , 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.
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:
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.
-, .
, ,
<di v>
. news Item,
, ( ,
-
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.
#777
. , ,
, , - (. .
a:hover { background-position:
-39:
9.9, ).
-,
, , .
-------------------------------------------------------
CSS
, , . ,
-.
- -: d
top; }.
ackground:
-. -
, -
.
, -
(. .
12).
CSS
<div>,
, .
~-,
39
l_~
~
QUI;
background-position:
background-position:
-39;
:~
,_____ j
---1
~~
~~
.
9.9.
CSS Sprites,
- ,
-
267
-----------------------------------------------
.
Yahoo!,
Amazo
)
, .
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, .
, ,
- .
- , - ,
(.
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 > , :
, ,
, ,
<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.
<>, :
,
.
, <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: 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:, ,
, -.
PDF-
ZI- (, , -
. )
. , ,
n ,
PDF, ( ),
. ,
,
100 !
. ,
-
. ,
<
href="annual_report.pdf">,
ZI-- <
URL
href="tutorials.zip">.
- . ,
PDF,
a[href$=' .pdf']
$= ~ >, , ,
. pdf.
href
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
n:.
, -
. , -
273
1:
30 ROO DBBLE
,...,..llilaflaoem,
opide111
nlai ul81quid . . -
Copylght20~18
.
9.11.
6~
, ,
.
9.11 , -
.
- .
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
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.
, .
caa0co8mofanner.com
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.
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:
, ,
. ,
.
.
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).
html.
RESOURCES
AnnU81 Report
J9
:=~~:;~
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 .
<ul id;"mainNav">
i d ,
, (
-).
3.
#inainNav {
margin : 0:
padding : 0:
list-style: none:
body :
280
9.
carct
4.
9.15,2.
#mainNav {
co1or: #000:
font-size: llpx;
text-transform: uppercase:
text-decoration: n:
:
, ,
(. .
5.
9.15, 3).
7 5:
-
(. .
9.15, 4): ,
. , <>
. ,
(
. .
7).
6.
di sp1 :
1 ock;
#mainNav.
<> ,
,
, .
. ,
<u 1>
-----------------------------------------------
- Intemet Explorer
, w n . . 1
.
7.
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.
, ,
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
QUI2
. .. . . . . . ..
9. n n
,
. . .. . . . . - . .. '
..
n-
2.
Internet Explorer 6, .
, lnternet Explorer 8, Firefox,
Opera Safari.
09_finished\
. n , w ,
n Microsoft. n
. n
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
n :
border -1 eft:
n: .
, .
<u1> - ,
(
. 9.18, 2). -
5.
<u1>.
#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
l;J(Q)l8J
COSMOFARMEPf~
Your online guide to spsrtment fsrming
Yow feedock
ornet.
lhls onth's Survey
omei.
LoremiP'U"'
Lorem ip.s:um dolor site
ome!.
Oolor.siteomet
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
S247JIO
Mcchanical
Idoor
Mowcr
<td>
taJes.
San1pso
Dcluxc
Apanment
Mower
$370.00
Mechaical
i
.
10.
1:
Cosfarmer.com 's
10.2. Price ,
--
<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>
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 , :
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.
justified
1 0.3. CSS
\.., on each. 6ne blaoo 111m e.en large \\'eeds into tioy
cuttiogs, perfect for compostiog or slad garnishes.
1 000
<td>
<th>,
.
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
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
$247.00
Mechaoical
top
baseline
middle
bottom
: ,
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
).
. ,
, , . ,
, ,
(. .
10.5, ).
( ) -
, (.
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
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.
....d
Chinook
Push-o-malic
Indoor :\1o"er
\.. J Price
$247.00
Power
Soarce
Mecaoical
Brad
Chinook
Push-o-malic
Indoor ~O\\'er
Price
Power
Soarce
$2-.
Mcchanical
J,
M.iai-Re>iew
M.ii-Re>iew
.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"> ,
10.6
298
10.
1 ).
. ,
,
,
, ,
:
. odd . pri .
-----------------------------------------------
, CSS
3,
. ,
,
JavaScript
www.creativepro.com/
article/view-source-javascript-desigers.
HTML
ID
(. L-
. << ~ ).
:
width
(background-
. .). .
,
co1or, background-image
HTML
, ,
< 1>.,
200
. , ,
,
. < 1group>,
< 1group
i d= "dates >.
ID
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
. .
! ,..._,..,.,..._
........._.._
.....
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
Safari
3 Apple, , .
-.
, - ,
. ,
,
, .
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
.
. Te<input
, ,
, .
. , <input
/> ),
- .
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
Opera
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
Fl'tiNI
Fnlmt
~~~,------------------~
Yrtle-
s~"~~:~-.
~ f\ toundit~
Str1addt~1
O.vant:ltlon
("
nor.p&
foul\dlc\01'1
t0fisu!1"'9 flrm
'
othtr
&tttlacsdl...
Slt!t
....
. - - - - - - - - - - - - - - - - - - -- :
Upo-pottltoelt"
~1
s-..]
Fu
v.... p._.
...
< ) - ~
1 1 -----'
,s.-J
. 10.1.' n , n ,
n (). n n
()
,
. (, . .)
,
, .
10.8 (
CSS,
HTML). .
1. .
<label>, .
.
?~ , <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
Pliceless
S29.9S
S75.99
S82.00
Adlplsclna Vitae
S1.95
S17.9S
Vel>et1s
Non AdlplscJna
****
****
*****
1 0 .9. n 30 ,
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 > ,
-
. .
4.
#inventory captiQn {
text-align: right:
font-size: l.em:
padding-top: 25:
).
<caption>,
i nventory ( <t >
<capt i on> .
,
.
, ( )
.
----------------------------------------------
_ ,
J'I
<caption>.
margin
: n <taie>,
Firefox
, r
. nonrraeec
<caption>, Firefox , IE
Safari .
<caption>.
,
m
1:
307
, .
. ,
.
5.
( <td> ),
( <th>)
. ,
,
(. 10.10, .). -
. . .
- -
$19.95
ln Tempus VeLtt
$14.55
qnceLess
29.95
S75.99
:::~~-
___-: _-_-:_-_
.:-_-
---~.:-_-_
:::. :-_ -_
r
-
$82.00
, ; . -__
--
$1.95
$17.95
$44.00
$19.95
ln Tempus VeLtt
$14.55
Prlceless
$29.95
S75.99
$82.00
l-~~~-~~~-~-~~t~
$1.95
$17.95
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:
, ,
.
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
omet.
Whot is your name?
Your~ock
omet.
omel.
omet.
!. . . .______.
Lormlpsum
omet.
( SubscrJe)
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
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 ", :
5.
for="refer">, <label
for="coidlents">.
skills.
<labe1>,
,11
, . .
<span> ,
6.
labe1.
<span
class="lael">Rate
<span>,
2:
313
1SelectOne
~1
1 Suscrie
addrs?
'-------.....J
~~
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:
,
.
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.
) -,
,
. , ,
13.
CSS .
,
:
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~~-~............................. .
omer.
Wllat ls 11 name?
&~ feedock
omer.
hlaonlh'sSUrvey
omel.
lndoorlow: sod or seed7
torem 1psum do!ots~e
orner.
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 )
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':.,:~
......... ......... .. _........ --
.".
- . . ..
...... , ;. ..
!.,
~ ~
.:: .. -'!..
,.,."
~-..
'- ---
.... ........,.-_
.....
' ' ..
.. .
.~-
.. ~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
, ,
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>:
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
, ,
. ,
.
, , ,
,
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>
, .
. ,
,
.
326
..
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="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>
(),
. , ,
<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>:
<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
11
'::;:..::;:;:ttw
Ookws.ile<J~nt:t
I..C ..~fl" r-
.... d
...
;;J'
--'~
tc""'~ P~,~
rw..od ....ldurol
\.ore-1'1"' . """dofc +
.,.,_~
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
Explorer S (http://iog.html.lt/layoutgala/).
n, r ,
- n , r
w SS- .
<div> SS-, . ,
. , - n
8 n
334
12.
, n
(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> .
,
.
- ,
- 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- . ,
,
, ,
.
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
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
New Riders).
,
.
1. <div>, i.
,
.
2.
<div>.
<di v>,
. , 960 - ,
, 1024 768
.
. , '
. -
, - (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).
<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
, (
.
).
, ,
, .
. ,
. ,
CSS,
, -
, ,
() .
. - ,
,
3.
-----------------------------------------------
, Iteret
Explorer ,
. ,
(. . Iteret
Explorer
).
, , <<!>
(. .
12.1).
343
n n
, ,
. ,
, -
, .
, ,
,
,
(.
12.7, ) .
c1ear ( . .
. . 7). ,
. -.
.
( 1ear :
1eft : ). 1 r: ri ght;
. ,
, , :
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
____..
-..
......._,.
. 11.7. , n
. , n
clear
,
r ,
<div>.
, ,
. ,
~ . - . 12.8 <div>,
<hl> , .
, ,
<di v>, . ,
344
12.
, ,
.
. 12.8, .
<div>,
. , ,
. , , ,
,
~ .
) Contdng Flo~ts
/.\ozilla f ~refox
;~-;:, ,-
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
HTML.
-. ,
<div>,
<div> ,
. . 12.9, , <div>,
, .
- - ,
, , -
. , .
, , l r
, .
, .
overflow:hidden.
-:
overflow: hidden;
zoom: 1:
CSS.
1)
. ( zoom:
Internet Explorer 6 ( )
. ,
,
.
IE
zoom: 1
7).
. ,
,
. ,
, , , ,
-. ,
- .
346
12.
r . ,
Aslett),
CssCreator.com,
PositionlsEverything.com,
<di v>,
. ,
~ ~ , SS-
.
:
. :
.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
G]!i
-~
--
Bathtub Hydr~onics _
! .i. . _s_______
& Watch the Water Level
h Latest Addition
1 .:
.
12 .9 .
. () n n
CSS, n . ()
. , .
IUi , r
, ,
.
12.10, .
348
12.
(! t
commodo
u:em IJ)5tml
c0f1Wno60
&
conqwc.
Ouis .Ntem ~~
e\.m ...."...
LOI'etn lp5Vm
t.
concten.w ~
d
tuasod ~t ut ~et dolofe ~
dolor t _,.!,
cUm nonunwnv
~ ~t
'*'
cNnt f'IOI'UWnY
J~tqU&m
lf.at
vtNtp~t.
x.en:.
kOotor,..., ut ~
sttud
t.t~ ~f' .U.Ciplt
t1t 8)' commodo c~~t ~ aut.tm "" tu1n
n"re.
L.oft!m
dlm
more .,fm.taon r.
cNmnonummy
&
LI ap:;un dokw
~ r\Ih
e.,.mnn.
dolote ~
tth
.12.10. () ,
3 . n
(), ,
349
, ,
CSS,
. , ,
, L- <di v>,
:
<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>
,
, ,
#main ,
di v . :
<di v> ,
, . ,
,
,
di v (. 12.11, ).
( 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, .).
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.
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------------------------------------------------
l_______
Sldebar
content here
~~
lnto ptoce.
Sidebar
content here
1
__________________________j
Stdebar
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
. -, ,
, .
, << ~ .
Internet Explorer 6 .
, Internet Explorer 6
. ,
, ,
Internet Explorer.
.
, ,
,
<< ~.
, ,
,
.
Internet Explorer 6
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
#sidebar {
tloat: left;
margin-left: 10;
width: 160;
}
non.1mmv n1bh
t:-
IAIHII B \
20
&
: ." "'(f a!~r. ~r , .~ n
o~f'"" '"' c>i
tt,lt\.ut
J.l!
"r'l()<'\ltOt)r9 t h ;;' t ~ k<:::
f:'l iH ~ IJI :;. (\.'U :~S. t ~ r
: .~ ~ : ~ { : . ~':...... .
,, ..,
. 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
n
Internet Explorer
.
.
D1 .
,
.
, , ,
(.
12.14 ).
, , ,
~ ( ).
.
- ,
(.
12.15,
). , ,
(. .
12.15, ).
357
Intemet Explorer
n n
n n
.
12.14. ,
n.
r (
Internet Explorer 6
):
- :
.
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.
12.1 S.
lorem
~ 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
CSS.
SS-, lnternet
Explorer 8, Firefox Safari, lnternet
Explorer 6 . , nn IE 6
, n
r ,
, 1 n3)1.
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).
lntemet Explorer 7 ( n r)
n- ,
. 8 n n
, .
lnternet Explorer iQ 2 . 9 ,
lntemet Explorer
n n , r n n
. 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-:
, 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">.
. 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 -
, ,
.
,
.
,
. ,
, . 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,
-->).
</di v>,
. L
, ,
L- .
3.
<div id
</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
. .
, ,
.
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
~u~
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:
LO<IIPI<ml
11.17. n , ,
n1 . n
, ( ).
-------------------------------------------------
8 #secondary, n , .
~&'JI n , n n
. i1, n h n
h4
, n n. n
,
cet1i .
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.
<div>:
<div id="wrapper">
>.> ,
. , .
2.
</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.
. 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:
wi dth
760 . di v,
auto. ,
. , ,
, .
,
~. .
.
, ,
. .
370
5.
12. n
<body>:
,body {
margin : 0:
padding : 0:
background:
#66
, ~~ .
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.
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.
dlatn nonvmmy
adl~sdng t,
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
&
(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
#mai n {
fl oat : left;
width: 419 ;
marginleft:
l:
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 , . ,
.
&
t:'""'
..,.....,.._-
:.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 :
-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
&
Ruber Duckies
Neednt 1
noh
no"""""y
Ht, sed
euosmod tinctdunt ut ioO<eot dola<e magno
quis
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 .
.
,
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.
. ,
!) . 4< !)
.
8).
,
.
L-,
. ,
.
378
13.
-----------------------------------------------
Intmt
Explorer
flxed) .
n n
HTML (. . 13.1, ).
? ,
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
nAsokhlyposltlod
<41V>
, 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
_____________________
-.
868
')
Rtlai!Ye Posltlonlng
S<m/1
(!)
..-.,.,
#3 Relative
379
, . - ,
.
HTML
( ).
, ,
- .
, , ~
, .
position: absolute:
-
, , ,
abso l ute, re l at i ve
fi xed,
. ,
, .
- ,
.
, ,
, , .
SS-:
ri ght.
. ,
. , ,
1 em 20 em .
PMEAHE-----------------------------------------------
Internet Explorer
ottom
, n
right
(. ).
em,
CSS : ,
. .
l eft: -lOpx:,
( ).
,
~ . ~ .
, , (,
),
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,
(.
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
_ __iti
100
Left:
Rftht: 1
"
.1
c:I' Dont
. 1.
) '
,..
'
<
,_
r.,..
.-.
o liJ
.....
,.;j a ~
..i,h;.[f]h._;:/!csoJO<II/c!t-291>-.h;..
Left:
100
Rfght: 1
--
. 13.3. , Firefox
(epxy). lnternet Explorer 6, , right
, ,
. 200 ,
ero
383
200 ,
. , ,
,
, 4: .
, ,
(. 4: ~
overflow . ~ .
, . SS-
7,
overfl ow).
.
. ,
(, <di v>,
100 ),
L-
<di v>
, , .
-------------------------------------------------
n, n, n n
HTML
. .
3.
13.4 -
5 em .
<di v>, .
.
bottom
J} , .
right
(. .
<div>
13.4, ).
, ,
,
, .
:
,
,
, ;
,
,
.
384
13.
-r
top: 5em
left: 5em
Nf~ttd
Asolutely
<dlv>
posttioned <div>
Left: Sem
mttiti'iii1111
Sem
right: 5em
Left: Sem
bottom:
13.4.
()
()
n
, r:
n,
. , n <hl> ,
.
,
. n, n
>) .
<hl> , ,
, ( - .
13.5).
385
.Jo- . .
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.
-~ lam11 IYIIIfllll!!_
,
,..
i4
lnlormltfon
htr~ .
eltt. sr.d
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
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:
13.5, ).
- <hl>
<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
II n 6-< ,
' r n n
, n n
11 n, I\.
r.
13.6,
n -
( ) .
(z-index).
,
,
~ . .
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
z-index: 3
z-index: 1
L............................- ........................,.................................................."
r..
z-index: 1
....................
z-index: 3
z-index: 200
z-index: 1000
L..,_,,......".......................................................c....................... ..........:
.
13.6. -
, -
, - ,
. ,
, ~ n. , ,
- n .
L-
. 'F <di v>
r
, , 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.
). , ,
,
. ,
. .
.
, .
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....
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)-
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
CosmoFarmer
13.
Celerates
6 Years
1~.8.
n n n n ,
n n (7),
(2) n
(3)
border-bottom,
. :
<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- .
(
)
</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,
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>
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.
...... 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
&
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 .
. ,
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.
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(,
*
*
----------------------------------------------
r
Explorer
* html, , Intemet
(. . n
7).
(. .
Intemet Explorer
#footer
Intemet Explorer
15).
,
.
,
,
( ,
1,
L-
L- ,
Internet Explorer 6
,
. :,
Internet Explorer 6,
, ,
. ,
-,
Internet Exploer 6
Internet Explorer 7 8, Firefox, Safari Opera -
:
,
,
. , L
<di v> iD ,
HTML .
CSS.
, ,
sawmac.com/css2e/. , . 2.
www.
404
13.
-t
-, ,
. , L-r
ID
, n ( ).
1.
index. html
- (.
13.
13.13)
Fie
Edt
\'lew
F"""""'"
Tools
..
13.13. L-, .
2.
i ndex. htm 1 .
<style>.
<style> .
. CosmoFarmer 2.0
. , SS-
, , , ,
.
405
3. :
#banner #badge {
position: absolute:
l eft: -18:
top: -18:
}
<di v>
ID, banner, ID
badge. 18
18 .
, , ,
.
.
4. , :
#banner {
position: relative:
SS- ,
( #banner),
, ( ,
t:
3).
, SS
. #banner
, L-.
#banner
#badge ,
SS-
. .
15).
#banner .
, l at i ve ,
.
,
18 .
3.
,
, .
5.
<body>.
, :
body {
margin:
20:
(.
13.14).
CosmoFarmer .
.
, .
406
13.
r -r
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,
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.
-,....rt1, . ,.,..,
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
, L-,
<di v>, - SS- .
3.
"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 CosmoFarmer Home Page</p>
</div>
;
.
4.
<div>:
#main . figure {
float: right;
width: 200;
margin-bottom: 2;
margin-left: lOpx;
(
. 8). ,
, .
. ,
. , <i mg>
( ),
.
fi gure
<di v>,
5.
<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:
~~argin:
0:
. r
, r
, ( ,
8. :
#main. . figure img
display:
lock :
. rr
, . 13.16.
1.
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> ,
.
(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
'et,
consecttttr
I.(HP.m
'"~1
r.fnfQr
~ ;Jmf'1
( ()M ~ct~IIJPf
1. 13.18. n ( )
J , n L, n
n
,
.
. -, border
(> ;
.
, .
, .
n . :
Intemet Explorer 6, ,
415
185 l
, _
. , .
(. .
~ ~ . ~
width: lOO.t:
(. 13.19)
, .
. ,
.
CosmoFarmer 2.0
Your oDl!ne guJ.de to apa.rtment ra.rm.g
Trdtnofoar
lrpltshatugb
~
nt'
tinddu:nt vt.
Comafmtr
Iums
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
Comoost
Do
Lotem
JUtn
coecmttr
traQ IA\tl
Lartm \ps\Nt'l dotor srt ~mt(,
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~~
...,.,
~ -.
'*"...,........,..
w.,..,...,.--..
...............
WIII. . . cr.-cl.~
,...._IIWJ~retc:tl\8t'U,....
II\Qa,1.t..., . . .
-i:IWr'"*t...0ifllho'._.,~81!'19"'r'~~Liuc~~--I
~t~d\111191.
f8C&,.t/'Illtty tincW~
h W~adom
or Comrnunlty
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 .,..
.-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~~.
-() ()
, ,
, -
.
419
CSS
,
.
, . ,
,
, 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- -:
, n
Internet Explorer
n.
, ,
, ,
. . , ,
. ,
, :
------------------------------------------------------ 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
, ,
.
- , , ,
. ,
SS-,
. , ,
,
, .
, ,
,
(.
14.2).
422
14. CSS
n -r
------------------------------------------------------ n n, , n
Print Preview (
n) .
Windows
. ... ....
i#@iii!ijQI'~
__
__............._,__
-----..-..
___
-----. . ______
------- ---------... --.--..-"""
....__ _
.-...""-=;::;.=......----.. .. ____ _
------.....,_
..- ...............
------.-------'---__________
... ___
_
__
________
___.__
~--=~-==-=-=.:---.:::....~~
.... _._.._...,..,_.,...
\\\d . . W....~
::::-.:::.:...._...-~----.....,_ """
_
.... ....,.,.,......_W~Ct._~dlt.Wd~
........
: ..:::~-.:::=..~===.:.::-Ooh
,_",.,..IIII'I~~~---."..~-.......
... _._ltel,..,.\41'1011111.... ~'*0
...
t..ttoo'lue-.Pt11~1o11or11$NI\&
--~...---
. . . . . t.t~
-...--
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 _ _ .. _ _ _
:.::::::.-....
- ................
-.._._...
-...
_ .. ____..,.__._.\~>
_____
_
ut\Ofl~lldalltiOtW!Jofilr.t-...oou~
~--..-..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
, ,
(
- ,
, ,
.
, <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 ,
, :
. ,
,
, .
-. ,
, .
,
, ,
.
, ,
, . ,
,
- .
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, ,
:
(, n
) , :
#logo { display:
3.
n:
n CSS, n n
. n http://we-graphics.com/mtarchive/001703.php.
n n
n, n
3 . ,
, .
.
, 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
:
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_after . break_before:
: n
429
::Artlclnof8al!\tubydroponla
__
_...-. -.. .-............-._.....
__----.---...---or------ftt--.
.----. -..
.
---14-
-______ .. ___
--------...-------__..__,_... _____
---_...
__
__ ..........___.._______.. __
__ ..__
__
____
h
..... ,
.,.
......__._..............
_..__,....
..,._,..,... _.,
..,
... ~
--
o'~------.. .-........ _ _~
-"~" --w-..-
...
_.....,
:~~
__ __
..... ............_
....,_".
,._......,.......,._..".,.,
............... ~-.,.,..,.--.. _....,_....,..
---aot--~
......"""....__
~-
] "
~: ~~~
---
-I'
..,.............,..
_..._
..,.
__ ....
:::::..=:--~-::::-~.,.---
___..,,
-----.-..:,.._,IA
..
___
______ _
.......,.
..,..
.."
..,.
......._.._
_~
-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
#banner
avwrapper
#mainWrapper
#main
1#footerNav 1
#sidebar
1#footerMain
#footer
11
#footerWrapper
.
14.4. n .
w, n. , n
2.
14 .
,
,
.
3.
di sp l , ,
' :
n :
431
di sp1 , none,
, .
-,
.
4.
14.
- mai n. css.
. ,
<1 i nk> medi ,
. , ,
main.css, .
5.
mai n. css
L- .
,
<1 i nk> <1 i nk>. ,
ma i n. css , . copyri ght,
10- , ,
. copyri ght, -
12 . ,
,
(. . :
.
).
6.
, .
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.
,
, :
- wi dth: auto -
. ,
900 ,
main.css
<di v>
auto
, .
- margi n paddi ng -
div.
footerMain,
<di v>
. ,
.
2.
#footerMain {
margin: 0:
,
fl oat, ,
3.
#main {
fl oat:
n:
433
.
,
-,
. :
hi dden:
overflow:
-.
, .
.
4.
#mainWrapper. #footer
overflow: visile:
,
di v
.
,
. ,
. .
, ,
. ,
.
,
.
. ,
~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;
434
14. CSS
<di v>.
, .
text- 1i gn ,
,
. , ,
.
print.htm1
Print Preview ( ), ,
.
, ,
. ,
. , :
.
1.
print.css
SS-:
* {
- SS- . ,
.
* (
(. ~ .
~ .
3), !important
-
, . , *
, 1or
,
2.
hl {
font-size:
!important:
}
h2 {
!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/), , ,
, .
.
, IE 8, Firefox Safari.
after).
436
2.
14. CSS -
print.css. cosmo.html
.
, .
14.5, -
, .
_..o\Jt Us
~'> 1 ofl
eDesign
List
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/)
Discuslon
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 -
dotore
ullm laotis
fi!t>!Z.~02 wri
\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 -
. , ,
. , ,
#header
#footer
( ,
),
.
, ! ,
#header.
#brandi ng
. , :
440
15.
CSS
.
,
. ,
. ,
, 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
441
r;
COSMOFARMEFf~
Your online guide to epertrnent ferming
Bathtub Hydroponlcs
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
, . ,
,
. 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).
/>
, - ,
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, ~
JJ. 811 , r,
r n
r -
<, ,
r mai n. css.
, ma1n.css,
e<llnk.> :
SS.
n -
<1 i
nk>
<ii :
ma; n. 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 ( ).
Windows
Fi refox\res\html .css.
\Program Fi l es\Moz) ll
447
r ri1
-
r :
, n 11
HTMl, CSS, , ,
. .
r ,
(Chris Pederick),
r !fr ,
(www.mozilla.com/flrefoX).
n (
HTML-, CSS, n
). Dlsplay Id & Class
Details ( ID ) -
3rr G1J, r !f
, .
,
, .
. , ,
.
r , re,
.
- r < :
?-
.
chrispederlck.com/worl</wedeveloperf),
Informatlon ()
. n
. - (hJ://
CSS),
Tools (}
-
HTML CSS,
-.
r -
Microsoft n n lnternet
Explorer. www.mk:rosolt
. n --
log
~ Work
9ent Switcher
....~ oonate
(iiJ Pl\otos
IE Developer Toolbarnonenoca.
Videos
tP Forun\s
unux.
.13-!~Q-:_!>_QgJ_~-~IO'bliO!!
&
.!?. ~ .~-~
! 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>
.
iI .
-, , ,
.
.
. -
<q>(<q>
err is human</q>
(<q>
. ,
:
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
~
{i;
~ ~~ fi~:/1/Us/dave/D
... , Q
"
f&::J
'(
(<1\t:o> tag)
15.6).
C:JI\
~-~(-:-!!l..~_f_!9}.- ---------------
11
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
\vho wi\1 be<ome the nationol aedlen.. ehampion in 2 "'- ( <> t.ag)
._
.._._
----
Other notnt op>ming t\'tnts indudt: (and e.o othr <> tllg)
!t;;;;l
.
<li>p
Novcm~r ut
--
--
---
Done
:r:.
15.6. L- n.
n n L-r
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>,
<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-:
-------------------------------------------------------
, ,
(, , ).
,
.
, , ,
.
15.7.
News,
, .
,
, .
1.
m. ,
<body>,
<body id = "home">.
, :
<body
i d = "news ">.
2.
.
. ~
~ .
3.
9.
"homel ink">Home</a>.
id
( ,
class id).
"newsl i nk ">News</ > . .
<href = "/news/" id =
454
15. CSS
6 0
@@@
( ( flle:///UsersfdavetDocuments/02_wrillng/OO_css_mm_2e/des1goQ
About Us
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
, . ,
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
, . ,
,
CSS.
, ,
Internet Explorer 6 7.
, .
, ,
, . ,
.,
,
Internet Explorer.
--------------------------
Internet Explorer
-, www.positioiseverything.net/explorer.
html www.positioniseverything.net/ie-primer. html.
457
Intemet 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
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-
Internet Explorer 6
( IE_styles .css)
, . ,
,
Internet Explorer 6 r
. .
, ,
. ,
.
.
458
15.
CSS
1 orer]>- .
- Internet Explorer,
~>. , ,
<!
[endif]->,
Internet Explorer.
, ,
Internet Explorer.
-------------------------------------------------
L-
.
Internet Explorer 8
Internet Explorer 8
CSS
, ,
~> .
, ,
. ,
Internet Explorer 6 .
-:
@i mport:
1te ~. i f 1te I
Internet Explorer~.
(. . ~ .
2),
Internet Explorer ,
- , . -
, , .
, ,
Internet
Explorer ,
, .
Iteret
459
Explorer
, , :
Internet Explorer 7;
Internet Explorer 6 .
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
. ).
css 3
461
~-~-
,<;~~~~3 ft'!'!~.' - .
SdefiQrt 1CYfl
'~:Z:2:
~-~ --- -
~.~Pf!'?Z
:&m:
'P.Wd.Mlmi)
,:.dw....--;:;;,
~-:-~- , ~:,!)'~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
, , ,
.
,
, .
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
-).
, ,
-----------------------------------------------
,
CSS 3 ,
(CSS Selectors Test Suite) www.css3.info/se-
SS-
lectors-test.
JavaScript-popaa
( - ,
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
i ,
di v announcement, :
#FF :
<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
(.
, , ,
. 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 ,
: 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.
( 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.
-----------------------------------------------
n
CSS 3
www.w3.org/R/css3-selectors.
36
SS-,
W- w.
. ,
onltr-radius. JmO ?
-nz-,
Safari, -ms- -
Opera. , W n
Microsoft, r ,
n 11, n
t , n. , n
n n. n, w
OtiM &, nw . n-
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.
, -. -
469
RG-
, .. ( i ty ), .
1 , :
1 ~ ,
, ,
.
, , ,
, (.
16.6).
.caption {
background-color: rgba(95.156. 140 .. 75):
, RG- Firefox 2,
Opera 9 Intemet Explorer. ,
r, .
: -,
. , , ,
. , .
16.6 ,
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-,
. ,
, ,
RG-.
Opera 9 IE 8, IE 6 IE 7
.
,
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-.
,
, . , ,
, ,
:
471
RG-
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#BF5F9C8C.endColorstr=#F5F9C8C):
zoom: 1:
</style>
<! [endif]- ->
, :
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- n
(, , \11) .
no
text-shadow
473
), (
), . , n
text-shadow:
text-shadow , . 16.7:
-4 4
#999999 ;
- 4 n
4 n
, .
4 .
n .
. ( )
, .
, n .
,
, .
16.7.
,
:
text- shadow:
-4 4
#000:
, ;:tr . ,
Firefox 3.5, Safari,
.
. , .
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
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
text- shadow,
n n
(. n
www.css..info/preview/order-image
). n,
http://ejohn.org/iog/order-image-ln-flrefux.
6,
font-fami ly
. SS-. , ,
1 ,
,
, .
, -
-~ ,
(. .
6).
@font-face CSS 3 1
. , -
Open
( . otf)
True
( . t t f),
@font-face,
. , ,
.
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:
s rc URL-apeca
True (. ttf), Open (. otf). ,
URL (, ),
SS-. ,
, ,
.
.
,
. ,
<hl>
Lavoi si er:
hl {
serif.
@font-face,
n n ,
n :
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 {
Generated Content
~iam~o laoris nisi sed do eiusmod tempor
, <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
,
- .
, .
, .
, , ,
, -
. n
-,
mu l t i - l umn 1ayout
. Firefox Safari n
bcd-
di splay:
""
"d" :
.
n www.css.
info/previewjmulti-column-layout
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
CSS . l or,
, , ,
. l or: #FFF: .
,
: , ,
URL.
, ,
CSS .
n
, ,- , white
black ( ). 17
483
CSS
RGB
, ,
. RG- .
,
RGB,
CSS RGB .
SS-.
-. ,
. -
16) . #FF0033
RG-, (FF,
),
(00)
(33).
255
CSS,
, .
#,
----------------------------------------------------n , h-,
. ,
RGB.
#361
#336611.
, :
,
, .
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
,
.
.
-------------------------------------------------
: , 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,
485
CSS
, , ,
, .
, ,
- i nheri t.
i nheri t
. ,
border, . , <em>
<strong> <>, ,
i nheri t:
em. strong {
border: inher1t:
, <em> <strong>
).
<em>
<strong>
border <>
-------------------------------------------------
, , iheit
. , .
URL-apeca
URL . ,
background-image URL- -
,
(. . ~ ~ . 8).
CSS URLa: url (images/ti le.gif). ,
, t i l . 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-family.
. .
, ; ,
.
101: , .
, :
~:
font-family
, .
- ,
,
(. . .
6).
: , .
, ,
.
, ,
:
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
. - ,
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.
, .
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
line-height
(
1t 1lm).
~ .
120% (. . ~
6).
: CSS (. ~
>> . << css~ ),
em,
.
:
line-height: 200%:.
text-align
,
- .
just i fy
).
:
text-decoration ( JJ)
, .
, ,
. , ,
. l i
nk,
( ink).
489
iUI:
. , ,
. ,
(
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
,
.
:
aBCDefg -,
HTML, none
- aBCDefg.
Il: text-transform: uppercase:.
HTML.
vertical-align
()
. ,
.
, _
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.
,
( , ,
).
- pre- l i ne pre-wrap
.
:
word-spacing
,
, .
:
CSS, em
; .
, ,
, ( ).
(word-spacing),
normal
.
:
( <u l >)
(< l > ).
list-style
.
, .
, , (,
. .), . ,
, , ,
.
491
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
, ,
CSS
( ,
border:
green,
so l i d #f33:.
h-,
#33fc44).
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,
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
( ). , ,
, , ,
( )
. -
, .
Opera
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
).
20 % 20 %
. ,
.
, ,
paddi ng:
20:
padding-top
,
.
20:.
paddi ng,
495
padding-right
,
paddi ng,
20:.
padding-ottom
,
paddi ng,
padding-bottom:
20:.
padding-left
,
paddi ng,
20: .
margin
(. .
7.1 ).
:
.
-----------------------------------------------
r . , <
, ,
(. . n .
7).
: CSS,
em. . ,
<body>,
, , 10%
1 % .
, . ,
, ,
margin:
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).
: , ,
. ( ,
), :
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).
: ,
m;
background-repeat
, , , .
, .
, - .
- . R~peat-x
- .
Repeat- ,
, .
Il:
-
.
bottom
,
bottom
- ,
.
, .
(. -
499
.
.
13).
3aeiDUI: CSS, , em
. .
------------------------------------------------
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).
--------------------------------------------------~
,
, .
display
,
(. ~
>> . ~ ~ .
7).
, .
, ( )
- , , , ( ).
: k,
di spl
17 ,
. l ock,
i nl i ne
n, ,
. l ock ,
, (, );
i nl i ne
, (
,
);
<strong> ,
none .
, JvSrit
: hover
(. . ~ >> .
3).
- (
di sp l :
ock;.
float
,
,
. ,
fl oat
. ,
, ,
( ) (
), . ~~
; -
, - , . 12.
:
, ,
~~ ,
, ~~ .
:
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
.
.
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
. .
:
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,
overflow
7).
visile
Internet Explorer 6 ,
. hidden
; scroll
, ,
,
. auto , ,
.
:
position
,
.
3iI:
. ,
abso l ute
.
.
, ,
.
fi xed
, , ,
-----------------------------------------------
relative, absolute
fixed
13.
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 ,
, .
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
.
,
,
, , .
: ,
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
-----------------------------------------------
, ,
collapse
r order-collapse.
: SS- .
( ), -
(, ,
) 7
:
border-spacing:
lOpx:.
caption-side
, ,
. ,
<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
: .
:
1.
CSS
-----------------------------------------------
( )
.
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-,
( ). ,
, , , , -
, , -
-------------------------------------------------
URL .
www.quirksmode.org/c:ss/cursor.html.
orphans
,
. ,
,
,
~>>, ,
, ,
Opera
).
i: ,
1, 2, 3 5.
orphans: 3:.
page-break-after
,
. ,
, .
509
auto-
, ~
; l ways , ,
, ,
avoi d ;
, , , ,
.
l eft
ri ght ,
- ,
. ,
.
:
left
right ,
always.
page-break-after: always:.
page-break-before
,
.
. ,
,
- .
: ,
:
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
,
,
. ,
.
,
SS- , ,
,
Dreamweaver, .
CSS, ,
Dreamweaver.
-----------------------------------------------
n
Dreamweaver
CSS
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 (),
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 ( ). ,
:
- Compound () -
, , ~
.
512
2. CSS
Dreamweaver CS4
, - (, ,
),
Dreamweaver Compound ()
. ,
, <di v>,
main,
Dreamweaver
#main
ID (
) , .
(,
(,
#banner).
, .
Tag (), L-,
,
Tag
() (
).
--------------------------
n,
HTML, n
Tag (). n,
ul.
Name
(),
,
.
, ,
(Selector Name)
Dreamweaver , HTML
. , . 2.2 New
CSS Rule
CSS)
copyri ght. ,
HTML, l ass copyri ght
( , , copyright).
, ,
,
, .
Rule Definition ( ).
CSS) , CSS,
. This document only (
), .
, New Style Sheet File (
). SS-
( - ),
, .
.ii ,
, ,
Dreamweaver
513
n n
N-CSSRul~
canc:e
1
1
Selector :
--- ........_
...
al . elements
<
1 t~ Speofic
+--
J :;~ Speok
'
Rule Oefinition:
1(l1is doo.ment )
C1is dorument onM
'
:
1
-n
-------------------------------------------------------
, n n,
n , n
fl, .
Dreamweaver
. , .
, ,
CSS ).
---------------------------------------------------- , , ,
n, n .
, site_styles.css main.css (
- Dreamweaver ).
514
2. CSS
Dreamweaver CS4
Define in
( ), CSS
2.
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
un.-h~ght: J15o
~~
Font-welght: Jotd
ffi
jffi (,..."---.,.
'.~IH
font-varlant:
J no_r_rm.l-.--;1 ~
Color: J!jj.tOOF
Qetiln
lln-through
Q ink
O non
. 2.3.
Dreamweaver
, .
CSS)
Dreamweaver
CSS Styles (
CSS).
, , , , , ,
, ; .
-
, .
, L-r , - ,
, ,
515
: -
. ,
Dreamweaver .
-, ,
.
- ,
SS-, ,
. Dreamweaver,
, . , -,
Style ().
.. ...
---~ - ------------
-:'"~- ,...-~
Ae,UU.: sitejtyles.css
1 erowse...
Add as: @) Lr
~>t
k:
You!y*entzt a ~atedhtofmedatypes.
. Z.4. w n Media () ,
, n . print ()
screen (), n ,
Attach
,
:.
Add
, ,
516
. , tv () tty (
), -.
. <~: -
~ r.
14.
all () Media () ,
, ,
( ) . .
Dreamweaver CS4
,
(. 2.5).
Style Rendering
) Dreamweaver (. . 2.5 , ),
View ~ Toolars ~ Style Rendering ( ~ ~
). , ,
, ~:~
.
screen
() (. . 2.5, )
()
(. . 2.5, )- ,
SS-,
None ()
(. . 2.5, ).
_J : ... c;..,
Aout
IA----S..do___
_,a.glltnl
ca..m~~lil:lcnnlfutd'f'lld..tn-*"-
. 2.5. n
Style Rendering ( }
Dreamweaver
517
---------------------------------------------------- ,
Preview
()
).
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
icss
Cucade
d
~Rule
~wCSSR~>
<>.
. 2.6.
Property inspector (n ) - n
n WI
-----------------------------------------------
n , 04.
, n Courier 1r
, n-.
,
Text ~ CSS Styles (~ CSS),
Apply ()
. ,
, . 2.7.
, ,
Set Class ( ). ,
. , .
. 2. 7 ,
(
<ul>).
. products,
519
1m1
Sd Class
SdiD
ccmpyNom~
!~ Novigotor...
dnt
prcduct
prcducts
Collopst Full 9
Co11aps~ Outside
Full ag
. 2.7. ,
n
-, ,
, . -
N ()
move Class
Class
()
( ) n
, , l/1 . n
, Dreamweave
class.
n , n <s>,
Dreamweaver .
L-.
,
<h2>.
( <h2>) ,
, <h2> .
<h2> ( CSS
(. .
: n .
5)).
, ,
ID ()
L-
Property inspector (
520
) (. . 2.6, ) .
ID ,
, ,
.
Property inspector ( )
, . 2.7.
Set ID ( ) ,
.
---------------------------------------------------- ,
ID
ID
#,
ID
catalog.
,
L- . ,
ID , Dreamweaver
ID #copyri ght,
.
- ,
, , , -
.
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),
Dreamweaver
, , ,
.
CSS Styles (
CSS) CSS Rule Definition ( CSS).
CSS Styles
). , Preferences
() ( Ctri+U),
).
CSS Styles (
CSS)
CSS
Edit (),
Rule Definition ( CSS).
, , .
522
Style Rendering
{ ) (. . 2.5)
, n
-, .
).
CSS n -.
{+),
n
Dreamweaver. ,
L-,
n -. I
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
( 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
.clorAII
lconuJner
lneader
fi09o
f!egolmg
ltlotlage
. 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
524
SS-
, CSS
Rule Definition (
CSS) (. 2.9, );
CSS
(. . 2.9, ).
( . 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
ra.l
11
d
a:hovtr
A:hovtr
.dt~rAJI
.clt.arll
" lodcOraund
l>ackground
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>, (
, Acld Property
( )
Properties ()
.
. Dreamweaver , ,- -
, : ,
; ,
repeat,
Repeat-y
i!J
background-
. 2.8; Browse ()
, , , ,
background-
image.
, , -
CSS,
Properties
. ,
() ,
CSS.
, ,
Properties ()
. -, -
. -, ,
, , ,
Properties () , .
, .
Dreamweaver , .
()
Delete
, ,
(. . 2.8).
, ,
. , ,
.
Dreamweaver
. ,
, ,
.
- , ,
. , L- <code> ,
. ,
.
, , CSS Styles (
All
CSS)
() (. . 2.9).
, ,
Delete
).
, (
CSS Styles
CSS))
Delete
<style>
526
, ,
SS-.
,
.
.company,
, , Dreamweavet
<span> , .
, ,
<span cl ass="company">CosmoFarmer</ span>, ,
. ,
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) .
(~~~ .~ )
Cancel
Help
2.
,
. n ,
, .
3.
New name ( ).
,
. (< : - .
3.
- Dreamweaver
4.
, ,
,
Dreamweaver .
Dreamweaver
Dreamweaver
5.
, 'nl (),
. ,
Yes
(),
( ),
Replace All
( ). ,
, .
-----------------------------------------------
No () nn, 4, Dreamweaver,
, n , .
528
6.
Yes ().
Dreamweave
, ,
.
Deamweave
CSS, ,
, , HTML-era, ,
.
.
.
, ,
Duplicate ().
Duplicate CSS Rule ( CSS) (. 2. 1 1 ),
,
, Deftne in ( ),
, . .
1]-,]
Sdedor :
Choose 11 contextu/11 s*ctor t)-pe fur
1 [.
css nk.
<X . ..
Selector N ml!:
~ ot 1!11~ 11 n[\
.~INooc~
1
1
.........................,
Mol'e- Soe~fi.:
i
!
IW~ O..linition:
Choo~ ~
!' [. . . . , .\
. 2.11 . Duplicate CSS
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
, .
, ,
.
( <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{
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).
, , .
. .
532
), .
, - SS-
, .
. .. . -
GOtoCod~
Nf!W.
t:drt
Dupf1UI~~
RenameCI<Iss.
Eci<t Sdt<tor
Cut
Ctrt+X
COfYY
Ctrt+C
s\(
Ctrl
Oefett
Dtl
Site
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
(. 2.15).
Current (),
- , , -
.
CSS, .
,
. ;
, .
Summary for Selection ( ).
,
, ( ,
534
2. CSS
Dreamweaver CS4
, <hl>
)?
. , ,
, . .
. 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, (
) -.
( ) ,
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
."
--,.----...-
All
l()(a ~homa. Vtn!Ana, AIW, ffwua,...
1000000 ,
ltft
14
lD
SpxOOO
llntlltglll
CSS,
---
SS-
css S'I'YUS
All
,_
."'-
<odv>
lco<Ufntr
<dN>
.tmafnWraPI)er
<div>
.twoColflxRtdr .. <div>
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
..
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-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.
n -
- .'
, , ,
CSS
Styles ( CSS). , i
CSS, , -
.
538
2. CSS
Dreamweaver CS4
--------------------------------------------------- , nn
, n . n,
d n ,
. n
n n
All
()); ,
(Code Navigator)
''
mrsJmT~!!!J 'i ~
, @coc~ei8
Sptlt
_ill tmco<~o
11tlt: Cl\lo li
~tnukrJs
8t.
Sc>r/Collo!ibltP~ntl .us
CliiO.
~nukrozontal.as
+ Sfgn up
..... .........
~
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
<
'
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 ()
, , .
n ~
Code Navigator ( ) .
(, , . .),
View ~ Code Navigator (~ )
Ctri+Ait+N ( Windows) c-Option+N ().
S/11'/enula
SprjCollapslbleP&nel.css
S/11'/tnuSa rl
quam ut tacus. ,
Lorem
. 2.18. , ,
Code
Code Navigator ( )
(. . 2. 1 7)
Navigator ( ) ,
CSS, . . 2 . 18, ,
540
2. CSS
Dreamweaver CS4
<$
Tips for
- gl l . 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.
CSS 3 ( ) (www.w.org/Style/CSS/current-work).
,
CSS 3. -
, , , ,
, , .
ID DF-
. ,
.
r -
542
3.
CSS
CSS 2 3.
CSS
( )
.
,
CSS
.
-------------------------------------------------
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
, .
CSS
-.
SS-
, .
-- . ,
,
.
.
Listutorial (http://css.maxdesign.eom.au/listutoriall).
, .
(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
? -
,
.
544
no CSS
SS-.
Listamatic (http://css.maxdesign.com.au/listamaticl).
CSS
. .
Listamatic2 (http://css.maxdesign.eom.au/listamatic21).
SS,
, . .
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-.
: .
(www.mezzoue.com/tests/revised-image-replacement/).
L-
.
CSS
CSS
, . , ,
. , , -
CSS .
Interactive CSS
Model (www.redmelon.net/tstme/ox_model!)
CSS
545
,
.
.'
, SS-.
:J
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, ,
546
3.
CSS
Variale
CSS.
,
.
CSS - -, Internet
Explorer 6 Windows- ...
CSS ? , :
,
, (
).
. ,
Internet
Explorer 5, .
Explorer Exposed! (www.positioniseverything.net/explorer.html).
Internet Explorer , .
CSS ,
CSS,
, SS
.
SS
~ ,
...
~u 110
547
CSS
-,
.1
CSS .
2004
Shov.-case (http://css-discuss.incutio.com/?page=ShowCase).
SS-.
CSS
..1, ,
CSS!
\\'
, ,
, L-
..1..1 , , ,
.
. ,
.1 .
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-
,- ( ) -
. .
~ .
.
SS-.
CSS.
CSSEdit (www.macrabblt.com/cssedit/).
css
15
3 541
DD-
HTML 15
23
547
542
40
510
525
50
541
544
doctype,
40
Firefox
overflow, 183
View Formatted Source, 113
152
447
42
41
SS-
515
Internet Explorer
* html, 185
520
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
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
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
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
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
334
545
498
318
339
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
()
~_<>
46
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
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
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
( )
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
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.
005-93, 2; 95 3005 -
>>.
180004, ,
. PoIUI,
244.
29.
34.
n3DAT~ncnfi
DOM
~>;:nnTEP
WWW.PITER.COM
11
n n103 , ,
,
POCCSI
-
.j: (812)
. , . ., . 29
; , ., .
2/1,
1, 6-
., .
. , .
. , . 13; .:
office@ov.piter.com
(8312) 41-27-31
e-mail:
. , .
. , . 33;
. , .
1:?;1 , .
: (812) 703-73-73. E-mail: fugaov@piter.com
1:?;1
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