HTML CSS!

Vertir.s

?U L ,:' , - , , , , HTML CSS

.- - r t / r

H

T

M

L

C

S

S

- - 2005

681.3.068+800.92HTML 32.973.26-018.1 52 . . HTML CSS . .: -, 2005. 448 : . ISBN 5-94157-360- HTML CSS -. . , . , , , . , , . , , . , , -. , . , , . . -

52

681.3.068+800.92HTML 32.973.26-018.1 : . . .

02429 24.07.00. 22.04.05. 7001/). . . . . 36,12. 5000 . 1001 "-", 194354, -, . , 5. - Ns 77.99.02.953..006421.11.04 11.11.2004 . . " "" 199034, -, 9 , 12

ISBN 5-94157-360-

, - , 2005

. ., 2005

, 1.

910 11 13 13 15 15 16 17 17 18 18 19 20 20 20 21 23 25 27 29 29 30 33 34 35 36 36 37 38 40 41 42

..... ( ) 43 44 46 47 49 52 53

. -

2. GIF JPEG , PNG-8 PNG-24 align IMG - Internet Explorer - 3.

5555 57 57 58 59 59 59 61 64 65 65 67 72 72 72 73 74 75 78 78 80 83 84 89 89 91 93 94 96 97 98 99 101 101 102 105 107 109 110

4.

.

113113 115 116 118 119 122 123 124 126 126 127 131 131 132 132 134 135 136 139 143 143 145 147 148 149 149 150 152 154 158 160 160 161 164 165 165 168 170 177 177 182 182 185 188

5. border cellspacing bgcolor border 6.

7. SUBMIT RESET 191 194 195 199 199 200 201 202 204 209 210 212 213 213 216 217 220 221 223 224 224 226 229 231 233 234 235 236

:

8. text-align align D1V 9. -

241241 245 250 251 252 253 253 255 262 262 263 265 269 269 272 274

274 276 279 279 281 283

10. 11. : . CSS background background-attachment. background-color. background-image background-position background-repeat border border-bottom border-bottom-color border-bottom-style

287287 290 290 292 295 298 299 300 301 304 307 308 309 313 315 321 321 324 327 328 328 330 332 339 343 347 347 350 351 353 354 355 357 358 360 361 362

_S border-bottom-width border-collapse border-color border-style border-width bottom clear clip color cursor display float font font-family font-size font-style font-variant font-weight. height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom overflow padding padding-bottom position right text-align table-layout text-indent text-decoration text-transform top vertical-align visibility white-space width word-spacing z-index

364 365 367 369 371 373 375 376 378 380 382 384 386 388 389 391 392 394 395 397 399 400 402 403 405 406 408 411 412 414 416 417 420 422 423 425 426 428 429 431 433 435 437 438 439

443

HTML (HyperText Markup Language, ) , , -. , , . , HTML , , , , . . - , , , . , , HTML, . CSS (Cascading Style Sheets, )? , , . , , . , , "" . , , HTML. CSS , -. , . , , , ,

JO

, W3. , , - . . , . , , . , , . . , , HTML CSS. , . , , . , , . , - . - . - , - . -, , , . , , , . , , , -.

, -, : " ..?". , .

11

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

, , , . , . , , , . , , , . , , , , . , . . 1 "". -. -

12

. 2 "". , , . 3 "". , . 4 "". , , . 5 " ". , , . , . 6 "". , . , , , , , , , . 7 "". , ; , , . 8 " ". - , , , , , . 9 " ". , , . 10 " ". , , , , . 11 " ". , -, . " CSS". , , , .

13

, . , . , , , : Internet Explorer 5.5, Netscape 6, Opera 6, Firefox 1.0 . , . CSS , , . - , . , . , , , . , . , , , .

, vlad@htmlbook.ru. , , http://www.htmlbook.ru.

1

, ? , -. , , . , , . , . . CSS , , , . . , , , , , . . , , . HTML CSS . , , , .

, . , .

16_

1

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

, . , , , . , , , , , . , , . , . . - . , . , , . , . . . , , ? CSS , . , . , , . , . -. ( , ) : , , .

17

, (serif) (. 1.1).

. 1.1. ,

, , . , . , . . , .

, , , sans-serif ( " "). : , , . . , , (. 1.2).

. 1.2.

18

1

, , , , , . . -.

, (. 1.3).

i f ]

. 1.3.

, . , , . , , . , "" . , , . , "" "" , , . , , . , , . , , Courier .

, . , . , , , (. 1.4). Windows Comic Sans MS.

19

. 1.4.

, , , , , - ( (), (%)), ( (in), (mm), (pt) ). , . , 12. , . , . , , , , , , . . , . Arial , Times , Courier New Arial (. 1.5). .

W*-.^

..*.-

H

.

-~ *-

....,

.'

'

:

*

..... ...

!

*

*-V. " ' ' ^"' !

*'"' ^ - : j j fJ jjSj @ Q j fg3 "

Arial, 12 Times New Roman, 12 Courier New, 12

Arial, 24 Times New Roman, 24

Courier New, 24 . 1.5. -

. 1.5 12 24 . , , .

20

1

. : , , (. 1.6).w'# ;:- * j *

. 1.6.

, .

. : (oblique) (italic). , , . , italic oblique, .

, : , , , , (. 1.7). . . , . ,

21

. ( ) , , , .. 'n A f 3

.;..-

_ ' ( J . I ' , ' U

.

:

:

.

,

/

.

'

.

.

.

:

.

.

.

.

.

.

i

[ ] ig) . , . , . 1.5. B D { f o n t - s i z e : 90% ) O Y TH { f o n t - s i z e : 80% } HI { f o n t - s i z e : 180% }

/* */ /* */ /* * /

. small, Internet Explorer 5 , , medium.

29

font-size: medium Internet Explorer Netscape, CSS .

, STRONG ( ) font-weight. : bold , bolder , lighter , normal . 100 900 100. , , 100, 900. ( ) 400, 700. font-weight , ( 1.6).; 1.6. { color: #000080; /* - */ font-weight: 900 /* */ } \

, - .

i , font-style, CSS. , .

_30

1

font-style normal (), i t a l i c () oblique (), 1-.7. , . , . , . ! . #cursive { f o n t - s t y l e : i t a l i c } /* */ toblique { f o n t - s t y l e : oblique } /* */ } < s p a n s t y l e = " f o n t - s t y l e : 1" HaicnoHHbM

*|

. , , . , , , , .

. , , , . , , . HTML : SUP . , , , , . 1.8 . '

( 1.8. < s t y l e type= " t e x t / c s s " > SUP, SUB { font-style : i t a l i c ; color: red

31

/ /

*/ */

} 3 - Il2 + I2 - Ksub>3 = 0 , . , , siambda;. SUB SUP . vertical-align, . , 1.9 o.8em. E m , . - , , . , .5 , . , v e r t i c a l - a l i g n : 60%. ; 1.9. ...'/.. I

.math { f o n t - s t y l e : i t a l i c ; f o n t - s i z e : 150% } .sup ( v e r t i c a l - a l i g n : 0.8em; /* */ color: red; /* */

32 font-size: 70% .sub { vertical-align: -0.8em; color: blue; font-size: 70% /* */

1

/* */ /* */

n f() = aO + aK/span> x + ... + an-l xn-l + an xn

, , (. 1.9).:

-.:-.J

1

L*l

" ^ @; 0

' '">

![ ~ ~

7."~".,-11_""*

/6tJ -JK

+ + ... + 0 1 -1

'"1 + "

. 1.9.

Internet Explorer , vertical-align . , Internet Explorer 5 . sub ( ) super ( ), , , . SUB SUP ( 1.10).

'" " ; " ; :;" : ;; - ;

33_ ..

1.10. .sup ( vertical-align: super; color: red; font-size: 70% } .sub { vertical-align: sub; color: blue; font-size: 70% }

!

, . , -. , font-variant small-caps, 1.11. 1.11. HI.capitel { font-variant: small-caps; font-size: 200% } Lorem ipsum dolor s i t amet Lorem ipsum dolor s i t ametLorem ipsum dolor s i t amet... , , . 1.10. , , , . , , . , 2 1001

34

1

. Internet Explorer , . .

!

*& " {3 IS ' f? nf 0 ! I

0- & [Sj *>:

2

L o r e m

i p s u m

d o l o r

sit

a m e t

L O R E M

I P S U M D O L O R

SIT

A M E T

Lorem ipsum dolor sit amet...

. 1.10.

, , , . , . text-transform, : , - ; capitalize ; lowercase ( ); uppercase ( ).

1.12. , HI, , . ! 1.12. HI { text-transform: uppercase } P { text-transform: capitalize }

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisi ut aliquip ex ea commodo consequat.

35

. 1.11. , , , .

||jjj||!JI''1-! r-'p'iniJ ^^J "* - Q | ; i (3 [gj 4jS ! ,? |% ;'

LOREM IPSUM DOLOR A M E T

SIT

Lorem Ipsum Dolor Sit Amet, Consectetuer Adipiscing Elit, Sed Diem N n m y ou m Nibh Euismod Tincidunt Ut Lacreet Dolore Magna Aliguam Erat Volutpat. Ut Wisis E i Ad Mnm Veniam, Quis Nostrud Exerci Tution Ullamcorper Suscipit nm ii Lobortis Nisi Ut Aliquip Ex Ea Commodo Consequat. 1.11.

, , , .

, . , .

36

1

- - , " ". , , ? , , . , CSS , . , . , , .

, . , , . , . , , . - . , . , : , ? , , , , , . . , .

HR HR , . , HR HI 2, ( 1.13).

i i .13. ( ) ( )

37

. 1.12..... , . , l,.,..fl || ^

- ;

' {*} |jjjj ,.^-

'" ^ f

ffl * >; J

( ) ( ). 1.12. , HR

, , . , , . , HR , .

, . HI , . . . 1.14 , SPAN.

1.14.

38_ Bcex

1

celipadding cellspacing . bgcolor. , , .

, . CSS borderbottom. , ( 1.15).j 1.15. HI { b o r d e r - b o t t o m : 2px s o l i d r e d ; f o n t - s i z e : 220% } 4, \

HI, ..., , . , , . -

39

, . , -, , , . , , SPAN, HI, 1.16.I 1.16. ;....,; ..................,; . .......:,........,...;....... HI SPAN { b o r d e r - b o t t o m : 4px s o l i d r e d } KaK < / / > i .....;

..;

. 1.13.

- ' } J "^? ( j f ^ :

* ? ' j

. 1.13. ,

Internet Explorer 5 SPAN. . 5.5, .

40

1

, . , . , . , , , . , , ( 1.17). 1.17. , , .

vspace hspace . . 1.14.

\ ?) ,

1.' < t d x i m g s r c = s a m p l e . g i f width=50 h e i g h t = 5 0 x / t d > Lorem ipsum dolor sit amet...

73

, . . , , . . , . vaiign=top TD , , (. 2.6).i 1 >!UJIWJ ,ujujj,iy ! -i'lkr'jj'j't! I m s r u s ! i.'p... . j

'?

J '':'-''*' }

jjj3 i2J ,:, /-'

j j j

L o r e m ipsum dolor sit arnet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tmcidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis emm ad minim veniam, quis

nostrud exerci tution 11 suscipit lobortis nisi ut aliquip ex ea commodo consequat.

. 2.6.

float. right -

74

2

, . left, , , ( 2.15). , float, . , , , , .{ 2.15. #warp { float: left; /* */ m a r g i n - r i g h t : /* */ } Lorem ipsum d o l o r s i t a m e t . . . ;

hspace vspace, margin margin-left, margin-right, margin-top margin-bottom. , , .

. , . (. 2.7).i Q , , , [ , , , ]

. 2.7.

75

, . ait IMG ( 2.16).' ' * "

:

2.16. alt="3flecb , , , ">

a l t . , . , 2.17. .; 2.17. \

^

, , . , , . ( )

Opera 7 .

- GIF, JPEG PNG.

76_

2

, , , . -, background BODY, 2.18. ! 2.18.

background . , . , , - , . . ( 2.19).I 2.19. |

bgcolor BODY. -. HTML , . background , , , , , , . , , . 2.8, , 2.20.

. . ' . . . ' : ' " '

77

j

t

l

i

v

L

O

l

i

'

i

.

-

i

J

j

J

C

I

'

U

i

'

J

J

!

'

l

/

j

i

i

n

i

S

!

E

/

J

J

i

'

J

i

'

B

r

!

\i

L5i 5] V*

/

1 ^ ^5

. / ' - ^ > : s

, , , . , . . 2.8.

2.20. BODY { background: white url(/images/help.gif) right top no-repeat fixed

/* /* /* /* /*

*/ */ */ */ */

HI { font-family: Arial, sans-serif; font-size: 120% . , , , . , .

background , , . -

78

2

, . , . . background background position, . : (left, center, right) (top, center, bottom). , . . fixed background background-attachment , scroll . , , background-image, , , background. : norepeat ( ), repeat , repeat-x , repeat-y .

- , , , , .

- , . 1700 . , , (. 2.9). . , , , . - background BODY. , . , (. 2.10).

79

6040 4X8 8060 0x0 12x6 0478 . 2.9.

j? |

3 '0..' [SJ 12 < !

Lorem ipsum dolor sit amet, consectetuer adipiscmg tlit, sed diem nonummy rabh . euismodtiriciduntlit lacreet dolure magfta".> aliguam erat volutpat. Ut wxsis enim ad minim veniam, quis nostrad cerci tution ullamcorper suscipit lobortjs nisi ut aliquip ex ea commodo consequat. . 2.10. . . - , , , . . , . 2030 .

80_

2

. , , . 2.11.

. 2.11.

, , . . , 10 . , 2.21. 2.21. BejraKaHbi , , . snbsp;

, . , , . (. 2.11) . , , . , , , . , "" ceiipadding, . 2030 , , -. . 2.12.

81

.

t j j rasiM! ;

%/ _ '

;*] |pj :.

.>

:

? i^f ^ J

, , . : :

. 2.12.

, . , . , . , "", . , . 2.2. 2.2. , 1 1-gif 2.gif

3.gif 4.gif 5.gif

1

2.22.i 2.22. < t a b l e width=300 cellspacing=O cellpadding=O a l i g n = c e n t e r bgcolor=#dddd99>

82

2

, , . . 2.13.

"

.' . ] I

J . ij1

! ''" 1 ' '. '.' f ^ , , : /. . ;

:

I

. 2.13. 2.22 . , , . . , , . ceiipadding cellspacing , . , (styie="padding:4-").

, vaiign=top TD. .

83

, , , GIF. spacer.gif. .

Internet Explorer Internet Explorer, , , . 200 200 , (. 2.14).

- g

;>

. 4$*

:. ;;

[ j j i*Js '

| ^ J _ _

. 2.14.

: , , . -. , IMG galleryimg=no, 2.23.

84

2 i

i 2.23. ,

. imagetooibar , 2.24.: 2.24. \

-- . , , . , - , . , , . 1. . , , , , - . , - . 2. , .

85

1. . . , . . - , , , . 2. HTML. , , . , . 3. - , : , , . - . . , . , , , , . , . , . , , . . . - , . - .

86

2

. -. HTML-, . , , usemap IMG. , MAP. MAP usemap. usemap IMG ( 2.25).| 2.25. - !

MAP AREA, , , , , , . AREA . SHAPE. . (circle), (rect), (poly). ALT. . , . . HREF. , . ,

87

. , ( zip ) . , target. COORDS. . , 0, 0. , . . . . , . 2.15.

. 2.15.

TARGET. , . target AREA ( 2.26). , name. , . : _ . _self . parent -; , self.

_top ; , _seif. 2.26. t a r g e t

88

2

. , new.html.

3

- . , html-, , . , , , .

, , , . - . HTML . name href . , . , , . href (URL, Universal Resource Locator, ), . . , , http://www.htmlbook.ru /about/. , -, . , , . , , . , ( /), /forum/source/adm.html. ,

90

3

http://www.htmlbook.ru/forum /source/adm.html. , , -. . / /demo/ - index.html ( default.html), demo. index.html , , , , . /images/pic.html , . pic.html, images. , , . ../help/me.html . manual/info.html , , . , , , . HREF. , . , . , ( zip ) . , target. NAME. name . name . #, . , . , - . # . , . . .

91

TARGET. . target . , name. , . : blank ; _seif ; _parent -; , _self; _top ; , _seif. 3.1. ! 3.1. 0 A6coJU0THaH CcHUiKa HaBepx

|

name, , target.

. , , , . : , , , . "", , . , , border IMG.

92

3

. -, . , , , , , "..." . . 3.2 . 3.2. TeKCTOBaH

, . . , - IMG, . , , . - . (link). , . . (alink). . , . . . (viink). , , , . BODY, 3.2. , , .

93

. CSS, . .: { : }

, : active ; link ; hover ; visited . 3.3 . 3.3. A : l i n k { c o l o r : #003366 } A : v i s i t e d ( c o l o r : #660066 } A:hover { c o l o r : #800000 } A : a c t i v e { c o l o r : #ffO000 } CcbOTKa K / a > href=link3.html>CcbinKa 3

I CcbinKa 2 |

hover visited text-decoration, .

, text-decoration: none, A:hover. , . text-decoration: underline ( 3.5).

i 3.5. A {

95 I

text-decoration: none } A:hover { text-decoration: underline

/* */

/* */

} CcbinKa . . text-decoration: underline overline A : h o v e r ( 3.6). | 3.6. A { t e x t - d e c o r a t i o n : none } A:hover { t e x t - d e c o r a t i o n : u n d e r l i n e o v e r l i n e } CcbmKa |

, ; , . 3.1.

96

3

,,/

\ (*! ^ v

:

^ (& ; >.'

j :

. 3.1.

, , .

, hover , color, 3.7. 3.7. A f text-decoration: none; color: #0000ff A:visited { color: #800080 A:hover { text-decoration: underline; color: #ffOOOC

/* */ /* */

/* */

/* */ /* */

.

97

( ), ( A:visited) . ( ^

v i s i t e d hover . hover, .

, , font-size A:hover. , .

CSS . , , . Netscape 6, Mozilla, Firefox, Internet Explorer 5.5, Opera 5 . , , SPAN, , , . A:hover, 3.8.; 3.8. A { color: blue } A:hover { color: red ) .link { color: blue } 4 3. 1001

/* */

/* */

/* , */

98 CcbuiKa

, .

, , , . borderbottom, . dashed, . 3.9 . 3.9. A {c o l o r : #ffO00O /* */

} A:hover {

text-decoration: none; border-bottom: lpx dashed blue } nofl4epKHyTa.q

. text-decoration: none, (. 3.2).

99

JjjP1

I

Q ? - ^ :!

til ad J; : >-' '' iff

101

menu DIV, , , .

, , . : ; ; . .

, background, . hover, ( 3.13). 3.13. ' A { background: #fcO; /* */ padding: 2px /* */ A:hover { background: #f73; color: yellow

/* */ /* */

102 CcbmKa K / a > CcbuiKa 2 CcfcuiKa 3

3

, padding, .

. . , . 3.14 , , border. text-decoration . 3.14.

A{ border: lpx solid blue; padding: 2px; text-decoration: none A:hover { border: lpx solid red

/* */ /* */ /* */

/* */

/ed 1 < / > < href=link2.html>CcbtnKa 2 C c b H i K a 3 < / a >

"" , padding. , background. , , . . hover. , 3.10, , . , . , . , , padding A:hover. A:hover padding . 3.15 . 3.15. /* */ { border: lpx solid white; padding: lpx; text-decoration: none } A:hover { border: lpx solid red

7* , */ /* */ /* */

/* */

/* */ { text-decoration: none; padding: 2px } A:hover { border: lpx solid red; padding: lpx

/* */ /* */

/* */ /* */

104 < p x a href=linkl.html>CcbuiKa K / a > < p x a href=link2.html>CcbuiKa 2 < p x a href=link3.html>CcbuiKa 3

3

. 3.3 , .' '

:

(

' , ' ") J

'

@

j >....; .

I

llCc ( 2! 3

. 3.3.

, . , , . , border-style: outset , , (. 3.4).

:

^ . 1 " ?.& j

-'j

*j

(

. ^ j 4 $?:%

.

1

. 3.4.

, , , border-style; -

105

inset, ( 3.16). 3.16. A { border-style: outset; background: #ccc; padding: 2px } A:hover { border-style: inset } CcbinKa C c b m K a C c b D i K a

/* */ /* */ /* */

/* */

K/a> 2 3

, . , : , , , ; 3 , "". , 3 , padding padding-bottom. , , . 3.5. , 3.17. background. , -

106

3

, , . , em, . , , background repeat-x.

. 3.5.

3.17. A { t e x t - d e c o r a t i o n : none; p a d d i n g : 2px; w h i t e - s p a c e : nowrap A:hover { background: url(/images/line.gif) 0 l.lem repeat-x

/* */ /* */ /* */

/ */ / */ ; */

CcbuiKa K / a > CcbuiKa 2 CcbDiKa 3

, . , white-space nowrap, . , .

107

, , , . url, . , a l.iem . , . . 3.6.

0

S

-,5,1 :.

] f i ! f ? J % ' &~

1 2

. 3.6.

(text-decoration: none), . . )

Opera 6 , background . Internet Explorer 5 , padding. , , .. .

, , . , .

, . , . , ,

108

3

. . , - . , , , (. 3.7).

j

^1

j ) jg] if) ./" *? Ijf ; g j

, ^.

. 3.7.

. , , , . , display: list-item. , , , list-style-image, ( 3.18). 3.18. A.outer {list-style-image: url(/images/check.gif); display: list-item /* */ /* */

j

CcbinKa

&diaras;

Netscape 6, Mozilla, Firefox, Opera Internet Explorer.

list-style-image. , 4.11. ! 4.11. UL { list-style-image: url(images/check.gif)

. , , , , . < l i s t y l e = " l i s t - s t y l e - i m a g e : "> , .

123

, . , . . 4.3 .

S

[ /J

vJ * i " S

JT

;; ...;

:.

u

j

ijj'j i.;-^

-

''.'

_ j _

1. 1 1. 1.1 2. 1.2 2. 2 1. 2.1 2. 2.2

. 4.5.

. , ( 4.16). 4.16. OL LI { font-weight: bold ) OL OL { list-style: lower-alpha OL OL LI { font-weight: normal ) ol>

/* */ /* */ /* */

129

- (. 4.6).

( Q -\i " i*3 ^ '* ^

1. 1 . b 2. 2 a. b. b

. 4.6.

OL , . , OL , , .

5 1001

5

, . , , -.

, border . , . , ; , ( 5.1). border-top, border-bottom, border-left, borderright, , , .[ 5.1. border

/oy /ti 2 .

132

5

, , . , . 5.1. Idotted|dashedj|soHdj [double] |groove|| ridge | | inset [| outset j. 5.1.

Internet Explorer 4 5 border SPAN.

border DIV, . , . , , class id . , DIV SPAN, , .

. , , , . : HR, , .

HR HR , , . HR , , . HR , , . , . 5.2 .

5.2. HR

133

size , a width . HR , , align left right, . , . , HR noshade. color , noshade. , color Internet Explorer, . . , , . CSS, , HR: width , ; height , ; text-align ; color Internet Explorer; background-color Mozilla, Firefox. Opera, Netscape,

, . Opera . , border: Opx solid fffoooo, . , . , -

134

5

. 5.3. 5.3. BODY { text-align: center /* - */ } HR { border: Opx solid red; /* Opera */ background-color: red; /* Opera Netscape */ color: red; /* IE */ height: ; /* */ width: 30Opx; /* */ text-align: center /* */ } , : color background-color. Internet Explorer, Netscape Opera. , Opera , border. , , .

, . . 5.2 , 100 % . , . , , -

135

: , . , , 5.4. ,

3 |] "fj ! >-'v

j j - |*| ^ ;

> t^f 4& ' 0 * '- * H j

. 5.2.

! 5.4.

.

I

, 100% .

, 400 .
, .

, , ? . , . , , . , , Netscape 4.x . GIF- 1 * 1 . 5.5 spacer.gif. , Netscape ( ).

136 \ 5.5.

\

< t d x i m g s r c = s p a c e r . g i f width=l h e i g h t = 2 x / t d >

background , .

. , , . , , , DIV, , 5.6. 5.6. , #line {width: 100%; background-image: url(dot.gif); background-repeat: repeat-x; margin-top: ; margin-bottom: ; } /* /* /* /* /* */ */ */ */ */

137

, . , CSS. , backgroundrepeat, ' , background, , , a margin , . background: url(dot.gif) repeat-x margin: Opx lOpx 2px DIV snbsp; . , , Internet Explorer, "" . , , border-top, , border-bottom, . , , , ( 5.7). 5.7.

", - ?".
" ?!" - . - " !"
, , - .

, , . 5.1, , -. ( T A B L E ) , ( ), ( D I V ) , ( HR), ( H I ) .

. 5.3.

138

5

1

JjjP

-'. - | J ; !

Q

@

i$

-' Jr tig ; J T ^ ^ j ^ j

@

'

", - ?". " ?!" - .- " !" , , - .

. 5.3.

, , 5.6. , line ( 5.8). 5.8. , #iine { width: 400px; border-top: lpx solid red; position: relative; left: 50%; margin-left: -200px

/* */ /* */

line . 8, .

139

, . , . 5.4 . . 5.4.

, . , , . (. 5.5). , . , , , , . , .

i

]

. 5.5. , . 5.4

line, background, DIV. IMG; , SPAN float. left , . 5.4, a right . , . , padding-top; , . , . margin-top SPAN ( 5.9).\ 5.9. ., \

140 .line { background:url(line.gif) repeat-x; text-align: center; padding-top: /* /* /* /*

5

*/ */ */ */

} J b u o i OTpe3a

Opera . , SPAN, , width, . , SPAN text-align left. border. DIV border-top, , . SPAN, DIV, position: relative , top . , SPAN ( 5.10). 5.10. line { text-align: center; font-family: Arial, sans-serif; font-size: 12px; border-top: lpx dashed black }

/* /* /* /*

*/ */ */ */

141

< d i v c l a s s = l i n e > < s p a n s t y l e = " p o s i t i o n : r e l a t i v e ; t o p : -12px; f l o a t : l e f t ; t e x t - a l i g n : l e f f ' x i m g s r c = s c i s s o r s . g i f width=52 height=22x/span>JlMHMH 0Tpe3a

border . 5.6.^" *4

. 5.6. , b o r d e r

, , , . , . border , , . , , . 5.7. . 5.7.

, , , . 5.7, . , , border-bottom bottom-top. background. , . , ( 5.11). .

142 \ 5 1 . .1 .linel, .Iine2 { text-align: center; /* font-family: sans-serif; /* font-size: 12px; /* height: 13px /* } .linel { background: url(scissors.gif) /* no-repeat /* Opx -llpx; /* border-top: lpx dashed black

5 j

*/ */ */ */

*/ */ */ /* */

.Iine2 { background: url(scissors.gif) no-repeat Opx ; /* */ border-bottom: lpx dashed black /* */ . JlMHHH oTpe3a . JlHHHH oTpe3a , . . , , .

143

, . , . . .

, , . , 12 . ceiipadding border , a cellspacing . : , width , a bgcolor ( 5.12). i 5.12. , Korfla , , , , . , - . , , . 1 * 1 , spacer.gif. , , . 1

144

5

background , . , , , 5.13. 5.13. Ka;*fflbM : , , .

. 5.8.! ' -J - tiktu-Mii lijtsniat i*j 'ii

L'iibrzr

^ i ? *

-iJ '' ->

; t3 : , , .

. 5.8.

145

. , , , , . , , , . , . , "" , , . , 2040 (. 5.9). -.

. 5.9.

.

, 5.8. border-left border-right; ( 5.14).| 5.14. #vline { border-left: lpx solid red; margin-left: ; padding-left: 7px }

/* */ /* */

146

5

, , , , , .

. . padding margin , . , . background, , ( 5.15).| 5.15. , ffvline { background: url(check.gif) repeat-y; /* */ margin-left: 40px; /* */ padding-left: 20; /* */ } , , , , . \

background , url , a repeat-y , . , , . -

147

"", . , . , background. , , 5.16. 5.16. #vline {background: url(check.gif) repeat-y right; padding-right: 20px; } /* */ /* */

background right, . padding-right. . , , .

, , - . , . , .

148

5

. , .

border border, , border-color, . , , (. 5.10).

_

. 5.10. , b o r d e r : Internet Explorer; Netscape; Opera

Netscape (. 5.10, ), Opera (. 5.10,