Вы находитесь на странице: 1из 608

.

CSS3
3-
OReilly
.





.
.
.
.
.
.

32.988.02-018
004.738.8

17 CSS3. 3- . .: , 2014. 608 .: . ( OReilly).


ISBN 978-5-496-00428-2
C CSS3 ( ) ,
-. - CSS3. , ,
HTML CSS. , -,
, .
: HTML5-, CSS3-,
; , ; ;
- ;
.

12+ ( 29 2010 . 436-.)


ISBN 978-1449325947 .



ISBN 978-5-496-00428-2

Copyright 2013 Sawyer McFarland Media, Inc. All rights reserved.


Authorized Russian translation of the English edition of CSS3: The Missing Manual,
3rd Edition (ISBN 9781449325947). This translation is published and sold by permission
of OReilly Media, Inc., which owns or controls all rights to publish and sell the same
, 2014
, , 2014

OReilly. .
.
, , , . , , ,
.
, 192102, -, . (. ), 3, , . 7.
005-93, 2; 95 3005 .
06.11.13. 70100/16. . . . 49,020. 2700.

. 180004, , . , 34.


. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1. CSS
1. HTML CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
2. . . . . . . . . . . . . . . . . . . . . . . 49
3. : . . . . . . . . . . . 69
4. . . . . . . . . . . . . . . . . . . . . . . 106
5. : . . . . . . . 116

2. CSS
6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
7. , , . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
8. - . . . . . . . . . . . . . . . . . 251
9. . . . . . . . . . . . . . . . . . 306
10. ,
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
11. . . . . . . . . . . . . . . . . . . . . . 387

3.
12. CSS. . . . . . . . . . . . . . . . . . . . . . . . . . 414
13.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
14. -. . . . . . . . . . . . . . . . . . . . . . . . . . . 464
15. - . . . . . . . . . 499

4. CSS
16. CSS - . . . . . . . . . . . . . . . 527
17. CSS. . . . . . . . . . . . . . . . 546

1. CSS. . . . . . . . . . . . . . . . . . . . . . 569
2. , CSS. . . . . . . 603


. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
CSS. . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
HTML: . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML- . . . . . . . . . . . . . . . . . . . . .
XHTML . . . . . . . . . . . . . . . . . . . . . .
HTML5 . . . . . . . . . . . . . . .
, CSS. .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . .
, . . . . . . . . . . .
- . . . . . . . . . . . . . . . . . . . . . . . . . .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16
17
17
18
18
19
20
21
21
23
24
25
26
26
27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

1. CSS
1. HTML CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
HTML: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
HTML- CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
<div> <span> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

HTML5. . . . . . . . . . . . . . . . . . .
.
doctype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Internet Explorer. . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . 36
. . . . . . . . . . . . . . 38
. . . . . . . . . . . . . . 44
. . . . . . . . . . . . . . 46

2. . . . . . . . . . . . . . . . . . . . . . 49
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . .
: .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

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

49
52
54
55
58

3. : . . . . . . . . 69
: . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . .
ID-: -. . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . .
:not() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . .

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

69
71
74
76
77
81
82
88
91
94
95

4. . . . . . . . . . . . . . . . . . . . . . . 106
?. . . . . . . . . . . . . . . . . .
.
. . . . . . . . . . . . . . . .
: . . . . . . . . . . . .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

106
108
108
110

5. : . . 116
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . .

116
121
124
127
128
131

2. CSS
6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
-. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
- . . . . . .
-. . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . .
@font-face. . . . . . . . . . . . . . .
-. . . . . .
. . . . .


Internet Explorer 8. . . . . . . . . . . . . . . . .
Google web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
, . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . .

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

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

138
140
143
143
145
145
146
149
151
152
153

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

155
158
166
169
175
178
180
185
187
192

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

7. , , . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
. . . . . . . . . . . . . . . .
. . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

205
207
215
219
220
223
226

10

box-sizing. . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .
. .
: , , . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . 229
.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

233
234
239
250

8. -. . . . . . . . . . . . . . . . 251
CSS <img> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . . . . . . . .

. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
background. . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
Internet Explorer. . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
, Colorzilla .
1: . . . . . . . .
2: . . . . . . . . . . . . .
3: . .
, Internet Explorer 8. . . .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

251
252
257
258

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

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

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

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

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

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

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

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

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

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

265
266
268
270
273
273
276
278
279
281
283
283
286
291
297
304

9. . . . . . . . . . . . . . . . . 306
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
CSS- .
. . . . . . . . . . . . . .
1: . . . . . . . . . . . .
2: . . . . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

306
310
318
327
329
331
338

11

10. ,
CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
. .
. . . . . . .
. . . . . . .
. .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

348
358
366
379

11. . . . . . . . . . . . . . . . . . . . . 387
. . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
1: .
2: . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

387
390
396
402
407

3.
12. CSS. . . . . . . . . . . . . . . . . . . . . . . . . . 414
-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
CSS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

13.
. . . . . . . . . . . . . . . . . . . . . . . . . . 427
. . . . . . . . . . . . . . . . . 430
. . . . . . . . . . . . . . . . . . . . . . . . . 436
. . . . . . . . . . . . . . . . . . . . . . 451

14. -. . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
- . . . . . . . . . . .
- RWD. . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
-. .

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

464
466
467
476
482
486

15. -. . . . . . . 499
. . . . . . . . . . . . . . . . . . . . . . . . 499
. . . . . . . . . . . . . . . . . . . . . . . 513
: . . . . . . . . . . . . 518

12

4. CSS
16. CSS -. . . . . . . . . . . . . . 527
- . . . .
- . . .
. . . . . . . . . . . . . . . . .
: . .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

527
530
531
539

17. CSS. . . . . . . . . . . . . . . 546


. . . . . . . . . . . . . . .
. . . . . . .
.
. . . . . . .
CSS Internet Explorer . . . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

546
547
555
559
564

1. CSS . . . . . . . . . . . . . . . . . . . . . 569
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
, . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
, .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

569
573
578
579
584
587
593
598
600

2. , CSS . . . 603
. . . . . . . . . . . . . . . . . . .
CSS . . . .
, CSS. .
CSS-. . . . . . . . . . . . . . . . . .
CSS. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . .
CSS . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

603
604
604
605
606
607
607


Sawyer McFarland
Media, Inc., , ().
1995: - . -
(Berkeley Multimedia Research Center),

, Macworld.com.
, , .
- ,
(Electronic Art), , . Practical Web Design, MX Developer's Journal Macworld,
CreativePro.com.
: missing@sawmac.com
( , ,
2).


() Missing Manual .
. : nanbarber@
oreilly.com.
( ) ,
, , . :
holly@oreilly.com.
() , , , . , .
www.nanreinhardt.com. : nanleigh1@gmail.com.
. ( ) -,
- DQuinn.net.
Genuine Interactive. WordPress
, Sam Adams, MassMutual Children's
Hospital Boston. -
. . :daniel@dquinn.net.
( ) ,
. -. . -
.


, , , . , ,
,
. , , , CSS,
, -.
, ,
; ; ;
, , ,
--!; ,
, : , , , ,
, , , , , .


, Cascading Style Sheets (CSS), -. CSS,
, , ,
.
, , . ,
,
.
, ? ! -.
CSS,
.1 -, CSS.

CSS
CSS HTML, HTML . . HTML , , , .., CSS , HTML-
.
, HTML, , , CSS , , 50 . CSS
,
-. (style sheet) .
. , , ,
50.
, , , . , ,
, .
HTML- , , , ( <h1>)
, ,
.

17

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


, HTML (, , CSS). ,
( -) ,
<html>, <p>, <h1>, <table> .., . CSS HTML, , CSS, , - HTML-.
- HTML, ,
, .

HTML ,
: HTML Dog (www.htmldog.com/guides/htmlbeginner) W3Schools
(www.w3schools.com/html).

18

HTML:
HTML , , .
HTML -:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> -</title>
</head>
<body>
<p> -</p>
</body>
</html>

, , , -. , doctype, <html> ( ), head


(, ), body (, ),
-. </html>.


- doctype , ,
HTML . HTML4.01 xHTML1.0,
: . , doctype HTML4.01 ( doctype-
HTML4.01 xHTML1.0 ):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.
w3.org/TR/html4/loose.dtd">

doctype- - www.webstandards.org/
learn/reference/templates.

HTML-, ,
, doctype:
<!doctype html>

doctype, HTML5. HTML5 . doctype HTML5,


( Internet Explorer 6). ,
HTML5 , doctype-
.

, HTML doctype- , ,
HTML5. , Internet Explorer 8

19

HTML5. CSS,
JavaScript. ,
.

, doctype,
, . - ,
, ,
doctype, - , CSS.
doctype- HTML-
. , HTML4.01 :
<br>

xHTML :
<br />

HTML5:
.

HTML-
, HTML- -,
- , -
. , , ,
-. (markup)
Hypertext Markup Language.
, ,
. (/) (<).
- .
doctype,
.
<html> - ( ) :
</html>. ,
HTML. , , <html>.
- , <html> .
-
.
(head) - .
, -, ,
. <head>.

20

, , HTML, . , <head>- CSS ( ,


) , CSS-.
(body) -, <body>, , : , , ..
<body>, , :
yy <p> , </p> ;
yy <strong> ; ,
<strong>Warning!</strong> , Warning!
;
yy <a>, (), , -
( <a>,
<ahref="http://www.missingmanuals.com/"> !</a>).
,
! http://www.mis
singmanuals.com. a href , URL ( , URL-)
. http://www.missingmanuals.com href.

XHTML
, HTML .
HTML ,
.
(, <body>, <BODY>, <BoDy> ),
(, , <p>, </p> ). ,
,
, , .
, HTML :
XML, Extensible Markup Language.
, 2000
HTML, XHTML,
( XHTML XML HTML). XHTML
( 2000) , HTML5.
- XHTML (, ,
), .

21

HTML5
W3C , -
XHTML XML
, -
. , . , XML XML, World Wide Web Consortium. W3C
XHTML, HTML5
HTML, XML HTML, . , Google Chrome Firefox,
HTML5.
HTML5 - .
XHTML,
-, HTML5 , ,
. HTML . ,
HTML5 ,
, - - . , HTML5 <header> ,
,
, <nav> ,
, <footer> ,
, , ..
, HTML5 ,
- , , , , , , (
). ,
, .
HTML5 ,
HTML5 doctype-
. ( Internet
Explorer 8 , . Internet Explorer 8
HTML5 HTML5 .1.) HTML5
.

, CSS
- HTML CSS, , Windows Text Edit Macintosh.
HTML CSS , ,
, -.

22

. , .

, -, . , CSS .


- . ,
.
jEdit (Windows, Mac, Linux; http://jedit.org). ,
Java, . , ,
CSS.
Notepad++ (Windows; http://notepad-plus.sourceforge.net).
. ,
,
HTML- CSS-, ,
, HTML CSS.
TextWrangler (Macintosh, www.barebones.com/products/textwrangler).
BBEdit Macintosh. TextWrangler ,
HTML,
( ,
), FTP ( ) .


:
.
EditPlus (Windows, www.editplus.com) , , FTP,
.
skEdit (Macintosh, www.skedit.com) -,
FTP/SFTP, .
Coda2 (Mac; www.panic.com/coda) -. , , FTP- SFTP-
CSS-.
Sublime Text (Mac; www.sublimetext.com) . , Mac.

23

Dreamweaver (Macintosh Windows, www.macromedia.com/software/dreamweaver)

-. , . CSS.
Expression Web2 (Windows, www.microsoft.com/expression) Microsoft
-. -, CSS.

, , HTML/XHTML
CSS. -.
HTML/XHTML, , CSS, CSS- . 2.


. , ,
, .
, ,
, . www.w3.org/TR/css3-transform/, , .
, CSS, , , .
, CSS, -. .
- CSS.
, .

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

CSS

iPod, CSS
. CSS1,

1996,
.
CSS

24


:
, (..3)
CSS.
CSS2 ,
,
.


-.

CSS2.1,
.
CSS1.
,
.
CSS2.1
.
CSS2,
.
,
CSS3 ( " "

HTML5). CSS, CSS3


.
CSS W3C CSS
Selectors,
Values and Units, Box Alignment ..

, -
CSS3 .
3 Selectors ,
4.
, CSS3,

.

,
.
- CSS4 ,
,
.
CSS2.1
(
CSS3), ,
CSS.


. , .
1. CSS. , , , . CSS HTML.

CSS.
2. CSS. -. CSS
, -,
. , CSS . , - .

25

3. . ,

CSS: . (
) , . : . -,
, .
4. CSS . -, , . ,
CSS.
. . CSS ,
CSS, ,
. .



.
. , . ,
- ,
, , .
, - .
.
, - Macintosh
Ctrl- PC, ,
Ctrl ( Ctrl ).
. , :
File (), Edit () .. , ,
( ); .
.
, .
,
, .
, Ctrl + S ( - S )

26

( , ), ,
Ctrl ,
, S, .


: System\
Library\Fonts. ,
,
:
System. . Library;
, . Fonts. .
,
, .0.1.

.0.1.

, ViewText SizeIncrease ( )
, .0.1:
View () Text Size ( ), Increase (). ,
, Ctrl++, , .

,
, .

URL,
.

27

, , .
, : /Developer/Applications.

, .
,
.

, , .
.

, , .
, .

. ,
.

-
, -
. , , .
, , (
-), www.sawmac.com/css3/.
, , .
. , -.
URL
. ,
, - ,
, -.


, vinitski@minsk.piter.com ( , ).
!
http://www.piter.com
.

CSS

1. HTML CSS
2.
3. :
4.
5. :

HTML CSS

CSS HTML-
, . ,
HTML-, CSS. ,
- CSS
HTML. HTML (, HTML
). , , CSS. , - HTML , HTML-,
CSS, , . , , , .
.1.1. , CSS, HTML. HTML-
4, ,
HTML, (14). - HTML : 213 HTML- 71
CSS.

HTML:
, HTML
- . CSS
HTML . HTML- ,
. HTML- , ,
, <font>, .

HTML:
,
,

1.HTML CSSL

31

. HTML
.
<h1>. , <h2>
.
<ol> (ordered list )
: .

.1.1. - CSS HTML-

32

1. CSS

HTML , , , - . - . ,
<blockquote> (
) , . , , , .
<table> -, , .
,
, .., <table>
, , .

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

HTML: CSS
, - ,

, ,
.
, , .
, - HTML , . CSS
HTML . HTML -
.
, <h1>
.
CSS. HTML -

1.HTML CSSL

33

. , , CSS
.

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


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

HTML www.w3schools.com/html/html_intro.asp.
HTML- HTML Sitepoint.com http://reference.sitepo
int.com/html.

, HTML
-, . : <p>
, <ul> () .
, ,
<abbr> , , <code> .
HTML- CSS, , ,
-, ,
(.1.2). ,
, . . , <ul>.
,
, ,
. . CSS
, .9.

34

1. CSS

.1.2. CSS

CSS <font>
HTML :
<p>
<strong>
<font color="#0066FF" size="5" face="Verdana,
Arial, Helvetica, sans-serif">Urban Agrarian
Lifestyle</font></strong>
<br />
<font color="#FF3300" 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...
</p>

CSS, ( )
HTML- (..1.2):
<h1>The Urban Agrarian Lifestyle</h1>
<h2>A Revolution in Indoor Agriculture</h2>
<p>Lorem ipsum dolor sit amet...</p>

, CSS -, HTML
, - , .

HTML-,
HTML- - -. , <code> -

1.HTML CSSL

35

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

HTML
HTML- ,

, CSS
, ,
,

HTML. ,
-

, Google, Yahoo! Bing.

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

.
HTML-

.
HTML-
,

.
HTML, ,

. <h1>
(

) ,


.
Google -

http://support.google.com/webmasters/
bin/answer.py?hl=en&answer=35769.

<div> <span>
<div> <span> , .
,
CSS-, , .
<div> ( )
, , , .
, ,
, .., <div>. <div> - ,
, , .. CSS
-, (.3).
<span> (inline) , , , .

36

1. CSS

, HTML-, <a>
( ) <strong> (
). <span>, , CSS,
, .. .
id class,
.
<div id="footer">
<p>Copyright 2006, <span class="bizName">CosmoFarmer.com</span></p>
<p>Call customer service at 555-555-5501 for more information</p>
</div>

. -, CSS, CSS
-.

HTML5
<div> ,
. HTML5 , . HTML , .
, <h1>
( 1), , . <code> ,
, .
HTML5 ,
, <div>. <article>
(), , , , . , ,
, - .
, <header> ( )
, , , , ,
..

HTML- HTML5 Doctor (http://html5doc


tor.com) www.w3schools.com/html5/html5_intro.asp.

HTML5
<div>. HTML5.
<section> () ,
. ,

1.HTML CSSL

37

: ,
.
<aside> () , . ,
.
<footer> ( ) , ,
, ,
.. <footer>
, , ,
<article>, , , , .
<nav> () .
<figure> () .
<img>, HTML5 <figcaption>, , <figure>.

, HTML5 ,
<article> <section>, . -, , HTML5,
PDF-, HTML5doctor.com: http://html5doc
tor.com/downloads/h5d-sectioning-flowchart.pdf.

HTML5, <div>.
<div>, HTML5, - . HTML5 ,
Internet Explorer 8
(. ).
, ,
-, HTML5
. , <article>
, -,
. , <div>,
, HTML5.

Internet Explorer 8 HTML5


HTML5
. ,
, <nav>,

, ,
<video>,
, <audio>,

38

1. CSS


. HTML5,
, ,
-.
, Internet Explorer 8

CSS.
, HTML5
- Internet Explorer 8,
.
Internet Explorer
CSS-, HTML5.
</
head>, HTML-,
:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/
trunk/html5.js"></script>
<![endif]-->


Internet Explorer
(Internet Explorer conditional comment, IECC)
JavaScript,
Internet Explorer, 9-.
, Internet Explorer 6, 7 8,
(
Internet Explorer) .
Internet Explorer
JavaScript,
HTML5, CSS,
.
,
HTML5 ,
HTML5,
- . , Internet
Explorer 8
<video> HTML5
( JavaScript).



<h1>,
<p>,
. 3
CSS ,
HTML, ,
.
( .1.3). ,
, .
, , , , , , . ,
,
, ,
.
.1.3 ,
( ), ( ), ( ) ( ). , .

1.HTML CSSL

39

.1.3.

HTML , , <div>. , , HTML-, , div-, HTML-,


, div - .. HTML5,
, .1.3, <header> , <article> , <aside> <section>
, <footer> .
, HTML- -
, , <div>,
<article>, <section> <aside>.

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

40

1. CSS

, HTML,
, CSS-.
<font> . CSS ( .6).
<b> <i>, . CSS ,
HTML.
, <strong> ( ,
, ).
, <em> ( ).

, <cite>
.
. .

<table> .

(,
, , ). 3 , CSS - , <table>.
<body>, -: background, bgcolor, text, link,
alink vlink, , , . CSS (..7 8
CSS- ).
<br/>.
, , ( , <p>;
, , <p> : <font>,
). margin CSS
, , (.
.7).

, .
, .

, , , ,
, , , -

1.HTML CSSL

41

HTML-. , .
CSS, (c. .6), (. .7), (.
.7), (.
.8).

-
HTML : ,
<html> -
, <title> <head>.
XHTML , HTML5
.
,
HTML-
(, -
-). ,
CSS- HTML
, . ,


HTML-.
HTML-
()
W3C http://validator.w3.org/ (.1.4).
,
Firefox, Web Developer
http://chrispederick.com/
work/web-developer/.
W3C-.

,
HTML- , HTML - .
World-Wide Web Consortium (W3C)
, -
, HTML CSS.
- W3C-
. Firefox, ,
-
, W3C. .
http://users.skynet.be/mgueury/mozilla/. Chrome HTML Tidy Chrome - http://bit.ly/SCONRY. Safari www.zappatic.net/
safaritidy/.
HTML- W3C http://validator.w3.org HTML-.
, HTML-
HTML- - , Check ().

42

1. CSS

.1.4. HTML- W3C -

.
, HTML -, .
, .
,
. , ,
, . , <h2>
<h3> (.1.5). , ,
<h2> <h5>.
<p> .
(<ul>),

, , , .
(<ol>), -

.
(. :
.6) .

1.HTML CSSL

43

.1.5. :

, <dl>
( ) <dt> ( ) <dd> ( ).
www.w3schools.com/
tags/tryit.asp?filename=tryhtml_list_definition.
, ., <blockquote>
(), <q> ,

:
<p>, - : <q> -</q>. ,
.</p>.
, <cite>,
, , <address> -

( ).
,
. CSS.
HTML-, ,
, <div> <span>. .
<div>. , <div>
, , ,
. .

44

1. CSS

<div> .
: ,
. , HTML5 , <div>,
<article>, <section> <footer>. HTML5- <nav>.
. <p> </p>, ,
, <br/> <img/>.
- W3C- (..1.4
. -). HTML-, ,
.

doctype
HTML ,
(Document Type Definition (DTD)). DTD
, , , HTML. HTML DTD.
CSS? . , ,
, HTML XHTML , ,
-. HTML- HTML (, HTML5 HTML4.01 Transitional).
doctype , , .

, 1999 (Netscape4, Internet Explorer5).
, doctype, ,
HTML -,
, .
doctype CSS- -, ,
, . , - , , , .
doctype, HTML CSS.


www.quirksmode.org/index.html?/css/quirksmode.html https://
developer.mozilla.org/en/Mozilla%2527s_Quirks_Mode.

doctype . HTML. HTML5, .


doctype :
<!doctype html>

1.HTML CSSL

45

HTML-, .
- HTML XHTML, HTML 4.01 Transitional XHTML 1.0 Transitional, doctype
.
HTML4.01 Transitional,
doctype -:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

doctype XHTML1.0 Transitional .


, - <html>.
XML-, XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

, doctype-, HTML5.
, . doctype-
, HTML5.

-, Dreamweaver
Expression Web, - doctype- , HTML doctype .

Internet Explorer6, 7 8?
, Internet Explorer 6
. ?
Internet Explorer?
-, , ,
Internet
Explorer, Firefox, Safari, Chrome Opera.
Internet
Explorer 6
Internet Explorer 6.
, Internet Explorer 6
.
2012 -

0,6% ,
1,1%.

(, 2012-
http://gs.statcounter.com

Internet Explorer 6 0,57%


www.ie6countdown.com 6%). Internet
Explorer 6 -
.
,
, ,

, .
, , ,
Internet
Explorer 6.
, , ,
Internet Explorer 6.
, Internet
Explorer 6
- Google Analytics
(www.google.com/analytics),

46

1. CSS


(
).
-
Internet Explorer 6 .
, Internet Explorer 7,

2012 1,16% (http://gs.statcounter.com/
#browser_version-ww-monthly-201108-201208).
Internet Explorer 8 -
. WindowsXP
, Microsoft
Internet Explorer 9
. ,
XP, Internet Explorer 8.

( ,
-, XP
Chrome Firefox.)
StatCounter, 2012 Internet Explorer8
13,65% -
(http://gs.statcounter.com/#browser_versionww-monthly-201108-201208).
NetMarketShare, Internet Explorer 8
26% (http://
marketshare.hitslink.com/browser-market-share.aspx
?qprid=2&qpcustomd=0). Internet Explorer

8 HTML5,
CSS
,
JavaScript.


Internet Explorer
Microsoft
Windows Internet
Explorer. Windows 7
8 Internet Explorer 10.

HTML5 CSS3. , CSS3 , , ,
..
, Windows -. , WindowsXP Internet
Explorer 8 . , Internet
Explorer 8 -
Internet Explorer.
CSS, Internet Explorer 8, ,
.
Internet Explorer 8 , . Internet Explorer8 : . ,
, .
, doctype. , doctype- . Internet Explorer8 , Internet Explorer 5 (!!!).

1.HTML CSSL

47

! Internet Explorer8 Internet Explorer7.


-, Internet Explorer8,
, Internet Explorer8 Internet Explorer7 ,
CSS2.1. ,
Microsoft (Compatibility View
List). , , Microsoft, Internet
Explorer7, Internet Explorer8.
, , .
, Internet Explorer8
. meta-, Internet Explorer8

:
<meta http-equiv= "X-UA-Compatible" content="IE=edge">

<head> , <title>.
Internet Explorer.
"IE=edge" , , , . , .

-
,
. Windows,
Internet Explorer.
,
, Firefox, Safari, Opera Google Chrome.
Apple Mac
Safari
Firefox Google Chrome.

-,
CSS, Internet Explorer8,
.

Internet Explorer6, 7 8
.
,
Windows-
Internet Explorer,
.
,

Internet Explorer.
www.howtogeek.com/102261/howto-run-internet-explorer-7-8-and-9-at-the-same-timeusing-virtual-machines.

,
,

.
.


: Firefox, Opera Chrome.
Apple Safari Windows,
Chrome
(
)
Safari
, (,
Adobe Browserlab).

Windows.
Windows
Internet Explorer

48

1. CSS


Mac OS.
.
Internet Explorer ,
-
, Internet Explorer8
CSS3 ,

Internet
Explorer 8.
: -, ( )
Windows; -,
- Intel,
Windows Apple
Boot Camp (www.apple.com/macosx/features/
bootcamp.html); -,

, VMware Fusion Parallels Desktop.
OS
Windows-.

, Flash-,

, JavaScript.
BrowserStack (www.browserstack.com)
,

-. $19
Windows- Mac-
Internet Explorer, Chrome,
Firefox Safari.
Browsershots (www.browsershots.org)
,
,
Windows Linux.

. ,
Windows, MacOS,
-
.
- -
. ,

.

, Internet Explo
rer 9, 8 7, 6 5.5
NetRenderer (http://ipinfo.
info/netrenderer).
-.
- http://ipinfo.info/netrenderer,
URL- ,
. ,
-,
, .
.

CrossBrowserTesting.com (http://Cross
BrowserTesting.com) $30 (!)
150

.
,
.
,

,
BrowserLab, Adobe
(https://browserlab.adobe.com),
- .
,
Dreamweaver,
BrowserLab
.

( ,
.2.1) - CSS-. , ,
. , CSS -, . CSS ,
.
.2.1 CSS,
-, .

, ,
.
, , ,
, .


CSS, -
() -, , ,
: ,
, 150
. , : , ,
-. : -,
, ,
. , , ..
, , , () ,
.

W3C, - CSS- .
.

50

1. CSS

.2.1. CSS- - CSS-

, CSS- , , , . . ,
-,
:

2.

51

p { color: red; font-size: 1.5em; }

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

.2.2. ( )

. , , -

- : , , . .2.2 p <p>, , <p> , ,


. ,
CSS, - ( ).
. , ,
, .
({)
(}).
.
. . , .
. CSS ,

. , .
, , font-size, margin-top, background-color .. ( : , , ).
CSS. , .

1 CSS.

52

1. CSS

. , ,

, CSS-: , , , , , ..
, CSS-
(red #FF0000), (18px, 200% 5em), URL (images/
background.gif), (top, center, bottom).
, .2.2.
,
. , , ,
. :
p {
color: red;
font-size: 1.5em;
}

p { color:red; font-size:1.5em; }

,
, CSS. ,

.
, , , . , . , color:red, color: red color:
red .

/ :

color: red;
, , .
,
, CSS-, .


, - . , , , .
CSS- .
, , : -
, -.

2.

53

?
CSS
-. , .
, , .

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

,
. .
.



-.
, -,
.
,
CSS ,
-.
(

)
,
, -
.
, ,
.

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

, ,
!
, .
, -
,
, .

54

1. CSS


, ,
-,
CSS-
.
:

-.

,
(
), Ctrl,
, , Reload ()
. Chrome Internet Explorer
Ctrl+F5, Firefox
Ctrl+Shift+R, Ctrl+R Safari,
Chrome.


, -,
<style>
</style> HTML-, <head> -. :
<style>
h1 {
color: #FF7643;
font-family: Arial;
}
p {
color: red;
font-size: 1.5em;
}
</style>
</head>
<body>
/* -... */

<style> <title>, - </head>, .


JavaScript , .
JavaScript CSS, , , ,
JavaScript .

<style> HTML, CSS, , ,


, CSS, HTML.
,
, <style>,
, -.

HTML5 <style>.
HTML XHTML <style>
:
<style type="text/css">

2.

55

, HTML5, . HTML5.

-,
HTML- -.
, . -,
, , .
. . -, .
, ( <h1>), ,
. , Courier . ,
. - ? ,
.


HTML- .
, , .


, ,
CSS. HTML-,
<style>. CSS. , , . , , global.css, site.css, styles.css, ,
, form.css, .

CSS-
,
HTML- -,
HTML W3C (.
. -
doctype .1), CSS-
. W3C

CSS: http://jigsaw.w3.org/
css-validator/.
, HTML-:
URL- - (
CSS-),

56

1. CSS


CSS-,
.
CSS-
, ,

. -,
CSS-, , ,
.
CSS- W3C
-.

- , , ,
<style> ( ). CSS-. CSS, global.css, -, , .

, -,
. - HTML- <link> CSS @import,
. . -,
.

@import , <link> ,
. .

HTML-
HTML- <link>.
, HTML5, HTML4.01
XHTML. , HTML5:
<link rel="stylesheet" href="css/styles.css">

HTML 4.01 ,
type:
<link rel="stylesheet" type="text/css" href="css/styles.css">

, XHTML HTML 4.01,


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

HTML5 ,
HTML5. :
rel="stylesheet" ; -

2.

57

href CSS- .

URL-, ,
CSS-. , src
href ,
-.

- , <link>,
.
CSS- -.
.17.

CSS
CSS HTML
@import. HTML- <style>. :
<style type="text/css">
@import url(css/styles.css);
</style>

HTML 4.01 XHTML, <style> type="text/css", .

HTML- <link> @import CSS,


HTML .
CSS, url
href CSS- . , css/styles.css CSS-. ,
URL, . , url(css/styles.css)
url("css/styles.css") .
@import,
<link>, :
<style type="text/css">
@import url(css/styles.css);
@import url(css/forms.css);
</style>
@import CSS-, , ,

, -, ,
.

, , , ,
-, .5.
CSS-, @import, .
(. .17).

58

1. CSS

:
<style type="text/css">
@import url(css/styles.css);
@import url(css/forms.css);
p { color:red; }
</style>

@import CSS-, . - ,
CSS-,
p ,
style.css form.css.
? ,
<link> . @import
( , , www.stevesouders.com/blog/2009/04/09/dont-use-import). ,
,
<link>.

:
CSS-, , .
CSS-,
CSS-
-.
, www.sawmac.com/css3. ZIP (
). , 02 ( ), 03 ( ) ..

,
. , , .

-,
, ( TextEdit) (Dreamweaver Microsoft
Expression Web Designer) ( ).


CSS HTML- ,
. -, , .

2.

59

, -, . (,
HTML- ,
. , , CSS
Gmail.) - ,
,
, . ,
, .
1. - 02\basic.HTML.
HTML5- , ,
<address>. <h1>.
2. <h1> style="color: #666666;".
:
<h1 style="color: #666666;">

style HTML, CSS, =,


CSS . CSS
, .
color, ,
#666666, ,
( .6). ,
. .
3. basic.HTML .
FileOpen ()
Ctrl+O basic.html 02 (
, ,
). HTML- Preview in Browser
( ),

. HTML: ,
, . , , .
CSS. .
4. HTML-. #666666
font-size: 3em;.
. <h1>
:
<h1 style="color: #666666;font-size: 3em;">

5. . Reload (),
, XHTML-.

60

1. CSS

. ,
? <h1> - .
HTML-.
6. - <h1> , .
- ( inline.html
02_finished).


, CSS,
. , , . <h1> -.
1. basic.html, ,
</title>, Enter <style>.
HTML- (, , ):
< title> CSS 2</title>
<style>
</head>

<style> .
, , ,
, CSS.
<style> , CSS.
2. Enter </style>.
CSS, .
3. <style>
h1 {.
h1 , .
h1 .
CSS- . , . , ,
,
- .
4. Enter }.
,
, , CSS- .

2.

61

5. , Tab color: #666666;.


, ,
color #666666.
.

CSS,
, . . , ,
CSS-,
( ).
, (
h1) .

6. Enter ,
:
f ont-size: 3em;
margin: 0;

,
, CSS .
.
,
( ) .
.
, . ,
-, ,
:
< title>CSS: The Missing Manual -- Chapter 2</title>
<style>
h1 {

color: #666666;

font-size: 3em;

margin: 0;
}
</style>
</head>

7. .
, , ,
, (Reload ()).
.

62

1. CSS

</style> .
, CSS,
- , ,
-.

8. ,
h1, , Enter :
p




}

{
color: #616161;
line-height: 150%;
margin-top: 10px;
margin-left: 80px;

-. ,
, CSS.
.
, CSS .
9. (.2.3). ,
?
, internal.html
02_finished.

. 2.3. CSS ,
, ,

2.

63

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


, ,
, . ,
- ( <h1>), ().
,
: . . , ,
.
1.
styles.css , -,
.
CSS.
styles.css , , , (, , ).
.
2. styles.css :
html {
padding-top: 25px;
background-image: url(images/bg_page.png);
}

HTML, , HTML, . padding-top


. , , , 25
. background-image .
CSS- background-image , .
.8.
3.
styles.css :
body {
width: 80%;
padding: 20px;

64

1. CSS

margin: 0 auto;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
background-color: #E1EDEB;
}

4.

5.

6.

7.

8.

- (<body>),
, . ,
.
, , 80% , ,
( padding),
( margin , .3).
, - .
, , , ,
.
basic.html, , ,
<style> ( <style>).
, . , EditCopy ()
Ctrl+C.
styles.css EditPaste
(), Ctrl+V.
HTML-,
<style>.
styles.css.
HTML- CSS- .
basic.html <style>
CSS-, .
, , HTML. -. ,
-, .6,
, ,
-, ,
, .
-, - Google.
HTML-, (
</title> <head>),
:

2.

65

< link href="http://fonts.googleapis.com/css?family=Gravitas+One"


rel="stylesheet">

, . , , , ,
Gravitas One Google server CSS .
.
9. <link> :
<link href="styles.CSS" rel="stylesheet">

<link> -; CSS- @import, .


<link> . rel
, .

, -, href
. ,
. , -, .
, - ( www.communitymx.com/content/article.cfm?cid=230AD).

10.
.
<h1> <p>, . ,
- ( , <html>), . <body>, 80% .
, . ,
. CSS3 rgba color, ( ).

- (,
), , ,
styles.css , , basic.html.
styles.css .

-, .
11. styles.css.
h1 :
f ont-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;

(
):

66

1. CSS

h1 {
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
color: #666666;
font-size: 3em;
margin: 0;
}

Gravitas
One.

, () , , ,
Google, <link> ( ) font-family ( ).


, -.
12.
02\another_page.html.
- HTML-: h1, h2, p ., .
13.

</title>
Enter.
- -
.
14.
<link>, .
- (,
, ):
< title>Another Page</title>
<link href="http://fonts.googleapis.com/css?family=Gravitas+One"
rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>

15.
.
, -, . , , , .
16.
styles.css CSS- font-family:
"Palatino Linotype", Baskerville, serif; p.
( ):
p {
font-family: "Palatino Linotype", Baskerville, serif;
color: #616161;

2.

67

line-height: 150%;
margin-top: 10px;
margin-left: 80px;
}

- ( ). h2.
17.
} p,
Enter :
h2 {
color: #B1967C;
font-weight: normal;
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
font-size: 2.2em;
border-bottom: 2px white solid;
background: url(images/head-icon.png) no-repeat 10px 10px;
padding: 0 0 2px 60px;
margin: 0;
}

CSS- ,
, border-bottom,
. background ( background-image backgroundrepeat) . , . .6, ,
, .7, , , .8.
, , h1,
h2 p, . , p, , .
- ,
.
18.
H2, Enter } :
. intro {
color: #6A94CC;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin-left: 0;
margin-bottom: 25px;
}

basic.html ,
. , , , .
, HTML-.

68

1. CSS

19.
styles.css basic.html
. <p>, <h1>, class="intro". :
<p class="intro">

intro, ,
18 ( , ). HTML ( ).
another_page.html class="intro"
<p> .
20.
basic.html another_page.htm
. .2.4 another_page.htm
.

.2.4.
CSS-

, -
CSS- .
global.css -. , .
, ? ( 02_finished.)
, <address> (
HTML-
). , , 60, <p>.

CSS- : (
), , , , .. . CSS , , (.3.1).

. 3.1. ,
. h1 ( <h1>)
-

, < >,
HTML-. , , <p>, p.

-, , . , . ,
.
CSS -.

, , .

:
( ) -,
HTML-.

70

1. CSS

-
. , ,
, , ,
p ( <p>). , ( <p>).
CSS, ,
<font> . ,
, HTML- , ,
.
HTML-, CSS- .
CSS-, p, h1, table, img .. , , .3.2, <h2> (
). CSS- h2, ,
.
h2 {
font-family:"Century Gothic", "Gill Sans", sans-serif;
color:#000000;
margin-bottom:0;
}

.3.2. -

. , ?
, .

3. :

71

, p,
, p,
. CSS , .

:
, - , -, ,
, , .
, Microsoft Word,
. , , HTML,
.
, .copyright ,
, .
-, . ,
. <p>,
. , .
, HTML-.
, -
( <h2>) , .3.3.
, - HTML-,

.

<h2> (Wet Sod is Heavy Sod).


.special <h2>.
, . (..3.3) .
, HTML- ( .3.3), <span>.
. HTML- <div>
<span>.

, , , : .copyright, .special. ,
, .
.

CSS.

, , , .

72

1. CSS

.
, .9lives , .crazy8 .
, , .copy-right .banner_image, .-bad
_as_bad.
. , .SIDEBAR .sidebar

CSS -, .

.3.3.
-

, . , :

3. :

73

.special {
color:#FF0000;
font-family:"Monotype Corsiva";
}

-, , .
HTML- -.
, , : . , ,
. class HTML-,
.
, .special -. , class
<p> :
<p class="special">

HTML ( class).
.

, , ,
, .special, . , <span>. , , .special, :
<p>Welcome to <span class="companyName">Caf Soylent Green</span>, the restaurant
with something a little different.</p>

, -.
, , , , .special <h2>, <p> <ul>.

HTML- <div> <span>


.1 <div> <span>
HTML-,
ID-.
,
, , ,
, <div>.
, ,
-

, ,
, (
,

). <div>
:
<div>, ,
-
, </div>.

74

1. CSS


<div>
,
(
, ).
-

,
<div>, (
)
-,
. CSS
3.

, ,
.photo ,
.. ,
, . 3
<div>,
.

, - ,
.
<div> ( ),
:

, .compa
nyName , CosmoFar
mer.com, Disney ESPN:

<div class="photo">
<img src="holidays.jpg"
alt="Penguins getting frisky"/>
<p>Mom, dad and me on our yearly trip
to Antarctica.</p>
</div>

, <span>
ID- .

( (inline)
), .

<p>Welcome to <span class="companyName">


CosmoFarmer.com</span>, the parent
company of such well-known corporations
as <span class="companyName">Disney
</span> and <span class="companyName">
ESPN</span>...well, not really.
</p>

ID-:
-
CSS ID- , , ,
.. , (ID), , HTML-
-. ?
. , ID- . , -
JavaScript . , ID-.

- ID- CSS.
CSS, ,
, ID- ,
, ID- ,
.

3. :

75

- ID- , , , .
ID- . (.),
(#). ,
(.).
, :
#banner {
background: #CC0000;
height: 300px;
width: 720px;
}

HTML ,
id. , <div>
HTML:
<div id="banner">

,
, ID-
#copyright :
<p id="copyright">

(#) .
HTML- # : <div id="banner">.


ID-
.
CSS,
. ,
.
JavaScript-
,
, ID

JavaScript ID.

(, )
..
JavaScript

, ,

, , .

-,
.
, ID-
.
R
,
.
CSS HTML.
id ,
. ,

76

1. CSS


<h2>
. id
<h2>: <h2 id="R">R</h2>.
HTML,
URL index.

html#R.


#R index.html (

,
<a> HTML: <a name="R">R</a>).


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


, . , :
h1, h2, h3, h4, h5, h6 { color: #F1CD33; }

,
( ). , , <h1>, <p> ,
.copyright, #banner.
h1, p, .copyright, #banner { color: #F1CD33; }

-
,
. , ( ) .
CSS ( ..5).


. CSS
* -. , ,
, :
a, p, img, h1, h2, h3, h4, h5 ...... { font-weight: bold; }

* CSS
HTML- -:
* { font-weight: bold; }

3. :

77

, : -, -. , .banner *
, class .banner ( ).
,
HTML- .
CSS, . .


.
,
. , ,
, - . ID- ,
class ID class- ID-
HTML, .
, HTML-. , ,
. CSS , .
,
,
-. : , <a>- ,
. .
<a>- , .

. , , HTML.
, .

,
CSS. ,
.

HTML
HTML, -,
. HTML- <html> . <head> <body>, , <html> () .
, , . <title>
<head>:

78

1. CSS

<html>
<head>
<title> </title>
</head>
<body>
<h1></h1>
<p> <strong> </strong>.</p>
</body>
</html>

HTML- (.3.4).
-. <html>;
, <head> <body>.
, , , . , , ,
-.

.3.4. HTML ,

, CSS
-. , , ,
. .
. , HTML-,
, . .3.4 <html>,
<body> : <h1> , <p> ,
<strong>.
. , .
.3.4 <body> <html>, <p>
<body>, <html>.
.
. .3.4 <html>
<head> <body>. <p> <strong>.
. ,
, . .3.4 <h1> <p>
<body>, <strong> <body>,

3. :

79

<p>,
.
. ,

, .
.3.4 . <head> <body> , <h1> <p>.


HTML,
-, , . , - <h1>
<strong>. , , , -,
. :
<strong> -. , .
:
h1 strong { color: red; }

<strong>, <h1>, , -
. , ,
.StrongHeader. HTML,
<strong> . ,
, .
-,
, - - HTML.
, (
, ), ,
. .3.5
(<a>) , , . ,
:
li a { font-family: Arial; }

- () <html>.
. , <a>
<strong>, <p>, <body> <html>.
: (a), (li), Arial. , .
<a>, (..3.5):

80

1. CSS

ul li a
body li a
html li a
html body ul li a

.3.5. , -

,
, , , .
.
.

, , ,

, . ,
(body li a) ul . ,
<a>, <li>.
<a>, <em>, <a> <strong> <li>, ..
. , ,
( intro).
:
.intro a { color: yellow; }

:
(a) (p), intro.

3. :

81


,
HTML-, . , , <div>-, . HTML
:
<div>
<h2>Our company is great!</h2>
<p>More information about why our company is so great</p>
<h2>Another news item</h2>
<p>Information about the other news item</p>
<h2>and so on</h2>
<p> and so on </p>
</div>

class <div>- <div class="news">,


, - HTML-
. ,
.news h2 { color: red; }
.news p { color: blue; }

<h2>- , . ( ) . , , ,
- .
div-, div- class:
<div class="contact">
<p class="name">John Smith</p>
<p class="phone">555-555-1234</p>
<p class="address">1234 Elem St</p>
</div>

:
.contact .name { font-weight: bold; }
.contact .phone { color: blue ;}
.contact .address { color: red; }

:
p.intro
, ,
HTML-, , . p .intro , ,
, intro <p> (<p class="intro">).
, :
p .intro { color: yellow; }

82

1. CSS

, , .intro, ,
, <p>. , ,
. , ,
HTML- ( , .intro p.intro).


-, ,
.
, . CSS .


, , , -.
a:link , -
, . .
a:visited , - . . ,
, , . (, ,
.9.)
a:hover ,
. (),
,
.
, :hover
-, . ,
, <p> <div>, -
, - . a:hover

p:hover, .
, highlight,
highlight:hover.
a:active ,
-. , .
.9 ,
(,
..).

-,
. . , , , , .. -

3. :

83

, , ,
. ,
. ,
.


,
, . . CSS
:first-letter :first-line. - ,
.
:first-letter , ,
.
:first-line
-
( .6,
).

CSS3 . CSS2.1
:
:first-letter
CSS3, , :hover, ,
. :first-letter :first-line ::first-letter ::first-line. , ,
. , Internet Explorer8
, , .


CSS ,
.
, .
:focus. :focus :hover ,
:hover , , :focus
( () -). . , ,
.
:focus c . , ,
, ( ,
, <textarea> :focus).

84

1. CSS

- , :
input:focus { background-color: #FFFFCC; }

:focus , .
-, , CSS, .

, CSS- , - www.qu
irksmode.org/css/contents.html.

:before. :before , : ,
-. ,
! , . HTML- - - :before. ,
-. ,
! ,
. , ,
CSS :before.
(, .tip)
, , <p
class="tip">. :
p.tip:before {content: "!" }

, .tip <p>,
!.
, -,
, . HTML- .
,
. ,
, :before.
:before Explorer 8 ,
( :after). .8.
:after. - :before
, :after . , .

:before :after :first-line :first-letter. , CSS3 , :before :after CSS3


::before ::after. , ,

3. :

85

:before :after, Internet Explorer8.

::Selection. , CSS3, , . ,
, .
. Internet Explorer . , . , ,
:
::selection {
color: #FFFFFF;
background-color: #993366;
}

,
, color background-color, , , , , . ( CSS !)

selection ,
. , ::selection , :selection .

Internet Explorer 9, Opera, Chrome Safari,


Internet Explorer 8 Firefox.
Firefox :
::-moz-selection {
color: #FFFFFF;
background-color: #993366;
}

Firefox ,
, . (
, , , .7.)
- ,
, . ,
, ,
p- ::selection:
p::selection {
color: red;
background-color: pink;
}

86

1. CSS

. , - http://gallery.theopalgroup.com/
selectoracle/. ,
- .


CSS
. ,
-, , , <img>. ,
title, .

title HTML ( ) -. . http://webdesign.


about.com/od/htmltags/a/aa101005.htm.

. , <img> title:
img [title]

(img); [title].
CSS :
. , .photo[title] .photo HTML- title.
, ,
, . ,
, URL, :
a[href="http://www.cosmofarmer.com"]{
color:red;
font-weight:bold;
}


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

3. :

87

.
(,
checkbox), ,
- , . , .
, ,
( ), : ,
. , , ,
http:// .
:
a[href^="http://"]

^= ,
, http://. , http://www.google.com
http://www.sawmac.com .

SSL-, https://. , , :

a[href^="http://"], a[href^="https://"]

, ,
.
. , ,
PDF-. PDF, , ,
<ahref = "download_instructions">. , ,
:
a[href$=".pdf"]

:
a[href$=".pdf"] {
background-image: url(doc_icon.png) no-repeat;
padding-left: 15px;
};

, ,
. : $ .
Word ([a href$=".doc"]), ([a href$=".mov"]) ..
, ,
. , . , ,
. , .headshot, <img>. ,
, .

88

1. CSS

, ,

headshot, mcfarland_headshot, mccord_headshot .. headshot, src <img> . -

:
img[src*="headshot"]

, src
headshot. .


, , CSS , (>)
. , body > h1 <h1>, <body>.
, (
), . .3.6 <h2>. body h2 ,
<body>. <body>. <h2>
<div>, .
<h2> , ,
, . <h2> body > h2. <h2>, div > h2.
CSS3
.
HTML.
:first-child. HTML, ,
: ,
. (, .3.6 <h1>, <div>, <h2> <ul> <body>.) :first-child
, , .
.3.6, <h1> ,
:
h1:first-child

<h1>,
. .3.6 , <h1>, . , <body>. :first-child . ,
<h2> <div>, .3.6, <h1>, h1:first-child
<h1>, , <body>,
<h1>, div- ( <h1>
div).

3. :

89

.3.6. () HTML- ()

:last-child. :first-child,
. ,
ul :last-child
(.3.7). CSS
. ,
.
:nth-child. . ,
(..3.7). , , .
odd (),
even (),
. ,
, :
tr:nth-child(odd) { background-color: #D9F0FF; }
tr:nth-child(even) { background-color: #FFFFFF; }

90

1. CSS

. 3.7.


(.3.8). :nth-child() . , , , . , ,
( <td>) ,
(..3.8). :
tr td:nth-child(3n+2) { background-color:#900; }

n ( 3) ,
. , 3n
, 4n .
(+2 ) , , , +2 , , +5 , . , :nth-child(5n + 4)
, .

. 3.8.

3. :

91

, , <td> , ,
, . !


CSS3 , , ,
HTML- . , ,
,
, <h2>,
, <p>. :first-child
, ( <h2>).
( <p>) ,
- , ,
, :first-of-type.

:last-child, :first-of-type :nth-child() ,


Internet Explorer 9 . Internet Explorer 8 .

:first-of-type. , :first-child,
, . , ,
sidebar.
:
.sidebar p:first-of-type

p p:first-of-type. ,
.
:last-of-type. , :last-child,
. , div
,
- , (, ,
). :
.sidebar p:last-of-type

, . , p:first-of-type ,
.

:nth-of-type. , :nth-child(),
, .
. <img>
, <p>- <img> . ,
, .3.9, :

92

1. CSS

img:nth-of-type(odd) { float: left; }


img:nth-of-type(even) { float: right; }

. 3.9. :nth-of-type(),
, ,

, :nth-of-type() (odd
even) (, 2n +1), :nth-child().
:nth-of-type() :
tr:nth-of-type(odd) { background-color: #D9F0FF; }
tr:nth-of-type(even) { background-color: #FFFFFF; }

CSS-,
HTML-, ! ( ,
Internet
Explorer 8 .)



? ,
-.
?

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


-,

. .

(..3.6).



, , .mainList.
sans-serif,

-, , .

3. :

93


Times .

-
.

: ul.mainList > li > ul > li. (


, ul li,
: ,
.)

.mainList
<ul>: <ul class="mainList">.
(ul.mainList
> li)

.
<li>, <ul>
.mainList.
<li>-
<ul>-


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

:not().


-
HTML. ,
. , , HTML .
.3.6 <div> <h1>, <p> <h2> ..
, , ,
, .
, , <p>, .

.
+ . , , <h2>,
h2+p ( , h2+p
). ( p) ,
, ,
<h2>.
,
. (~) : . , h2 + p <p>-,
<h2>, h2 ~ p <p>-,
( ) h2. ,
, CSS, , .

94

1. CSS

:not()
:not(), ,
-, . , <p
class="classy"> CSS,
:
.classy { color: red; }

, , ,
classy? :not(). ,
, CSS- . :
p:not(.classy) { color: blue; }

,
classy.
:not() .
, , , , -:
a[href^="http://"]

, , , , , ,
URL-, URL, http://.
,
, URL. URL-
.
, ( , WordPress)
URL. , , , ,
:not(). , ,
mysite.com. , ,
, mysite.com.
:
a[href^="http://"]:not([href^="http://mysite.com"])

, :
, href http://, ,
http://mysite.com. ,
^= . :
a[href^="http://"]:not([href*="mysite.com"])

*= ,
URL, mysite.com, . , http://www.mys
ite.com http://mysite.com, .

3. :

95

:not() .
:not() .
, ( html p), (*), ( .footer), ID (, #banner) (:hover, :checked, :first-child ..).
, :
. footnote:not(div)
img:not(.portrait)
div:not(#banner)
li:not(:first-child)
- ( div p a),
( ::first-line), ( h2 + p).
:not()-. , -

a[href^="http://"]:not([href*="google.com"]):not([href="yahoo.com])

, :not( ) .

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

-,

,
.
.2 .
,
.
-,
.

,
-.


.

,
. ,
. :

-,
,
,
.2.

96

1. CSS

1. selector_basics.html .
HTML-.
(.3.10). -, .
CSS- - .
.

. 3.10. HTML-

2. </title>,
Enter <style>. Enter </style>.
.
, .

3. :

97

,
CSS. HTML- (,
, ):
< title>Selector Basics</title>
<style>

</style>
</head>

, , ( , ).

HTML 4.01 XHTML ( HTML5), style


type="text/css"attribute:
<style type="text/css">

3. <style>, p {. Enter }.
, ,
. , HTML-, .
, <p>.
4. ,
CSS, , ,
, :
p




}

{
color: #505050;
font-size: 1em;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
margin-left: 100px;

Enter, CSS- . , ,
CSS ( , , ).

-, .
, . 1em 100px
, .6.

.
5. , .
, -

98

1. CSS

(serif) Times. CSS- ,


, - ,
sans-serif .


- . , , . <h1>, <h2> ..,
.
1. HTML- selector_basics.html.

<p>.
2. <p>,
Enter :
h 1, h2, h3 {
}.

, .
<h1>, <h2> <h3> -.
3. { } CSS-:
c olor: #BD8100;
font-family: Baskerville, "Palatino Linotype", Times, serif;
border-top: 2px solid #86A100;
padding-top: 7px;
padding-left: 100px;

,
, ,
padding. , , , ,
.
4. .
<h1> - <h2> <h3>
,
(.3.11).


, ,
, . , <p> - , ?
.
1. HTML- selector_basics.html.
.

3. :

99

. 3.11.
, -

2.
h1, h2, h3, Enter :
. note {
}

note () . : , . ,
- (), .

100

1. CSS

3. { } :
c olor: #333;
border: 2px dashed #BD8110;
background-color: #FBF8A9;
margin-top: 25px;
margin-bottom: 35px;
padding: 20px;

, backgroundcolor , , . ,
. :
. note {
color: #333;
border: 2px dashed #BD8110;
background-color: #FBF8A9;
margin-top: 25px;
margin-bottom: 35px;
padding: 20px;
}

-, .
, , HTML.
4. HTML- - <p>,
Note: <strong>.
, class,
, .note.
5. p <p>, ,
class="note". HTML- (
):
<p class="note"><strong>NOTE:</strong> Ut enim ad

, : class=".note".
, HTML
. ( <h3>
Not Me!).

, , ,
<p>. , , <h2>, HTML-
: <h2 class="note">.

6. - .
(.3.12).

3. :

101

.3.12. ,
-

- .3.12, , -
. . , ,
/
.
, , , . .


selectors_basics.html note . Note:, ( <strong>). ,
- ?
<strong>, <strong> ,
, .
, , .noteText <strong> . ,
.

102

1. CSS

,
<strong>. , .
1. HTML- selector_basics.html.
.
.note Enter.
2. .note strong {. strong
, . <strong> , , .note.
<strong>, , , , .
3. Enter, color: #FC6512;, Enter ,
.
.
:
. note strong {
color: #FC6512;
}

4. . Note:
.
CSS.
- , HTML- .
,
.

ID-c
-. , .note , .
ID-c , ,
, . , - ID- (
). , ,
.
,
-,
. ID <body> .
1. HTML- selector_basics.html.
.note strong .
2.
, Enter #article {.

3. :

103

ID-c #.
-.
. , , ,
, , , ,
.
article (,
), ID <body>.
3. Enter :
b ackground-color: #FDF8AB;
background-image: url(images/bg_page.png);
background-repeat: repeat-y;
background-position: center top;
padding: 0;
margin: 0 auto;
width: 760px;

,
( ),
, ().
4. , .
:
#article {
background-color: #FDF8AB;
background-image: url(images/bg_page.png);
background-repeat: repeat-y;
background-position: center top;
padding: 0;
margin: 0 auto;
width: 760px;
}

, , -. , id HTML -, , .
5. - <body> id="article", ( ):
<body id="article">

<body> , #article.
CSS, .
<body> , ;
article .

104

1. CSS

body ,
. ID, ID.
6. . - .
(!), . , background-image (
).


,
( ,
,
HTML).
1. HTML- selector_basics.html.
.
,
#article Enter.
2. h1+p {.
, <h1>,
. .
, .
3. Enter :
c olor: #FF6600;
font-size: 1.2em;
line-height: 140%;
margin-top: 20px;

, . line-height ( ) (
leading).
4. , Enter .
:
h 1+p {
color: #FF6600;

3. :

105

font-size: 1.2em;
line-height: 140%;
margin-top: 20px;
}

, ,
, ,
(.3.13). HTML, ,
, <h1>.

.3.13. -

Internet Explorer6 , .

-
03_finished .

, .
( ) .

: , . ,
HTML. , , CSS-
.

?
, CSS-, -, . , <p>
<body>. , , <body>, <p>. , CSS- (..3) <body>, color (, - ). ,
<body>, , , .
, , <h1>, <h2>, <p>,
- .
, ( ),
. , , <em> <strong> <p>,
, <body>.

.3, , , . , <p>, <body>, . <body> . (


) ( ).

, ,
. ,
, , , <em>, , <a>, .
, Arial
24 , , <em>
. .
, .4.1, , , , . .

4.

107

4.1.

, - ,
.4.1, . , <strong>, <em>
, , . ,
.

108

1. CSS

,
. (. : .3) - ,
. , .3.


, . , - .
,
<body> ( ). ,
- :
body { font-family: Arial, Helvetica, sans-serif; }

-. , , , <div> (. :
.3) , , ,
, , HTML5,
, <header>, <aside>, <footer>
<article>. , CSS , -. , <div>, <header>, <article>
. , , <p>, <h1>
.., .


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

CSS-, , .., 1.

, .
, , -

( (), () ), .

4.

109

. , ..
- <body>,
. <h1> <h2>.
, <body>, - .

.4.2. , (),
,

110

1. CSS

, . .5 , .

, . , CSS- - (, )
(, <body>), , (
, <ul>).

, , ,
, .
.

:
, , , .
, .
,
-. , ,
.
04 , .2.


, , , .
, .
1. inheritance.html HTML-.
.

, , .2.
CSS- -, , , .

2. </title>.
Enter <style>. Enter </style>, . , CSS.
, <p>.

HTML 4.01 XHTML ( HTML5, ),


style type="text/css":
<style type="text/css">

4.

111

3. <style>
p {. Enter }. <p>,
-.
4. color: #FF6600.
:
p {
color: #FF6600;
}

. . .
5. , .

(.4.3).

.4.3. , , , <p>,
. ? ( ).
,

, <p> .
<p> . , , <em> <strong>

112

1. CSS

, ,
.
, , .
:
<em>, <a> <strong> <p>. , , , p em
p strong, .
, ,
, , . , , . .5.

-
.
CSS- . , -.
1. HTML- inheritance.html.
<p>.
2. p. Enter .pageStyle {. Enter }.
<body>.
3.
:
f ont-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 18px;
color: #BD8100;
width: 900px;
margin: 0 auto;

:
. pageStyle {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 18px;
color: #BD8100;
width: 900px;
margin: 0 auto;
}

, .
(
).
4. <body> (
) class="pageStyle".

4.

113

<body> : <body class="pageStyle">.


, .pageStyle.
, <body> ( ),
, , .
5. - .
.4.4, - , ,
. , , <body>,
-
.

.4.4. , <body>, ,
,
-

, : ,
, , ,
. CSS ,
? <body> <p> ?

114

1. CSS

pageStyle <body>, ?
. <body>
. ,
, <body>
<body> . ( ID),
<body> .

, ? <p> , , , , <body>.
, .
, <p>. .


, .
-. () . ,
, ( ) . , .
1. HTML- inheritance.html.
<p>.
2. p,
(color: #FF6600;) Enter .
-.
3. .
:
p




}

{
color: #FF6600;
margin-left: 50px;
padding-left: 20px;
border-left: solid 25px #BD8100;

margin-left 50,
padding 20.
4. .
, 50
, <p>. ,
<p> (, <em>),
(.4.5). : - , <em> <strong>
50!

4.

115

4.5. CSS- (, )

, , ,
p : p, p *, . p, . p * : <p>
(*, , ).

CSS- 1.

-, ,
04_finished .

,
: - ? - CSS, , .
. , <body>
, , . , CSS- <body>, <p> .
, : CSS- ,
- (, <p> ).
, - , . ,
. .

, ,
(.ID-: - .3).
-, -
.
.
CSS, .
, CSS.


, , -,
. , ,
,
, , . :
- ( -)

5. :

117

- (,
class, <p>, ).


, CSS , - (, ,
)
. -.
(, ,
<p>), , ,
. : <body>
, <p> , <a> . , <a> <body> <p>. , , .
, .5.1, : <body>,
<p> <strong>. CSS- :
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
p { color: #F30;}
strong { font-size: 24px; }

.5.1.

<strong> , , , <body>.
<strong> -,
font-family <body> color . , <strong>
CSS-, 24. . , <strong> , :

118

1. CSS

strong {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: color: #F30;
font-size: 24px;
}

-
, .
CSS? , body .
.5.1 <strong> , ,
. - <body> <p>.
, <strong>. <strong> body, . <strong>
? , : .
, .
, <body>,
. , -
. <p> <strong> , ,
. <p> .
, , ,
- (.5.2).

.5.2. ,

5. :

119

.5.2 <em> <body> <p>.


<body> <p> , <em> , - <p>.
, (..5.1, 1).
, , .
CSS-, <table>,
, <td>, ,
(<td>), , ,
<td>, -.


, , CSS. ,
. , <body>, <p>
<strong>. <p> <body>,
<strong> , .
<strong>, ,
(..5.2, 2). , ,
, .
, .
, , , - .
,
<a>. , .

, <a>
, .9.


. , .
: -
<p>. , <p>. .
, <p>
. ?
, ,
. : . , .
. , <h2> .leadHeadline. HTML- : <h2 class="leadHeadl
ine">Your Future Revealed!</h2>. <h2> .

120

1. CSS

, , .

(. .3). , .leadHeadline, .secondaryHeadline, .newsHeadline .leadHeadline


. leadHeadline
.
ID-.
ID- #banner .news . HTML- : <div id="banner"
class="news">. <div> .
- ,

. .
,
.
-

. , (. : .3). ,
- <div> (: <div id="mainContent">)
: <p class="byline">. :

yy
yy
yy
yy

#mainContent p;
#mainContent .byline;
p.byline;
.byline.

- ,
, .
. , ,
-
. HTML- :
<p class="byline">Written by <a href="mailto:jean@cosmofarmer.com">Jean
Graine de Pomme</a></p>

-
:
a { color: #6378df; }
p a { font-weight: bold }
.byline a { text-decoration: none; }

<a> - ;
<a>, <p>, ;
, , byline.

5. :

121


, <a>. .
, :
, . ,
-
.

, .
, .
, . .

:

. , , , font-family?
?
, , . ( )
, .
, , , . , CSS .
()
: , , ID- .. .
1.
10.
ID- 100.
(inline) 1000.

, ,
. , .
, , www.w3.org/TR/ /css3selectors/#specificity.

, .
, :
<img> (=1);
.highlight (=10);
ID- #logo (=100).
- HTML-: <img id="logo" class="highlight"
src="logo.gif" />. (, border), ID- (#logo),
.

122

1. CSS

(, :first-child)
1. (, :link)
10 (. .3).

,
content p h2 strong, :

(.5.1).
5.1. ,
,

p
.byline
p.byline
#banner
#banner p
#banner .byline
a:link
p:first-line
h2 strong
#wrapper #content .byline a:hover

0
0
0
1
1
1
0
0
0
2

0
1
1
0
0
1
1
0
0
2

1
0
1
0
1
0
1
2
2
1

1
10
11
100
101
110
11
2
2
221

, . ,
, , #banner, ,
.

: .
. . <p>
.
. .
HTML-:
<p class="byline">Written by <a class="email"
href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p>

-,
, :
p .email { color: blue; }
.byline a { color: red; }

, 11 (10 1
), <a>. .
? ,
.

5. :

123


: -
, , -?


. ,

- -,

.
-
.

CSS-,
(
Mac) (
, , )
Inspect Element (
). (
-), HTML-
HTML-.

( Safari,
Show Develop Menu (
) ,
Preferences Advanced
().)
,
. ,
CSS-,
,
.
, ,
(
) ( ).
, ,
.
,
,
.

CSS, https://developers.
google.com/chrome-developer-tools/docs/elementsstyles http://webdesign.tutsplus.com/tutorials/
workflowtutorials/faster-htmlcss-workflow-withchrome-developertools/.

, :
.byline a { color: red; }
p .email { color: blue; }

. C .byline
a p .email, .
, , (
) .
- ( HTML-). , <style> (..2), HTML, <link>,
( , ,
: ). :
- . , ,

124

1. CSS

, .

, @import,
, <style>, . ..2.


CSS
.
,

-.
!important.
. :
.nav a { color: red; }
a { color: teal !important; }

,
.nav, ,
, .nav ,
, <a>. !important

,
. ,
-,
nav, -
.
, !important
, ,
!important
, .
:
!important,
,
.


, CSS- ,
. , ,
,
. .
,
.
.
!important ( ), . ,
, . .


.5.3 , . , !important - . .

5. :

125

.intro , #sidebar p. , .intro


. , #sidebar .intro.

.5.3.
,

.5.3 <div> #sidebar. , #sidebar p .intro ( 101 10). :


.intro , , .5.4: #sidebar p.intro.

, , : #home #main #story h1.
, .


-, . , styles.css, . CSS- :
<h1>, .. ,
, () <h1> ,
. ,

126

1. CSS

, . , styles.css,
(<h1>, <p> ..).

.5.4.
,

, , . , styles.css :
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000;
}

, <h1> -
.
:
h1 {
font-size: 36px;
color: red;
}

<h1>
Arial ( ),
36 (
).

5. :

127

, HTML- <head>. , ,
.

. ,
home.css, - styles.css. home.css styles.css,
. home.css styles.css HTML- -:
<link rel="stylesheet" href="css/ styles.css">
<link rel="stylesheet" href="css/home.css">

- <body> - . ,
-, .review, .story, .home, . .3.


, - ID- . , ID-
,
. ,
.
. , HTML:
<div id="article">
<p>A paragraph</p>
<p>Another paragraph</p>
<p class="special">A special paragraph</p>
</div>

, div- article , :
#article p { color: red; }

, special . , .
.special { color: blue; }

, ,
, - : ID- 100, 10, 1. #articlep (

128

1. CSS

101), , :
#article .special {color: blue; }

, . -, , -,
, special - article. , HTML-
<p class="special">A special paragraph</p> -
, .
, .
, ,
. HTML :
<div id="article">
<p>A paragraph</p>
<p>Another paragraph</p>
<p class="special">A special paragraph</p>
</div>

CSS :
.article p { color: red; }
p.special { color: blue; }

.article p 11. p.special 11 (


)
special. , HTML -
, , , ,
, .
, #home #article #sidebar #legal p #home
#article #sidebar #legal p.special.
, . ,
,
.

, , http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class.


, : , <h1> <h2>, ,
;
, . HTML

5. :

129

, : , HTML .
, .
, , Safari Firefox padding , Internet Explorer margin.
,
. -
, , , Firefox
, Internet Explorer .
.
-
. ,
.
(CSS-).
.
, ,
.
, - .
:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu,
nav, section {
display: block;
}
body {
line-height: 1.2;
}
ol {
padding-left: 1.4em;
list-style: decimal;
}
ul {
padding-left: 1.4em
list-style: square;

130

1. CSS

}
table {
border-collapse: collapse;
border-spacing: 0;
}

CSS- , (Eric Meyer), http://meyerweb.com/eric/tools/css/reset.

,
. , 100%- .
(.5.5). , , HTML-.

.5.5.
, HTML

(article, aside, details)


,
HTML5. (body) line-height ( ).
line-height .

5. :

131

. reset.css 05 www.sawmac.com/css3, . .
, , .17 17.

( <ol> <ul>)
( ), ( ).

:

,
, .
, , . , ,
.
. , -
CSS-. , ,
.
, . , .2.
05.



, .
1. cascade.html 05 (..5.5).
: ( )
. ,
CSS- .
2. main.css 05 .
, cascade.html.
: ,
. ,
.
, .
3. .main .sidebar ,
.5.5. HTML <div>,
. , ,
<div> , (
, .3).

132

1. CSS

,
.
4. styles.css
} .sidebar:
body {
color: #B1967C;
font-family: "Palatino Linotype", Baskerville, serif;
padding-top: 115px;
background: #CDE6FF url(images/bg_body.png) repeat-x;
width: 800px;
margin: 0 auto;
}
h1 {
font-size: 3em;
font-family: "Arial Black", Arial, sans-serif;
margin-bottom: 15px;
}

,
.
cascade.html (.5.6), ,
, , .

.5.6. : <h1>
<body>,
<h1>

5. :

133

font-family color, , ,
Arial .
, , ,
, .
<h1> ,
, <body>. <h1>
, <body>.


. -,
( ) ,
, -.
1. styles.css :
h2 {
font-size: 2.2em;
color: #AFC3D6;
margin-bottom: 5px;
}

, <h2> . , , <h2>
.
, .
2. styles.css,
<h2> Enter, . :
. main h2 {
color: #E8A064;
border-bottom: 2px white solid;
background: url(images/bullet_flower.png) no-repeat;
padding: 0 0 2px 80px;
}

,
<h2>,
main. <div>
. ,
main, <h2> <div>.
, .2 17. . .
3. (.5.7).

134

1. CSS

.5.7. h2 .main h2
, .main h2

, (
) , ,
, .
.main h2 ,
h2, - ( color) .main h2 . ,
h2, .main h2 .
, .main h2 ,
h2.


CSS , , ,
, .
, , CSS, .
1. styles.css.

.

5. :

135

2. :
. main p {
color: #616161;
font-family: "Palatino Linotype", Baskerville, serif;
font-size: 1.1em;
line-height: 150%;
margin-bottom: 10px;
margin-left: 80px;
}

, , (
line-height) .
, , . , , . -
.
3. :
. intro {
color: #6A94CC;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin-left: 0;
margin-bottom: 25px;
}

, , . , , HTML-.
4. cascade.html -. <p>,
<h1>CSS: The Missing Manual</h1> <div class = "main">,
:
<p class="intro">

5. .
. , .intro
, .main p . ,
.intro.
.intro, ,
.
6. styles.css .intro
p.intro.
, p .intro . , :
.main p , p.intro
. 11,
p.intro .main p ,

136

1. CSS

. (
, .main .intro.)
7. (.5.8).

.5.8.

! , ,
. , ,
.
CSS.
, 2.

CSS

6.
7. , ,
8. -
9.
10.
 ,
CSS
11.

- . , ,
, Flash-, -
.
Facebook, , , , ,
Twitter. CSS
-, .
CSS , , , , ,
- (,
, ), -, (.6.1).

- , CSS -.
, , - (.6.1, ). ,
(.6.1, )


, , , .
CSS- font-family , . , ,
Arial.
p font-family:
p {
font-family: Arial;
}

6.

139

.6.1.

140

2. CSS

font-family ,
, . , , -
Arial, - ( -
Times New Roman). -
, .
- -,
, . - font-family, CSS-, @font-face -
. - ,
.
, . , ,
, -, ( ).
. ,
(,
), - (,
).


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

, Arial. ,
. Helvetica ,
,
sans-serif.
(sans-serif serif), .
, .

6.

141

CSS-
(..2). , p { font-family:
Arial , Helvetica, sans-serif; }. , ,
CSS- .

,
:
font-family: "Times New Roman", Times, serif;

, .
(Serif). (
) . , ,
. Times, Times New
Roman, Georgia.
.6.2.

.6.2. Windows () Macintosh ().


.
.
Arial, Helvetica Verdana.
.6.3.

142

2. CSS

.6.3. Windows () Macintosh ()

, - , . ,
. , .
.
(, ).
( ).
.6.4. Courier
, . Lucida Console Windows Macintosh, Monaco Macintosh.

.6.4. Windows () Macintosh ()

6.

143

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

Arial Black Impact:


. ,
, font-weight font-style normal. , ,
, .

-
CSS :
, font-family. , , , . , ,
-. -
-.
CSS- - CSS-:
@font-face, -

, , . ,
CSS- , , ;
font-family, - ,

, . ,
@font-face, ,
CSS- font-family.
- . ,
,
.

- Google.
, .


, Internet Explorer -,
5- ( 12 !). ,

144

2. CSS


.
, - , .
EOT (Embedded Open
Type Open Type).
Internet Explorer 8.
- .
, . , ( ,
).

, .
EOT. Embedded Open Type Internet Explorer.

EOT-, , , FontSquirrel.
True Type Open Type. Fonts ,

TTF (True Type)


OTF (Open Type). .
, -.
-: Internet Explorer 9 , Firefox, Chrome, Safari,
Opera, iOS Safari ( 4.2 ), Android Blackberry Browser.
WOFF. Web Open Font Format -

, -. WOFF-,
, TrueType Open Type. , WOFF- . WOFF- , Internet Explorer 9 , Firefox, Chrome,
Safari, Opera, Blackberry Browser iOS Safari 5 . Android. , WOFF-, ,
Android Internet Explorer 8, .
SVG. Scalable Vector Graphic ( )

. , ( ,
). SVG- .
SVG- Internet Explorer, Firefox. , SVG, , , , TrueType,
WOFF.
SVG
iOS Safari 4.1 .

6.

145

, ,
, . ,
( ) ,
, . , , ,
True Type .

.
, , , . , ,
, . .

-
-
.
, .
TrueType
. , , ,
, .
, Adobe,
-. ,
, ( ),
.
, .
, , - -. ,
,
, .

, ,
Google Fonts TypeKit, - Adobe (
).

-
- :
, ,

146

2. CSS

, (EOT, WOFF, TrueType


..). , , - , , .
-.
The League of Movable Type (www.theleagueofmoveabletype.com). , , ,
.
League Gothic .
Exljbris Font Foundry (www.exljbris.com). : Museo, Museo Sans Museo Slab.
Fontex.org (www.fontex.org). , .
(
-), , .
The Open Font Library (http://openfontlibrary.org). 152 ( ),
- ( 152).
Font Squirrel (www.fontsquirrel.com). -, 800. Font Squirrel
, @font-face Kits
, , CSS, @fontface-
( , ). , Font Squirrel
TrueType Open Type
, EOT, SVG WOFF.
.
Google Fonts (www.google.com/webfonts). Google
- . .


, ,
( TrueType (.ttf) Open Type (.otf)). TrueType
Open Type . ,
WOFF
, TrueType.
,
EOT, WOFF TrueType. c
iPhone Safari 4.1 , SVG.

- NetMarketShare, Safari 4.1


2% -.
www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=1.

6.

147

, Font Squirrel ,
. @font-face Generator ,
HTML- CSS.
Font Squirrel @font-face Generator, .
1. TrueType (TTF) Open Type (OTF).
, ,
. ,
-. , .
2. @font-face Generator www.fontsquirrel.com/
fontface/generator.
,
(.6.5).

. 6.5. ,
Font Squirrel Optimal ()

148

2. CSS

3. Add Fonts ( ) (. .6.5, 1).


Select files ( ).
4.
Open ().
Font Squirrel.
5. (. .6.5, 2).
yy Basic () EOT, WOFF
SVG.
yy Optimal () ,
, , .
yy Expert ( ) . , , . ,
,
, Q.
, ,
Optimal ().
6. Yes, the fonts I'm uploading are legally eligible for web embedding
(,
-) (. .6.5, 3).
, ,
-
. ,
, .
7. Download Your Kit ( ) (. .6.5, 4).
. Font Squirrel
. , , , , CSS- . , ,
EOT, TTF, WOFF SVG.
, CSS @font-face.
Optimal ()
, .
Expert ( ). , .

6.

149

@font-face
.
, . -
, fonts, _fonts webfonts. , CSS-,
. , ,
, .
- CSS-
@ font-face. ,
. @font-face . , , League Gothic.
fonts True Type League_Gothic-webfont.ttf.
@
font-face :
@font-face {
font-family: "League Gothic";
src: url('fonts/League_Gothic-webfont.ttf');
}

, font-family, , .
@font-face font-family
. ,
. , ,
League Gothic . :
p {
font-family: "League Gothic";
}

, , @font-face.
, @font-face.
,
.

, src, ,
.
url( ). ,
HTML, , JavaScript.
, , _styles
my_font.ttf _fonts. . ,
../_fonts/my_font.ttf.
@font-face:
@font-face {

150

2. CSS

font-family: "My Font";


src: url('../_fonts/my_font.ttf');

, ,
TrueType. ,
, @font-face.
, @font-face . , - , , . , , League Gothic.
:
@font-face {
font-family: 'League Gothic';
src: url('fonts/League_Gothic-webfont.eot');
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/League_Gothic-webfont.woof') format('woff'),
url('fonts/League_Gothic-webfont.ttf') format('truetype'),
url('fonts/League_Gothic-webfont.svg') format('svg');
}

- , , , -
Internet Explorer .
.
2 . font-family
, , ,
CSS-.
3 Internet Explorer 9, (Compatibility mode), , Internet Explorer9
Internet Explorer 8.
Internet Explorer 9, -, Internet
Explorer 8 , Internet Explorer 9. Internet
Explorer 9, , , .
4 src, @font-face .
EOT, ,
.eot ?#iefix. ,
Internet Explorer,
Internet Explorer 68. .eot URL,
Internet Explorer 8
.
URL :
format('embedded-opentype')

URL .

6.

151

57 .
src, ,
. , src, URL,

( , ):
url('fonts/League_Gothic-webfont.woof') format('woff'),

src ,
src ( 7 ). , @font-face .

(,
Chrome WOFF, TrueType SVG),
. , . , Chrome ,
EOT, ,
WOOF.
TrueType SVG. , , , . WOOF , , SVG , ,
: EOT, WOOF, TTF SVG.

@font-face
-. : http://www.fontspring.com/blog/further-hardening-of-the-bulletproofsyntax http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/.

-
-
@font-face.
, - ,
, . ,
font-family , @font-face. ,
@font-face League Gothic ( 2).
, .
h1 League Gothic, :
h1 {
font-family: 'League Gothic';
font-weight: normal;
}

font-weight.
<h1> .

152

2. CSS

,
. .
font-weight normal
League Gothic , , . - .
, -. . :
h1 {
font-family: 'League Gothic', Arial, sans-serif;
font-weight: normal;
}

- , .
, , @font-face ,
, (
). , ,
: http://css-tricks.com/flat-icons-icon-fonts/, http://css-tricks.com/
html-for-icon-font-usage/ http://css-tricks.com/examples/IconFont/.


, , , HTLM <strong> - , <em>
. , .
, .
- ( )
,
.
-
. , -
, ,
.
,
. , , , , , . ,
@font-face.
-
. , Internet
Explorer 8 ( Internet Explorer 9 ), , Internet Explorer.

6.

153




@font-face font-weight font-style.
CSS- font-weight , (bold), (normal)
, font-style
(italic) (normal) . @fontface font-style , .
, PTSans. , .
PTSansRegular (PTSansRegular.eot, PTSansRegular.ttf ..).
@font-face:
@font-face {
font-family: 'PTSans';
src: url('PTSansRegular.eot');
src: url('PTSansRegular.eot?#iefix') format('embedded-opentype'),
url('PTSansRegular.woof') format('woff'),
url('PTSansRegular.ttf') format('truetype'),
url('PTSansRegular.svg') format('svg');
font-weight: normal;
font-style: normal;
}

.
PTSans, , , PTSansRegular.
font-weight normal,
( 8).
font-style normal,
( 9).

, PTSansRegular.eot, PTSans
Bold.eot .. , .
, URL ,
.

, ,
PTSansItalic. :
@font-face {
font-family: 'PTSans';
src: url('PTSansItalic.eot');
src: url('PTSansItalic.eot?#iefix') format('embedded-opentype'),
url('PTSansItalic.woof') format('woff'),
url('PTSansItalic.ttf') format('truetype'),

154

2. CSS

url('PTSansItalic.svg') format('svg');
font-weight: normal;
font-style: italic;

2 font-family PTSans.
font-style italic ( 9). , PTSans.
@font-face , :
@font-face {
font-family: 'PTSans';
src: url('PTSansBold.eot');
src: url('PTSansBold.eot?#iefix') format('embedded-opentype'),
url('PTSansBold.woof') format('woff'),
url('PTSansBold.ttf') format('truetype'),
url('PTSansBold.svg') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'PTSans';
src: url('PTSansBoldItalic.eot');
src: url('PTSansBoldItalic.eot?#iefix') format('embedded-opentype'),
url('PTSansBoldItalic.woof') format('woff'),
url('PTSansBoldItalic.ttf') format('truetype'),
url('PTSansBoldItalic.svg') format('svg');
font-weight: bold;
font-style: italic;
}

, ,
@font-face: ,
font-family,
src ( ) font-weight font-style.
, , HTML <em> <strong>
. ,
PTSans ,
:
p {
font-family: PTSans;
}

HTML- . ,
:
<p>When I was younger, I could remember <em>anything<em>, whether it had happened
or <strong>not<strong> -- <strong><em>Mark Twain</em></strong></p>

6.

155

- ( @font-face
p), PTSansRegular. anything, <em> PTSansItalic, not <strong> PTSansBold,
Mark Twain <strong>, <em> PTSansBoldItalic.
. h1 PTSans,
:
h1 {
font-family: PTSans;
}

-
PTSans,
. ( , , font-weight: normal;.)
, Internet Explorer 8
PTSansRegular. <em> <strong>
Internet Explorer , PTSansRegular PTSansRegular .
.

webfonts-demo
. webfonts.html , webfonts-ie-safe.html .


Internet Explorer 8
Internet Explorer 8 ( ), , , . Internet Explorer 8,
. -
@font-face, .
font-family (, PTSans),
(PTSansRegular, PTSansItalic ..). , @font-face :
@font-face {
font-family: 'PTSansRegular';
src: url('PTSansRegular.eot');
src: url('PTSansRegular.eot?#iefix') format('embedded-opentype'),
url('PTSansRegular.woof') format('woff'),
url('PTSansRegular.ttf') format('truetype'),

156

2. CSS

url('PTSansRegular.svg') format('svg');
}
@font-face {
font-family: 'PTSansItalic';
src: url('PTSansItalic.eot');
src: url('PTSansItalic.eot?#iefix') format('embedded-opentype'),
url('PTSansItalic.woof') format('woff'),
url('PTSansItalic.ttf') format('truetype'),
url('PTSansItalic.svg') format('svg');
}
@font-face {
font-family: 'PTSansBold';
src: url('PTSansBold.eot');
src: url('PTSansBold.eot?#iefix') format('embedded-opentype'),
url('PTSansBold.woof') format('woff'),
url('PTSansBold.ttf') format('truetype'),
url('PTSansBold.svg') format('svg');
}
@font-face {
font-family: 'PTSansBoldItalic';
src: url('PTSansBoldItalic.eot');
src: url('PTSansBoldItalic.eot?#iefix') format('embedded-opentype'),
url('PTSansBoldItalic.woof') format('woff'),
url('PTSansBoldItalic.ttf') format('truetype'),
url('PTSansBoldItalic.svg') format('svg');
}

, @font-face
, : PTSansRegular, PTSansItalic,
PTSansBold PTSansBoldItalic.
, , font-weight font-style, , .
.
font-family :
p {
font-family: PTSans;
}

, ,
: p , em ,
strong . . ,
PTSans, ,
:
p {
font-family: PTSansRegular;
font-size: 48px;

6.

157

font-style: normal;
font-weight: normal;
}
p em {
font-family: PTSansItalic;
font-style: normal;
font-weight: normal;
}
p strong {
font-family: PTSansBold;
font-style: normal;
font-weight: normal;
}
p strong em, p em strong {
font-family: PTSansBoldItalic;
font-weight: normal;
font-style: normal;
}

, :
p PTSansRegular;
p em <em>,
<p>; PTSansItalic;
p strong , PTSansBold
<strong>, ;
, , . <em>,
<strong>, <p>. <strong>, <em>,
<p>. , <em>
<strong> . HTML:

<p>
<em><strong>Hey!</strong></em>
, I'm talking to
<strong><em>you</em></strong>
</p>

p strong em Hey!,
<strong>, <em>.

HTML5 <b> ( ) <i> ( ) .


, , ,
- . , , <i>: <i>CSS3:
The Missing Manual</i>.

158

2. CSS

<em> ,
, , . ,
<b> <i>, ,
( , Internet Explorer 8,
,
).

normal font-weight font-style. ,


( Internet Explorer) ( Firefox).
, , . ,

. , ,
Internet Explorer 8.
Internet Explorer 8 , 13 (http://gs.statcounter.
com/#browser_versionww-monthly-201108-201208) 25% (http://www.netmarketshare.
com/browsermarket-share.aspx?qprid=2&qpcustomd=0&qptimeframe=M)
-.

Internet Explorer 8
. , Internet Explorer 8. , sans-serif,
, Internet Explorer . , , . ,
Internet Explorer8 , Chrome .

Google web fonts


-,
, - , ,
. , , ,
, Google
-.
, , Google,
, . Google - .
Google web fonts, ( Google) , CSS-, .
Google web fonts, www.google.
com/webfonts (.6.6).

6.

159

. 6.6. Google web fonts , Google

, , ,
, ..
Show all styles ( )
( .6.6 ).
. , Quick-use ( ) (. .6.6, 1),
, . ,
. Pop out (
) (..6.6, 2) ,
, , (
,
). Add to Collection ( ) (..6.6,3)

160

2. CSS

. (
, .)


.
Add to Collection ( ) (..6.6). , - .
500 . ,
, , , ,
(.6.7).
. ,
( ) Search ()
(..6.7,1).
. (..6.7,2)
, , , :
Serif ( ), Sans Serif ( ), Display () Handwriting
(). , , , . . ,
, .
, - . , , , ,
: , , !
.
(..6.7,3).
(Thickness) ,
( , )
( ). (Slant)
:
, ,
. (Width) .
,
, .
. (Script) (..6.7,4)
.
(Latin), , , ,
(Cyrillic). , .

6.

. 6.7. ,
, Google

161

162

2. CSS

,
- .
Reset all filters/search ( ),
.6.7 , - Google.

Google,
http://hellohappy.org/beautiful-web-type/.

Add to Collection ( ) (.6.8,1).

, . , ,
(2). ,
(3).

. 6.8.

6.

163

Review (), .6.8 ,


. ,
( ), , ,
, (
).

Google
, .
1. Google Web Fonts (.6.9,1) Use ().
, , .
2. , (..6.9,2).
,
. , .
.
, , .
, ,
. . (
-, , ,
),
. ,
. , .
3. ,
.
, . , , Latin (. ),
, Latin Latin Extended. Latin Extended
, ,
, , . , , ,
Latin. Latin , ,
.

, Latin Extended, http://


en.wikipedia.org/wiki/Latin_Extended-A.

4. Add this code to your website (


-) (..6.9,3).

164

2. CSS

.
yy Standard. <link>, ( ,
). , -
Google , Google
. :

<link
href='http://fonts.googleapis.com/css?family=Codystar:300,400|Gentium+Book
+Basic:400,400italic' rel='stylesheet' type='text/css'>

, href
. Codystar Gentium. Google
: 300 400
Codystar
400 400
italic

Gentium. ( )
(. . 6 ).

HTML5, "type='text/css'" <link> . HTML5


.

yy @import. ,

@ import, @import (..6.9,3).


,
. , , ,
. <link>
. @import,
.
yy JavaScript. ,
, JavaScript,
. , .
5. - .
<link>, , , . ,
, , .
@import: @import
, ,
, .

@import - (
).

6. , .
,
, . ,

6.

165

font-family .

- Google (. .6.9,4).
,
font-weight font-style. Google normal bold
. 100 900. 700 bold, 400 normal, . , ,
Gentium Book Basic <em>. :
em {
font-family: "Gentium Book Basic", serif;
font-weight: 400;
font-style: italic;}

. 6.9. Google, ,
Use () (1), (2)
, .
,
Google

166

2. CSS

TypeKit Google
-
-
. Google
web fonts .

, . ,
, ,
CSS, JavaScript.

(, EOT
Internet Explorer 8 ).
Adobe,
TypeKit,
, .

Adobe (

),
.
TypeKit
, -.

JavaScript.
TypeKit
. TypeKit
,
, .
,
,

$24 99 .


- ,
, - ,
. - CSS . color . , :
color :
color: #3E8988;

,
- (

).

,
, , www.co
lourlovers.com.


, -,
(Hexadecimal) . , #6600FF, . 66, 00 FF.
,
( RGB, ). .

6.

167

,
. , #6600FF #60F
#FFFFFF #FFF.

RGB
RGB (Red , Green
, Blue ), , , . ,
(0100%) 0255 (, , ).
(,
-), :
color: rgb(100%,100%,100%);

color: rgb(255,255,255);

HTML. . 17 : aqua, black, blue, fuchsia,


gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. CSS : color: fuchsia; . , 147SVG- ( X11), ,
- , , , , . https://develo
per.mozilla.org/en-US/docs/CSS/color_value.

RGBA
,
. RGBA Red , Green , Blue
, Alpha .
, RGB, -.
, (.6.10). RGB 0 1.
0 , 1
( ):
color: rgba(255, 100, 50, .5);

, RGBA, , . ,
, (
, .9) (
, .1). RGBA-
CSS-, , , . 6.10

: Home (), Archives (), Authors () ..

168

2. CSS

. 6.10. RGBA-

RGBA text-shadow box-shadow, . RGBA , .

? Internet Explorer 8
RGBA-. ,
RGBA-:
color: rgb(255,100,50); /* IE8 */
color: rgba(255,100,50,.5); /* */

, ,
, , RGBA-.
, Internet Explorer 8
, Internet Explorer 9 RGBA-.
Internet Explorer 8 . , Internet Explorer 7, . , Internet Explorer 7 , , , .

Internet Explorer 7 8, .
, Internet Explorer.
, , http://css-tricks.com/rgba-browser-support.

6.

169

HSL HSLA
HSL Hue , Saturation Lightness
( Luminance ).
. Internet Explorer 8
, . RGB- Hex, HSL . - :
color: hsl(0, 100%, 50%);

hsl( ) .
0 360. , , , , , , , . 0 ( 360,
), 50, 100, 150 .. 51.
,
. 0 100. 0% , . , , 0% . 100%
, .
, 0 ( ) 100( ). ,
50%.
, HSL , RGB
, , , , .
, Fireworks Photoshop,
, RGB- Hex-.

HSL, www.workwithcolor.com/hsl-color-schemer01.htm .

, RGB RGBA, HSL HSLA. , RGBA. 0 () 1 ( ).


- 50%- :
color: hsla(0, 100%, 50%, .5);

RGBA,
HSL , .

170

2. CSS

. , , . , ,
, ,
-, .
font-size .
. , :
font-size: 1em;

,
( 1em), . CSS
: ,
em ( : m, Cicero), exs ( , x),
, , , , , .
, (, ,
..), -, .
-,
. ,
, em,
-, .
, .

,
. , , 36 <h1>,
36. ,

(. , , ).
font-size , px:
font-size: 36px;

. ,
36px, 36 px.

Retina-
Apple iPhone Retina-
, iPhone
. Retina- Apple

6.

171


72100
, Retina-
224 .
Apple Retina-
, iPad .
, Amazon,
,
,
. -?
.
.
,
, ,

.

, ,
, Retina-
,
. 16
, -, Retina,
32.
.
16 ,
, .
,

,
, ,
.

, em
CSS , em
,
. ,
CSS, .
, , 16 () .

, ,
,
.

, ,
.
. Ctrl++ ( -+)
, Ctrl+- ( --) . Ctrl (Control)
.

CSS, ( , 16, )
, em, .
. CSS , : xx-small, x-small, small, medium, large,
x-large xx-large. CSS- :
font-size: large;

172

2. CSS

medium . .
, , ,
, . xx-small 9 (
, ), x-small
10, small 13, large 18, x-large 24, xx-large 32.
, , , .
. , , . , large, x-large ..
.
16.
.
100%. , 16.
, ,
-. , 200%:
font-size: 200%;

, , ,
90%.
, . , 100%
, -.
- .6.11 <div>,
200%. 32. . , , <div>,
100% 32. , <h1>,
<div>, 100%
-, 32.
em ,
. ,
- , , , , .
m. , ,
em. ,
- - .
em . . -
. CSS

6.

173

. , 1em , 100%, . em, 100: .5em 50% ..

.6.11.
, em

, CSS- , font-size: 200%;:


font-size: 2em;

,
em. , , s : 2.5em, 2.5ems.

174

2. CSS

em , . , , .6.11.
.75em, <p> 2em (32) <div>, .7532=24. <p> .75em.
<strong> .75em , ,
75% . : 32 (, <div>)75 ( <p>).75 ( <em>)75 (
<strong>). ,
14.



()
(..6.11). ,
ul { font-size: 75% },
, <ul>
. , <ul>
, 75%
<ul>. ,
, ..
.
,
(.
.3): ul ul {font-size: 100%}.
<ul>,
<ul>, 100%. ,
100% ul,
.

75%
.

, . CSS3
rem.
Root EM,
(root) .

, .75em,
.6.11, :

font-size: .75rem;

.75
,
( em).
HTML html,
-.
rem-
html,
rem
. ,

20:
html {
font-size: 20px;
}

rem

20- , ,
,
15, :
p {
font-size: .75rem;
}

, , rem,

, Internet Explorer 8
.

6.

175

- .
, . ,
. . , ,
.


: , .. CSS
.
, , , , , ..

CSS . . ,
- .


, <em> <i>, ( ), , <strong>, <b>, <th> (table
header ), (<h1>, <h2> ..) .
. ,
font-style font-weight.
, :
font-style: italic;

, , , :
font-style: normal;

font-style oblique,
, italic.

font-weight
. CSS
(100900) , ( (900) , (100)) . , , ,
. -.

176

2. CSS

Google web fonts


.

-
.

, :
font-weight: bold;

:
font-weight: normal;

, ,
,
. :

h1, strong {color: #3399FF;}

<strong> (
), <h1>.


: Caps Lock . , ,
-
, Microsoft Word?
, CSS- text-transform.
( ).
:
text-transform: uppercase;

lowercase,
capitalize.
, , text-transform,
: , ,
. CSS , none:
text-transform: none;

.
font-variant,
, . .
, -
, . :
font-variant: small-caps;

6.

177


CSS text-decoration . , , (.6.12)
. text-decoration
: underline, overline, line-through blink. , , :
text-decoration: underline;

.6.12. text-decoration


. :
text-decoration: underline overline;

, . , ,
, .
, , ,
. blink (
, ).

178

2. CSS

, , border (.
.7). , border
: , , -
, .

overline text-decoration , line-through . - , , .



none:
text-decoration: none;

?
(. .9).


, (.6.13).
letter-spacing .
,
. ,
, . ,
:
letter-spacing: -1px;

:
letter-spacing: .7em;

, wordspacing. , :
word-spacing: 2px;

, : , em, (
).
, ,
. , . , .


CSS3 ,
, (.6.14).

6.

179

.6.13.

text-shadow : ( ), ( ),
. , text-shadow,
, . 6.14, :
text-shadow: -4px 4px 3px #999999;

-4px 4 .
( .) 4px 4 . (
.) 3px
. 0px ( )

180

2. CSS

, , . ,
.

. 6.14. .
text-shadow Internet Explorer 9


(. .6.14): ,
:
text-shadow: -4px 4px 3px #666, 1px -1px 2px #000;

(
). , Internet Explorer9
.
( Internet Explorer 10). , , . .6.14 ,
: ,
, .
Internet Explorer .

http://webexpedition18.com/
articles/css3-text-shadow-property/.


CSS , , , . ,
, ..

6.

181


(
) CSS () , , line-height.
, (.6.15).

.6.15. line-height
()
, ()

120%. ,
.6.15, , , ,
(. .6.15, ).
, em, .
font-size, , em line-height:
line-height: 150%;

182

2. CSS

, em , : , , font-size. ,
10
(, 36), 10, .
(, 150%) ,
font-size.
120%. , , ,
. ,
, , 120%.

,
. (leading)
. , 12. ,
150%, 18. , 6 .

. CSS
. CSS- :
line-height: 1.5;

.
,
. , 1em, 1,5, 1,5em. 1,5em
150% . .
.
, <body> 150%.
- .
, . ,
10. 150% 10 15.
15. , 36,
15 , .
150% <body>

1,5. , body,

6.

183

. , , 36, 1,536=54.


-
. text-align,
- (), ( ).
, . , : left, right, justify, center.
text-align: center;

, ,
, , , ,
( ).
, . - - - , .
justify , ,
. , -, ,
.

,

,

. , CSS font,
.
: font-style, font-variant,
font-weight, font-size, line-height font-family.
, , :
font: italic bold small-caps 18px/150%
Arial, Helvetica, sans-serif;

,

18, Arial ( Helvetica, sansserif) 150%.
:

,
(
): font: 1.5em Georgia, Times,
serif;;


, ,
: Arial,
Helvetica, sans-serif;
,
,

: % 1.5em/150 24px/37px;

: / (

184

2. CSS


font-size/line-height) ;


. ,
: font: italic bold smallcaps 1.5em Arial font: bold small-caps
italic 1.5em Arial;
.
,
, . ,
<p>,

2000%
( ).
, , .specialParagraph : font:
1.5em Arial; -
.

.
.specialParagraph
: font:
normal normal normal 1.5em/normal Arial;.


. ,
, . - , , .
- ,
, CSS-,
text-indent margin.
( ) .
. , em:
text-indent: 25px;

text-indent: 5em;

, , em
( ).

text-indent , (, ) .
,
, .

, text-indent
. , , , , . ,
50% ,
. ,

6.

185

, , ( , , , -,
.7).
() . -
,
. CSS . , margin-top margin-bottom
( ) .
, :
margin-top: 0;
margin-bottom: 0;

-, :
p {
margin-top: 0;
margin-bottom: 0;
}

, , , em.
, , , , . , ,
, em .

, ( ) . , , .5.

. , , 10, 10, ,
-.

,

CSS
:first-line :first-letter (.6.16). C
, , CSS-.
:first-letter
, . ,
, :
p:first-letter {
font-weight: bold;
color: red;
}

186

2. CSS

.6.16. :first-letter

, , , , .intro:

6.

187

<p class="intro">Text for the introductory paragaph goes here...</p>

, .intro:first-letter.
:first-line . , (h2:first-line)
(p:first-line). :first-line,
. ,
. HTML- : <p class = "intro"> :
.intro:first-line { text-transform: uppercase; }

- Chrome Safari text-transform,


:first-line. ,
Chrome Safari CSS .


<ul> <ol>
, , .
, , , , . ,
, , ..


( <ul>), , (<ol>)
. CSS : (
), (, ), (
). -
: decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman,
lower-roman (.6.17). , CSS-
list-style-type:
list-style-type: square;

list-style-type: upper-alpha;

- ,
, , , lower-greek.
, , ,
.
https://developer.mozilla.org/en-US/docs/CSS/list-style-type.
,
<ol> <ul>. ol ul: ul {liststyle-type: square;} , .

188

2. CSS

.6.17. CSS
,

(<li>). - . , <ul>, ,
.circle, :
li {list-style-type: square; }
.circle { list-style-type: circle; }

:
<ul>
<li>Item K/li>
<li class="circle">Item 2</li>
<li>Item 3</li>
<li class="circle">Item 4</li>
</ul>

, nth-of-type, :
li {list-style-type: square; }
li:nth-of-type(odd) { list-style-type: circle; }

6.

189

, ,
(.
). ,
, <ul>, (. .9). ,
none:
list-style-type: none;


,
(.6.18, ). outside
. CSS , list-style-position .
, ,
, ( ),
(.6.18, ). inside
:
list-style-position: outside;

list-style-position: inside;


padding-left (. .7).
, <li>.
, list-style-position outside (
).

, , ,
, ,
margin-left padding-left 0. ,
:
ul, ol {
padding-left: 0;
margin-left: 0;
}


<ul> <ol>.
padding margin , padding (Firefox, Mozilla, Safari), margin (Internet Explorer).
padding margin .

, .
, margin-top margin-bottom . , .

190

2. CSS

, <li>: .
<ul> <ol>.
()
.
.

.6.18. list-style-position,


, . ,
Photoshop Fireworks, .

( Webdings).

www.cssjuice.com/38-freeicon-checkpoints/.

CSS- list-style-image
,

6.

191

, src HTML- <img>.


:
list-style-image: url(images/bullet.gif);

url . , , images/bullet.gif . , , HTML,


.


, ,

.
?

CSS
,
.
, .
.
,
, ,
Internet Explorer7 .
. ,
,
,
.
, <ol>
<li> .

.
, , . regu
larList,
(
).
<span> .
: <li><span class="regularL-ist">Item
1</span></li>.
,
. ,
.

, CSS, ,
. , ,
-,

. .

- . CSS
, ,

,
<li>.
,
CSS:
ul li {
list-style-type: none;
}
ul li:before {
content: counter(item, disc) " ";
color: red;
}


, CSS:
ol li {
list-style-type: none;
counter-increment: item;
}
ol li:before {
content: counter(item) ". ";
color: red;
}

,
, www.456berea
street.com/archive/201105/styling_ordered_list_numbers/.

192

2. CSS

(, )
, , ,
-.
.8, .

list-style-image
. .
. ,
. .8.
background-image. , .

font (. .
,
), . list-style
, list-style-image, list-style-position
list-style-type. , ul { list-style: circle inside; } , .
liststyle: circle url(images/bullet.gif) inside;
, , .

:

, , , , CSS.
, , . , .2. 06.


@font-face, - .
1. text.html (.6.19).
, . .
2. text.html HTML-.
.
3. <head> - </title>. Enter
<style>
</style>

6.

193

, ,
CSS. , CSS .

.6.19. - HTML-

4. reset.css. <style>, .
text.html , ,
,
, .
@font-face
-. - PTSans,
, - .

194

2. CSS

5. :
@font-face {
font-family: 'PTSans';
src: url('fonts/PTSansRegular.eot');
src: url('fonts/PTSansRegular.eot?#iefix') format('embedded-opentype'),

url('fonts/PTSansRegular.woof') format('woff'),

url('fonts/PTSansRegular.ttf') format('truetype'),

url('fonts/PTSansRegular.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'PTSans';
src: url('fonts/PTSansItalic.eot');
src: url('fonts/PTSansItalic.eot?#iefix') format('embedded-opentype'),

url('fonts/PTSansItalic.woof') format('woff'),

url('fonts/PTSansItalic.ttf') format('truetype'),

url('fonts/PTSansItalic.svg') format('svg');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'PTSans';
src: url('fonts/PTSansBold.eot');
src: url('fonts/PTSansBold.eot?#iefix') format('embedded-opentype'),

url('fonts/PTSansBold.woof') format('woff'),

url('fonts/PTSansBold.ttf') format('truetype'),

url('fonts/PTSansBold.svg') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'PTSans';
src: url('fonts/PTSansBoldItalic.eot');
src: url('fonts/PTSansBoldItalic.eot?#iefix') format('embedded-opentype'),

url('fonts/PTSansBoldItalic.woof') format('woff'),

url('fonts/PTSansBoldItalic.ttf') format('truetype'),

url('fonts/PTSansBoldItalic.svg') format('svg');
font-weight: bold;
font-style: italic;
}

, . , at-font-fa
ce.css. , .

, PTSans, .

6.

195

- , . ,
(,
<strong>) . ( Internet Explorer 8,
,
.)
,
.
6. @font-face Enter html {.
, <html>. .4 ,
. , , .
7. Enter :
f ont-family: PTSans, Arial, sans-serif;
font-size: 62.5%;

PTSans ( Arial,
PTSans) 62,5%.

- 62,5%? ,
62,5% 16 ( ), 10. , . ,
1,5em 1,510, 15, 2em 20 .. ,
em 10. , ,
http://clagnut.com/blog/348/.

8. , Enter .
:
html {
font-family: PTSans, Arial, sans-serif;
font-size: 62.5%;
}

.
9. - ,
.
. . , - 62,5%, 7.
,
, em .

196

2. CSS


, , .
1. text.html HTML-. <body> , Enter .main h1 {.
,
HTML. <h1>,
main. HTML -, ,
<div> main (<div class="main">). ,
, CSS, HTML- <div>.
<div> .
, .
2. Enter CSS-:
c olor: rgb(252,102,0);
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font-size: 4em;

<h1>, .
- , . Arial Black ,
- , Arial Helvetica, . , 4em,
40 (, , ). 62,5%, 7. ,
10 , 410 40.
.
3. , Enter , ( ):
n




}

h1 {
color: rgb(252,102,0);
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font-size: 4em;
text-shadow: 4px 3px 6px rgba(0,0,0,.5);

, 4 , 3
6. , RGBA-, 50%- .

6.

197

4. .
.
5. text.html HTML-. .main h1, Enter :
. main h2 {
font: bold 3.5em "Hoefler Text", Garamond, Times, serif;
border-bottom: 1px solid rgb(200,200,200);
margin-top: 25px;
}

, <h2>,
main. font , font-weight, font-size font-family.
, ,
3,5em .
, (
CSS The Missing Manual Exploring Typographic
Possibilities).
.
6. , :
. main h3 {
color: rgb(255,102,0);
font-size: 1.9em;
font-weight: bold;
text-transform: uppercase;
margin-top: 25px;
margin-bottom: 10px;
}

: , , , text-transform,
<h3> . ,
margin.
.
7. :
. main p {
font-size: 1.5em;
line-height: 150%;
margin-left: 150px;
margin-right: 50px;
margin-bottom: 10px;
}

line-height, . 150%

198

2. CSS

, . , ( ).
1,5em (15
) .
, margin
. , , ,
.
.
8. :
. main p:first-line {
font-weight: bold;
color: rgb(153,153,153);
}

:first-line .
<div>
.
9. .
- , .6.20.


. , , , . CSS .
1. text.html HTML-.
:
. main ul {
margin: 50px 0 25px 50px;
width: 150px;
float: right;
}

: ( <ul>
<ol> ) ( <li>).
.
. -, margin .
, margin (margin-top, margin-right
..). : ,
, . , 50 , 0 , 25 50 .

6.

199

width 150. - ,
, . float - : float: right
. ,
. ,
.

.6.20. - :
,

200

2. CSS

.
2. text.html:
. main li {
color: rgb(32,126,191);
font-size: 1.5em;
margin-bottom: 7px;
}

: , .
.

,
<li>. <ul> <ol>
.

3. .
, .6.21.


,
. , -
, , ,
.
november 30 Rod Dibble (
). , ,
HTML .
1. HTML (<p>november 30 <strong>Rod
Dibble</strong></p>) class="byline" <p>.
HTML :
<p class="byline">november 30 <strong>Rod Dibble</strong></p>

,
.
2.
:
. main .byline {
font-size: 1.6em;
margin: 5px 0 25px 50px;
}

. ,
.byline ( ),
. , , .byline
, .main , 7
, , ,
.main p. .main .byline, , .

6.

201

.6.21. float
.

- . ,
. HTML .
3. :
. main .byline strong {
color: rgb(32,126,191);
text-transform: uppercase;
margin-left: 5px;
}

202

2. CSS

HTML 1, , Rod Dibble


<strong>. <strong> , . ,
, . , <strong>,
, .byline,
main , .
,
(
november30).


- , <div>,
. , .
1. text.html HTML-.
.
2. html
( ):
html {
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
background: rgb(225,238,253) url(images/bg_body.png) repeat-x;
}

background . ; , - .
, , - - .
<div>.
3. html .main h1:
. main {
width: 740px;
margin: 0 auto;
padding: 0 10px;
border: 4px solid white;
background: transparent url(images/bg_banner.jpg) no-repeat;
}

} html, Enter , .

6.

203

, . , <div>,
, <div>, .
width <div> ( ), 740.
margin 0 auto 0
<div> auto,
. padding
, <div>
. , <div>.
,
, ,
.
, .
4. .main h1:
. main h1 strong {
font-size: 150px;
color: white;
line-height: 1em;
margin-right: -1.25em;
}

HTML :
<h1><strong>CSS</strong> The Missing Manual</h1>

CSS <strong>, ( ,
3 ). , , , . ,
1em, , , em , 150 .
margin-right, : -1.25em. , , ,
. , (The
Missing Manual) CSS.

CSS ( ). CSS.

5. .
- , .6.22. text.html,
06_finished .

204

2. CSS

.6.22. CSS

, CSS,
HTML
. - , , , CSS.

, ,

HTML- CSS-, ,
. ,
() , . (, ), . , ,
, , ,
(- , ).
, -
.
, , CSS,
.


, , ,
. , <img>. .
: ,
(.7.1). , ,
. , . ,
, .
, , ,
.
Padding , . .
Border , , , . .
Background-color , padding.

206

2. CSS

Margin , . , , ,
.

.7.1. (,
), ,

7. , ,

207

.
.. - ,
. , - , . .

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


, .
margin padding -
. , ,
- . , (.7.2).

.7.2. - 10,
, , 20

208

2. CSS

.7.2
. . ,
() ,
.
padding margin , ,
, ,
.
(), . .
, , , ( ),
. , - .

.
: margin-top, margin-right, margin-bottom margin-left.
: padding-top, padding-right, padding-bottom padding-left.
CSS
, :
margin-right: 20px;
padding-top: 3em;
margin-left: 10%;

em ,
(. .6). 20 , 3em ,
.
, (
. , ).

, 0 (, margin-top: 0 padding-bottom: 0).


, margin padding :
margin: 0; padding 0;. -, - - , .

,


-,

.
-, -
<body>,
.

7. , ,

209



. ,
760. ,
10%, 76
.
,
. 600
60 (10% 600).

, -
<div> ,
. ,
300. <div> -
.
, ,
<div>
10%, 30.

-
. ,
-,
,
.


:
, . , 20%-
20% .

margin padding
. (margin-right, margin-left ..)
. : margin padding :
margin: 0 10px 10px 20px;
padding: 10px 5px 5px 10px;

CSS- , 0,
. , margin: 0; margin: 0px;.

margin padding .
: , , . .
TRouBLe (, ), ,
: Top (), Right (), Bottom (), Left ().
, .
<h1>, :
h1 {
margin: 0;
}

,
:
padding: 10px;

210

2. CSS


, . , margin:
0 2em; , 2em.
, ( ) , ,
. , margin: 0 2em 1em; 0, 2 ems, 1 em.


CSS .
, -
. , (.7.3, ). , 30,
20.
, 50 , 30. ,
(. .7.3, ).

.7.3.

.7.3,
20, 15,
, 20. , (35),
, . , 20. ,
15, 35.

7. , ,

211

, -
. . , - ( <div>). 20,
. .
, ,
,
<div>, 10. ,
, , 10-
<div>, (.7.4, ).
<div>. , , <div>.

.7.4. ,

,
- ( 1 <div>).

CSS . ,
.

: ,
<div>. , (..7.4, ).

212

2. CSS

( ) .
.



CSS . , , , 20? , . CSS
.
, ,
. , , - ( <div>)
. , ,
.
, 0, (
, .6). ,
,
. , . .7.5 ( Raise
Tuna) , 10. ,

. , ,
Extra! Extra!, , .
,
. .7.5, The Extraordinary Technique,
. ( , ,
). ,
. , Q -. (
Q) ,
, , . , , -.

7. , ,

213

.7.5.
, , ,

,
.
, .


- , . CSS : () (inline),
.
. , <p> , , .
, <div>, ,
.
(inline) ,
. .
<strong> . , , , , <em>. , , <strong>, .
<img> , <a> , ..
CSS . , , ,
. -.

214

2. CSS

, . .7.6 ,
20 . .

.7.6. ,
: ,

.7.6 ,
. , . , ,
. , ,
. , , display:inline-block (.7.6,
). , ,
, , , .
, Internet Explorer 7,
, , <strong>, <em> <span>. ,

7. , ,

215

vertical-align:middle, Internet Explorer7


, .

: <img>, . -, .

, , ,
.
, .
, ,
, ? , ,
, , , , , , -.
, CSS , ,
display. :
display: inline;

, , , ,
, :
display: block;

display ,
. inline-block (..7.6).
none .
, .
JavaScript, ,
display inline block.
CSS: .


,
. .7.1, . , , ..
, . ,
,
. . , ,
1em, .
, <hr> ( ),
-.

216

2. CSS

: color
(), width (, ) style (). color , RGB
( RGBA). width , . CSS ( ) thin ( ), medium () thick ().

.
, style . . .7.7.
. , solid
, dashed (). CSS : solid, dotted, dashed, double, groove, ridge, inset, outset, none hidden. none hidden : .
none
(. .6).

.7.7. :
Internet Explorer9 ( ), Chrome Windows ( ),
Firefox Macintosh ( ) Safari Macintosh ( )

7. , ,

217

border
, CSS, ,
. , 20
, , . ,
: , () . border, :
border: 4px solid #FF0000;

4. , , ,
.

: border: 4px solid #FF0000;


, border: #FF0000 solid 4px;.


,
: border-top, border-bottom, border-left border-right.
, border , ,
.
,
:
border-bottom: 2px dashed red;

border .
, border-left, , ,
. , ,
, ,
-. CSS:
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 4px dashed #333;

CSS-:
border: 2px solid black;
border-bottom: 4px dashed #333;

, . , CSS- , ,

218

2. CSS

. , ,
:
border: 2px solid red;
border-bottom: 4px dashed #333;

.
, border-left. ,
CSS- .
,
:
border: 2px solid black;
border-bottom: 4px dashed #333;

border-bottom , border. border-bottom


, border . , CSS- . CSS, .5.
,
none. ,
(, , ). :
border: 2px inset #FFCC33;
border-right: none;

.
15 , , . , border: 2px double #FFCC33; :
border-width: 2px;
border-style: double;
border-color: #FFCC33;

, , , .
, .
: border-right-width, border-right-style border-right-color. ,
: border-left-width, border-leftstyle ..
: border-rightwidth: 4px;. , ,
,
, dashed solid.

7. , ,

219

, , border-width, border-style border-color. ,


border-width: 10px 5px 15px 13px;
(, , ).
, 2, ,
(, ). :
border: 2px dashed green;
border-color: green yellow red blue;


,
, , , .

, . : , , . ,
.


CSS -,
.
background-color ,
.6. - , :
body { background-color: rgb(109,218,63); }

, .review,
, <body> HTML- : <body
class="review">.

- . . ,
.

. , , . -,
, .
RGBA. , , , .
, - . , ,

220

2. CSS

<div> - . div
, ,
- :
body {
background-color: rgb(247,226,155);
}
.special-div {
background-color: rgba(255,255,255.75);
}

, : (..7.7),
. ,
.


, -
.
div-. ,
, (.7.8). CSS3
border-radius,
. border-radius
, :
.specialBox {
background-color: red;
border-radius: 20px;
}

. 7.8. CSS3 .
,

7. , ,

221


. .7.9, ,
, .
em, ( ).

. 7.9. (), (),


border-radius: 20px, ,
,border-radius: 40px/20px;

. ,
.7.8 :
border-radius: 30px;


. ,
. , .7.8
. :
border-radius: 0 30px 10px 5px;

,
. (0
.7.8) , (30px) ,
(10px) , (5px) .
,
, .
( ), , , .7.8.
: ,
. , ,
.7.8, :

222

2. CSS

border-radius: 40px/20px;

40px , 20px
. .
, , :
border-radius: 40px/20px 10px/30px 20px/40px 10px/20px;

:
border-radius: 10px 10px/30px 20px/40px 10px;

, , . :
border-radius: 1em 2em 1.5em .75em;

:
border-top-left-radius: 1em;
border-top-right-radius: 2em;
border-bottom-right-radius: 1.5em;
border-bottom-left-radius: .75em;

, , , . , , ,
. , border-radius: 20% , , ,
, , , border-radius:
20px/40px;.

Internet Explorer 8 border-radius, . , 3.2 Safari iOS 2.1


Android Browser -webkit-, : -webkit-border-radius: 20px;.
.


CSS . W3C
(World Wide Web Consortium)
CSS-,
-.
CSS-,
,
. W3C
CSS-,
.

CSS-

.
CSS, .
CSS-

,
. CSS-

7. , ,

223


,
,
.

:
-webkit- Chrome, Safari
WebKit;
-moz- Mozilla Firefox;
-o- Opera;
-ms- Microsoft Internet Explorer.
,

. ,
border-radius, Firefox
-moz-border-radius , Safari
-webkit-border-radius.

,

,
, :
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

, W3C CSS Working Group



, .
,
border-radius,
.
CSS3-
,
.

,
.


, , ( ) . ,
, CSS3 box-shadow, , , <div> (.7.10).
, Internet
Explorer 9. , Internet Explorer 9 , . , Internet Explorer 8 .
text-shadow, . , ,
, .7.10.
box-shadow .7.11.
,
.
( .7.10), . ( ,
), ( ),
( ), ( ) .

224

2. CSS

. 7.10. CSS3- box-shadow

, . ( .7.10),
.

em. .

.
. 0 ,

7. , ,

225

. , .

. 7.11. box-shadow

, .
CSS, RGBA-
, , .
box-shadow : inset
(spread). inset
( .7.10). inset box-shadow:
box-shadow: inset 4px 4px 8px rgba(0,0,0,.75);

( )
.
. , ,
10px, 10 ( 20 20 ).
, . , , , . , ,
,
(glow).

Android Safari iPhone box-shadow , . ,


, , :
-webkit-box-shadow: 2px 2px 10px #000000;
box-shadow: 2px 2px 10px #000000;

226

2. CSS

, .7.10
0, 8px, 2px. 2
, , 8 ,
8. , - . :
border: 10px solid rgb(100,255,30);
box-shadow: 0 0 0 10px rgb(0,33,255);

, ( .7.10).
, :
box-shadow: 10px 5px 8px #FF00FF,
-5px -10px 20px 5px rgb(0,33,255);

( ).

, . Internet Explorer9, ,
, . ,
, http://thany.nl/apps/boxshadows/.


CSS-, CSS.
, , , , , . height width . , -, 3.
: , .
. CSS, . :
width: 300px;
width: 30%;
height: 20em;

, ,
. em
, , . ,
24; em
24, 2em,
224, 48.
, .

7. , ,

227

CSS3 rem,
font-size html.
, Internet Explorer8 .
.

width
-.
75%, -
, 75%
. , . <div>
200 (, ),
150. height
, -,
.


width height ,
, -
. , ,
, , CSS. width height
, ,
(..7.1, ,
CSS ).
-
( ), . ,
, , .7.12.
, :
width: 100px;
padding: 15px;
border-width: 5px;
margin: 10px;

width, ,
,
, . , width
(
100). , , .

228

2. CSS

160: 20 , 10 , 30 100
. Internet Explorer 6-
, - .

.7.12.

:
! CSS
, .
,
(.7.13).
, , ,
100. , , . ,
, ,
,
, , , .
, height
<div>, , , , . ,
, ,
, , .

7. , ,

229

.7.13. (, div-
, ), ,

.
: , , , -
. ( ), .


box-sizing
, - ,
border, padding width.
( !), ,
.
.
, , CSS
float ,
, .
,
. , (
, <div>) , 50%

230

2. CSS

. , 50%,
, , , 50% ( , 50%
). .
, CSS3 , ( ) . box-sizing .
content-box ,
.
,
,
. , - content-box .
padding-box ,
. ,
, , 20, 100. , , 100- . 60
(100 20 [ ] 20 [ ]).
border-box ,
. , , . ,
box-sizing border-box, , 50%, 50% ,
.

, border-box. (, ,
- , ,
.) boxsizing, . :
box-sizing: border-box;

, Firefox ( ) ,
,
Safari iOS Android ( 3 ).
box-sizing ,
:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

7. , ,

231

- border-box,
,
:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.13 , border-box
-, CSS3, ( iPhone, ).

box-sizing Internet Explorer 8 ,


95% . , Internet Explorer7
, border-box Internet Explorer7
( )
. Internet Explorer7,
.


overflow

width height, . .7.13 ,
( ) , .
overflow.
, ,
, .
Visible , .
, overflow
(.7.14, ).
Scroll (. .7.14, ). - -,
HTML- ().
scroll, . , ,
.
Auto ,
. , scroll,
.
Hidden , (. .7.14, ). ,
, .
.

232

2. CSS

.7.14. overflow ,

7. , ,

233



, , CSS
. width height,
.
max-width .
, . , ,
. , . , ,
:
body {
max-width: 1200px;
}

,
, .
1200, , .
max-height max-width, ,
max-height . , ,
.
min-width . ,
. , , , , , :
body {
min-width: 760px;
}

, 500
, ,
.
min-height , min-width,
. , .7.13. , -
.
, .
. , 760,

234

2. CSS

1200,
:
body {
min-width: 760px;
max-width: 1200px;
}

HTML ,
: , ,
. , CSS . 3 , , ,
-
CSS- float.
float ,
-. , ,
(.7.15, ).
( ) ,
. -, .
-.
float, ,
, CSS.
,
,
, , -.
float ,
( .13), .
left, right none:
left , , -

, ;
right ;
none .

:
float: left;

7. , ,

235

.7.15. HTML ()
float ()


-. ,
.

236

2. CSS

, , -, ,
. , - 300, .
, .
, 300, .
float , <img>.
, , float. , .
, , ,
.
float , ( HTML5, <article>,
<section> <aside>). <div>, HTML-, -. , - (
). float width ( CSS
, ).
, , , , , , .

HTML-
-. HTML- HTML-, .
, -, <h1>, <p>. <p> <img>. , , <h1> <p>
- . , <img>,
.

,
-,
, -. , ,
-. , , , .
, ,
, (.7.16, ).
, ,
. , .
, ; , ,
(. .7.16, ). CSS .

7. , ,

237

.7.16. overflow: hidden; <h1> ,


,
. : overflow: hidden;.
overflow ( )
.

. .

.
, , ,
.


,
. - ,
. , -,

. , , ,
, . , ,
.
, . , , .
(.7.17, ).

238

2. CSS

. CSS clear.

.7.17. , (),
clear (),

clear ,
. ,

7. , ,

239

-, .
, (
) .
clear :
left , ;
right , ;
both ;
none : ,
, ,
, .
- . , :
.copyright {
clear: both;
}

.7.17 , clear . .
(1) , . (2) ,
. (3) , ( ) (2), - (1), (2)
. (3) .
clear: right; (..7.17, ). ,
.

, . , . .
.13,
.

: , ,

CSS, , -,

240

2. CSS

-, -.
, , . , .2.
07.


HTML-,
CSS. (.7.18).

.7.18. HTML ,
.

1. HTML- sidebar.html 07.


, ,
.5.
, ,

7. , ,

241

,
- ,
- .
. , margin padding, .
- , ,
. - , .
2. CSS /* end reset styles */ :
html {
background-color: rgb(253,248,171);
}

- .
-, background-color
<html>, <body>. ,
<body>.

, RGB- ( , , : #FDF8AB). , - www.colorhe


xa.com/. RGB , RGBA- ,
, ,
(RBG), (RGB ).

3. .
b ody {
background-color: rgb(255,255,255);
border: 3px solid rgb(75,75,75);
}

<body> - . <body> <html>,


, <html> , .
.

, background-color <body>,
. <html>, <body>
. , - 2,
<html> . , CSS.

4. (<body>), ,
( ):
b ody {
background-color: rgb(255,255,255);

242






}

2. CSS

border: 3px solid rgb(75,75,75);


width: 760px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 15px;

width 760 :
760,
<html> 760 <body>.
margin-top 20
, <body> - ,
, . auto
: , , ,
.

margin, , , :
margin: 20px auto 0 auto;

, <body>
, 15 padding. ,
15 .
, box-shadow.
5. body,
border, width (
):
b ody {
background-color: rgb(255,255,255);
border: 3px solid rgb(75,75,75);
box-shadow: 0 0 15px 5px rgba(44,82,100,.75);
width: 760px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 15px;
}

15-
(,
0 0 , , - -,
). 5px ,
5 . , rgba
- 75% (
).

7. , ,

243

, ,
.
6. - .
,
, (.7.19).
, .

.7.19. auto ,
,


, CSS,
, , . <h1> .
1. sidebar.html HTML-. body, Enter :
h 1 {
font-size: 2.75em;

244

2. CSS

font-family: Georgia, "Times New Roman", Times, serif;


font-weight: normal;
text-align: center;
letter-spacing: 1px;
color: rgb(133,161,16);
text-transform: uppercase;
}

,
. 2.75em
(44 ) .
Georgia ,
. text-align .
.

.
, CSS
, .

2. h1,
( ):
h 1 {
font-size: 2.75em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;

text-align: center;
letter-spacing: 1px;
color: rgb(133,161,16);
text-transform: uppercase;
background-color: rgb(226,235,180);

, , - . ,
, (
, The Amazing World of CSS,
).
T, , . .
3. h1, ( ):
h1 {
font-size: 2.75em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
text-align: center;
letter-spacing: 1px;

7. , ,

245

color: rgb(133,161,16);
text-transform: uppercase;
background-color: rgb(226,235,180);
padding: 5px 15px 2px 15px;

padding

5 , 15 , 2 15 .
: - ,
<body> (.4 ), 15
, .
, . :
.
4. h1,
( ):
h 1 {
font-size: 2.75em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
text-align: center;
letter-spacing: 1px;
color: rgb(133,161,16);
text-transform: uppercase;
background-color: rgb(226,235,180);
padding: 5px 15px 2px 15px;
margin: 0 -15px 20px -15px;
}

margin 0 ,
15 , 20 15
. , . . ,
- .
15 15 , <body>.
5. <h2>. h1:
h2 {
font-size: 1.5em;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
color: rgb(249,107,24);
border-top: 2px dotted rgb(141,165,22);
border-bottom: 2px dotted rgb(141,165,22);
padding-top: 5px;
padding-bottom: 5px;

246

2. CSS

margin: 15px 0 5px 0;


}


.
, . ,
margin 15 5 .
6. .
(.7.20).
.

.7.20. -,
,

7. , ,

247


, : , , . , , . , zzz ,
.
,
-, CSS.
1. sidebar.html HTML-.
-, .
<div>.
HTML- .
2. HTML
<h2> ( NOTE). <div class="sidebar"> Enter.
HTML-
. .sidebar,
, <div>.
3. </p>, <h2> (
</p>, <h2>Who Knew CSS Had Such Power?</h2>).
Enter </div>.
<div>. .
4.
<h2> :
. sidebar {
width: 30%;
float: right;
margin: 10px;
}

( ) 30%. , , . 30% . float


, margin 10
.
- , , , :
<h2> .
, . .
,

248

2. CSS

h2 ( ,
8).
5. .sidebar, ( ):
. sidebar {
width: 30%;
float: right;
margin: 10px;
background-color: rgb(250,235,199);
padding: 10px 20px;
}

-
, , .
6. .sidebar,
( ):
. sidebar {
width: 30%;
float: right;
margin: 10px;
background-color: rgb(250,235,199);
padding: 10px 20px;
border: 1px dotted rgb(252,101,18);
border-top: 20px solid rgb(252,101,18);
}

, . , ,
.
, ,

20. CSS,
(border-top, border-bottom, border-left border-right).
, -.
7. .sidebar, ( ):
. sidebar {
width: 30%;
float: right;
margin: 10px;
background-color: rgb(250,235,199);
padding: 10px 20px;
border: 1px dotted rgb(252,101,18);

7. , ,

249

border-top: 20px solid rgb(252,101,18);


border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}

border-radius .
10- . boxshadow , ,
. .
, .
, <h2> (- h2,
4). ,
.
, ,
.
8. .sidebar :
. sidebar h2 {
border: none;
margin-top: 0;
padding: 0;
}

- .sidebar , h2. ,
<h2>, .
, , , - h2 !
, <h2>
. ,
.
9. h2 overflow:
h2 {
font-size: 1.5em;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
color: rgb(249,107,24);
border-top: 2px dotted rgb(141,165,22);
border-bottom: 2px dotted rgb(141,165,22);
padding-top: 5px;
padding-bottom: 5px;
margin: 15px 0 5px 0;
overflow: hidden;
}

overflow hidden, ,
.
10.
- . ,
.7.21.

250

2. CSS

.7.21. CSS- HTML-



, . <p> ,
: , .. ,
sidebar.html (,
.copyright). ( ),
, ( text-transform, .6). <p> HTML-.

- ,
, . CSS .
: <img> background-image
( ).
CSS.
, .
- .

CSS <img>
<img> -
.
, () .
CSS , .
CSS, . ,
border
. CSS-,
.
Border (..
.7) . 1 .
: , , .
Padding . ,
. ,
.

252

2. CSS

Float float

-. ,
, ,
. , -
,
.
.
Margin
-, margin. -

, .
( )
( )
.

<img>.

- , ,
. , , ,
. , ,
.
, .galleryImage .logo, .
, . ,
<div> gallery , , : .gallery img.


background-image .
,
. , http://www.csszengarden.com. HTML-
-, .8.1, , .
, - ,
( , HTML- -,
, <img>).
, , ,
-. , , , .
HTML background
<body>. CSS , .

8. -

253

.8.1. csszengarden.com , ,
CSS HTML-
-

254

2. CSS

CSS- .
, .

GIF-, JPEG- PNG-: -




, JPEG, GIF, TIFF, PICT, BMP, EPS ..
, - .

: GIF, JPEG PNG.
.
,
.
,
, .
GIF (Graphics Interchange Format).

, :
, , .. GIF-

, ,
, - ,
-
. , GIF-
.
GIF 256
,
( ,
). , ,
, GIF
.
, PNG8,
, , GIF.
JPEG (Joint Photographic Experts Group).
, GIF
. JPEG
,
. JPEG
.

, GIF,
JPEG ,

.
JPEG,
,
. ,
JPEG ,
.
, PNG (Portable Network Gra
phics) GIF- JPEG, ,
PNG . PNG8
GIF. GIF, 256
.
, PNG8
, GIF.
PNG8 ,
, GIF.
PNG8, GIF.
PNG24 PNG32 ( PNG24 )
JPEG- .
,
PNG24 PNG32 , ,
, JPEG. ,
PNG, , JPEG

, PNG24 PNG32. , JPEG

, .
PNG32 ,
: 256 (
-).
-
50%,
- , .

8. -

255

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) /* */

.
URL, ,
HTML-. , , ,
. , styles (
) images ( ).
() () (.8.2).
,
(1 .8.2).

.8.2. ,
-

, <body>
, bg.gif images. (2
.8.2). :
body {
background-image: url(../images/bg.gif);
}

256

2. CSS

:
../ , ,
, styles;
images/ images;
bg.gif .
, HTML;
, . CSS
:
background-image: url(images/bg.gif);
background-image: url("images/bg.gif");
background-image: url('images/bg.gif');

URL
CSS

@ import URL: Uniform Resource
Locator ( , URL) , .
: ,

. ,
(,
-, ).

,
.
http://, () ,
. : http://www.cosmofarmer.
com/images/bluegrass.jpg.
(

) ,

. http://, .
/ (),
(,
). , /images/bluegrass.
jpg , bluegrass.jpg
images,
.

http:// .

.
,
, -.
,
URL
.
,
, ,
,
. URL,
.

,
.
,
,

. ,
-:

,


. ,
-
FileOpen (),

8. -

257


,
-
.

-
,

. CSS-
,
, .
,
, URL
,
.


background-image , , - (
HTML ). , background-repeat, ,
( ):
background-repeat: no-repeat;

. .
repeat , ,
- (.8.3).

.8.3. :
, (); , ,
()
-

258

2. CSS

no-repeat , -

. ,
, <body>.
, (
2 ).
repeat-x

( -). () - (.8.4, ),
.
repeat-y Y (

-). ,
- (. .8.4,
) -
(, ).

.8.4. ,
() () -


. CSS- backgroundposition .
, .


: : left, center, right,
: top, center, bottom (.8.5).

8. -

259

, -.
:
body {
background-image: url(bg_page.jpg);
background-repeat: no-repeat;
background-position: center center;
}

-,
:
background-position: right top;

.8.5.
,

(
background-repeat , ),
background-position. ,
repeat, - . background-position , .

, -. , -,

260

2. CSS

(.8.6, ), :
body {
background-image: url(background.jpg);
background-repeat: repeat-y;
background-position: center top;
}

.8.6. ()
() background-position

, bottom, center top,


- ( ) repeat-x
(..8.4, ).
.8.6, ,
. - ,
, , .

: <html> <body>.
<body> ,
<html> , ,
, .
, Internet Explorer6!


Firefox
, Firefox

. ,
bottom ,
. ,

8. -

261


-
.
-
,

Firefox
bottom . ,
: html { height:
100 %; }.


,
em. : ,
- ( ,
, ).
, . <li> (.8.7, ).
(. .8.7,
). ,
5 8 .
:
background-position:5px 8px;

.8.7.
,

(bottom) (right)
- em, ,
,
, (bottom right),

262

2. CSS

, .
,
, . , . ,
, .


,
. . , , . ,

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

x , 50% , 50%
- ( ,
). y , 50%
, 50% - . ,
, . , (
, - ).


, .

em,
, .
, em . ,
5 ,
, :
background-position: 5px 50%;

8. -

263

.8.8. , ()

, -, , , . , . - ,
, - <img>. ,
, -.


- ,
, .
, .
, , .
-
, , , ,
.
CSS background-attachment, : scroll fixed. scroll
, . fixed , (.8.9). , -

264

2. CSS

, :
body {
background-image: url(images/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}

.8.9. background-attachment
fixed

fixed . , ( ) , , .

8. -

265



CSS3 , , ,
. , , (
.8.10). ,
background-origin.
:
border-box ,

( .8.10);
padding-box ,

( .8.10). , ;
content-box ,

( .8.10).

. 8.10. background-origin background-clip

, , , . , ,
.

background-origin background-clip Internet Explorer 8 . Internet Explorer ,


.

266

2. CSS

, . , no-repeat
, (
):
background-image: url(logo.png);
background-repeat: no-repeat;
background-origin: content-box;

, background-origin background-clip. background-clip


. , (
. 8.10).
.
border-box .
, ( . 8.10). ,
.
padding-box ( .8.10).
,
.
content-box ( .8.10).
background-origin background-clip, :
background-origin: content-box;
background-clip: content-box;


HTML- <img>, .
,
. CSS3 background-size,
. ,
, .
, .
,
:
background-size: 100px 200px;

100 200. ,
auto:
background-size: 100px auto;

8. -

267

100,
, (
). .
,
100% ( .8.11):
background-size: 100% 100%;
contain . -

, ( .8.11). , ,
.
background-size: contain;
cover

, .
, ,
( .8.11).
background-size: cover;

background-size : ,
, (
.8.11).

. 8.11. background-size

background-size
. , , -, Internet
Explorer8, , ( ,
Internet Explorer 8 ).

background-size ,
, , .14. ,

268

2. CSS

, 960 ,
480 ,
:
background-size: 100% auto;
- , .

background
, , , .
, background-image, background-attachment .., .
background.
( background-color, )
CSS.
background,
background-image, background-position, background-repeat, background-attachment
background-color. , -:
body {
background: url(bullseye.gif) center center no-repeat fixed #FFF;
}

. . , background: yellow
background-color: yellow. ,
, . ,
:
background: url(image/bullseye.gif)

:
background: url(image/bullseye.gif) scroll left top repeat transparent;

, , . , , :
background-color: yellow;
background: url(image/bullseye.gif) no-repeat;

, .
, background
, background-color transparent ().
background-color
:

8. -

269

background: url(image/bullseye.gif) no-repeat;


background-color: yellow;

,
, .
, ,
, :
p {
background: url(icon.png) left top no-repeat rgb(0,30,0);
}

, , :
h2 + p {
background: blue;
}

,
. , , ,
!
background
, , .

,
CSS3, background-size, background-origin background-clip, ? -,
Internet Explorer 8 , , Internet Explorer 8 , ( ). ,
( ),
background-position background-size. ,
, , , ,
CSS3.


, ,
.
?
.
,
.

,
,
.

Morgue File ( www.morguefile.com ).
Stock.xchng (www.sxc.hu)
. Open Photo ( http://openphoto.
net/gallery/browse.html )

270

2. CSS


,
.
Creative
Commons (
),
: http://search.
creativecommons.org. ,
Creative Commons
Flickr (www.flickr.com/creativecommons) Picasa
Web Albums ( http://picasaweb.google.com ).
,

.
,
.

,
,
,
. Some Random Dude
121: www.so
merandomdude.net/srd-projects/sanscons .
,
: Colour-Lovers.com
(www.colourlovers.com/patterns), Pattern4u (www.
kollermedia.at/pattern4u) Squidfingers (http://
squidfingers.com/patterns).

: BgPatterns (http://bgpatterns.com),
Stripe Generator2.0 (www.stripegenerator.com)
PatternCooler (www.patterncooler.com).


,
. , ,
,
(.8.12). , ( .8.12),
, ( .8.12). ,
,
.
, CSS3 . :
, . ,
.
,
. , ,
,
. . GIF-,
JPEG- PNG-: -
, JPEG,
, , , PNG8. ,
JPEG PNG8 .

8. -

271

. 8.12.

background-image :

272

2. CSS

background-image: url(scrollTop.jpg),
url(scrollBottom.jpg),
url(scrollMiddle.jpg);

URL- ,
. ( ) .
, ,
( ) ,
.
, , ,
.

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

, , ( no-repeat) ,
background-image (scrollTop.png); ..
, -
:
background: url(scrollTop.jpg) center top no-repeat,
url(scrollBottom.jpg) center bottom no-repeat,
url(scrollMiddle.jpg) center top repeat-y;

, . , . , ,
, , . (scrollTop.jpg) (scrollBottom.jpg),
, , (scrollMiddle.jpg).

, Internet
Explorer 8 .
Internet Explorer 8,


Internet Explorer 8
(- WindowsXP).

Internet Explorer 8
,

8. -

273


, .

.

. ,
,
.8.12, ,
<div>,
.

, <h2>
Announcements. ,


. ,
div ,
<div>.
,
CSS (.
1).

() .
, .

,

:before,
:after:
.sidebar {
background: url(scrollMiddle.jpg)
center
top repeat-y;
}
.sidebar:before {
content: url(scrollTop.jpg);
}
.sidebar:after {
content: url(scrollBottom.jpg);
}

,
,

,
.
.15.
CSS3

.

: before
after.
.


,
.

. Apple

OS X iPhone.
Photoshop.
.
CSS3 ,
, - . background-image.
.


.
,

274

2. CSS

(.8.13). ( ),
. , , , :
background-image: linear-gradient(left,black,white);

. 8.13.
: Photoshop
Fireworks background-image

.
.7,
linear-gradient( ).
, -webkit-linear-gradient.

, CSS,
white black, #000000,
RGB- rgb(0,0,0) .. left, right, top bottom. , , ,
. , , , :
background-image: linear-gradient(top left,black,white);

. , . 0 360,
deg: 0deg (.8.14). ,
: 0deg ,
, 45deg

8. -

275

45 . ,
, .8.13,
:
background-image: linear-gradient(45deg, rgb(0,0,0), rgb(204,204,204));

. 8.14. , ,
, .
. ,

45deg , bottom left. :


background-image: linear-gradient(45deg, rgb(0,0,0), rgb(204,204,204));

:
background-image: linear-gradient(bottom left, rgb(0,0,0), rgb(204,204,204));

276

2. CSS

, . ,
. . ,
.8.14 , 45 ,
. -
.


, .

, .., . . , .8.13
:
background-image: linear-gradient(left, black, white, black);

, ( , RGB) , ,
:
background-image: linear-gradient(left, black, rgb(255,255,255), #FFFFFF,
HSL(0,0,0%));

- , , ,
.
,
.

background-position,
. , , . , .

, , - , - 10%
, ,
- , .8.15 (, - , ).
, ,

8. -

277

, :
background-image: linear-gradient(left, #900, #FC0 10%, #FC0 90%, #900);

. 8.15.

, 10%
(): ,
10% . 90% , 90% , - .

278

2. CSS

.
em. ,
.
.
.

, -
, , 0%, 100%.
,
. ,
.8.15 :
background-image: linear-gradient(left, #900 20%, #FC0 30%, #FC0 70%, #900 80%);

, #900 20%.
, 20% ( )
. , 20%- 30%- .

Internet
Explorer
. .7, CSS-
: -webkit- Chrome Safari, -moz- Firefox
-o- Opera. . , . ,

, :
background-image:
background-image:
background-image:
background-image:

-webkit-linear-gradient(left,black,white);
-moz-linear-gradient(left,black,white);
-o-linear-gradient(left,black,white);
linear-gradient(left,black,white);

. , Internet Explorer 9 . , Internet Explorer 9 . ,


, , :
background-color:
background-image:
background-image:
background-image:
background-image:

#FC0;
-webkit-linear-gradient(left, #900, #FC0, #900);
-moz-linear-gradient(left, #900, #FC0, #900);
-o-linear-gradient(left, #900, #FC0, #900);
linear-gradient(left, #900, #FC0, #900);

8. -

279

Internet Explorer 9 , . ,
, . RGBA- , , .
background, background-color ( background, background ).
RGBA :
background-color: #FC0;
background: -webkit-linear-gradient(left, rgba(153,0,0,.5), #FC0,
rgba(153,0,0,.5));
background: -moz-linear-gradient(left, rgba(153,0,0,.5),
#FC0,rgba(153,0,0,.5));
background: -o-linear-gradient(left, rgba(153,0,0,.5), #FC0,
rgba(153,0,0,.5));
background: linear-gradient(left, rgba(153,0,0,.5), #FC0, rgba(153,0,0,.5));

, . ,
WebKit ( Safari Mac iOS, Android)
. ,

. .



. . ,
,
, ,
. , , , .8.16, :
background-image: repeating-linear-gradient(bottom left, #900 20px, #FC0 30px,
#900 40px)

. , ,
20 - , 30
, 40 - . ,
.

. ,
, CSS3 http://lea.verou.me/css3patterns/,

280

2. CSS

www.standardista.com/cssgradients/ www.standardista.com/CSS3gradients/
flags.html.

. 8.16. CSS3,


- . , , .8.16, :
background-image: repeating-linear-gradient(45deg, #900 0, #900 10px, #FC0
10px, #FC0 20px);

- (#900) 0 10px. ,
. 10
(#FC0). , , ,
. , 20, .
, .
.
, Safari ( 5.1 iOS 5) Internet
Explorer 9 .
; ,
:
background-color: #FC0;
background: -webkit-repeating-linear-gradient(bottom left, #900 20px, #FC0
30px, #900 40px)
background: -moz-repeating-linear-gradient(bottom left, #900 20px, #FC0 30px,
#900 40px)

8. -

281

background: -o-repeating-linear-gradient(bottom left, #900 20px, #FC0 30px,


#900 40px)
background: repeating-linear-gradient(bottom left, #900 20px, #FC0 30px, #900
40px)


CSS , , (.8.17).
, , ( ) ( ). , .8.17 :
background-image: radial-gradient(red, blue);

. 8.17. ( )
( ). ,

, ( ) .
,
circle. , .8.17 :
background-image: radial-gradient(circle, red, blue);

,
, background-position.

282

2. CSS

, .8.17 , 20%
40% .
, :
background-image: radial-gradient(20% 40%, circle, red, blue);

, .
closest-side ,
. , .8.17
,
. .
:
background-image: radial-gradient(20% 40%, circle closest-side, red, blue);

closest-side ,
x y
( ).
closest-corner ( .8.17).
. , , .8.17
. :
background-image: radial-gradient(20% 40%, circle closest-corner, red, blue);
farthest-side

.
. , .8.17, :

background-image: radial-gradient(20% 40%, circle farthest-side, red, blue);


farthest-corner

. ,
.8.17, :

background-image: radial-gradient(20% 40%, circle farthest-corner, red, blue);

, . ,
, , -,
. , ,
, . ,
:
background-image: radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow);

8. -

283

, , CSS :
background-image: radial-gradient(20% 40%, circle, rgb(255,0,0) 20%,
rgb(255,165,0) 80%, #FFFF00);

, Internet Explorer 9
, ,
Safari, 5.1 ( iOS5). , . :
background-color: red;
background: -webkit-radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow);
background: -moz-radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow);
background: -o-radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow);
background: radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow);


, ,
.
, , em-. :
background-image: repeating-radial-gradient(circle, red 20px, orange 30px,
yellow 40px, red 50px);

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

- , , backgroundsize, background-position .. ,
, , ,
. .

,
Colorzilla
CSS. ,

284

2. CSS

,
( ) . Ultimate CSS Gradient Generator (www.colorzilla.com/gradient-editor/), .8.18. , ,
.

.

. 8.18.
, Ultimate CSS Gradient Generator

-, . .

8. -

285

1. , Presets
() (. . 8.18,1).
,
, - .
2. Orientation () (. .8.18,2).
, , , ,
.
(top left, ) (, 65deg). . ,
ellipse CSS circle.
.
3. ,
(. .8.18,3).
,
.
4. Color ()
(. .8.18,4).
. , RGB, HSL, . ,
OK.
5. Location ()
(. .8.18,5).
, , (. .8.18,3).

, (. .8.18,3) delete (), .

6. , , .
( 4 5).
7. ,
.
(. .8.18,6), (. .8.18,7).

Ultimate CSS Gradient Generator , -


Internet Explorer 9 . IE
(Preview) (..8.18), ,

286

2. CSS

Internet Explorer filters . ,


Internet Explorer ,
, , .

8. CSS
copy () (. .8.18,8).
CSS .
,
.
Internet Explorer 9 Ultimate
CSS Gradient Generator IE-only ( Internet Explorer).
: Internet
Explorer 9 . , Internet
Explorer 9,
SVG (Scalable Vector Graphics,
), .
, Internet Explorer,
(filter),
Internet Explorer.
Internet Explorer 8 .
.
1. IE9 Support ( Internet Explorer 9) , CSS (..8.18).
SVG-.
2. CSS ( 8 )
CSS.
3. Internet Explorer .
:
f ilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b',
endColorstr='#7ed6d3',GradientType=1 ); /* Internet Explorer 6-8
*/

Internet Explorer 8,
, Internet Explorer 8,
.
4. , background-color ,
Internet Explorer;
Internet Explorer 8 .

1:
-.
.
, ,

8. -

287

,
box-shadow .
, , . , .2. 08.


- CosmoFarmer.com
(.8.19). , - .
1. image.html 08\image_ex .
.8.19 -
HTML. . , (. .8.19, ).
CSS (. .8.19, ) .
2. styles.css image_ex .
, image.
html. ,
<img> HTML.
3. :
img.figure {
}

img.figure <img>,
figure.
( .figure,
, ).
4. float margin:
f loat: right;
margin: 10px;

float -, .
, .
- , .
5. , .
:
i mg.figure {
float: right;
margin-left: 10px;
margin-bottom: 10px;
border: 1px solid #666;
background-color: #CCC;
padding: 10px;
}

288

2. CSS

.8.19. -: () () CSS-

8. -

289

- ,
, , .
6. styles.css image.html. <img>
class="figure" ,
:
< img src="../
images/grass.jpg" alt="Apartment Grass" width="200" height="200"
class="figure" />

,
.figure.
7. - . , ,
.8.19, .
-, ,
08_finished\image_ex, image.html.
, - , . .
, ..
, , , . , .
.
- , ,
:
-.
, HTML5
: <figure> , .
<figcaption>, .
HTML-.

Internet Explorer 8 <figure> <figcaption>,


JavaScript- HTML5shiv. . . Internet
Explorer 8 HTML5 HTML5 .1.

8. image.html. <img>
class="figure", 6,
<figure>.

290

2. CSS

. , <figure> ,

.
9. <img> , ,
HTML- :
<figure>
< img src="../images/grass.jpg" alt="Creeping Bentgrass" width="200"
height="200"/>
< figcaption>Figure 1: Creeping Bentgrass is best suited for outdoor use and
should be avoided by the indoor farmer.
</figcaption>
</figure>

10.
.figure, , .
figure .
11.
styles.css:
f igure {
float: right;
width: 222px;
margin: 15px 10px 5px 10px;
}

float: right , margin


<figure> .
: width?
(200), .
, <figure> . , , .
222 , : 200, 10
, , 1, (. .7).
.
12.
styles.css :
f igure img {
border: 1px solid #666;
background-color: #CCC;
padding: 10px;
}

<img>,
<figure>. ,
<img> . .

8. -

291

13.
styles.css :
f igcaption {
font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif;
color: #333;
text-align: center;
}

, .6, ,
, Verdana.
font
.
, .
14.
figcaption :
f igcaption {
font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif;
color: #333;
text-align: center;
background-color: #e6f3ff;
border: 1px dashed #666;
padding: 5px;
}

background-color, border padding , .


.
15.
image.html styles.css image.html .
16.
,
, .
, .8.20. (
08_finished\01_image_ex.)

2:
- HTML- <table>,
, .
CSS-
HTML-.
1. gallery.html 08\02\gallery_ex.
HTML-, .
- . <figure>. <img>, <figcaption>.
< figure>
<img src="../ images/dandelion.jpg" alt="Dandelion" height="200"

292

2. CSS

width="200"/>
<figcaption>Figure 6: The dandelion: scourge of the apartment farmer.
</figcaption>
</figure>

. 8.20. <figure>,

HTML5, Internet Explorer 8


<figure> <figcaption>, JavaScript- HTML5shiv.
. . Internet Explorer 8 HTML5 HTML5 .1.

2. <link>, ,
Enter .

8. -

293

<link> , -.
3. ,
:
<style>
figure img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
}
f igcaption {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
}
</style>

-
, .
,
<figure>, .
.

, link IE,
JavaScript- HTML5shiv.

4. :
f igure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}

, /
. ,
.
, , .. -.
: 200 , 8
2 -.

.
.
. , , (
5). , HTML.

294

2. CSS


,
CosmoFarmer, .
.
,
?

<figure> (
,

,
).
: <figure

class="w300">.

, .w300,
( 300)
10 : .w300 {width: 310 }.

5. - gallery.html . , .8.21, .

.8.21. , ,

.8.21 , (. .8.21, ). display:inline-block


(. .8.21, ),
, .
, , , . , . ,
. ,
,

8. -

295

. , , ( , float,
.13). , .
6. gallery.html HTML-. figure. float:left display: inline-block; verticalalign: top. :
f igure {
display: inline-block;
vertical-align: top;
width: 210px;
margin: 0 10px 10px 10px;
}

display: inline-block (.
.9) / ( ),
( ).
, vertical-align top
<figure> <figure>, .
7. -
. .8.21, .
, .
,
, ,
.


, .
- .
Photoshop.
- CSS. CSS3 (
)
div-
,
. CSS3 , .
1. HTML- styles.css, .
img.
2. figure img box-shadow: 2px 2px 4px rgba(0,0,0,.5);,
( ):
f igure img {
border: 1px solid #666;
background-color: #FFF;

296

2. CSS

padding: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

box-shadow .7.
, 2
2 , 4. RGBA (. RGBA .6), 50%- .
3. - . ,
.8.22.

.8.22. -

8. -

297

, Photoshop!
-
08_finished\gallery_ex .

3:

CSS- background-image -.
(.8.23). HTML-.
, , .
, ,
. -,
. ,
background-image .

-
, , -. , background-image.
1. images.html. 08\bg_ex HTML-.
- : ,
(..8.23, ).
.
, , ,
.
2. <style> :
b ody {
background-image: url(images/bg_page.png);
background-repeat: repeat-x;
background-color: #FFF;
}

bg_page.png,
-. images.
, -
.
-
.
, , -
, .
,

298

2. CSS

background-repeat,
, .
,
.
, ,
, . , . ,
, - ,
. , Internet
Explorer 9 ,
.

, , 2,
:
background: url(images/bg_page.png) repeat-x #FFF;

3. .
- - . , .
, .
4. bg_images.html.
<div>, :
. wrapper {
background-color: #FFF;
}

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

8. -

299

.8.23.
- () ()

300

2. CSS

6. :
. banner {
margin-top: 48px;
}
.announcement {
margin-top: 115px;
}

, , , , , .
, .8.24.

.8.24. CSS ,


border (. .7)
-, CSS
. , ,
, . border .
<h2> ,
.

8. -

301

1. bg_images.html .
<h2> <div>:
. main h2 {
background-image: url(images/underline.png)
background-repeat: no-repeat;
}

background-image <h2>, main; no-repeat ,


.
, , , . !
2. #main h2 background-repeat :
background-position: left bottom;

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

, (
) . 7 . h2.
4. - .
<h2> . , ,
.


, ,
, . background-image,
. , ,
, - .

302

2. CSS

1. - images.html HTML-.
.
. announcement li {
list-style: none;
}

<div> announcement,
( <li>)
<div>. . .

list-style: none; <ul> <ol>,


- .

2. .announcement li :
b ackground-image: url(images/flower_bullet.png);
background-repeat: no-repeat;

. ,
, .
- ,

(.8.25, ). .

.8.25.
:

3. .announcement li :
p adding-left: 25px;
margin-bottom: 10px;

, ,
.
, (..8.25, ).
.
, .
background-position.
4. , background-position: 0px 4px;. :
. announcement li {
list-style: none;
background-image: url(images/bullet.png);
background-repeat: no-repeat;

8. -

303

b ackground-position: 0 4px;
padding-left: 25px;
margin-bottom: 10px;
}


( 0), 4 -
, , ,
, .

background list-style-image
. .

5. - .

(..8.25, ).


.
, ,
. .
, .8.23,
<div>. , ,
,
. ,
(. .8.12), , , , .
,
(. .8.12). ,
.
, .
(, ) div-, div-, div-.
.
CSS3 , . , .
1. bg_images.html.
.announcement ( 6 ) :
. announcement {
background: url(images/scroll_top.jpg) no-repeat center top,

url(images/scroll_bottom.jpg) no-repeat center bottom,

304

2. CSS


url(images/scroll_middle.jpg) repeat-y center top;
margin-top: 115px;
}

2. .announcement, .
, :
. announcement {
background: url(images/scroll_top.jpg) no-repeat center top,

url(images/scroll_bottom.jpg) no-repeat center bottom,

url(images/scroll_middle.jpg) repeat-y center top;
padding: 70px 0 60px 0;
margin-top: 115px;
}

,
, . ,
, .
3. .announcement li, ,
:
. announcement li {
list-style: none;
background-image: url(images/bullet.png);
background-repeat: no-repeat;
background-position: 0 4px;
padding-left: 25px;
margin-bottom: 10px;
margin-left: 30px;
margin-right: 40px;
}


, .
4. .
8.23 , Internet Explorer 8.
.

,
Internet Explorer 8
Internet Explorer 8 , ,
. (. 1), . div-, .

8. -

305

Internet Explorer 8 , , , Internet Explorer8


, , .
1. .announcement,
( ) :
. announcement {
background: url(images/scroll_middle.jpg) repeat-y center top;
margin-top: 115px;
}

,
div-.
, div.
2. .announcement :
. announcement:before {
content: url(images/scroll_top.jpg);
}

, :before . ( ) . .
3. :before :
. announcement:after {
content: url(images/scroll_bottom.jpg);
}

div- . div-, , div


, . ,
div (),
. CSS.
4. ,
( ):
. announcement:after {
content: url(images/scroll_bottom.jpg);
position: relative;
bottom: -5px;
}

, position .15. ,
5 , div-.
.8.23
,
. , bg_images.html bg_images_ie8.html
08_finished/03_bg_ex.

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


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


:
;
( , ,

URL- );
( );
( ).

9.

307

.3, CSS , : :link, :visited, :hover, :active. ,


,

, , .

:focus. , , , , . , .11.

,
-. :
a:link { color: #F60; }

, , .
-, :
a:visited { color: #900; }

,
, <a>, a.
, a:visited,
- .


-
CSS-,
:visited. ,
JavaScript
:visited ,
, . ,

,
Paypal.com, eBay.com,

.. -

,
,

,
.

:visited.
BankofAmerica.com

:hover (
).
.
JavaScript,
CSS (. ). ,
:

308

2. CSS

a:hover { color: #F33; }

CSS :hover. ,
, , , . , ,
, , . .

-, .
, ,
. :
a:active {color: #B2F511; }

:link, :visited: :hover. , , : link, visited, hover active.


: LoVe/
HAte (/).
:
a:link { color: #F60; }
a:visited { color: #900; }
a:hover { color: #F33; }
a:active {color: #B2F511; }

, hover active . , a:hover a:link a:visited,


.

? (..5).
, , , .
unvisited ( ) hovered (, ), a:link, , (), a:hover .


, ,
<a>. ,
, -. , , ? .
, - , (, ,
, ). , -

9.

309

, , - , .
:
<a href="http://www.hydroponicsonline.com" class="sponsor">Visit this great
resource</a>

:
a.sponsor { font-family: Arial, sans-serif; }
a.external:link { color: #F60; }
a.external:visited { color: #900; }
a.external:hover { color: #F33; }
a.external:active {color: #B2F511; }

, a, :
.sponsor { font-family: Arial, sans-serif; }
.external:link { color: #F60; }
.external:visited { color: #900; }
.external:hover { color: #F33; }
.external:active {color: #B2F511; }

, 'external'.

.
CSS- ( ,
:visited, . ). ,
.


-,
, . ,
, .
,
. HTML5- <nav>. :
nav
nav
nav
nav
nav

a { font-family: Arial, sans-serif; }


a:link { color: #F60; }
a:visited { color: #900; }
a:hover { color: #F33; }
a:active {color: #B2F511; }

<div> (
HTML5-) div-: <div class="mainNav">:
.mainNav a { font-family: Arial, sans-serif; }
.mainNav a:link { color: #F60; }

310

2. CSS

.mainNav a:visited { color: #900; }


.mainNav a:hover { color: #F33; }
.mainNav a:active {color: #B2F511; }

, - - (
.17).


( ).
<ul> , <ul class="mainNav">,
.mainNav a:link .


, , , , , . ! CSS,
. , ,
. ,
-,
, .
, ,
, .
. ,
, .
, , -,
.
(, ), , -
.

border <img> 0, Internet Explorer , . ,


: img { border: none;}.


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

9.

311

. ,
text-decoration none:
a {text-decoration: none;}

, . - ,
, - (..9.1, 2). ,
- , (..9.1,3), , .

.9.1.
(1) :
(2, 3, 4)
border (5) (6)

312

2. CSS

- ,
- , , .9.1,4.
, ,
:hover:
a {
text-decoration: none;
background-color: #F00;
}
a:hover {
background-color: transparent;
text-decoration:underline;
}
.

, ,
1 , .
border-bottom, .9.1,5.
:
a {
text-decoration: none;
border-bottom: dashed 2px #9F3;
}

, .
, padding.
. , . , .9.1,6 .
2
.8. .
Fireworks
Photoshop, Brush (), , .. ,
.
.
:
a {
text-decoration: none;
background: url(images/underline.gif) repeat-x left bottom;
padding-bottom: 5px;
}

9.

313


,
. border, backgroundcolor padding.
(.9.2).

.9.2. ,
- , ,

, ,
: <a link="stale.html" class="button">Free Donuts Here!</a>.
- (..9.2,
), :
a.button {
border: solid 1px #000;
}

:
a.button {
border: solid 1px #000;
background-color: #333;
}

a.button, .button . a.button


<a> button, .button
. , , .
CSS ,
. a.button, , .

314

2. CSS

, , border, background padding. ( .9.2).


, ,
background-color. ,
,
, , , ( .9.2).
: ,
- . ,
- .

, .9.2.
, ,
. , ;
,
(
).
.
CSS- -, .9.2, :
a.button {
background: #B1B1B1;
color: #FFF;
font-weight: bold;
border-width: 4px;
border-style: solid;
border-top-color: #DFDFDF;
border-right-color: #666;
border-bottom-color: #333;
border-left-color: #858585;
}

( ) :hover.
, .
:
, ..
- , , . ,
.9.2 :
1. background-color: #ee432e;
2. background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%,
#b51700 50%, #891100 100%);
3. background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%,
#b51700 50%, #891100 100%);
4. background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700

9.

315

50%, #891100 100%);


5. background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700
50%, #891100 100%);
6. border: 1px solid #951100;
7. border-radius: 5px;
8. box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px
#333333;
9. padding: 12px 20px 14px 20px;
10. text-decoration: none;
11. color: #fff;
12. font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
13. text-align: center;
14. text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);

1 - ; , (Internet Explorer 9 , ). 25
. 6 , 7 , 8
,
, . 9 , , 10
, .
, , , .

CSS (
). , CSS3 http://css3button.net.
CSS3-, http://hellohappy.org/css3-buttons/ http://webdesignerwall.com/
tutorials/css3-gradient-buttons.



. , , , HTML- <img>.
CSS- background-image, . .9.3 (
1
).

-,
. . .

316

2. CSS

.9.3.
: ( )

background-image , ,
.8. ,
.
no-repeat.
. ,
, (..9.3,
). ,
, :
background-repeat: no-repeat;.
background-position.
, backgroundposition (. .8).
,
, CSS: background-position: right center;.
em. . ,
,
: background-position:
10px 50%;.

9.

317


( ) ; ( ) .

, . ,
, .
, . ,
.
background-position; ,
background-position: right top;. , : background-position: 90% 75%; , 90% ,
90% .
, (, ,
.8).
padding.
, , . , .9.3 30 ( Home) ,
.

<a> , (
) .
.7.
(display: block)
inline-block (display: inline-block),
. .

. :hover :visited.

.

, , , .
:hover , , ,
. ,

318

2. CSS

.
. , , .


:
-, , -,
. . , ,
, ..
, ,
.
. CSS
, ..


, , , , . .1, HTML
, . , ,
. , <ul>, , .
,
-: <ul>
CSS. .9.4.

.9.4. CSS, <ul> , ,


( )

HTML
.
. , ( , ). (ID-) <ul>:

9.

319

<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>

CSS- ,
.
.
1. . , , list-style-type
none:
ul.nav {
list-style-type: none;
}

2. . , .
padding, margin, 0:
u l.nav {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

, ,
( : ).
. ,
;
, .


,
. ,
( ), .
, ,
.
1. . <a>
, ,
. (, Home () Our Products ( ))
.
(.9.5, 1). ,
.
, :

320

2. CSS

ul.nav a {
display: block;
}

block ,
,
. , , (, ), - .

.9.5.

2. . , . -, (. .9.5, 2).
.
<a>. , ,
8em, width:
u l.nav a {
display: block;
width: 8em;
}

9.

321

, ,
<li> <ul>, .
, , . :
a {
height: 1.25em;
line-height: 1.25em;
}

width, -, . 3 ,
, -.
, .

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



,
,

. ,
.
, ,
, .


,
. ,

, , ,
<ul>,
(
).


CSS ,
, , .9.4.
. display: inline-block ,
. ,
HTML. , <ul>.

322

2. CSS

,
<ul>, .9.6, 1.
display:inline display:inline-block.
block ( ) display inline (
). CSS.
1. , , .
u l.nav {
margin-left: 0px;
padding-left: 0px;
list-style: none;
border-bottom: 1px dashed #000;
}

,
(. .9.6, 1).

.9.6.
. inline inline-block
( )

2. . , , . inline display <li>


(..9.6, 2).
.nav li { display: inline; }

9.

323

, - . , ,
.

inline-block, Internet Explorer 7, inline-block


, , , <li>.

3. .
.
,
. .
, .
, .9.6, 3:








.nav a {
display: inline-block;
border: 1px dashed #000;
border-bottom: none;
padding: 5px 15px 5px 15px;
background-color: #EAEAEA;
text-decoration: none;
color: #333;
}

display inline-block.

( , , ).
. ,
, .

, .

,
<ul> text-align: center;. , -

,
inline inline-block , float.
, (., , .9.6). , -
<li>-. , ,
HTML:
<ul class="nav">
<li><a href="index.html">Home</a></li>

324

2. CSS

<li><a href="news.html">News</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>

</li> <li>
- .
.
</li> <li>

:
< ul class="nav">
<li><a href="index.html">Home</a></li><li>
<a href="news.html">News</a></li><li>
<a href="reviews.html">Reviews</a></li>
</ul>

, Dreamweaver . , .
. ,
list 2 :
. nav li {

display: inline;

margin-right: -5px;
}


5, .
, 5 ,
, .


, ?

.

.
.

CSS.


http://line25.com/tutorials/howto-create-a-pure-cssdropdown-menu.

CSS-,
CSS-
,
www.red-team-design.com/css3-animateddropdown-menu.

, , ,

Pure CSS Menu ,

9.

325


-,
HTML CSS (http://purecssme
nu.com ).
CSS :
- ,
, ,
,
.

: CSS-
- JavaScript-
.
JavaScript
jQuery
Navigation, https://github.
com/dansdom/plugins-navigation.

.
. . , ,
inline.

-. , , .

1. . <li>
float
:

.nav li { float: left; }

( )
, , .8 ( ( ) ,
).
2. display: block. , ( )
.
:

ul.nav a { display: block; }

3. . , ..
4. . ,
, <a>.
. ,
Corporate Philosophy ( ) . ,

326

2. CSS

, .

, .

, text-align: center;.

5. overflow: hidden <ul>. <ul>


, ,
, <ul> - (
<ul>).
u l.nav {
overflow: hidden;
},,

, ,
.9.7. ,
.
,.nav {
margin-left: 0px;
padding-left: 0px;
list-style: none;
border-bottom: 3px solid rgb(204,204,204);
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
width: 12em;
display: block;
border: 3px solid rgb(204,204,204);
border-bottom: none;
border-radius: 5px 5px 0 0 ;
padding: 10px;
margin-right: 5px;
background-color: rgb(95,95,95);
background-image: -webkit-linear-gradient(rgb(175,175,175), rgb(95,95,95));
background-image: -moz-linear-gradient(rgb(175,175,175), rgb(95,95,95));
background-image: -o-linear-gradient(rgb(175,175,175), rgb(95,95,95));
background-image: linear-gradient(rgb(175,175,175), rgb(95,95,95));
text-decoration:none;
color: white;
text-align: center;
font-family: Arial, Helvetice, sans-serif;
font-weight: bold;
}

9.

327

.9.7.

, ?
-
,
. ,
.
-
?

.
. ,
.
.
,
,
.

,


: http://css.maxdesign.com.au/
listutorial/.


: http://
css.maxdesign.com.au/listamatic/.
,
-,
List-O-Matic http://
www.accessify.com/tools-and-wizards/developer-

tools/list-o-matic/.

(, )
CSS- .
(
).

CSS-

, CSS,

JavaScript. CSS
:hover .
: hover (),
, ,

.
,
, -
XX.
JavaScript
,
. CSS ,
, CSS- (sprites),

328

2. CSS

CSS-
, Yahoo! Google, ,
. http://coding.smashingmagazi
ne.com/2009/04/27/the-mystery-of-CSS-sprites-techniques-tools-and-tutorials/.

, .
1.
.
, : , ,
. . : , .

Fireworks CS6 CSS-.


, SpritePad (http://sprite
pad.wearekiss.com).

2.
. .9.8,
, -
39.
3. CSS- .

(. .9.8, ).
:
a { background: #E7E7E7 url(images/pixy.png) no-repeat left top; }

4. :hover. background-position, . , , , - (. .9.8,


).
a:hover { background-position: 0 -39px; }

, -,
, , .

9.

329

.9.8. CSS-,
- ,
-

. Yahoo!, Amazon Google ( ) , .


Amazon : www.flickr.com/photos/mezzoblue/3217540317.
, -
( ) , .

15 .
http://veerle-v2.duoh.com/blog/comments/the_xhtml_css_template_
phase_of_my_new_blog_part_2/.
.


- : -
, - , Adobe Acrobat, Word,
ZIP . ,
, ,
. ,
.


, , . .3, HTML, ,
<img> alt, Our Company.
, .
, ,
URL, http://, http://www.yahoo.com.

330

2. CSS

, , URL, :
a[href^='http://']

^= , , <a href="http://www.google.com/">, <a href="http://www.


sawmac.com/missing/css3/"> ..
,
, , . .
, ,
, .
,
. , www.mysite.com,
,
: a[href^='http://www.mysite.com']. , ,
, , :
a[href^='http://'] {
background: url(images/globe.png) no-repeat center right;
padding-right: 15px;
}
a[href^='http://www.mysite.com'] {
background: none;
padding-right: 0;
}

CSS,
:not() CSS3 ,
URL, :

a[href^='http://']:not(a[href^='http://www.mysite.com'])

, http://,
, http://www.mysite.com. ,
Internet Explorer 8 :not().


.
: .
, .
,

9.

331

. - , .
, . mailto:, ,
:
a[href^='mailto:']


, -.
PDF ZIP- (, , ) . , ,
,
PDF, ( ), . ,
,
100!
. ,
- URL ,
. , PDF :
<a href="annual_report.pdf">, ZIP- <a href="tutorials.zip">.
URL .pdf .zip.
CSS , ,
- . ,
PDF, :
a[href$='.pdf']

$= , , , , href .pdf .
:
a[href$='.zip'] /* ZIP- */
a[href$='.doc'] /* Word- */

1:

, -
.

332

2. CSS

, , . , .2. 09.


.
1. - links.html 09\links.
( .9.9), - ,
. .

.9.9. -

9.

333

2. links.html HTML-
<style>.
- , -
<style> .

,
. ,
.

3. :
< style type="text/css">
a {
color: #207EBF;
}
</style>

<a> .
, . , . .
4. #main a text-decoration: none;.
, - . , , ,
.
.9.9 ,
.
-.
5. a font-weight: bold;.
(
).
, , textdecoration .
6. border, :
a {
color: #207EBF;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #F60;
}

334

2. CSS

, , . .
7. :visited :
a :visited {
color: #6E97BF;
}


. ,
(, , , ), links.html. ,
. ,
, 6. (..5): a:visited , , , .
- hover (),
.
8. :hover:
a :hover {
color: #FFF;
background-color: #6E97BF;
border-bottom-color: #6E97BF;
}

, . , -
(.9.10).

.9.10. ,
:hover, ,


-
(.9.11, ). mailto
, -

9.

335

-, . ,
.

.9.11. :
() , ()

1. links.html
:
a [href^="mailto:"] {
color: #666666;
border: none;
background: url(images/email.gif) no-repeat left center;
}

, , mailto: (
). , border: none , 6. background , no-repeat . , (
) , (..9.11, ).

336

2. CSS

2. 20:
padding-left: 20px;

,
,
20, . :
.
3. 10. :
a [href^="mailto:"] {
color: #666666;
border: none;
background: url(images/email.gif) no-repeat left center;
padding-left: 20px;
margin-left: 10px;
}

- (..9.11,
). ,
.


, . ,
- , , ,
. , , ,
,
, -.
-, ,
Resources () , , . , .
1. - links.html :
. resources a {
border-bottom: none;
}

, ,
<div> resources, .resourcesa
. , .
.
2. - links.
html:

9.

337

. resources a[href^='http://'] {
background: url(images/globe.png) no-repeat right top;
}

. , http://
( , resources).
, ,
.
.
,
, .
, ,
. , ,
( ).
,
, ,
.resources a, 1.
3. .resources a , :
. resources a {
border-bottom: none;
padding-right: 22px;
}

,
.
.
4. :
. resources a[href$='.pdf'] {
background: url(images/acrobat.png) no-repeat right top;
}
. resources a[href$='.zip'] {
background: url(images/zip.png) no-repeat right top;
}
. resources a[href$='.doc'] {
background: url(images/word.png) no-repeat right top;
}

, href, Adobe Acrobat (.pdf), ZIP- (.zip) Word (.doc) .


5. , hover ( )
:
.resources a:hover {

338

2. CSS

color: #000;
background-color: rgba(255,255,255,.8);

(.9.12).

.9.12. ,
-

09_finished/links/links.

html.

2:
-
.
1. - nav_bar.html 09\nav_bar HTML-.
, .
CSS
, <body>
-. HTML , . - , .9.13, 1.
HTML-, CSS.
2. <ul> class = "mainNav",
:
<ul class="mainNav">

class ,
. ,
(
-).
3. body :
. mainNav {
margin: 0;
padding: 0;

9.

339

list-style: none;
}

<ul> mainNav. , , .9.13, 2. .

.9.13. ,
,

4. :
. mainNav a {
color: #000;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
}

:
, , (..9.13, 3). .
5. .mainNav border padding:
b order: 1px dashed #999;
padding: 7px 5px;

-
(..9.13, 4): , . , <a>

340

2. CSS

. ,
,
(
.7).
.
6. display: block; .mainNav.
<a> , ,
, . . , <ul> .
7. .mainNav width:
175px;.
. mainNav {
margin: 0;
padding: 0;
list-style: none;
width: 175px;
}

175 - ,
- ( <ul>). - - (, ), ,
( , , 3).
.
8. .mainNav background :
. mainNav a {
color: #000;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
border: 1px dashed #999;
padding: 7px 5px;
display: block;
background-color: #E7E7E7;
background-image: url(images/nav.png);
background-repeat: no-repeat;
background-position: 0 2px;
}


(..9.13, 5). - : ,
, 2 (
1, 2).

9.

341

background, 8 :
background: #E7E7E7 url(images/nav.png) no-repeat 0 2px;.

9. .mainNav, :
. mainNav a {
color: #000;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
border: 1px dashed #999;
border-bottom: none;
padding: 7px 5px 7px 30px;
display: block;
background-color: #E7E7E7;
background-image: url(images/nav.png);
background-repeat: no-repeat;
background-position: 0 2px;
}

: , . . . ,
border-bottom, .
<ul>, ( ,
, <ul> ).
10.
.mainNav,
:
. mainNav {
margin: 0;
padding: 0;
list-style: none;
width: 175px;
border-bottom: 1px dashed #999;
}

, ,
, (..9.13, 6).



.
. ,
, .

342

2. CSS

, ( )
. .
. ,
, .
, .
1. nav_bar.html :
. mainNav a:hover {
font-weight: bold;
background-color: #B2F511;
background-position: 3px 50%;
}

- hover.
, . , CSS-, . 8
(.9.14).
, .

.9.14. CSS-
,


( -
).

9.

343

, , , . , HTML- : , , ,
. , .

, , . - : <a href="/horoscopes/" class="current">Horoscopes</a>.

2. <body> class="home":
<body class="home">

, ,
, CSS, - Features ().
, , .
3. HTML- Home ()
class="homeLink", :
<a href="/index.html" class="homeLink">Home</a>

,
, .
, .
4. 3 , : featureLink,
expertLink, quizLink, projectLink horoscopeLink.
HTML- . CSS-.
, , - Features ().
5. - :
. home .homeLink {
background-color: #FFFFFF;
background-position: 97% 100%;
padding-right: 15px;
padding-left: 30px;
font-weight: bold;
}

. CSS
Styles . 97% ,
. ,
(..9.14). , , .8.

344

2. CSS

.home .homeLink.
, ,
homeLink, <body> home.
, , quiz, c -
Home () .
- , :
Home () .
, .
6. :
. home .homeLink,
.feature .featureLink,
.expert .experLink,
.quiz .quizLink,
.project .projectLink,
.horoscope .horoscopeLink
{
background-color: #FFFFFF;
background-position: 97% 100%;
padding-right: 15px;
padding-left: 30px;
font-weight: bold;
}

, CSS-.
, .
id <body>, ,
quiz, Quiz () ,
Features ().
.

, .3.

7. class <body> feature :


<body class="feature">

-, ,
Features () (..9.14). ,
class <body>, , . , <body>
class="horoscope".

? , , 6 ( :hover : .quiz .quizLink:hover).


Home () ( home.png images).

9.

345

09_
finished\nav_bar\nav_bar_vertical.html.



,
-.
. ,
- ( nav_bar.html, , , , ).
1. ,
, nav_bar.html HTML-.
, .
- , . ,
<ul> . , . <ul>
, ,
.
2. .mainNav width: 175px;.

.
3. ( .mainNav):
. mainNav li {
float: left;
width: 12em;
}

<li> ( ,
).
. ,
<li> (
.8). ,
<li>,
. 12ems , .
, .
- ,
. ( .9.15, 1). ,
10 , <ul>, , , . ,
, . ,
, , 2. .

346

2. CSS

.9.15. ,
;
,

4. .mainNav a border-bottom: none; border-left:


none;.
,
, .
<ul> - ,
( .9.15, 2). <ul>.
5. .mainNav border-bottom: 1px dashed
#999999; border-left: 1px dashed #999999;.
- ,
,
(..9.15, 3). . ,
<ul>. , ( , ,
..13).
, , , . CSS- .
6. .mainNav:
. mainNav {
margin: 0;
padding: 0;
list-style: none;
border-left: 1px dashed #999999;
overflow: hidden;
}

9.

347

overflow: hidden .
? .12. , , Quiz, (..9.15, 4),
.
7. , 6 (
). background 97% 100% 3px 100%.
:
. home .homeLink,
.feature .featureLink,
.expert .experLink,
.quiz .quizLink,
.project .projectLink,
.horoscope .horoscopeLink
{
background-color: #FFFFFF;
background-position: 3px 100%;
padding-right: 15px;
padding-left: 30px;
font-weight: bold;
}

- , ,
(..9.15, 5).
, Internet Explorer.

, - . : .mainNav text-align: center


left-padding , .

-, , nav_bar_horizontal.html 09_finished\nav_bar .

10

,

CSS

-. GIF-.
Adobe Flash -, ,
HTML- , , , -. JavaScript
, -, .
, CSS3 , HTML-,
.

CSS3 , -, , , (
). , , ()
.
.
CSS-
transform.
, . , rotate, :
transform: rotate(10deg);

10. , CSS

349

10
.
CSS- , . (2D) Internet
Explorer 9, Safari, Chrome, Firefox Opera, Internet Explorer 8
. ,
. ,
, :
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

CSS3,
, -webkit-linear-gradient.
-ms-, Microsoft Internet Explorer. Internet Explorer 9 CSS3,
. Internet Explorer10 (, ,
) , . Internet Explorer 9 transform,
-ms-transform.

CSS- : . , 45, ,
, . -
,
( ), ( , ). scale
(. ).
,
, (.10.1). -
, , .
.10.1 <div>- ( )
. , , <div>- .

rotate transform : 0 360,


(.10.2). , , deg. , 180, :
transform: rotate(180deg);

350

2. CSS

. 10.1.

. 10.2. rotate div, button, banner,


photo r footer ,

,
-webkit-transform, -moz-transform, -o-transform -ms-transform.

. , .10.2 45 :
transform: rotate(-45deg);

0deg , 360deg , 720deg . , , , , , ,


( .10.2),

10. , CSS

351

360 . CSS3 CSS-. , ,


,
, 0deg :hover
1440deg. , .

,
scale (.10.3). , ,
:
transform: scale(2);

. 10.3. scale

,
. , , (, ,
.10.3).
, , , . ,
1 , .5
, 4 . 0 1 , 1 (0 ).
, . , <div>- 2,
, .
.

352

2. CSS

, : . , ,
CSS- width height,
fontsize. . ,
. :hover.
, , ,
.button.
:
.button {
font: .9em Arial, Helvetica, sans-serif;
border-radius: .5em;
background-color: rgb(34,255,23);
border: 1px solid rgba(0,0,0,.5);
padding: .5em;
}

,
:
.button:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

, . CSS- .

. , :hover,
. , HTML
, , CSS, width height <img>.

. ,
. , . ,
, , :
transform: scale(.5,2);

.10.3.
CSS3 : scaleX -

10. , CSS

353

, scaleY . ,
, :
transform: scaleY(2);

transform,
. ,
: -webkit, -moz- ..

, ,
:
transform: scaleX(3.5);

, :

. ,
W3C, , , .
, ,
:
transform: scale(-1);

, .10.4, . . .10.4
.
:
transform: scale(-1,1);

. 10.4. , CSS
. ,
,

. ! ,
(www.mos.org/sln/
Leonardo/LeonardoRighttoLeft.html), !

354

2. CSS

translate transform
.
. , - , ,
, . , translate div ,
, ,
(.10.5).
: , <div> .
, , .15.
,
. ,

,
, .
translate :active:
.button:active {
-webkit-translate(1px,2px);
-moz-translate(1px,2px);
-o-translate(1px,2px);
-ms-translate(1px,2px);
translate(1px,2px);
}

. 10.5. translate , em

translate : , .
.button 1
2 . , ,
.

10. , CSS

355

.
, CSS, px, em, % ..
CSS3 translateX
translateY . , .5em
translateY:
transform: translateY(-.5em);

translate CSS-.
, . , .

:
(.10.6). , 45 ( .10.6),
:
transform: skew(45deg, 0);

, Y (
.10.6), :
transform: skew(0,45deg);

. 10.6. skew

. ,
, .10.6:
transform: skew(25deg,10deg);

0deg 360deg, . ,

356

2. CSS

.10.6 45 , 45 ( ).

CSS transform
: -webkit-transform, -moz-transform ..

0deg 360deg. . .10.6


45- .

CSS-, http://westciv.com/tools/transforms/index.html.

translate scale, CSS3


X Y: skewX skewY.

CSS3 matrix.
. .
- http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/.


. ,
. transform . ,
45 :
transform: rotate(45deg) scale(2);

, :
transform: skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);

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


, ,
. ,
(.10.7, ).

10. , CSS

357

CSS3 ,
transform-origin. ,
background-position. , em .
, div-
(..10.7, ), left top:
transform-origin: left top;

:
transform-origin: 0 0;

:
transform-origin: 0% 0%;

(..10.7,
), right bottom:
transform-origin: right bottom;

:
transform-origin: 100% 100%;

, em ,
, .

. 10.7. transform-origin ,
. ,
( )

transform-origin , translate.

358

2. CSS


CSS3
. (3D transforms)

,
.

http://coding.smashingmagazine.com/2012/01/06/
adventures-in-thethird-dimension-css-3-d-transforms/
http://blogs.msdn.com/b/ie/archive/2012/02/02/css3-3dtransforms-in-ie10.aspx.

.


Apple's Morphing Power Cubes (www.webkit.org/blogfiles/3d-transforms/morphing-cubes.html)

,
.
Apple
Horizontal3D (https://developer.
apple.com/safaridemos/showcase/gallery/)

.
Snow Stack:
( ),

: http://www.satine.org/
research/webkit/snowleopard/snowstack.html.
- 2011 BeerCamp (http://2011.beercamp.com)

.

, , (
rotate), CSS3 - . CSS-
. , 360 . , .
. ,
, : .
(, ).
transition. CSS3 transition , . transition
,
.
. ,
. CSS
. :hover.
,
, , . ,
. , , :active (

10. , CSS

359

), :target ( , ) :focus (
, , ). , JavaScript (.
. JavaScript ).
, , ,
,
. ,
,
.
- CSS,
,
. , rotate, scale,
translate skew, ,
, color, background-color, border-color, border-width, font-size, height,
width, letter-spacing, line-height, margin, opacity, padding, word-spacing, top, left, right bottom, .15,
. www.w3.org/TR/
css3-transitions/#animatable-properties.

CSS3 . Internet
Explorer, , ,
10. .
: Internet Explorer 9
(,
hove) .


CSS- , ,
, ,
. . ,
. ,
. , ,
.navButton, :
.navButton {
background-color: orange;
}
.navButton:hover {
background-color: blue;
}

360

2. CSS

,
.
. , .navButton :
.navButton {
background-color: orange;
transition-property: background-color;
transition-duration: 1s;
}
.navButton:hover {
background-color: blue;
}

transition-property .
( ),
all CSS- ( ). , ,
:hover, , .
:
transition-property: color, background-color, border-color;

, , all:
transition-property: all;

CSS- all, .
, transitionduration. ,
( ). , ,
:
transition-duration: .5s;

transition-duration: 500ms;


. , , , , , .
, transition,
transi
tion-duration:
transition-property: color, background-color, border-color;

10. , CSS

361

transition-duration: .25s, .75s, 2s;

. ,
.25s color, .75s background-color, 2s
border-color. ,
.
, CSS3,
transition .
.navButton ,
,
:
.navButton {
background-color: orange;
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}

-ms- , Internet Explorer9


transition , Internet Explorer10 .

Firefox Opera transition.


, -moz- -o-.



,
transition-property transition-duration. transitiontiming-function . :
( transition-duration), .
, , ,
.
transition-timing-function
: linear, ease, ease-in, ease-out ease-in-out.
, ease, , , . linear
.

362

2. CSS

, ,
.
,
transition-timing-function , :
transition-timing-function: ease-in-out;

, , . , , :
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;

,
. www.the-art-of-web.com/css/timing-function/, .

transition-timing , .
(.10.8).
, Adobe Illustrator, , , . :
, , . , , .10.8,
( ), ( ), ( ). :
transition-timing-function: cubic-bezier(.20, .96, .74, .07);


.

. Ceasar,
: http://matthewlein.com/ceaser/.
. Caesar,
.10.7, :
. ,
.
,
, , .
, transition-duration,
.

10. , CSS

363

. 10.8.

JavaScript
CSS3-
,
- ( ,
-). ,


CSS- -.
,
CSS-.

364

2. CSS




:hover.

:focus (,

,
).

,

. JavaScript


CSS. JavaScript,
,
.

CSS , , :click ,

, CSS .
-

, CSS.
CSS CSS-
, JavaScript.


( scale-transform).
,
. JavaScript
, .

CSS-,
JavaScript,
: www.netmagazine.

JavaScript ,
-

com/tutorials/get-more-out-your-css-transitionsjquery.


, ,
transitiondelay. , , , :
transition-delay: .5s;

, , ,
,
:
-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
transition-delay: .5s;

,
. , ,
. , ,
. , , ,
,
.
:

10. , CSS

365

.navButton {
color: black;
background-color: #FF6603;
border: 5px solid #660034;
transition-property: color, background-color, border-color;
transition-duration: 1s, 1s, .5s;
transition-delay: 0, 0, 1s;
}
.navButton:hover {
color: white;
background-color: #660034;
border-color: #FF6603;
}

transition-duration,
.
transition-property.
,
, .

(.navButtonon ),
(.navButton:hover). CSS
. , CSS
.
transition-delay .
:
transition-delay: 5s;
:hover:
transition-delay: 0;
, :hover , . ( )
5 . ,
.

transition
transition-property, transition-duration,
transition-timing-function .
. , transition.
.
, ,
. , CSS- 1 ,
ease-in , :
transition: all 1s ease-in .5s;

366

2. CSS

all - CSS, ,
. ease-in, . ,
CSS- 1 , :
transition: all 1s;

, :
transition: background-color 1s;

CSS-, ,
CSS- ( ), ,
. , border-color
. :
transition: color 1s, background-color 1s, border-color .5s 1s;

, - :
transition: color 1s,
background-color 1s,
border-color .5s 1s;

, . ,
:
-webkit-transition: color 1s,
background-color 1s,
border-color .5s 1s;
-moz-transition: color 1s,
background-color 1s,
border-color .5s 1s;
-o-transition: color 1s,
background-color 1s,
border-color .5s 1s;
transition: color 1s,
background-color 1s,
border-color .5s 1s;

CSS3 ,
. CSS- CSS- . , CSS3, ,

10. , CSS

367

.. , , ,
.
CSS3 ,
, . ,
:hover , . , , .

CSS3, , Internet Explorer 9 .


.

(keyframes).
, . ,
. ,
, .
- , ,
.
, , . , . . CSS3
: , , ,
, .
.
1. .
CSS-.
2. .
.
,
.
.


. ,
:
@keyframes {
from {
/* CSS- */
}
to {

368

2. CSS

/* CSS- */

@keyframes. ,
. , ,
fadeOut fadeIn.

@keyframes CSS-, . CSS


, @import
@media , .

. from to
(from) (to).
CSS-, .
CSS-, CSS. , ,
.
opacity, 0 (), ,
1 ( ):
@keyframes fadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}

. . ,
. , , , .
:
@keyframes backgroundGlow {
from {
background-color: yellow;
}
50% {
background-color: blue;
}

10. , CSS

369

to {
background-color: red;
}
}

. ,
,
, 50%, 75%.
(, 25, 66% ..).

from 0%, to 100%.

CSS .
backgroundcolor, opacity, width, height ..:
@keyframes growAndGlow {
from {
background-color: yellow;
}
50% {
transform: scale(1.5);
background-color: blue;
}
to {
transform: scale(3);
background-color: red;
}
}

,
.
, CSS-.
: , , . , ,
, <div> .
, , ,
. ,
, . :
@keyframes glow {
from {
background-color: yellow;
}

370

2. CSS

25%, 75% {
background-color: blue;
}
to {
background-color: red;
}
}

25%, 75% 5. ,
25% .
75%, 25% . 25%
75% - , . 4, 2- - .
CSS- . , , ,
, , , .
,
:
@keyframes glow {
from {
background-color: yellow;
}
20%, 60% {
background-color: blue;
}
40%, 80% {
background-color: orange;
}
to {
background-color: red;
}
}

20%, 40%, 60%,


, 80% .
CSS3 , ( CSS3).
. -

10. , CSS

371

, :
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}

: @ keyframes.

-ms- Internet Explorer . Internet Explorer 9 , Internet Explorer 10 @keyframes .

372

2. CSS


,
, , , -
.
. , , h1, .
, , ,
, .
, ,
:hover, :active, :target :focus, , , .
, ,
JavaScript - .
CSS3 , ( , ). ,
, , ( @keyframes), .
. , , div- . div announcement:
-<div class="announcement">.

1. , @keyframes:
@ keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

, ,
:
from { opacity: 0; }
, ( )
:
from {
opacity: 0;
color: red;
width: 50%;
}

2. , <div>:
. announcement {
animation-name: fadeIn;
animation-duration: 1s;
}

10. , CSS

373

animation-name ,
. ,
1. animation-duration , .
, (, , )
, . ,
.announcement , , ,
width, background-color, border ..

('fadeIn') ,
, ,
- CSS.

@keyframes,
, ,
.announcement :
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
-moz-animation-name: fadeIn;
-moz-animation-duration: 1s;
-o-animation-name: fadeIn;
-o-animation-duration: 1s;
animation-name: fadeIn;
animation-duration: 1s;
}

,
@keyframes , ( ),

. ,
. ,
, ,
5 .
, . , fadeIn, , blink,
. ,
:
animation-name: fadeIn, blink;

, :

374

2. CSS

animation-name: fadeIn, blink;


animation-duration: 1s, 3s;


. , , . fadeIn 1,
blink 3 .
, .


, animation-duration . (transitions), (, 750ms) (, .75s).
,
, . , ,
, : linear, ease, ease-in, ease-out, ease-in-out.
, .
animation-timing-function . ,
ease-out fadeIn ( 1
), .announcement ( 2 ):
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease-out;
}

. , ,
. - , . ,
,
.
, ( 1 2), :
@keyframes growAndGlow {
from {
background-color: yellow;
animation-timing-function: cubic-bezier(1, .03, 1, .115);
}
50% {

10. , CSS

375

transform: scale(1.5);
background-color: blue;
animation-timing-function: linear;

to {
transform: scale(3);
background-color: red;
}
}

.
, transition-delay,
,
. , 1 ,
div-
announcement, .announcement :
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 1s;
}

animation-timing-function animation-delay ,
,
-webkit-animation-timing-function, moz-animation-timing-function . .


CSS ,
, , ,
.
, , . animation-iteration-count ,
. 10 (,
), :
animation-iteration-count: 10;

, ,
, . , , animationiteration-count : infinite. , fadeIn div- announcement
, :

376

2. CSS

.announcement {
animation-name: fadeIn;
animation-duration: .25s;
animation-iteration-count: infinite;
}

, , ,
. ,
( box-shadow).
-
. , , ,
, , . .
,
. :
, , , .
, ,
. ,
, animation-direction alternate. , ,
, fadeOut:
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}

, :
.fade {
animation-name: fadeOut;
animation-duration: 2s;
animation-iteration-count: 2;
animation-direction: alternate;
}

- fadeOut , fade. 2,
. animation-direction alternate, ( ( opacity 1)
0 ),
( opacity 0 1) .

,
, animationdirection alternate.

10. , CSS

377

, ,
, . , , ,
.
, - , . , , .
animation-fill-mode forwards.
animation-fill-mode: forwards;


, animation-name, animation-duration, ,
.

animation
, ,
, , ,
,
. -
,
animation. ,
animation-name, animation-duration, animation-timing-function, animation-iterationcount, animation-direction, animation-delay animation-fill-mode. , ,
:
.fade {
animation-name: fadeOut;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 2;
animation-direction: alternate;
animation-delay: 5s;
animation-fill-mode: forwards;
}

:
.fade {
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards;
}

!
: , ,
, , , . ,
.
. .
, . , (, fadeOut glow) , .fade, :

378

2. CSS

.fade {
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
}

,
:
.fade {
-webkit-animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
-moz-animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
-o-animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
}

,
.


CSS3 animation-play-state. .
running paused. ,
:
animation-play-state: paused;

CSS . , .
. fade:
.fade {
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
}

fadeOut glow , fade. , .


:
.fade:hover {
animation-play-state: paused;
}

, .

animation-play-state JavaScript. -

10. , CSS

379

,
. JavaScript CSS-
. JavaScript
.


.
CSS-,
JavaScript. :hover.

,
, .
,
@keyframes (1
).
:hover. (2 ). , .


, .
www.sawmac.com/css3 .
ZIP- (
). 10.
1. banner.html, 10.
, , , (.10.9). ,
.

. 10.9. , ,

2. <style>
:
n av a:hover {
-webkit-transform:scale(1.2);
-moz-transform: scale(1.2);

380

2. CSS

-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

HTML5- nav. <nav>


( ).
scale, . , Safari, Chrome, Firefox, Opera Internet Explorer 9,
, , .

,
-. , ,
. ( styles.css ,
-.)

3. -.
.
, , (.10.10). ,
, . (, ).
CSS-.

. 10.10.

Internet Explorer 8 ,
.

, , .
4. nav a:hover :
n av a {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

10. , CSS

381

. (Internet
Explorer 9 , Internet Explorer10 ,
-ms-transition.) -
CSS- <a>, <nav>,
.5s. , hover .
5. nav a:hover background-color: red,
:
n av a:hover {
background-color: red
-webkit-transform:scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

, ,

, . ,
, .
6. nav a , :
( ):
n av a {
-webkit-transition: -webkit-transform .5s,

background-color 1s ease-in .5s;
-moz-transition: -moz-transform .5s,

background-color 1s ease-in .5s;
-o-transition: -o-transform .5s,

background-color 1s ease-in .5s;
transition: transform .5s,

background-color 1s ease-in .5s;
}

transform .5s ,
transform . backgroundcolor 1s ease-in .5s ,
1,
ease-in, . .5s
, .5s
transform. , transform,
.
7. .
. .
, . , ,

382

2. CSS

, background-color,
. ,
1, , .


CSS3-.
.
CSS- @keyframes
. ,
.

CSS- ,
. , .

1. ,
nav a:hover:
@ -webkit-keyframes logo {
from {
-webkit-transform: rotate(0) scale(.5);
}
to {
-webkit-transform: rotate(-720deg) scale(1);
}
}

WebKit, ,
Chrome Safari. Firefox,
@-webkit-keyframes @-moz-keyframes. ( Opera
@-o-keyframes, Internet Explorer10 .)
,
rotate(0), scale(.5).
from to
720, .
.
- .
2. :
. logo {
-webkit-animation: logo 1s;
}

10. , CSS

383

logo, , . animation
, .
, logo , 1 .
3. Chrome Safari ( ,
).
, . , ,
. , , , - ,
. .
4. @keyframe, (
):
@ -webkit-keyframes logo {
from {

-webkit-transform: rotate(0) scale(.5);

left: 120%;
}
to {

-webkit-transform: rotate(-720deg) scale(1);

left: 0;
}
}

(-, 1.2- ). , CSS position. .15,


, CSS
.
0,
, .
5. Chrome Safari.
. .
, ,
.
6. , 4, :
@ -webkit-keyframes logo {
from {

-webkit-transform: rotate(0) scale(.5);

384

2. CSS

left: 120%
}
50% {
-webkit-transform: rotate(-720deg) scale(.5);
left: 0;
}
to {
-webkit-transform: rotate(0) scale(1);
}
}

: , .
1 2 3.
, 4: , . , . ,
, , 720 0, .
7. Chrome Safari.
, ,
.
, , . , . .
8. .logo , ,
:
.logo {
-webkit-animation: logo 3s;
}


, .
@keyframes.
9. @keyframes ,
:
@ -webkit-keyframes logo {
from {
-webkit-transform: rotate(0) scale(.5);
left: 120%
}

10. , CSS

50% {

-webkit-transform: rotate(-720deg) scale(.5);

left: 0;
}
to {

-webkit-transform: rotate(0) scale(1);
}
}
@ -moz-keyframes logo {
from {

-moz-transform: rotate(0) scale(.5);

left: 120%
}
50% {

-moz-transform: rotate(-720deg) scale(.5);

left: 0;
}
to {

-moz-transform: rotate(0) scale(1);
}
}
@ -o-keyframes logo {
from {

-o-transform: rotate(0) scale(.5);

left: 120%
}
50% {

-o-transform: rotate(-720deg) scale(.5);

left: 0;
}
to {

-o-transform: rotate(0) scale(1);
}
}
@ keyframes logo {
from {

transform: rotate(0) scale(.5);

left: 120%
}
50% {

385

386

2. CSS

transform: rotate(-720deg) scale(.5);


left: 0;
}
to {
transform: rotate(0) scale(1);
}
}

, , ,
CSS- . -
@keyframes
transform. .
, @keyframes
. .logo
.
10.
.logo, :
. logo {
-webkit-animation: logo 3s;
-moz-animation: logo 3s;
-o-animation: logo 3s;
animation: logo 3s;
}

11.
Firefox, Chrome, Safari Opera.

(. 10.11). , Internet Explorer 9
. , .
10_finished.
, , , , .
(: ,
. , ,
inset. nav a:hover,
.)

. 10.11. , , ,
, .
Home ()

11

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


HTML-
. , .
HTML,
, .
3 , CSS . (.11.1).
HTML XHTML , .
HTML , .11.2.
<table>
<caption align="bottom">
Table 1: CosmoFarmer.com's Indoor Mower Roundup
</caption>
<colgroup>

388

2. CSS

<col id="brand" />


<col id="price" />
<col id="power" />
</colgroup>
<thead>
<tr>
<th scope="col">Brand</th>
<th scope="col">Price</th>
<th scope="col">Power Source</th>
</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>
</table>

,
HTML: <table>, <caption>, <colgroup>, <col>,
<thead>, <tbody>, <tr>, <th> <td>. -, HTML- ,
: <table>, <tr>
<td> ( <th>).
CSS-. , <th>,
, <th>, <colgroup>
. , .tableHeader, .
.

HTML www.456bereastreet.com/archive/200410/bring_on_the_tables/.

11.

389

.11.1. CSS , ,
, ,
HTML

.11.2. Price ,
. <td>

390

2. CSS


CSS, ,
. color, , , . , , , .
, HTML-, ,
CSS.
<table> .
CSS, , HTML, .


. .7, . ,
. ,

(..11.2). , cellpadding
<table>, ,
. , ,
<table>. , 10
, :
td, th { padding: 10px; }

.
10 ,
3 5 , :
td {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
}

padding:
td {
padding: 10px 5px 3px 5px;
}

<img> ,
, block display
(. .7). , http://developer.mo
zilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps.

11.

391


, text-align vertical-align.
left,
right, center justify (.11.3). .
,
:
table { text-align: right; }

.11.3. CSS
, 10000 <td>

<th>, . th { text-align: left; }


.
CSS text-align ,
align <td>. HTML- align , HTML5 , CSS
. ,
,
.
, .
(. middle
.11.4). vertical-align. : top, baseline, middle bottom. top
, middle , bottom . baseline , top, , (. .11.4). ,
baseline. text-align
vertical-align ,
, <th> <td>.

392

2. CSS

.11.4. CSS vertical-align align <td>.


,
: ,

, .
( ), . ,
<table class="stocks">
.stocks td .stocks th, .
, <td
class="subtotal"> .


CSS border (. .7)
, , - . , ,
<table>, , - . , (td { border: 1px solid black; })
, .11.5.
, - CSS- border-collapse.
. ,
2.
, .

11.

393

CSS border-spacing, , .
, ,
, border-spacing 0:
table {
border-spacing: 0;
}

,
:
table {
border-spacing: 2px;
}.

. ,
, , . ,
, , (..11.5,
). ( ) border-collapse.
separate collapse. separate ,
: . , (..11.5,
). collapse :
table { border-collapse: collapse; }

border-collapse collapse, border-spacing


.

. ( )
, border-radius. ,

,
:



td {
border: 1px solid black;
border-radius: 5px;
}

, border-collapse collapse border-radius


.

box-shadow. , , ,
.

394

2. CSS

.11.5.


,
.11.6, . ,
. , CSS ,
. nth-of-type,
:
tr:nth-of-type(odd) { background-color: red; }
tr:nth-of-type(even) { background-color: blue; }


, (, products
), :
.products tr:nth-of-type(odd) { background-color: red; }
.products tr:nth-of-type(even) { background-color: blue; }

.
(. .8) (. .8) , ,

11.

395

.11.6 ( 1 ). .
, ,
, <td class="price">.

.11.6.

nth-of-type Internet Explorer 8 .

. HTML
<colgroup> <col>,
. <col>
ID.
: width (backgroundcolor, background-image ..). .
, HTML , ,
<col>. , HTML: <col class="price">.

200:
.price { width: 200px; }

396

2. CSS

, . , <col>, price:
.price { background-color: #F33; }

, , ,
<td> <th>,
.


- . , , -
,
, . , , . CSS, ,
, : , . CSS- ,
.
(.11.7).
Internet Explorer 9 (. .11.7, )
(Text area) (. Borders () ). , Submit
() Backgrounds (). Chrome (
), Firefox ( ) Safari () ,
. .
, , , .


,
CSS,
(..11.7), ,

,
Submit ()
. ,
.
Submit ()
. , ,
.
,
,
.

-
, ,

(. .11.7,
).
,
,
- ,
.
, ,
,
- .

11.

.11.7.

397

398

2. CSS

HTML-
HTML- .
(, ),
(). ,
, .
Fieldset. <fieldset> , .
, . Internet
Explorer (
.11.7). <fieldset>
. Internet Explorer, ,
, margin
<fieldset>).
Legend. <legend> <fieldset>,
. fieldset.
<fieldset> , , , :
<legend>Shipping Address</legend>. CSS
<legend>, , .
. <input type="text">, <input type="password"> <text
area> .
. , ,
, ,
. CSS- width. height <textarea>.
. , <input type="submit">,
,
- . , , , .
text-align. .
. , <select>, , .
, .
,
.
. . Opera
. Internet Explorer
.
, .

11.

399

:
,
. ,
, , ,

HTML- <input>. 200
, ,
,
,
<input> . ,
-,

, <input

HTML
. type ,
<input>.

text. ,

,
:
input[type="text"] {
background-color:blue;
}

text submit,
.


CSS
,
, .


, Internet Explorer7,

.

type="text" class="textfield" name="email">,

CSS
, ,
-.
(.11.8, ). ,
(. .11.8, ).
.
HTML.
,
. (, ..) ,
. CSS,
, .11.8 ( HTML).
.
1. .
<label>, . . ?, <label>.
?
<span>: <span> ?</span>.
: <span class="label">,
<label>, ( . 11.8
First name (), Last name () ..,
<label> ).

400

2. CSS

.11.8. , ,
().
()

www.htmldog.com/guides/htmladvanced/forms/,
<label>.

2. inline-block display .
<label> <span> ,
, , width,
height text-align . ( label )
(inline-block), -
( inline ). width ,
, . ,
:
. label {
display: inline-block;
width: 20em;
}

width inline-block label , ,


.

11.

401

3. . , . top
vertical-align, .
, . , ,
.
.





}

.label {
display: inline-block;
width: 20em;
vertical-align: top;
text-align: right;
margin-right; 15px;

. ,
, , . 2 ,
.


,
. :focus
,


( ).
, ,
CSS.

.
:checked
.
, -

CSS-
. , ,
- ,
:checked
- CSS.

.
,
:

.special:checked

:
<input type="checkbox" class="special"


.
: ,

. (
, )
JavaScript,
:enabled :disabled
JavaScript.
.
, ,
.

, ,
. JavaScript,
,
- ,
:

402

2. CSS


:disabled {
background-color: #333;
}

,

HTML5,


. ,
- http://html5doctor.com/css3pseudo-classes-and-html5-forms/. ,
-
, HTML5.

1:
HTML , CSS
. , HTML .
, HTML-, CSS. , ,
, . ,
, www.sawmac.com/css3/.
11\table.
1. table.html.
HTML. ,
,
(.11.9). , <col> . , <col>
, .
2. table.html .
,
. inventory,
.

,
.

3. <style> :




.inventory {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
margin-top: 25px;
}

, . , 100%, ( <body>

11.

403


). <table> ,
<caption>, <th>, <td> .. , margin-top
.

.11.9. ,
CSS, HTML- (),
()

.
4. :
. inventory caption {
text-align: right;
font-size: 1.3em;
margin-bottom: 10px;
}

<caption>, inventory ( <table> ).


<caption> .
,
.
.

404

2. CSS

, . . , .
5. :
. inventory td, .inventory th {
font-size: 1.4em;
border: 1px solid #DDB575;
}

(<th>)
(<td>),
. ,
,
(.11.10, ). - - . .

.11.10. ().
. border-collapse
()

6. border-collapse , 3.
:
. inventory {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

11.

405

width: 100%;
margin-top: 25px;
border-collapse: collapse;
}

border-collapse . , , , .
border-collapse,
, , 2. , , , . , .
7. , 5:
. inventory td, .inventory th {
font-size: 1.4em;
border: 1px solid #DDB575;
padding: 3px 7px 2px 7px;
}

-
, ,
.
8. .inventory td, .inventory th; :
. inventory th {
text-transform:uppercase;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
}

. td,th
. , <th>,
. , padding-top padding-bottom , 7. , <th> 7
, 7.
.
- ,
, , , . , .
9. th, :
.inventory th {
text-transform:uppercase;
text-align: left;

406








}

2. CSS

padding-top: 5px;
padding-bottom: 4px;
background: rgb(229,76,16);
background: -webkit-linear-gradient(rgb(229,76,16), rgb(173,54,8));
background: -moz-linear-gradient(rgb(229,76,16), rgb(173,54,8));
background: -o-linear-gradient(rgb(229,76,16), rgb(173,54,8));
background: linear-gradient(rgb(229,76,16), rgb(173,54,8));
color: white;

RGB,
Internet Explorer 9 ( )
. ,
. , .
,
, ,
. ,
nth-of-type.
10.
-:
. inventory tr:nth-of-type(even){
background-color: rgba(255,255,255,.1);
}
.inventory tr:nth-of-type(odd){
background-color: rgba(229,76,16,.1);
}

, nth-of-type
, ,
. <tr>, <tr>.
, , ,
Price () Rating ().
. <col>, . .11.9
, price rating.

.
11.
:
# price, #rating {
width: 15%;
}

. , ,
.11.9, .
11_finished\table.

11.

407

2:
, CSS ,
. form.html
11\form, , CosmoFarmer.com (.11.11). ,
, ,
. ,
, .
, , .

.11.11. <table> .
CSS,
( , )

1. form.html .
,
. , .
2. <style> :
. subform {
font-size: 1.2em;
color: white;
font-family:Tahoma, Geneva, sans-serif;
}

subForm, , <form>.
.
, ,
( ), ( ).

408

2. CSS

3. :
. subform .label {
display: inline-block;
width: 200px;
vertical-align: top;
}

.label, . ( ) - . 200,

.
. , .
4. HTML- <label for="name">
class="label", :
<label for="name" class="label">

.
5. 4 HTML: <label for="email">, <label
for="refer">, <label for="comments">.
Rate your apartment farming
skills ( ). <label>,
,
. <span> ,
label.
6. Rate your apartment farming skills ( )
<span>, label:
<span class="label">Rate your apartment farming skills</span>

(.11.12, ).
,
.
7. #subForm .label, 3:
. subform .label {
display: inline-block;
width: 200px;
vertical-align: top;
text-align: right;
margin-right: 10px;
font-weight: bold;
color: rgba(255,255,255,.5);
}

. , , .11.12, .

11.

409

.11.12. ,
(), ,

, Subscribe (), , . ,
.
8. .
.subform input[type="submit"] {
margin-left: 220px;
}

<input> type="submit",
.
.
9. Subscribe (),
:

410

2. CSS

. subform input[type="submit"] {
margin-left: 220px;
padding: 10px 25px;
font-size: 1em;
color: white;
}

padding , font-size color .


.
10.
Submit () :
. subform input[type="submit"] {
margin-left: 220px;
padding: 10px 25px;
font-size: 1em;
color: white;
background: rgb(0,102,153);
background: -webkit-linear-gradient(rgba(255,255,255,.1) 40%,

rgba(255,255,255,.5));
background: -moz-linear-gradient(rgba(255,255,255,.1) 40%,

rgba(255,255,255,.5));
background: -o-linear-gradient(rgba(255,255,255,.1) 40%,

rgba(255,255,255,.5));
background: linear-gradient(rgba(255,255,255,.1) 40%, rgba(255,255,255,.5));
}

( Internet Explorer 9 ), .
. 40%
, ( . 8).
, . ,
.
11.
Submit () (
):
. subform input[type="submit"] {
margin-left: 220px;
padding: 10px 25px;
font-size: 1em;
color: white;
background: rgb(0,102,153);
background: -webkit-linear-gradient(rgba(255,255,255,.1) 40%,
rgba(255,255,255,.5));
background: -moz-linear-gradient(rgba(255,255,255,.1) 40%,
rgba(255,255,255,.5));
background: -o-linear-gradient(rgba(255,255,255,.1) 40%,
rgba(255,255,255,.5));
background: linear-gradient(rgba(255,255,255,.1) 40%, rgba(255,255,255,.5));

11.

411

border: none;
border-radius: 5px;
box-shadow: 0 0 4px white;
}

border none , , border-radius


. ,
( 0 0),
, , - .

. .subform input[type="submit"]:hover . , !

Subscribe () , ? .
.
12.
:
. subform select {
font-size: 1.2em;
}

. ,
. (, Safari)
,
.
.
13.
:
. subform input[type="text"], .subform textarea {
border-radius: 5px;
border: none;
background-color: rgba(255,255,255,.5);
color: rgba(255,255,255,1);
font-size: 1.2em;
box-shadow: inset 0 0 10px rgba(255,255,255,.75);
}

, text,
( <textarea>).
, , border-radius,
background-color, font size box-shadow). ,
.
14.
, ( ):

412

2. CSS

. subform input[type="text"], .subform textarea {


font-size: 1.2em;
border-radius: 5px;
border: none;
background-color: rgba(255,255,255,.5);
color: rgba(255,255,255,1);
font-size: 1.2em;
box-shadow: inset 0 0 10px rgba(255,255,255,.75);
width: 500px;
padding: 5px;
}

,
:focus (.
.9). .
15.
:
. subform input[type="text"]:focus, .subform textarea:focus {
background-color: white;
color: black;
}

. ,
.11.13.

.11.13. :focus,
: . ,
,

11_
finished\form.

12. CSS
13.
14. -
15. -

12

CSS

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

( ), .
CSS . ,
CSS. , , .

-
- . ? : Android iPad? , , ,
. :
15- 640480 30- 50000004300000.
,
.
- . - :
. , . ,
, , , ,
. ,

. -

12. CSS

415

( ,
) , .
-
, .
. , .12.1, .
, . , , . , , ,
( ) .
1000, ,
1024768.
960.
-,
,
, - .

, ,
www.alistapart.com, www.espn.com www.nytimes.com.

. ,

. ,
.
, (. .12.1, ).
, ,
, .

, , .

, http://maps.google.com.

- (Responsive Web Design, RWD). ,

- (Ethan Marcotte),
, -
, - ,
.

416

3.

-
- . ,
- , , . ,
- ,
. - CSS, (Media Queries)
, ,

, .

max-width min-width .


, , (. .12.1, ). , ,
(..12.1, ), . , .12.1,
Boston Globe (), (), ().
. - .14.

CSS-
.1, HTML
. <table>, , ,
,
. HTML, (.12.2). , <table> ,
(, ),
. , HTML . ,
CSS.

12. CSS

417

.12.1. -

HTML- :
.
CSS- ,
.

, .
HTML5
, <div>-.

418

3.

.12.2. HTML-,
Photoshop HTML CSS,

HTML- <div>

12. CSS

419

<div>
.
CSS <div>. HTML- CSS .1, <div> HTML, (
, ). , , .
<div> HTML-, . , (..12.2),
, <div>
. , <div>
, , , , .. <div> .
HTML- <body> <div>.
, CSS .
,
.
<div>-,
, , <div>- . <div> : <div class="banner">. , ,
, ,
. , , div-, , div-
: <div class="photo">. ( , div-, . HTML-
<div> <span> : .3.)
, (.5),
,
#home #banner #nav ,
. - , .
<div>, ,
(ID), CSS , (..13).


div CSS-,

. ,
<div>

420

3.


. ,
(,
, ,
.9). , ,
, <div> : <div
id="mainNav"><ul>...</ul></div>.


.7.

= "mainNav">.

,
<div>. ,
.
<div>
, ,
<div>. , <div>

HTML.
<div>, .

, <div>,
,
HTML. ,
,

.
<div> <blockquote>,
float,

HTML
,
, .
<div>
,
. , HTML5,
,
.

<div>,
<ul> . <ul>
,
: <ul class

HTML5
HTML5 div. HTML5 ,
. , <article> , , . <header>
.
<footer>, ,
, -,
.. , HTML5 , <div>
. ( HTML5 www.adobe.com/devnet/dreamweaver/articles/
understanding-html5-semantics.html.)

HTML5, HTML5-, . Internet Explorer 8 HTML5 HTML5 .1, Internet Explorer 8


.

.1, HTML5 -. , <header>,


. <figure> . , -

12. CSS

421

, , . ,
<div>- <footer>.
HTML5 <div>- - .

, ,
, float.
( , 13.)
, , -, HTML
. HTML
<article>, HTML5 - , -. ,
,
HTML5 , HTML5
. <div>-
JavaScript, HTML5 Internet Explorer 8 (. ), -
<div>-.

CSS
- CSS- float ( CSS-
). , ,
.8,
,
. :
, (,
, ,
). float <div>
, .
, ,
<div> .
CSS- . , , 100
15 . ,
InDesign Quark Xpress, . ,
-,

. .14,
, .
,
.

422

3.


- CSS , . , HTML CSS. , , .
CSS . ,
CSS ( ), , ,
, - .
, ,
. , . ,
- , .


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


(Mobile First)
. Mobile First
, , . Mobile First
, , , ,
, .

12. CSS

423

, , ,
( , , ). 32- , ,
, .

Mobile First .
, : www.abookapart.com/
products/mobile-first.

, CSS3
.
CSS- float,

-.
float
,
.
W3C

CSS-. , CSS-
multicolumn

.
.
flexible
box,
,
,
.

.

.


.13.
, CSS- grid
, ,
-.
,

.
-
. CSS grid
(
) -
, -
Internet Explorer10.
http://blogs.msdn.com/b/
ie/archive/2011/04/14/ie10-platformpreview-and-cssfeatures-for-adaptive-layouts.aspx.


. HTML:
div-, <header>, <article>, <footer> ..
, ,
HTML.

424

3.

HTML . , .
(div HTML-)
, ..
. , ,
( ).

Yahoo! Stencil Kit (http://developer.yahoo.com/ypatterns/


wireframes), Illustrator, Visio, OmniGraffle -. , , , ,
.

Photoshop,
Illustrator Fireworks, . ,
.

Illustrator, HTML CSS.

.
Photoshop Illustrator , CSS, , CSS.
, HTML,
, CSS-,
, .


, ,
HTML CSS . , . , .12.2
, : ( A .12.2).
, ,
<div> ( HTML, ).
,
<div>. , ,
, , HTML-
<div>, .
, , (,
.12.2), , -

12. CSS

425

<div>. HTML-, ,
,
(, , ).
<div>, ,
<div>. , .12.2 <div>,
. div- news footer <div>-.
, . ,
( )
,
. , .


. , :
.
, , ..
. ,
, <div> .
, .12.2 <header>, div- main,
<section> <footer> ( <body>)
.
, , CSS,
<div> .


, , , -,
, . backgroundimage , <img>.
, <img>,
, .
, .12.2 (B)
. <div>
Compassionate care (C),
. , ,
, ,
<div>.
.

<div> ( HTML).
, , , <img>, .
, CSS, , ,
, <img> alt.

426

3.


, , .
.12.2. <div>,
. ( , , , ), ,
, , ,
.


Photoshop, Illustrator Fireworks, , , . , .

. -,
.

(.). , , , , .
, -
? CSS, , position. .15,
-
.


. CSS-, . , , , . ,
(C .12.2)
.
.12.2, <div> (<div class="main">).
, ,
, <div> .

13

, ,
float , - .
.7, , , , <div>, . float
( ). HTML-,
, .
float : left, right none.
, <img>:
.floatRight { float: right; }

, <div> ,
:
.sidebar {
float: left;
width: 170px;
}

none ().
, . ,
, , "sidebar",
. , , , , . CSS- (.
.5) float: none,
.

.13.1 .
. , , . , . .

428

3.

.13.1. float -

, .13.1,
.
1. <div> ID.
.13.1 , ,
(<div class = "news">), (<div class = "main">).
2. <div> . , (, HTML ). HTML
HTML , .
.13.2 .
HTML- : <div>
, <div> , , , <div>
. . HTML,
( ), ().

13.

429

.13.2. <div>
().
(), CSS- float: right

3. . .
, .

430

3.

, 170px 10em.
, (. -
). 20%,
700 ,
140. 1000,
200. , , .
,
. ,
,
, -
, .

, .
.

4. . , .
, , , :
.main { margin-left: 180px ; }

, :
.
, .
div , .
,
, .


, ,
. .
<div> (, <div class = "wrap">), -, , , 960 (..13.2,
). .

<div>, : <body>.
.7.

13.

431

(.13.3). <div> .
, ,
, .

.13.3.
.
HTML-, , -

CSS, , .

? . , ,
,
,
, . ,

- CSS.
, ,
CSS- .

,
. Layout Gala
40 CSS-,
(http://blog.
html.it/layoutgala/).
, <div> CSS-,

,
.

,
, .. Gridinator (http://gridinator.
com)
grid- (.
.



). HTML CSS- .

432

3.


,
. , , .13.4,
. .
,
, .
,
.
, ,
<div> , ( ,
).
, ,
div HTML. , , .13.3,
<div> .
,
,
.
<div> HTML - ,
- CSS, , , . CSS
( , ,
) , . ,
,
. ,
, ,
, .
,
. HTML-,
. - , , . ,
HTML-, .
, , ,
HTML- .
.13.4 HTML- , ,
.
HTML- , <div> . <div> , (..13.4,
). ! HTML- <div>.

13.

433

.13.4. .
, HTML-
(). -


.13.4 . ,
(3) (4) ,
(2) (5).
, ,
. ,
(3 4) (2). ,
.

434

3.

.13.5.

, .
-, . .13.5, , ,

13.

435

.
, .
, , , () .
(. )
, , .
.13.5, .
, , . ,
, .
.13.5, , , ,
( ), .

grid-
(grid)

. Grid-
,
. , 12-
grid- 12
,
. grid-
, 12
. 12
( grid-)
. , 12,

grid-,
grid-
grid-. 12-
grid- ,

.
,
( 4 grid- ).
CSS grid-
, .
<div>
:

<div class="row">

,
<div>-,
,
HTML5.
, grid-.
,
:
<div class="span3"> </div>
<div class="span6"> </div>
<div class="span3"> </div>

grid-.
, grid-,
Foundation (http://foundation.zurb.com/docs/grid.
php) Twitter Bootstrap (http://twitter.github.com/
bootstrap/scaffolding.html#grid)
grid- CSS.

CSS- .
-
(Chris Coyier) CSS-Tricks.com,

grid-: http://css-tricks.com/dontoverthinkit-grids/.

436

3.


CSS, , - ,
() .
. - , , -, 2.


, . , ,
(..13.1). , , , . , ,
-,
.
, ,
,
,
(.13.6, ).
, clear (.
.7). ,
. . (clear: left;).
clear: right; .
, , , :
#footer { clear: both; }

, , <div>.
, , . ,
. - .13.7 <div>,
<h1> , .
, , <div>, . ,
,
, .
.13.7, .
<div>,
. , , . , , ,
,
.

13.

437

.13.6. ,
. , clear

.13.7. .
, ,
(). ,
, ()

438

3.

,
, www.complexspiral.com/publications/containingfloats/.

,
. , , ,
.
.

. , , ,
, <div>,
(
</div>). clear, .
, .
<br> (HTML) <br/> (XHTML) :
<br class = "clear"/>. :
br.clear { clear: both; }

, , HTML.
-. ,
<div>,
. <div> ,
. .13.8, , <div>, -

, .
,
, , . , .
, , clear , . , .
overflow:hidden. -

-:
overflow: hidden;

overflow:hidden CSS. . . ,
, .
, ,
, , ,
-. , - .

13.

439

.13.8.
. ()
CSS ()

Micro Clear Fix. ,

, , ,
. , :after. ,
,
, Internet Explorer7
. :
.clear:after {

440

3.

content: " ";


display: table;
clear: both;
}
. clear {
zoom:1;
}

Internet Explorer6 7 ,
. ? box-sizing .
, .
, div-,
, : <div class="cle
ar">. HTML5, <article>
<footer>, : <article class="clear">.
.13.8. , ,
,
HTML ( class).

zoom , CSS-
. , ( Internet Explorer) -, , .17.


CSS3 :
(,
div-) ,
. CSS-
,

.
,

,
, ..

(,
,
). ,

,
, .

, ,
,

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

13.

441




.

,
,
. :

column-count,
column-gap,
column-rule.
,
, ,
.
,
, . ,
, ,
<div>.
div-
.
, ,
multicol,

1 em
:




.multicol {
column-count: 3;
column-gap: 1em;
column-rule: 1px dotted black;
}

, Internet Explorer 9

. ,
Chrome Safari (-webkitcolumn-count, -webkit-column-gap webkit-columnrule) Firefox (-moz-column-count, -moz-columngap -moz-column-rule). Opera


,
W3C: www.w3.org/TR/css3-multicol/.
,
http://dev.opera.com/articles/view/css3multi-column-layout/

www.aaronlumsden.com/multicol/.


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

. ,
.
. .

442

3.

.13.9. () ,
.
(), ,

13.

443

, , CSS, .
, CSS- .
, , . , HTML <div>,
:
<div class="sidebar">Sidebar content here</div>
<div class="main">Main content for page, this column has a lot of text
and is much taller than the sidebar.</div>

<div> ,
170. ,
, . , <div>- :
<div class="wrapper">
<div class="sidebar">Sidebar content here</div>
<div class="main">Main content for page, this column has a lot of text
and is much taller than the sidebar.</div>
</div>

, , , div- main
, div wrapper .
: <div>
, , . , , , div- (..13.9, ).
.wrapper { background: url (images/col_bg.gif) repeat-y left top; }

,
, .

. ,
, .

.
:
<div class="wrapper1">
<div class=="wrapper2">
<div class=="sidebar1">Sidebar content here</div>
<div class=="sidebar2">Second sidebar</div>
<div class=="main">Main content for page, this column has a lot of text
and is much taller than the two sidebars.</div>
</div>
</div>

444

3.

,

. , ,
,
. .

,
, .
<div>,
; <div>, (.13.10, ).
.wrapper1 { background: url(images/col1_bg.gif) repeat-y left top; }
.wrapper2 { background: url(images/col2_bg.gif) repeat-y right top; }

.13.10.
<div>. ,

13.

445

,
, .
,
, .
,

. , .
, , .

CSS3 -.
-. : , , , , , ,
. .
,
, , . , , , .
, . ,

, - .
, .
25%, 50%, 25%.
, , .
.
1. -:
< div class="wrapper">
<div class="sidebar1"> </div>
<div class="main"> </div>
<div class="sidebar2"> </div>
</div>

, .
, ,

, .
2. ,
:
. wrapper {
background-image: linear-gradient(left,

red 0%,

red 25%,

white 25%,

446



}

3.

white 75%,
blue 75%,
blue 100%);

0 ( ) 25%.
, .
25%, , , ,
. 75%
. , , , 100%
( ). , . .
, .
3. :
. wrapper {
background-image: -webkit-linear-gradient(left,
red 0%,
red 25%,
white 25%,
white 75%,
blue 75%,
blue 100%);
background-image: -moz-linear-gradient(left,
red 0%,
red 25%,
white 25%,
white 75%,
blue 75%,
blue 100%);
background-image: -o-linear-gradient(left,
red 0%,
red 25%,
white 25%,
white 75%,
blue 75%,
blue 100%);
background-image: linear-gradient(left,
red 0%,
red 25%,
white 25%,
white 75%,
blue 75%,

blue 100%);
}

13.

447

, (, , , ),
. , Internet Explorer9
, .

. CSS- http://css-tricks.com/
fluid-widthequal-height-columns/. , , W3C
flexbox.


CSS3
-.
( Internet
Explorer 9 )
,
,
(.
.
).
, flexible
box
,
,
. flexbox (
) ,

HTML

. Flexbox
,
.
.
, CSS
flexbox .
,


. ,
Internet Explorer 10,
, ,
flexbox.
flexbox -
- .
flexbox
http://www.w3.org/
TR/css3-flexbox/.
flexbox, 2012,
.

flexbox, http://css-tricks.
com/old-flexbox-and-new-flexbox/.
,
grid (www.w3.org/TR/
css3-grid-layout/).
,
.

, 2012
.
,
Adobe (http://html.
adobe.com/webstandards/).


, (.13.11, ). , ,

448

3.

, . ,
.

.13.11. ,
().
, , ()

, ,
. ,
. ( ) ,
. ,
CSS:
.7,
, , width.
, , ,
. ( ) .
, , ,
.13.11. , . , .

13.

449

. <div> -

. 760, ,
, .
( ). 150,
10,
170 (150 +10 +10 ).
. 390, 1 15 ,
422 (390 +1
+1 +15 +15 ).
( ).
150. 10 ; 170, .
762.
2 , <div>. .13.11, ,
<div> ,
. (
) , .
2 . 15 14, ,
, .
:
.
div- , . 20, 60 20% , ,
100% . , , : ,
, div-. , , 100% .
,
div-:
<div class="column1">
<div class="innerColumn">

</div>
</div>

div-,
column1, div-,

450

3.

innerColumn. div- , .


box-sizing
,

. , 100,
, 122, 10
.
, CSS-, .
CSS- box-sizing
.
.
content-box : , CSS- width.
box-sizing: content-box;
padding-box -

. CSS- width, . .
box-sizing: padding-box;
border-box , CSS- width. -

, , . ,
, , :
box-sizing: border-box;

, ,
Internet Explorer 8. Firefox -moz-boxsizing, . -. Internet Explorer7
. ,
, Internet Explorer 7
, , ,
. ,
Internet Explorer 7,
. Internet Explorer6, 7 8? doctype .1.

13.

451

-
border-box, . *, ,
CSS:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

?
, , , Internet Explorer6 7
,
CSS. CSS-,
Internet Explorer8, Firefox Safari,
Internet Explorer 6 . ,
Internet Explorer6 7
.
, . ,
Internet Explorer
,
Internet Explorer , layout
(). CSS
HTML.
, Internet Explorer
(7 ).
, .
Internet Explorer ,

- ,
. , ,

, CSS :
.clear { zoom: 1; }

,
. ,


, .
Internet Explorer zoom
( JavaScript),
Internet Explorer6 7.
, Microsoft,
Internet Explorer6 7
- .
zoom, CSS-,
Internet Explorer: position:
absolute;, float: left;, float: right;, display:
inline-table;, width height.

zoom , ,
,
CSS, width
height , Safari, Firefox
. ,
zoom ,
Internet Explorer,

.
,
CSS
W3C (. .
-
doctype .1).

.
,
, . , , ,
.

452

3.

, www.sawmac.com/css3/. , .2. 13.

HTML
, CSS, . , HTML-
<div>, .
1. start.html
HTML-: <!-- first sidebar goes here -->.
, HTML :
. -
, .
<div> .
2. <aside> : <
aside
class

= "
sidebar1">. Enter, .
HTML5- <aside>, <div>. (
JavaScript, Internet Explorer 8
CSS HTML5; ,
. Internet Explorer 8 HTML5 HTML5 .1.)
- , HTML- , ,
, ..
.
. .
3. sidebar1.txt, ,
start.html. HTML- <aside>,
2 ( <div>, ).
. <aside>.
4. , , </aside>.
.
, . .
5. HTML-:
<!-- main content goes here -->, <article class = "main">.
. HTML-
.
6. main.txt, , start.
html <article>,
. </article> , 4.
HTML-.

13.

453

HTML-, .
CSS.


, , , . ,
. .
1. styles.css.
- ,
. , HTML CSS, -
, .
2. CSS-, /* add tutorial
styles below here */ ( ,
). :
. sidebar1 {
float: left;
width: 20%;
}

,
20%. width : , ,
.
, . , ,
.
<body>, .
,
.
3. HTML CSS, start.html -.
,
. ,
, .13.12.
, , .
, . .
4. :
. main {
margin-left: 22%;
}

20%, 22%
2%,

454

3.

. , .
,
.

.13.12. .
, , ,
( ).


, .
,
.
, .
1. sidebar2.txt. HTML-, start.html.
HTML- <article>.

13.

455

2. HTML- <!-- second sidebar goes


here --> ( ).
.
, div-, </div>- .
HTML-, , HTML- .
3. <aside class="sidebar2">, Enter HTML-,
1. Enter
</aside>. HTML-.
<div>, HTML- .
.
4. styles.css. .main,
4 , :
. sidebar2 {
float: right;
width: 20%;
}

, ,
.
5. start.html -.
.
. HTML. , HTML,
. , HTML-
,
, .
. HTML- ( <aside>),
HTML- ( <article>).
, ,
.
.
, 100%,
. .
6. .main :
. main {
float: left;
width: 60%;
}

CSS- start.html , , ! :

456

3.

. , ,

. , , . , ,
.
7. .sidebar2 :
footer {
clear: both;
}

, clear
.
(.13.13).


, .
, .
.
1. .sidebar1, .main .sidebar2,
:
. sidebar1 {
float: left;
width: 20%;
padding: 0 20px 0 10px;
}
. main {
float: left;
width: 60%;
padding: 0 20px 0 20px;
}
. sidebar2 {
float: right;
width: 20%;
padding: 0 10px 0 20px;
}

padding. , , . .sidebar1
, 20 ,
10 .
styles.css start.html,
.
,
(20% + 60 % + 20 %) 100%,

13.

457

. !

.13.13. ,

. -,
. ,
10 <h2>, <h3>, <p> <ul>.
.
-, CSS-, start.
html <div>- :
<aside class="sidebar1">
<div class="innerColumn">


</div>

458

3.

</aside>

styles.css :
. innerColumn {
padding: 0 20px 0 10px;
}

.innerColumn ,
, , ,
(, ..) 10.
.
, , - .
2. :
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}}

.
box-sizing .
border-box - CSS- width. CSS- . ,
100 % .
, boxsizing Internet Explorer 7 ,
.
, , .
Internet Explorer6, 7 8?
doctype .1. , div-, 1.
, , .
3. .main, :
. main {
float: left;
width: 60%;
padding: 0 20px;
border-left: dashed 1px rgb(153,153,153);
border-right: dashed 1px rgb(153,153,153);
}

13.

459


.
-, .13.14.

.13.14.


(. .12), , , . , , ,
, ,
,

460

3.

.
. HTML-.
1. start.html.
<body> <div>:
<body>
<div class="pageWrapper">

, . , .
2. </div> </body>:
< /div>
</body>

, ,
, .
3. HTML-, styles.css. :
. pageWrapper {
width: 960px;
}

CSS HTML start.html ,


,
960. 960,
.
, , . , (, 760) , .
,
.
max-width, div-
, . ,
div- .
4. styles.css .pageWrapper,
:
. pageWrapper {
max-width: 1200px;
margin: 0 auto;
}

max-width ( Internet Explorer7)


, . ,
1200, div- .
0auto,
.

13.

461


div- .
, .13.15.

.13.15. CSS- max-width width


, ,
,


, ,
,
-
(.13.16). , div- pageWrapper, , 1200.
, , ,
.
HTML- (<div>, <article>, <aside>
..) .
, .
<nav>
HTML, <header>,
<footer>.
,
div- pageWrapper.
.

462

3.

.13.16.
HTML-: ,

1. styles.css .pageWrapper.
div- pageWrapper HTML .
HTML- ,
.
.
, , , 1200. HTML , .
HTML start.html <nav>.
, . .
1200 , <nav> ( )
. CSS3: The Missing Manual
<h1>. .
<p>.
2. styles.css :
n av ul, header h1, footer p {
max-width: 1200px;
margin: 0 auto;
}

,
, , . , -

13.

463

CSS start.html, , , 1200.


- .
, div- , .

, <div> <header>,
<nav> <h1>, <div> <footer>. <header> <footer>
, div-.

3. start.html. <!-- first sidebar goes


here --> ( ) <div
class="contentWrapper">:
< div class="contentWrapper">
<!-- first sidebar goes here -->

div- .
4. HTML-. </aside> <footer> </div>, HTML
:
< /aside>
</div>
<footer>

, , 2.
5. :
n av ul, header h1, footer p, .contentWrapper {
max-width: 1200px;
margin: 0 auto;
}

13_finished.

14

- , 760 .
. ,
-, ( .14.1). , -,
, -
.
, , ,
, ( .14.1). , -, ,
. , , , ( .14.1),
( .14.1).

-
-, , ,
320, . ,
2560 . - (Responsive web design, RWD, ) . ( ),

. RWD .
CSS HTML -, .

14. -

465

.14.1. , Amazon Target,


, iPhone

RWD Responsive Web Design


A Book Apart. , RWD,
http://www.alistapart.com/articles/responsive-web-design.

RWD : (grid) , , - CSS,


.
. ,
. , , (

466

3.

, 13. ,

, ..
, CSS-,
. , , 480, ,
760 .
: ,
(, Retina iPhone iPad).

- RWD
, iPhone
Android, - www.nytimes.com.
, .14.2 ( New York
Times ).

.14.2. -, ,
New York Times,

, . ,
- , .
100%; , 960

14. -

467

. , ,
. ,
, .
.
, Safari iPhone ,
980, , 980.
, , -
. ,
, . , .
<head> - ( <title>):
<meta name="viewport" content="width=device-width">

HTML
. viewport ,
content ,
. , , , .

viewport, , 100%- . CSS Working Group CSS @viewport,


, viewport, . <meta> HTML-
@viewport :
@viewport { width: device-width; }
. , @viewport
, , .
@viewport http://dev.opera.com/articles/view/an-introduction-tometa-viewport-and-viewport/ http://dev.w3.org/csswg/css-device-adapt/.

CSS3 , .
.
, , ,
.
,
. .

468

3.

-: , . ( , , 7- , 10-
..) .
, .
, , .


,
, , .
().
(
), . ,
, , ,
, , , . , , .
.
.
.
,
. 960
320 480.
div-
Auto 100%. . ,
, div- 100%.
iPhone ( 320),
( 480), div-, Auto 100% , .
. , 23- , ,
.

14. -

469

.
. -


,

. . ,
, .
. -

, - ,
. ,
. ,
. . , , , , ,
, , .
, CSS .
HTML- JavaScript.
( , http://css-tricks.com/convert-menu-to-dropdown/).
. , , http://bradfrostweb.
com/blog/web/responsive-nav-patterns/ http://bradfrostweb.com/blog/web/complexnavigation-patterns-for-responsive-design/.
.

.

, . CSS , , , ,
, CSS- display none.
, , , , . ,
, , , ,
- .
, CSS, HTML
, HTML.

470

3.

. 960--

, . , ,
,
, CSS. , , div-
: <div class="logo">. div-,
, background-image
. :
. logo {
width: 960px;
height: 120px;
background-image: url(images/large_logo.png)
}

,
, div- :
. logo {
width: 320px;
height: 60px;
background-image: url(images/small_logo.png)
}

, HTML <img>,
.

,
, www.lukew.com/ff/entry.asp?1514.


. , :
480,
480, 769, . , , 480, 769 ..
(breakpoints).
?
, -.
. . ,
. ,
, ,
, .

14. -

471


, ,
. ( ),
, 480,
, 481 768
, , 768, , .
.
1024,
, 1024.

, .
.

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

.
.
, .. , , ,
. , , Internet Explorer 8 , . ,
, , ,
Internet Explorer 8
.
.
.
,

472

3.

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


, -: 480? , ( , ). , ,
:
<link href="css/small.css" rel="stylesheet" media="(width: 480px)">

media, , . small.
css, - , 480. (width: 480px)

. , .

,
Internet Explorer 8 . Internet Explorer
, <head> JavaScript.
respond.js http://tinyurl.com/7w49a6z,
, , <script>. :
<!--[if lte IE 8]>
<script src="respond.min.js"></script>
<![endif]-->
Internet Explorer 8, 7 6 .

480 . , -
, , 300?
. , ,
480. :
<link href="css/small.css" rel="stylesheet" media="(max-width:480px)">

"(max-width:480px)" ,
480. small.css ,
, 480, 320 200 .

14. -

473

min-width, ,
.
, . , 768,
, :
<link href="css/large.css" rel="stylesheet" media="(min-width:769px)">

,
769, , 768, .
, ,
, . , , 768,
CSS:
<link href="css/medium.css" rel="stylesheet" media="(min-width:481px) and
(max-width:768px)">

, 481
768. medium.css
320,
1024.

CSS3 .
, (
: ) ,
. , , . - W3C:
www.w3.org/TR/css3-mediaqueries.


<link>
. . , , , , HTML- <link>,
.
.
@import.
.2. @import , . @import . , , small.
css , 320 .
@import :

474

3.

@import url(css/small.css) (max-width:320px);

, , Internet Explorer 8
JavaScript
respond.js. ,
@import, , , Internet Explorer 8
. ,
.

.2, @import .
- .
, ,
@import, . (
.5.)
, @import.
, , :
@import url(css/base.css); /* , */
@import url(css/medium.css) (min-width:481px) and (max-width:768);
@import url(css/small.css) (max-width: 480px);

:
@media (max-width: 480px) {
body {

/* */

}
.style1 {

/* */

}
}

@media , . , body .style1


,
480. @media
. , ,
,
, .

14. -

475


,
, : , , , , , .. , .
,
, . :
/* , */
/*
*/
body {
/* */
}
/* */
@media (min-width: 481px) and (max-width:768px) {
body {
/* , */
}
}
/* */
@media (max-width:480px) {
body {
/* , */
}
}

, desktop_first.css, 14 (www.sawmac.com/css3).
: , ,
, -
. , ,
<head> - HTML:
<link href="styles.css" rel="stylesheet">


,
, , .
:

476

3.

/* , */
/*
*/
body {
/* */
}
/* */
@media (min-width: 481px) and (max-width:768px) {
body {
/* , */
}
}
/* */
@media (min-width:769px) {
body {
/* , */
}
}

, , Internet Explorer 8

JavaScript , . ,
(.
).



320, iPhone
Android, 720 iPad
() 1000
. iPhone ,
. Android,
, , . ,
,
.
, .
- .
, ,
.12, ,
. ,
100%. , , max-width, . ,

14. -

477

, em.
, .

. grid
.13,
grid-, HTML- CSS-, . .

, , ,
, ,
.
HTML:
<div class="columns">
<div class="one-third">

</div>
<div class="two-thirds">

</div>
</div>

CSS- :
.columns {
width: auto; /* 100 % */
max-width: 1200px;
}
.columns:after {
content: "";
display: table;
clear: both;
}
.one-third {
float: left;
width: 33%;
}
.two-thirds {
float: left;
width: 67%;
}

.columns div-,
. width auto , 100%, max-width
. .columns:after

478

3.

( , ,
.13). ,
div- 33% (
) 67% ( ) ,
.

HTML-
,
,
.
. . ,
, , , float none.
HTML
. HTML- . , ,
, ,
. , , ,
, .
, ,
.
HTML , div , , . , , , ,
.
, .

.
.13, ,
div- .
, HTML, , . , ,
CSS. div-
,
.

,
,
.

14. -

479


.13,
, , , 100%, . -
, , , div-, , div-
, CSS. ,
33%, 67% ( , ),
, 100%.
1,
100% + 2 ( ).
, , .
,

.13.
-

. CSS- width,
( ) .
, , , :
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Firefox ,
-moz-box-sizing. ,
Internet Explorer 8 , .
CSS-,
.

Internet Explorer 7 box-sizing, .


Internet Explorer 7 ,
,
(. .13).



. ,
, 25%:

480

3.

width: 25%;

-
, .
, 960.
<div>, 960,
<body>. , .

width: 960px;

width: auto;

auto ,
100%: .

. , - : / = . :
, ( ),
( ). , .
. , 960 : 180
780. CSS- :
.sidebar {
float: left;
width: 180px;
}
.main {
float: left;
width: 780px;
}

, CSS, ,
.., .
, ,
180, ,
960. 0,1875 100
: 18,75%. 780 960,
0,8125. 100 81,25%.
:
.sidebar {
float: left;
width: 18.75%;
}

14. -

481

.main {
float: left;
width: 81.25%;
}

. 18,75% 19%,
, , ,
.
, , . , , ,
25.48488%.
, .
, ,
, div- . div-
, 390,
(390)
, 780. 0,5. 100 50%.
(, , .
, ,
, 50%.)
,
100%.

em.
, 18 ().
() 16. 18 16
em: 1.125em.



,

.


. ,
, ,

. ,

320,
.

-,
.
responsivepx (http://responsivepx.com)
URL- ,

. <iframe>-
.
, ,

.
Responsinator (www.responsinator.com)

482

3.


,
, iPhone, Samsung Galaxy,
iPad, Kindle .. URL-
,
. Responsinator
, - .

,
,
Adobe Edge

Inspect (http://html.adobe.com/edge/inspect/).


.
-,
,
. ,
, ,
-
, .


,
,
.
, .
, (.14.3).

.14.3. , ,
,

14. -

483

, .
: CSS-
HTML-.
1. :
img { max-width: 100%; }

100%
.
, div- HTML-,
.
, .
<img> .
.
max-width, ,
- ,
HTML. , , .
: HTML width height.
2. <img> height width.
HTML:
<img src="bunny.jpg" width="320" height="200" alt="bunny">

:
<img src="bunny.jpg" alt="bunny">

,
.
, , , . ,
, , , ,
, . , -, max-width <img> HTML.
, , ,
40% .
:
.imgSmallLeft {
float: left;
max-width: 40%;
}

<img>:
<img src="bunny.jpg" alt="bunny" class="imgSmallLeft">

484

3.

.imgSmall {
max-width: 40%;
}
.imgLeft {
float: left;
}

:
<img src="bunny.jpg" alt="bunny" class="imgSmall imgLeft">

imgSmall
, , .

background-size.
Internet Explorer 8 .


. -,
, 100% (
, ), ,
. , ,
200. ,
, ,
300. 300. ,
. , ,
, .
-,
, , . , . ,
,
.
, . ,
,
- RWD.
, ,
W3C,
HTML. http://
picture.responsiveimages.org http://www.w3.org/community/respimg/.
, . ,
, , .
, ,

14. -

485

.
JavaScript PHP. ,
, . http://adaptive-images.com.

Flash-
HTML5- video Flash-
max-width.
:
img, video, embed, object {
max-width: 100%;
}

, ,

iframe- (

YouTube Vimeo). YouTube JavaScript FitVids: http://fitvidsjs.com.


JavaScript , .

?

. .
,
Apple Retina,
. iPhone 5
1136640. iPhone
,
, .
326.
100
. iPhone
,
.
.

,
. ,
CSS
16

16. ,
,
, ,
CSS.

- -
. 16,

(
0,16),
,
0,04.

iPhone CSS
.
16
32. ,
Android, ,
,
CSS, .

CSS
, .
, ,

28.

486

3.

-
, (
), -.
, , CSS-
, , (
) ( ).
- www.sawmac.com/css3/.
. ZIP-, .
14.

HTML
, , ,
. HTML ,
, ,
,
.
, ,
, ,
. , HTML .
,
.13 (. .13.11):

<div>-. div-
, , ,
.
, , , .
1. rwd.html, 14.

. .
2. HTML- <!-- main content goes here --> ( ) HTML,
</article>. ,
, <!--second sidebar goes here --> ( ).

14. -

487

3.
EditCut () ( , ).
.
4. <div class="contentWrapper">.
, <!-- first sidebar goes here -->
( )
EditPaste (), .
<div>-, .
5. <div class="contentWrapper"> <div class="columnWrapper">.
HTML :
< div class="contentWrapper">
<div class="columnWrapper">
<!-- main content goes here -->

div-.
6. </aside>, . <!--second sidebar
goes here --> ( ). </div>
</aside>, HTML :
< /aside>
</div>
<!-- second sidebar goes here -->

, HTML.
, , HTML,
new-source-order.html 14.
-,
,
(.14.4). CSS.
7. styles.css, 14.
CSS, .
, , .
8. .sidebar :
. columnWrapper {
float: left;
width: 80%;
}


(20%) (60%). ,
:

488

3.

<div>, .
, , div -

, , ,

.13 .13.11.
.

.14.4. - , ,
,

9. .sidebar 25%.
:
. sidebar1 {
float: left;
width: 25%;
padding: 0 20px 0 10px;
}

20 % , ,
div-, , ,
80% , .
,
, 80% .
,
20% 80%,
100. 20 80 0,25.
100 25%. .
10.
.main float right, width 75%,
:

14. -

489

. main {
float: right;
width: 75%;
padding: 0 20px;
border-left: dashed 1px rgb(153,153,153);
border-right: dashed 1px rgb(153,153,153);
}

,
, .
: 60 / 80 = 0,75, 75%.
rwd.html -, , .14.5.

.14.5. :

, .
HTML- , .
, ,
. .

1200 max-width,
nav ul, header h1, footer p, .contentWrapper. , , max-width 1200px; .

490

3.


. , ,
. ,
. ,
-
. CSS HTML.
1. styles.css. img:
i mg {
max-width: 100%;
}

, 100%
. , ,
200, 200. ,
, .
width height
HTML.
2. <img>, rwd.html, height width.
: clouds.jpg, jellyfishy.jpg, gator.jpg mule.jpg.
width height,
<img src="imgs/clouds.jpg" alt="Clouds" width="670" height="446">

:
<img src="imgs/clouds.jpg" alt="Clouds">

CSS HTML -,
, , ,
.
. max-width: 100% <img>
, , , . ,
.
.
3. styles.css :
i mg.half {
max-width: 50%;
}
i mg.left {
float: left;
margin: 0 10px 10px 0;
}

14. -

491

i mg.right {
float: right;
margin: 0 0 10px 10px;
}

max-width ,
50%, .
, . , HTML.
4. rwd.html <img> clouds.jpg <img src="imgs/
clouds.jpg" alt="Clouds"> class="half right",
:
<img src="imgs/clouds.jpg" alt="Clouds" class="half right">


. ,
.
half , right
. right
left ,
, half.
5. jellyfish.jpg class="half left",
HTML :
<img src="imgs/jellyfish.jpg" alt="Jellyfish" class="half left">

,
, .14.6. , ,
, .

.14.6.

492

3.

, .
HTML
max-width. ,
max-width <img>.


: ,
. ,
, .
, .
, 480 768, . .
1. styles.css. :
@ media (min-width: 481px) and (max-width:768px) {
}

. ,
481, 768.
,
480. , , 768.
, , ,
(
), .
, , float
.
2.
, , :
@ media (min-width: 481px) and (max-width:768px) {
.sidebar2 {
float: none;
width: auto;
}
}

float
auto ( 20 % .sidebar2,
). . div- ,
,
(

14. -

493

.13). clear
.
3. , ,
, :
. sidebar2 {
float: none;
width: auto;
clear: both;
border-top: 2px solid black;
padding-top: 10px;
}

clear ( .7) . ,

.
, , . , , 8 ,
HTML,
80% . .
4. .sidebar2 :
. columnWrapper {
width: auto;
}

, . auto ( , 100%),
.
, , , .
5. , .columnWrapper. (
):
@ media (min-width: 481px) and (max-width:768px) {
.sidebar2 {

float: none;

width: auto;

clear: both;

border-top: 2px solid black;

padding-top: 10px;
}

.columnWrapper {

width: auto;
}
.main {

494

3.

border-right: none;
}
}

6. styles.css rwd.html -. .
, .14.7.

.14.7.

14. -

495


, ,
480.
1. styles.css.
:
@ media (max-width:480px) {
}

,
. , 480. ,
, .
2. :
. columnWrapper, .main, .sidebar1, .sidebar2 {
float: none;
width: auto;
}

, ,
. width auto
. ,
,
,
.
,
. , , ,
, . , ,
.
3. ( - 480-
) :
. main {
border: none;
}
. sidebar1, .sidebar2 {
border-top: 2px solid black;
margin-top: 25px;
padding-top: 10px;
}


,
.

496

3.

CSS - rwd.html.
480. , . , ,
(.14.8). , -
. .

.14.8. ,
,

4. 480- <h1>:
h eader h1 {
font-size: 1.5em;
}

<h1>,
.
. ,
.

, .
. , , . , , .
.
5. header h1, ,
:
nav {
text-align: center;
}

14. -

497

nav HTML5- <nav>.


text-align center ,
nav-.
, , . ( .9.)
6. nav :
n av li {
float: none;
display: inline-block;
}
n av a {
float: none;
display: inline-block;
border: none;
}

, .
, . ,

, . ,

.
7.
480- :
@ media (max-width:480px) {
.columnWrapper, .main, .sidebar1, .sidebar2 {

float: none;

width: auto;
}
.main {

border: none;
}
.sidebar1, .sidebar2 {

border-top: 2px solid black;

margin-top: 25px;

padding-top: 10px;
}
header h1 {

font-size: 1.5em;
}
nav {

text-align: center;
}

498

3.

nav li {
display: inline-block;
float: none;
}
nav a {
float: none;
display: inline-block;
border: none;
}
}

rwd.html -.
, 480,
, . ,
, , , , . , , .14.9.

.14.9. - ,

14_finished.

15

CSS-, , , - , InDesign
Quark XPress. CSS- , , 100 200 . , , - ,
, ..
, ,
CSS-, . , CSS, -. ,
, , , . , . , .
.
-, , .
, , , ,
,
. :
, , CSS- .
, ,
- ..


CSS- position , . , , , , , ,
,
. CSS .

500

3.

. , left, right, top bottom , em

( ..6). 20 200 , .15.1,


( , ).

.15.1. CSS
-

, , HTML-. , , .
, , .

float , ( ). ( ) .

15. -

501

. -

HTML. , , top 20 left 200 , 20 200


, .
, HTML- . , , .
.15.1, . ,
,
. ,
,
, ( ).
.
. , fixed background-attachment (.

.8). , , .

HTML-, . , .
, HTML (..15.1, ).
? , .
, . ,
.
HTML ( ).
, , - . , ,
, .
,
position, : static, absolute,
relative, fixed. ,
:
position: absolute;

, , ,

502

3.

absolute, relative fixed,


. ,
, .
.
- , .


, ,
, , .
CSS-: top, bottom, left right.
. ,
. , ,
10em 20em .

, CSS : ,
em, .. , left: -10px;, ( ).
,
.
position (top, bottom, left right).
, (,
), width. , :
.banner {
position: absolute;
left: 100px;
top: 50px;
width: 760px;
}

, .15.2, .

(top bottom),
, . (left right). ,
absolute, top, right, bottom left,
, .

: ,
.
right,
(..15.2, ). 100 , ,
, left right:
.banner {
position: absolute;

15. -

503

right: 100px;
top: 50px;
width: 760px;

.15.2.
(). ,
()

, , .15.2, . ,
.
,
. ,
, 10% 10 . ,
, top, left right 10 %.
10 % ,
10% (.15.3).
.
; , . , ,
- 10% .

504

3.

.15.3.

,

width height, .7,


. 5050 , :
.box {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
background-color: #333;
}

, .7:
. -
, ,
. 200,
,
200 ,
. , ,
,
, .
, , ,
.




.
.

15. -

505

. , (, <div>,
100 ),
HTML- <div> , , .

, ,
HTML .3.

.15.4 - 5em .

.15.4. ()
()

<div>, .
. bottom 0
, .
right <div> (..15.4, ).
, , ,

506

3.

, .
:
, , , ;
,
, .

, :
,
. , <h1> ,
. ,
. , .
<h1> , , , ( - .15.5).
. - , <h1> (..15.5, ).
: right: -35px; top:
-35px;, <h1>
(
) (..15.5, ).
- <h1> position: relative,
<img>.
top right <img> (..15.5,
). , (..15.5, ).

background-image (. .8),
<h1>. ,
<h1>, , (. .15.5), <img> , .

,
relative position, . -

, (,
left top),
, HTML. , .
,
(..15.1, ).

15. -

507

.15.5.

, . ,
<h1> <img>,
. <h1>
, <img>,
<h1>, .
CSS :
h1 { position: relative; }
h1 img {
position: absolute;

508

3.

top: 0;
right: 0;
}

top right 0
, .
CSS (relative) ,
. , <img> <h1>,

. , ,
, , ,
relative. , relative .
, ,
, , .


, top, bottom, left
right. <h1> position: relative, top, bottom, left right.


.15.6, - (
) . (z-index). Photoshop,
Fireworks Adobe InDesign, , :
, .
,
,
. .15.6
:
, z-index 0. ,
.
z-index , 1000. <div>, ,
. , z-index <div> 1000,
( z-index) ,
.
, -, , , , .
,
, . , , - .

15. -

509

.15.6. -

HTML- . <div>
HTML <div>. , , CSS- z-index.
:
z-index: 3;

, . ,

. , , (..15.6, ).
,
(..15.6, ).
z-index ,
, . , .15.6, , <div>
.
<div>-, z-index:
z-index: -1;

z-index , Internet Explorer 7 , , Internet


Explorer 7, z-index .

510

3.

. ,
10, 20, 30 , 1, 2, 3.
. ,
,
, z-index: 10000;. ,
, , 2147483647.


CSS-, , visibility. ( ). , , , .
, (visibility:
hidden), (visibility: visible), .
hidden visibility none display,
. display
none, , .
visibility hidden
, ,
. , , visibility: hidden
display: none . display: none, visibility.
opacity :
opacity: 0;

, opacity
1:
opacity: 1;

opacity ,
CSS-, .
, CSS-, .10,
. ,
, 0 1
.

JavaScript. JavaScript, visibility (
display). :hover (.
.3), . , , ,
(.15.7). .

15. -

511

1. HTML- .
HTML5- <figure> <figcaption>:
< figure class="hat">
<img src="hat.jpg" width="100" height="100">
<figcaption>A picture of a hat</figcaption>
</figure>

<figure> hat,
.

. Internet Explorer 8 HTML5


HTML5 .1, Internet Explorer8
CSS HTML5 JavaScript.
, <figure> <figcaption> <div>.

2. .
. <img>,
<figure> ,
, .
. hat {
position: relative;
width: 100px;
height: 100px;
}
. hat figcaption {
position: absolute;
bottom: 0
left: 0;
right: 0;
background-color: white;
}

(bottom: 0). left right


.
3. .
, ,
- . ,
.hat figcaption visibility: hidden, display: none.
. hat figcaption {
display: none;
position: absolute;
bottom: 0
left: 0;
right: 0;

512

3.

background-color: white;
}

4. , ,
.
:hover. . , ,
.
<figure>, ,
:
.hat:hover figcaption {
display: block;
}

:
<figcaption>, hat,
. , figcaption ,
.
CSS . CSS-
, - ,
www.menucool.com/tooltip/css-tooltip. JavaScript-
: JavaScript- , jQuery,
jQuery- aTip2: http://craigsworks.com/projects/qtip2/.
, opacity,
transition. :
.hat figcaption {
opacity: 0;
-webkit-transition: opacity .5s ease-in;
-moz-transition: opacity .5s ease-in;
-o-transition: opacity .5s ease-in;
transition: opacity .5s ease-in;
position: absolute;
bottom: 0
left: 0;
right: 0;
background-color: white;
}
.hat:hover figcaption {
opacity: 1;
}

15. -

513

.
, transition Internet Explorer 9
. . , .

.15.7. ,
(), ()


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



, . , . .15.8,1,
, CSS
.
, HTML-. <span> (. . HTML-
<div> <span> : .3)
, .
<h1><span class="date">Nov. 10, 2006</span> CosmoFarmer Bought By Google</h1>

514

3.

.15.8. ,
(1),
(2) (3)

.
( <h1>) relative ( ).
( absolute) , , . CSS-
.15.8,1:
h1 {
position: relative;
border-bottom: 1px dashed #999999;
}
h1 .date {
position: absolute;
bottom: 0;
right: 0;
font-size: .5em;
background-color: #E9E9E9;
color: black;
padding: 2px 7px 0 7px;
}

, border-bottom, . :
position, bottom right. , <span>, ,
, bottom right 0.

15. -

515



, - . .15.8,2,
. , <img>
<h1> . top left . CSS-,
:
h1 {
position: relative;
margin-top: 35px;
padding-left: 55px;
border-bottom: 1px dashed #999999;
}
h1 img {
position: absolute;
top: -30px;
left: -30px;
}

, , . top left ,
30 30 . , . ,
( )
. ,
,
, <h1>.
. , ,
. 55
- .

CSS

- , , , . HTML ,
. HTML . -, HTML-, - ( ,
). , .

516

3.

HTML-, ,
, -
.
, CSS
, . , , .15.9. fixed
position HTML-,
, -.

.15.9. , CSS. (
) ;

top, bottom, left right


. , HTML. , .
, , .15.9,
, , .
1. <div> ( ID) . <div> (
ID), banner, sidebar, main footer (.15.10). , HTML, . , HTML.

15. -

517

.15.10. ,
. (1),
(3) (4) , (2)

2. <div>. , div ,
, , .
, , .
<div>.
<div>. , ,
.
, ( ) , .
3. . top, bottom, left
right . , , , . ,
.

,
, .

1, 3 4 .15.10
:
. banner {
position: fixed;
left: 0;
right: 0;
top: 0;
}
. sidebar {
position: fixed;

518

3.

left: 0;
top: 110px;
width: 175px;
}
. footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

4.
. HTML,
, . , <div>
, ,
. , (
, , ).
. main {
margin-left: 190px;
margin-top: 110px;
}

: Internet
Explorer 8 , (
iOS Android).

:


,
, . ,
HTML- <div> ,
HTML . CSS.
, , , www.
sawmac.com/css3/. , .2.


,
. , HTML-
( ).
1. hats.html 15.
- (.15.11)
.

15. -

519

.15.11. HTML-, .
,

2. hats.html . <style>.
<style>
. . , CSS-,
, , , .
3. :
h eader .badge {
position: absolute;
top: -20px;
left: -90px;
}

HTML5- <header> badge.


, 90
20 .
. , .
, ,
. .

520

3.

4. :
h eader {
position: relative;
}

CSS- , (
header), ,
( , 3).
, ,
CSS- . header , HTML-.
header .badge , .
header .
, relative ,
.
, 3.
20 90 . , , .
5. header, ,
:
header {
position: relative;
margin-top: 20px;
padding: 20px 0 0 10px;
}

header,
. , ,
. The Hat Gallery . .
z-index
.
6. header .badge z-index: -1:
h eader .badge {
position: absolute;
top: -20px;
left: -90px;
z-index: -1;
}

-1 ,
,
(.15.12).
header.

15. -

521

.15.12.

7. header .badge .
h eader nav {
position: absolute;
right: 0;
top: 45px;
}

<h1>,
. HTML5- <nav>,
<header>. , 4 header , , ,
<nav>, ,
right ,
(. .15.12).


.8
(. 1: ).
,
. -
, , , , .
1. hats.html .
. HTML-
:
< figure>
<img src="images/file00079963469.jpg" width="300" height="210"

522

3.

alt="Panama">
<figcaption><strong>Nam libero tempore.</strong> Soluta nobis est
eligendi
optio cumque nihil impedit quo minus id quod maxime placeat facere
possimus, omnis voluptas assumenda est, omnis dolor repellendus
</figcaption>
</figure>

HTML5- <figure> <figcaption>. <figure>


, , ,
.

Internet Explorer 8 HTML5-,


, JavaScript.
, , . Internet
Explorer 8 HTML5 HTML5 .1.

2. header nav .
. gallery figure {
display: inline-block;
width: 300px;
height: 210px;
margin: 15px;
position: relative;
}

, <figure>,
<div> gallery. , figure,
, -. <figure>, .
figure (inline-block)
. width height
. , <figure>
, . margin , . , position: relative
, .
.
3. :
. gallery figcaption {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;

15. -

523

background-color: rgb(153,153,153);
background-color: rgba(153,153,153,.9);
}

<figcaption>
: top, bottom, left right.
, , (
15 % ). ,
,
.
, background-color.
Internet Explorer 8 ( RGBA).
,
, , .
.
4. , ,
:
. gallery figcaption {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: rgb(153,153,153);
background-color: rgba(153,153,153,.9);
padding: 20px;
font-family: Titillium, Arial, sans-serif;
font-weight: 400;
font-size: .9em;
color: white;
}

(padding) ,
, .
, ,
. ,
. .
5. opacity: 0:
. gallery figcaption {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: rgb(153,153,153);

524







}

3.

background-color: rgba(153,153,153,.9);
padding: 20px;
font-family: Titillium, Arial, sans-serif;
font-size: .9em;
font-weight: 400;
color: white;
opacity: 0;

opacity 0 .
display:
none; visibility: hidden;,
CSS- transition,
. :hover,
.
6. :
f igure:hover figcaption {
opacity: 1;
}

CSS figure (figure:hover),


1.
<figure> - <figcaption> .
, . , . , .gallery figcaption .
7. .gallery figcaption,
( ):
f igcaption {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: rgb(153,153,153);
background-color: rgba(153,153,153,.9);
padding: 20px;
font-family: Titillium, Arial, sans-serif;
font-size: .9em;
font-weight: 400;
color: white;
opacity: 0;
-webkit-transition: opacity .75s ease-out;
-moz-transition: opacity .75s ease-out;
-o-transition: opacity .75s ease-out;
transition: opacity .75s ease-out;
}

15. -

525

transition. ,
, (-webkit..). Internet Explorer 9 , ,
. , .
,
, .
8. , :
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: black;
color: white;
}

,
.
(bottom: 0) ( left: 0 right:0).

, . , .15.13.
15_finished.

.15.13. CSS,
( )

CSS

16. CSS -
17. CSS

16

CSS

-

, , ,
- . , , ,
, . , ,
,
.
, , , .
, ? , , ,
. ? , .
- , , , .
, .
, , . , CSS
, ,
, (.16.1).
,

. ,
.16.1 .
, , .
? - .

-

CSS -
. ,

528

4. CSS

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

.16.1. , - (A List Apart),


() ()

16. CSS -

529

, CSS
,
. CSS : all, braille,
embossed, handheld, print, projection, screen, speech, tty tv. , . ,
, . ,
Braille Reader ( ), ( ,
, ) .
, , , .
: all, screen print.
all .
all, , , .
( , , ).
screen . ,

. , , , .
print . print -

, , , ..

- , (
internal external, linked imported). , .
, . , . .
-
: , , .

( ,
, , ).
, , .

530

4. CSS

- CSS, , . ,
,
,
.



, <link> media.
, , HTML -:
<link rel="stylesheet" media="print" href="print.css"/>

CSS , @import
(. .2)
: @import url(print.css) print;. , Internet Explorer 8
, .

, ,
, ,
.. , ,
. , , :
<link rel="stylesheet" media="screen, projection, handheld" href="screen.css"/>

, , ,
.

, media="print"
, . ,
media="screen" media="speech".
, .
, print
.


-
, @media. .14 @media
- (, ). @media

16. CSS -

531

.
, , .
, .
, @media :
@media print {
/* */
}

( ),
. @media , :
@media print {
h1 {
font-size: 24pt;
}
p {
font-size: 12pt;
}
}

,
@media (, screen.css
printer.css). , ,
printer.css
.


, , .
- , , ,
. ,
CSS-, .
, , , ,
. ,
,
, (.16.2).

, , Print Preview ( ) . Windows


FilePrint Preview ( ). Mac FilePrint
(), Print Preview ( ).

532

4. CSS

, , , , , .

.16.2. ,
, ().
()

!important

, ,
( media="all"). , , ,
.
, <h1>, , ,
, ,
. , ,
, .
, ,
, <h1>.
, , ,
. , . .5, :
CSS-
. ,
!important.

16. CSS -

533

!important CSS-, .
!important , ,
<h1> :
h1 {
color: #000 !important ;
}

h1 , #main
h1, h1.title #wrapper #main h1 .


, , . font-size
color. .
,
- .
em (.
.6) , . , Word .
em .
16 12.
,
,
.
12 (
), :
p {
font-size: 12pt;
}

, - .
, , , - . , , ,
, , .
, .
, :
p {
color: #000;
}

,
, !important, , :
p {
font-size: 12pt !important;

534

4. CSS

color: #000 !important;

, (. .3) !important , , :
* { color: #000 !important }

, , . ,
,
, .


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


. ,
( ), .

.
. , , , . ,
, .headHighlight,
:
.headHighlight {
color: #000;
background: #FFF;
}

. ,
, .


background-color,
, :

background-color: white.

, :

16. CSS -

535


background: white. , background

(. background
.8) , ,
, .
,
,
. ,

,
none. , ,
background: white;,
,
. background,
:
,
.

. , , ,
. ,
, , ,
.
, , : ? ,
<div>, .
( ), . , , , . .
<img> .
, ,
, - ? , , , <img>. , . , .
1. <img> HTML, ,
:

<img src="logo.png" height="100" width="100" id="logo" />

2. (,
) , :

.logo { display: none; }

3.
:

.logo { display: inline; }

, .


,
, .

:
.

536

4. CSS


, ,
. ,
, .

, ,
URL :
(http://www.pyramind_
scam.com/).
:after CSS- content.,
,
. ,
:after content Internet
Explorer 7. Internet Explorer8
( ), Firefox, Safar Operai, ,
, URL
, .
,
, URL
.

, ,
:


a:after {
content: " (" attr(href) ") ";
}

CSS-
,


: (../../index.html).
(..3),
URL (,
http://) :


a[href^="http://"]:after {
content: " (" attr(href) ") ";
}

, ,
:after content,
.

,
, URL-.

: www.alistapart.com/articles/goingtoprint/.
,
,

. ,
word-wrap,
:


a {
word-wrap: break-word;
}


, .


-
, , , , .. -,
. - ,
,
. , ,
.
3 , , <div> : , , , .. <div>, ,

16. CSS -

537

, .
, , display .
display none,
. ,
, display none:
.sidebar {
display: none;
}

, : , , , .
:
.banner, .mainNav, .sidebar, .ads, .newsLinks {
display: none;
}

, ,
, ,
.
-
.
,
. , , ,
, , . (
), , , ,
,
, .
, <img>, ,
; ; display, none;
display block
! .


2.1 CSS-, -: (
www.w3.org/TR/CSS21/page.html). ,
.
page-break-before page-break-after.

538

4. CSS

. , , , , , (.16.3). page-break-before: always


. ,
, page-break-after: always .

.16.3. ,
(). ,
, page-break-before ()

page-break-before ,
,
. , , , .
, ,
, page-break-before. , .
.
, , , .break_after .break_before:
.break_before { page-break-before: always; }
.break_after { page-break-after: always; }

,
. , , : <h1 class="break_
before">. , : <h1 class="sectionTitle break_before">.

16. CSS -

539

:

- . - , , , URL- .
, . , .2. 16.


, , ,
, .
1. print.html 16.
- , <div>
(.16.4). , , ,
( ). ,
.

.16.4. .
, . ,

540

4. CSS

2. , print.css,
16 .
,
,
.
3. display, , :
. sidebar, .navWrapper, .footerNav {
display: none;
}

display, none,
, .
-,
.
4. print.html 16.
main.css.

. , <link> media,
. , , main.css, .
main.css HTML- .
5. <link> , global.css (main.
css). , :
<link href="print.css" rel="stylesheet" media="print" />

, ,
<link> <link>. , main.css , .copyright, 10- , , .copyright,
, 12
. , , (.
: .5
).
6. print.css print.html, print.html .
, 1 .
, . , Print Preview ( ) .
7. Windows,
FilePrint Preview ( ). Mac

16. CSS -

541

FilePrint (), Print ()


Print Preview ( ).
Print Preview ( ) , .
. , .
, .



: , . , .
. .16.4
, ,
<div>. .mainWrapper .footer
900. , .main , .footerMain . ,
,
.
1. print.css.
, , :
. banner, .mainWrapper, .footer, .main {
width: auto;
margin: 0;
padding: 0;
}

width:auto .
, 900,
main.css
. auto <div> , . margin padding div.
, <div>
footerMain, ,
. , .
2. print.css:
. footerMain {
margin: 0;
}

, float, ,
.

542

4. CSS

3. print.css:
. main {
float: none;
}

.
, -,
. : overflow: hidden;
-. , .
.
4. print.css:
. mainWrapper, #footer {
overflow: visible;
}

, div .
,
. , . .
, ,
. ,
.
,
.
5. print.css:
h tml, body, .banner, .footerWrapper {
background: #FFF;
}


. ,
About Us ( ), .

( , ).
.
,
, .
, .
6. print.css:
. banner {
height: auto;
text-align: center;

16. CSS -

543

border-bottom: 2pt solid #000;


border-top: 2pt solid #000;
padding: 10pt 0;
margin-bottom: 15pt;

, <div>. ,
, . text-align ,
.
, . , , .
. print.html Print Preview ( ), ,
.



, , . ,
. , .
1. print.css CSS-:
* {
color: #000000 !important;
}


. * ( )
(. .3), !important , .
, * , color , .main h1
.nav .mainNav a.
.
2. :
h1 {
font-size: 30pt !important;
}
h2 {
font-size: 16pt !important;
font-weight: bold !important;
}
p {

544

4. CSS

font-size: 11pt !important;


}

. !important ,
, ,
main.css.

h1, h2 p , print.html.
,
..

, .
3. :
. footerMain {
margin-top: 15pt;
border-top: 1pt solid #000;
padding-top: 5pt;
}
. footerMain p {
font-size: 9pt !important;
}

CSS .
, ,
, . !important .footerMain
p. , p !important. .footerMain p ( ), , !important .

URL
, URL . ,
Click here to found out more ( , )
Click here to found out more (http://www.outmore.com/) ( ,
(http://www.outmore.com/)), ,
, , . CSS-, Internet Explorer 6 (7 ) , .
, Internet Explorer8,
9 10, Chrome, Firefox Safari.
1. , print.css:
a :after {
content: " (" attr(href) ") ";
}

16. CSS -

545

content: URL- ( attr(href))


( a: after).
2. print.css. cosmo.html .
, .16.5,
, .
16_finished.

.16.5. .
, , ,
,

17

CSS


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

CSS. , .


,
, , :
? ? , , , . ,
. , CSS.
CSS ,
: /* */. HTML, CSS ,
. ,
, color, fontfamily, border-color
.., .
, , .
, CSS, :
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

, , ,
? , -,

17. CSS

547

, CSS? , - , , ,
:
/*
*/
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

, . /*, ,
*/.
, .15.1. ,
,
CSS-.

.17.1. CSS


. , ,
, . ,

548

4. CSS

,
- , . ,
CSS- .



a.,
, ID #. , ,
ID , , &, * !. , , .
, .
, .redhighlight,
- , . ,
(, ) , , -
? , , .redhighlight,
- , , ,
. , .
, , , .error.
,
.alert. ,
, .
,
.font20px . 20, ,
, 24
em . , , :
h2 p,
.sidebar1 p.
, .
, , .
, .leftSidebar, : ,
! , ,
- ,
. #leftSidebar -
. , ,
.news, .events, .secondaryContent, .mainNav
. , ,
.gallery, .figure, .banner, .wrapper .. .
.header .footer ( ,
),
.

17. CSS

549

, , .branding
.header. ,
. , : ,
.
, . , .floatLeft
.floatRight .
. , .s, .s1 .s2, ,
. , ,
- . , : .
sidebar, .copyright .banner , .

,
-
. , ,
.
. , ,
,
.
,
, float margin. , , , . ,
?
, ,
!

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


CSS. ,
, ,
.
CSS
RGB-.
,
.

, .
,
,
.

550

4. CSS



CSS3. ,
CSS-
.

, linear-gradient.
CSS
.
CSS- background image: lineargradient(red, blue);,

CSS
LESS (http://lesscss.org) SASS (http://
sass-lang.com).
. -, ,
CSS.
CSS,
LESS SASS
.

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

-,
.
,

.

Scout (http://mhs.github.com/scout-app/)
Compass.app (http://
compass.handlino.com).
Windows, Mac,
LESS SASS
.

,
CSS-
CSS-.

, .17.2.
, . , , . ,
,
; , - .
, ,
, . , ,
class , ( ) : <div class = "note alert">. <div> .note .alert.
,
, , . .
1. , ,
.
.imgFrame,
2, .

17. CSS

551

. 17.2.

2.
: , , , .floatLeft
.floatRight.
3. :

<img src="photo1.jpg" width="100" height="100" class="imgborder floatLeft" />

<img src="photo1.jpg" width="100" height="100" class="imgborder floatRight" />

,
, . ,
, .imgFrame.
, .

;
.

,
, ,

552

4. CSS

, .

, ,
. ,
. , 33%
25% . (
.sidebar)
, .w33per .w 25per.
: <div class = "sidebar w33per">.



. - ,
, CSS- 500.
, .
,
. ,
, .
, . , ,
, , , , , .
( ). , , ..
.
, , , CSS,
. , ,
, .
:
/* *** *** */

/* --------------------------
--------------------------- */

/*, */; , ,
, .
, ,
: www.wired.com, www.mezzoblue.com http://keikibulls.com.

,
, www.stopdesign.com/log/2005/05/03/csstip-flags.html.

17. CSS

553


.16 ,
, . , , ,
.
.
, , , , , . , , ,
, , Internet Explorer .. ,
, , , 30
CSS-, , .
, CSS-, -,
-.
, , ,
, .
: ,
@import, . 17.3 .

.17.3. HTML- CSS- (base.css ).


HTML- ,
. base.css, @import

, .
1.
. , color.css , forms.css, ,

554

4. CSS

layout.css main.css,
(..17.3, ).

. ,
. CSS- www.contentwithstyle.
co.uk/content/modular-css.

2.
, 1. base.css,
global.css, site.css - . CSS- - . @import, :
@ import
@import
@import
@import

url(main.css);
url(layout.css);
url(color.css);
url(forms.css);

, , , ..,
.
3. , 2 HTML-
, <link> @import ( ,
, .2). :
<link rel="stylesheet" href="base.css" />

, - , base.css, , ,
.
, .
(. . .2).

: , HTML-
. @import
(.2 ). ,
, main.css type.css,
- . @import : @import url(type.css).
. ,
, .
color.css,
(, summer_fun.css) . -

17. CSS

555

@import color.css,
(, @import url(summer_fun.css)).


, ,
.
, ,

,
.
,
. ,
main.css,
.
, ,
-
,
, main.css.

CSS-.
<link>
HTML-. <link>

:
<link rel="stylesheet" href="main.css">

CSS (, main.css?v=1),
main.css?v=1, main.css.

v=
,
.
, , ,
main.css CSS .
<link>:
<link rel="stylesheet" href="main.css?v=1">

, main.css,
<link> :
<link rel="stylesheet" href="main.css?v=2">


main.css
-. ?v=1
, -.
.

<link> HTML- .
PHP,

: http://ikeif.net/2009/03/27/stop-cachingfiles-php-function.


-, CSS, HTML : ,
<h1> , ..
. , ,
Internet Explorer, Firefox, Safari.
- , , (.17.4). , ,
,
.

556

4. CSS

.17.4. , .
, , ,

, , .
. ,
<p>, . , , .
, ,
.
. <p> 1em,
. , 1em,
. ,
, .
, HTML5 .
HTML5, article, aside section,
, div-. ,
, .
display: block. ,
HTML5 shiv (http://code.google.com/p/html5shiv/),
. Internet Explorer 8
HTML5 HTML5 .1,

17. CSS

557

Internet Explorer 8 CSS,


HTML5-.
.
, . <body> body { line-height: 1.2; }, . 1.2
120% . , , .
.
, ,
. , . , <th> <td> .
.
. ,
, . , .
.
-, , , . .
. - <q> (<q>To err is human</q> (<q>
</q>), ), ,
(Firefox, Safari) ('') , (Internet Explorer 6 7) . , , . , Internet
Explorer8 (''), Firefox
("").
.
, :

/* */
h tml, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt,
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend,
t able, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed,
f igure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary,

558

4. CSS

t ime, mark, audio, video {


margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
a rticle, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
display: block;
}
body {
line-height: 1.2;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol {
padding-left: 1.4em;
list-style: decimal;
}
u l {
padding-left: 1.4em;
list-style: square;
}
b lockquote, q {
quotes: none;
}
b lockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* */

,
.
,
.

17. CSS

559

(font-size) <h1> . , , :
h1 {
margin-top: 5px;
font-size: 2.5em;
}

,
, (..5) .
reset.css 17 . .

.
Normalize.css (http://nicolasgallagher.com/about-normalize-css/) , HTML-. ,
Normalize.css
. ,
, .


ID ()
, . ,
<p class="intro"> ,
, .intro. ,
( ),
.
.
, HTML.
,
, .
. .3, ,
.
, ,
. :
,
. , HTML- -, ,
, ,
(.17.5).

560

4. CSS

.17.5. HTML- .
HTML- (<h1>, <p>, <ul> <li>)
-,


<div>.
,
, , ,
.. . HTML- <div>
<span> : .3, , HTML- <div>.
:
<div>
<h2>The CosmoFarmer Revolution</h2>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>

<div> CSS
class (<div class = "pullQuote">). (,
), .
, HTML-, , : .
:
<div class="storyNav">
<h2>The CosmoFarmer Revolution</h2>

17. CSS

561

<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>

<div>, . ,
, <h2>,
<div> : <ul
class = "storyNav">. <ul> HTML5- <nav>, .

<div> ,
, <div>. ,
. :
.storyNav a {
color: red;
background-color: #ccc;
}

- , , storyNav.
(, page4.html)
, HTML-, ,
. ,
.
<div>
, (.storyNav), , .
<h2>, <div>, .storyNav h2.

<body>

, , , . , <h1>
, .
<h1> class <body>:
<body class="home">

<h1> ,
: .home h1.
(.17.6).

562

4. CSS

, . ,
: , , . class, id <body>. ,
HTML-: <class body = "news">,
<class body = "events">.
.17.6, home, Home () (). about, About Us ( ) ().

, ,
(, , ).

, .
, , ,
.17.6.
, News (),
, .
,
, .
1. <body>, , . , <body class = "home">.
, : <body
class = "news">.
2. . .9.
3.
. : <href = "/index.html" class =
"homeLink">Home</a>. class
. : <href
= "/news/" class = "newsLink">News</a> ..
HTML-, , CSS.
, <body>
class, home, .
4.
, -. , . :
.home .homeLink

.homeLink,
, .home. , , (.
.3), .

17. CSS

563

, ,
.
- :
. home .homeLink,
.news .newLink,
.articles .articlesLink,
.links .linksLink {
background-color: #FBEF99;
}

.17.6. , ,
class <body>

, ,
, .
, .

564

4. CSS

, , : ,
. (. .9).

. . , .home, .navbar, ,
.navLink. , . HTML-, , -. .

- CSS
- CSS
CSS.
CSS ,

HTML.
HTML, .
,
,
.
<article>
. ,
,
.
CSS-,
HTML,
, :
article img, li img {
/* */

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

,
,
. - CSS
class
HTML.
, WordPress,

.
,
.
- CSS
http://coding.smashingmagazine.
com/2011/12/12/an-introductionto-object-orientedcss-oocss/. OOCSS
https://github.com/stubbornella/oocss.


(Jonathon Snook),
CSS Scalable
and Modular Architecture for CSS ( SMACSS),

CSS-.

http://smacss.com. http://tv.adobe.
com/watch/adc-presents/smacss-introduction-toa-scalable-andmodular-architecture-for-css/


, SMACSS.

CSS Internet Explorer


. , Safari, Firefox
Internet Explorer10, CSS- -

17. CSS

565

CSS -.
, Internet Explorer7, 8 9, .
,
.
, Internet Explorer. zoom, ,
, Internet Explorer 7 . Internet
Explorer 8
HTML5-. , , JavaScript HTML, Internet
Explorer. Internet Explorer
.
Internet Explorer (.17.7).
Microsoft HTML- Internet Explorer.
.

. Internet Explorer7
( Internet Explorer7_styles.css) , . , , Internet Explorer7
. .

.17.7. , HTML-
Internet Explorer ().
()

, ,
. ,
. .

566

4. CSS

:
<!--[if Internet Explorer]>
HTML-, Internet Explorer.
<![endif]-->
<!--[if Internet Explorer]> .
Internet Explorer, HTML. , ,
<![endif]->, Internet Explorer,
, ,
Internet Explorer.

HTML-
.

Internet Explorer.
, . , Internet
Explorer 7. -:
<!--[if IE 7]>
<link href="IE7_styles.css" rel="stylesheet" >
<![endif]-->
, @import:
<!--[if IE 7]>
<style>
@import url(IE7_styles.css)
</style>
<![endif]-->

Internet Explorer 7 . . , , Internet Explorer 6, 7 8.


lte,
less than or equal , , lte IE 8
Internet Explorer 8 :
<!--[if lte IE 8]>
<link href="IE_styles.css" rel="stylesheet">
<![endif]-->

. Internet Explorer ,
, , . - , ,
. , , Internet Explorer , , .

17. CSS

567

, ,
, Internet Explorer8 Internet Explorer 7 .
<link href="global_styles.css" rel="stylesheet" type="text/css" />
<!--[if IE 8]>
<link href="IE8_styles.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="IE_old_styles.css" rel="stylesheet" type="text/css" />
<![endif]-->

Internet Explorer
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx.

1.

CSS

2.

, CSS

CSS

(CSS) , CSS,
, , .
, ,
.
CSS2.1 , ,
CSS3.

CSS- . ,
CSS, W3C CSS
.
, CSS World Wide Web
Consortium www.w3.org/Style/CSS/current-work.

CSS
CSS . color, , , ,
. color: #FFF; . , : , , URL.

, ,
. CSS .
. , ,
, white black ( ).
17 , : aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white yellow. , CSS3
(http://www.w3.org/TR/css3-color/). , . 6 RGBA.

570

RGB. , , . RGB-
. , , RGB,
CSS-. CSS RGB .
Hex-. ,
. Hex- ( 16) . #FF0033
RGB-, (FF, 255
), (00) (33). # CSS,
, .
#, .

, Hex-, . , #361 , #336611.

RGB. , , : rgb (100%, 0%, 33%). -

, , .
. , RGB- . , ,
0 255: rgb (255, 0, 33).
RGBA. RGBA .
,
, . RGB
0 ( ) 1 ( ).
, , . , - , 50- :
r gba(50%,50%,50%,.5)
rgba(122,122,122,.5)
HSL hue , saturation lightness

( luminance ).
. Internet Explorer 8
, . RGB- Hex-, HSL . - :
hsl(0, 100%, 50%);

(hue) 0 360,
, 0, 360 , 180 -

1. CSS

571

. , , 0 ( ) 100% ( ).

0 ( ) 100% ( ). RGB, HSL, . HSLA: hsla(0, 100%, 50%, .5).
, , . RGB- . ,
white black. Windows Mac
,
, RGB-. www.ficml.org/
jemimap/style/color/wheel.html , , http://kuler.adobe.com.


CSS ,
. ,
, , , , , em ex, .

,
.6. : , em .
. .
: 72 72 .
,
.
800600, 1024768, 16001200 ., 72
1 0,5 . .

: Internet Explorer 6
, . -, ,
(. .6).

em. em ,
. - 1em ,
16. ,
1em 16 24 .
, em .
, em . .9em

572

14
16. <p> .9ems, <strong>
.9ems <p>, em- <strong>
14, 12 (160,90,9). , em-.
. CSS ,
, , .. . , 16.
200%, 32.
.


,
, . .
text-align, , : right, left, center justify.
, , , ,
.
, , inherit.
.
inherit ,
. ,
border, . , <em>
<strong> <p>, ,
inherit:
em, strong {
border: inherit;
}

, em strong border, <p>. , <em> <strong>


, .
border, ( , ).
border <p> , <em>
<strong> .

, , inherit
. , .

URL-
URL . ,
background-image URL

1. CSS

573

, .

(. .8).
CSS URL : url(images/tile.gif). , , tile.gif, ,
:
body { background-image: url(images/tile.gif); }

HTML, CSS URL ,


url ("images/tile.gif"), url('images/tile.gif') url(images/tile.gif) .

URL , HTML- href, . , URL (, http://www.missingmanuals.com/images/tile.gif),


(, /images/tile.gif) URL (, ../../
images/tile.gif). . URL
.8 .


-. ,
, ( <p>).
<body> , . , .. .

color ()
. , , <body>, ,
<body> .
: .
: color: #FFFF33;.

<a> .
<body> . ,
, .9.

font ()
,
: font-style, font-variant, font-weight, fontsize, line-height font-family.

font-size font-family,
. .

574

, ,
.
: , .
line-height, , (/), , : 1.25em/150%.
: font: italic small-caps bold 1.25em/150% Arial, Helvetica, sansserif;.

font-family ()
, .
- ,
, .
: , .
, ,
.
, ,
: serif, sans-serif, monotype, fantasy cursive.
: font-family: "Lucida Grande", Arial, sans-serif;.

,
-, -.
- - .6.

font-size ()
. , , em.
: CSS (.
CSS ), : xx-small, x-small, small, medium, large, x-large, xx-large, larger smaller; medium
, , .
. , ,
,
. , xx-small 9 (
, ); x-small 10, small 13, large 18, x-large 24 xx-large 32. -
, , , em .
: font-size: 1.25em;.

font-size , (1,2 ).

1. CSS

575

font-style ()
. , . italic oblique .
: italic, oblique, normal.
: font-style: italic;.

font-variant ()
, : SPECIAL PRESENTATION. normal , .
: small-caps, normal.
: font-variant: small-caps;.

font-weight
,
.
: CSS 14
font-weight,
: bold normal.
: font-weight: bold;.

letter-spacing ()
, ( ) ( ).
: CSS, em . . ,
, , .
normal letter-spacing 0.
: letter-spacing: -1px; letter-spacing: 2em;.

line-height ()
(
). 120% (. .6).
: CSS (.
CSS ), em, .
: line-height: 200%;.

text-align ()
,
-.
: left, center, right, justify ( justify
).
: text-align: center;.

576

text-decoration ()
, . , , . , ,
. blink, ( blink).
: underline, overline, line-through, blink, none. none
. , ,
.
, ( none) .
: text-decoration: underline overline line-through;.

text-indent ()
. ( ) .
: CSS. em
; , font-size.
, ,
. , 50%
. , . margin-left, /
.
: text-indent: 3em;.

text-shadow ()
.
: ( em )
: ,
, . , .

, . . ,
.
:
text-shadow: -4px 4px 3px #999999;
text-shadow: -4px 4px 3px #999999
2px 3px 10px #000;

text-transform
,
.
: uppercase, lowercase, capitalize, none. none
HTML. aBCDefg -

1. CSS

577

, HTML, none
- aBCDefg.
: text-transform: uppercase;.

vertical-align

. ,
. , TM, . top, middle, bottom baseline
(. .11).
: baseline, sub, super, top, text-top, middle, bottom, text-bottom,
(, em).
line-height .
:
vertical-align: top;
vertical-align: -5px;
vertical-align: 75%;.

white-space
, HTML.
, "Hello Dave",
"Hello Dave". pre
, HTML.
, HTML- <pre>. ,
, .
, nowrap.
,
( , , ).
: nowrap, pre, normal. pre-line pre-wrap .
: white-space: pre;.

word-spacing ()
, letter-spacing, ,
.
: CSS, em
; . , ,
, ( ). normal
(word-spacing), 0.
: word-spacing: -1px; word-spacing: 2em;.

578


(<ul>) (<ol>).

list-style ()
, .
, .

: list-style: outside list-style-position: outside. , , (, ..), . ,
, , ,
.
: list-style-type, list-style-image
/ list-style-position.
: list-style: disc url (images/bullet.gif) inside;.

list-style-image ()
,
.
: URL none.
: list-style-image: url (images/bullet.gif);.

background-image (. .8).

list-style-position ()
.
, , ( , ). outside
.
: inside, outside.
: list-style: inside;.

list-style-type ()
: , , ..
() (), list-style-type,
( Internet Explorer Windows).
none, .
: disc, circle, square, decimal, decimal-leading-zero, upper-alpha, loweralpha,
upper-roman, lower-roman, lower-greek, none.
: list-style-type: square;.

1. CSS

579

,
.

box-shadow
.
: inset,
.
. ( em ) . ,
, , .

, . , .
. , .
:
box-shadow: -4px 4px 3px #999999;
box-shadow: inset 4px 4px 3px 5px #999999;
box-shadow: inset 4px 4px 3px 5px #999999
2px 2px 5px black;

border
.
:
CSS ( ).
: solid, dotted, dashed, double, groove,
ridge, inset, outset, none hidden (..7.7,
). none hidden .
, ,
CSS ( , , green, Hex-, #33fc44).
: border: 2px solid #f33;.

border-radius
. , , .
: , , ( px, em %),
, .
,
. ,
,
. , , , . , , ,
. /, .

580

:
border-radius: .5em;
border-radius: 15px 10px 25px 5px;
border-radius: 15px / 5px;

border-top, border-right, border-bottom, border-left


. , border-top .
: , border.
: border-left: 1em dashed red;.

border-color
, .
: CSS ( , , green,
Hex-, #33fc44).
: border-color: rgb(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
, .
: : solid, dotted, dashed, double, groove, ridge, inset,
outset, none hidden (..7.7, ). none hidden .
: border-style: inset;.
,
: , , .
: , ,
. ,
, .
: border-style: solid dotted dashed double;.

1. CSS

581

border-top-style, border-right-style,
border-bottom-style, border-left-style
, border-style,
().
: border-style.
: border-top-style: none;.

border-width
, .
: CSS, .
em .
: border-width: 1px;.
,
.
: CSS, ,
. ,
, .
: border-width: 3em 1em 2em 3.5em;.

border-top-width, border-right-width, border-bottom-width,


border-left-width
, border-width,
.
: border-width.
: border-bottom-width: 3em;.

box-sizing
.
, , border, padding width.
,
300, , , 300.
: content-box, padding-box border-box. content-box
. Padding-box
width height padding. borderbox border. ,
<div>, 300, 20 2 , div -
344 (300 + 20 + 20 + 2 +2), ,
box-sizing padding-box, div-
304 (300 + 2 +2),
300, border-box,
div- 300. border-box
. ,
Internet Explorer 7 .
: box-sizing: border-box;.

582

outline
outline-color, outlinestyle outline-width ( ). , ,
, , ,
( )
. - ,
. outline Firefox, Safari, Chrome, Opera
8- Internet Explorer.
: , border, (. outline-color ).
: outline: 3px solid #F33;.

outline-color
(. outline).
: CSS invert,
(, ) . , invert .
, border-color.
: outline-color: invert;.

outline-style
: , , ..
: , border-style, .
: outline-style: dashed;.

outline-width
. , border-width.
: CSS, .
em .
: outline-width: 3px;.

padding
, . , ,
(..7.1).
: CSS,
em. . , <body>, ,
, 20% 20%
. ,
.
, ,
: top, right, bottom, left.
: padding: 20px; padding: 2em 3em 2.5em 0;.

1. CSS

583

padding-top
, padding,
.
: padding-top: 20px;.

padding-right
, padding,
.
: padding-right: 20px;.

padding-bottom
, padding,
.
: padding-bottom: 20px;.

padding-left
, padding,
.
: padding-left: 20px;.

margin
(..7.1).
:
.

. , , , (. .7).

: CSS,
em. . ,
<body>, , , 10% 10% . , . ,
, ,
: top, right, bottom, left.
: margin: 20px; margin: 2em 3em 2.5em 0;.

margin-top
, margin,
.
: margin-top: 20px;.

584

margin-right
, margin,
.
: margin-right: 20px;.

margin-bottom
, margin, .
: margin-bottom: 20px;.

margin-left
, margin,
.
: margin-left: 20px;.

CSS ,
,
, .

background
,
, , . ( ) ,
.
,
. , ,
,
(. .8).
: , , . ( ,
), : backgroundcolor, background-image, background-repeat, background-attachment, background-position.
: background: #333 url (images/logo.gif) no-repeat fixed left top;.

background-attachment
, , . ,
.
-, fixed background-attachment, , ( Internet Explorer 6
<body>).
: scroll fixed. Scroll : . Fixed .
: background-attachment: fixed;.

1. CSS

585

background-clip
, .
, , . , .
,
. ,
, . Internet Explorer8
.
: border-box, padding-box content-box. border-box
, ,
. padding-box , . contentbox , , .
:
background-clip: content-box;
background-clip: padding-box;

background-color
. , ,
dashed dotted. .
: (. CSS ).
: background-color: #FFF;.

background-image
.
, , , .
, .
, background-repeat. CSS3 .
: URL- .
.
:
background-image: url(images/photo.jpg);
background-image: url(http://www.example.org/photo.jpg);.

background-origin
, ,
.

586

, . Internet Explorer 8
.
: border-box, padding-box content-box. border-box
.
padding-box ,
. content-box ,
. , , ,
.
, background-clip.
: background-origin: content-box;.

background-position
( ) .
,
. , background-position . , , ,
. , .
: CSS,
em, .
, , .
: left, center right top,
center bottom . em
, , 5 10 , 5px 10px.

,
.
50% 50% (.
.8). : ,

.
: background-position: left top; background-position: 1em 3em; backgroundposition: 10px 50%;.

background-repeat
, , , .
, .
: repeat, no-repeat, repeat-x, repeat-y. repeat ,
, . No-repeat -

1. CSS

587

- . Repeat-x
.
Repeat-y ,
, .
: background-repeat: no-repeat;.

background-size
,
.
: , em , : contain cover.
contain ,
, .
cover
, , , , .
:
background-size: 200px 400px;
background-size: contain;


-.

bottom
, . bottom
.
- ,
.
, .
(. .15).
: CSS, , em
. .
: bottom: 5em;.

clear
, .
.
: left, right, both, none. left ,
. right

588

. both , . none ,
clear. , ,
, .
float , .
: clear: both;.

clip
, .
,
, ,
. ,
. clip ,
JavaScript, . ,
.
: . rect, : rect(5px,110px
,35px,10px);.
, :
. 5px, , .
.
10px, ( 9 ).
; 10 ,
100, 110px. ( ). , 30 (30px+5px=35px).
: clip: rect(5px,110px,35px,10px);.

,
, .

display
,
(. .7).
, .
, ( )
, , , ( ).
: block, inline, none. display 17,

1. CSS

589

. block, inline none, ,


. block ,
, (, ); inline , (
, <strong> ,
); none . , JavaScript :hover (. .3).
(
Internet Explorer7 6). .
: display: block;.

float
, , .
, float . ,
, , (
) ( ),
. ,
- , , .12.
: left, right, none. none ,
, ,
, .
: float: left;.

height
, ,
, , .
, , ,
.
: CSS, , em
. .
: height: 50%;.

: , ,
.
-: Internet Explorer 6 ,
.

left
(. .15)

590


. -
,
. , 20 . .
: CSS, , em
.
: left: 5em;.

max-height
. , , .
, max-height,
. overflow.
Internet Explorer 6 max-height.
: CSS, , em
.
.
: max-height: 100px;.

max-width
.
, , .
, max-width, ,
overflow. max-width (. - .12). :
, .
Internet Explorer 6 .
: CSS, , em
. .
: max-width: 950px;.

min-height
.
, . , min-height,
, . Internet Explorer 6 .
: CSS, , em
. .
: min-height: 20em;.

1. CSS

591

min-width
.
, , . , ,
, min-width.
,
. , min-width, . Internet Explorer 6
.
: CSS, , em
. .
: min-width: 760px;.

max-width min-width
(. .12).

overflow
, , , , , ,
width.
: visible, hidden, scroll, auto. visible
,
. Internet Explorer 6 ,
. hidden
; scroll , ,
, -.
auto , ,
.
: overflow: hidden;.

position
,
.
: static, relative, absolute, fixed. static
, ; relative , .
,
. absolute .
.

,
, .
fixed , , ,

592

, HTML.
Internet Explorer 6 fixed.
: position: absolute;.

relative, absolute fixed left, right, top bottom.


.15.

right


. , , - ,
.
, . .
: CSS, , em
.
: right: 5em;.

Internet Explorer 6 right.

top
bottom,
. ,
. - ,
. ,
.
.
: CSS, , em
.
: top: 5em;.

visibility
, . ,
, ,
<div>. none display, , hidden visibility
.
, . visibility
,
.

1. CSS

593

,
. JavaScript visibility . :hover (. .3), visibility ,
.
: visible, hidden. , collapse,
.
: visibility: hidden;.

width
, ,
. , ,
, , , .
: CSS, , em
.
.
: width: 250px;.

z-index
.
, position absolute,
relative fixed. ,
Z.
, , ,
.
: , 1, 2 10.
,
-. , . z-index,
20, z-index, 100 (
) (..15.6).
: z-index: 12;.

. A 1
z-index, 2 B,
. 5, 10 .., , ,
. , ,
, , 10000. ,
, Firefox, 2147483647, z-index .

,
CSS3
, , ,
CSS- .

594

@keyframes
CSS- @keyframes.
,
(keyframes). ( .10,
, CSS-.) , ,
: CSS- ,
. CSS-
.
@keyframe , Internet Explorer 9 .
: @keyframes CSS, . . (
),
: { }. ,
from to
. , CSS-: background-color, font-size,
.. .10.
:
@keyframes myAnimation {
from {
background-color: black;
}

to {
background-color: white;
}

animation
.
: animation-name, animationduration, animation-timing-function, animation-iteration-count, animation-direction,
animation-delay animation-fill-mode. . CSS3,
Internet Explorer9
.
: , , , . ,
,
(animation-name, animation-duration) ..
animation-name animation-duration. animation . -

1. CSS

595

, ,
.
:
animation: myAnimation 2s;
animation: myAnimation 2s ease-in 2 alternate 5s forwards;
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;

animation-name
, @keyframes. CSS-, . , h1 ,
<h1>. ,
animation-duration.
Internet Explorer 9
.
: @keyframes.
: animation-name: myAnimation;.

animation-duration
, animation-name.
: 1s 1000ms.
: animation-duration: 2s;.

animation-timing-function
. , 5, , 5, .
Internet
Explorer 9 .
: : linear, ease, ease-in, ease-out ease-inout. .
:
animation-timing-function: ease-out;
animation-timing-function: cubic-bezier(.20, .96, .74, .07);

animation-delay

.
Internet Explorer 9 .
: 1s 1000ms.
: animation-delay: 1.5s;.

596

animation-iteration-count
. ,
, 4, 5, 100
. Internet Explorer 9 .
: infinite.
:
animation-iteration-count: 5;
animation-iteration-count: infinite;

animation-direction
, .
.
, , . ,
, , , , ,
.. Internet Explorer 9
.
: normal alternate.
normal,
alternate.
: animation-direction: alternate;.

animation-fill-mode
() .
Internet
Explorer 9 .
: : backwards, forwards both.
forwards , , , , .
: animation-fill-mode: backwards;.

animation-play-state
. :hover
. Internet Explorer 9 .
: : pause running.
pause , running . running.
: animation-play-state: paused;.

1. CSS

597

transform
, , , . Internet Explorer 8
.
: rotate(), translate(), skew() scale(). . , rotate 180deg, translate , , em
, skew , scale
.
.
:
transform: rotate(45deg);
transform: scale(1.5);
transform: skew(45deg 0) rotate(200deg) translate(100px, 0)
scale(.5);

transform-origin
, . ,
.
. Internet Explorer 8 .
: , ,
. , background-position.
:
transform-origin: left top;
transform-origin: 0% 100%;
transform-origin: 10px -100px;

transition
transition-property , transition-duration ,
transition-timing-function transition-delay ( ).
transition CSS-
. , .
Internet
Explorer 9 .
: ,
transition (, all), transition-duration
(), transition-timing-function (, ease), transition-delay (, 0).
: transition: background-color 1.5s ease-in-out 500ms;.

transition-property
CSS-, CSS- . Internet Explorer 9 .

598

: CSS- all.
:
transition-property: width, left, background-color;
transition-property: all;

transition-duration
.
: 1s 1000ms.
: animation-duration: 2s;.

transition-timing-function
. ,
5 , ,
5 , , ,
. Internet Explorer 9 .
: : linear, ease, ease-in, ease-out easein-out. .
:
transition-timing-function: ease-out;
transition-timing-function: cubic-bezier(.20, .96, .74, .07);

transition-delay

.
Internet Explorer 9 .
: 1s 1000ms.
: transition-delay: 1.5s;.


CSS,
HTML. .11 CSS .

border-collapse
, . ,
. , 0
cellspacing HTML- <table>, . ,
, , . collapse border-collapse
, (.
.11). , <table>.

1. CSS

599

: collapse, separate.
: border-collapse: collapse;.

border-spacing
. HTML- cellspacing <table>. Internet Explorer7
border-spacing, cellspacing
<table>, .

, ,
collapse border-collapse.

: CSS- . ( ),
(, ,
).
: border-spacing: 0 10px;.

caption-side
, , . , HTML, <caption>
<table>,
.
: top, bottom.
: caption-side: bottom;.

, Internet Explorer6 7 ( 8 ), HTML-: <caption align=


"bottom"> <caption align = "top">.

empty-cells
, ,
. HTML : <td></td>. hide
, , ,
.
, <table>.
: show, hide.
: empty-cells: show;.

empty-cells Internet Explorer7 .

table-layout
, ,
. fixed

600

, , - . auto , , , ,
, .
, , <table>.
: auto, fixed.
: table-layout: fixed;.


CSS2.1 .
-, ,
, .. ,
.

content
, , .
:after :before (.
.
.14).
. Internet Explorer6 7,
.
: (" "), normal, open-quote,
close-quote, no-open-quote, no-close-quote.
: p.advert:before {content: "And now a word from our sponsor";} a:
after {content: "("attr(href)")";}.

( )
.
www.westciv.com/style_master/academy/css_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, text, wait, help, progress.
URL-,
( ). ,
, , , , -
, , cursor: pointer.
: cursor: help; cursor: url(images/cursor.cur);.

1. CSS

601

URL .
www.quirksmode.org/css/cursor.html.

opacity
.
, . , opacity div-
, ,
div-. , <div>
opacity, .5 (50% ), 50%- , 1, 50%- .
: 0 1. 0 ,
1 .
: opacity: .5;.

orphans
,
. ,
,
, .
, ,
, , ( Opera ).
: , 1, 2, 3 5.
: orphans: 3;.

page-break-after
, . ,
, .
: auto, always, avoid, left, right. auto , , ;
always , , , ,
; avoid ; , , , ,
. left right ,
- ,
. ,
, .
left right , always.
: page-break-after: always;.

602

page-break-before
, page-break-after, ,
. . ,
, - .
: , page-break-after.
: page-break-before: always;.

page-break-inside
, .
, <div>, pagebreak-inside ( Opera ).
: avoid.
: page-break-inside: avoid;.

widows
orphans, . , . , .
, widows,

( Opera , ).
: , 1, 2, 3 5.
: widows: 3;.

,
CSS

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

CSS- , .
, -, , CSS.
.
(W3C)
CSS (www.w3.org/Style/CSS/current-work).
CSS-, .
, Completed , Revising Abandoned . ,
, Completed () ,
-. , CSS
( ).
-
CSS- Mozilla Developer Network (https//developer.mozilla.org/enUS/docs/CSS/CSS_Reference). Mozilla Developer Network (MDN)
CSS ( HTML5,
JavaScript -).
CSS- Sitepoint (http://reference.sitepoint.com/css) , CSS- .
W3C MDN,
.
Can I use... ( ...)(http://caniuse.com). CSS

604

. , CSS-
, , Internet Explorer 9.
CSS3- (http://www.css3files.com/)
CSS3,
, , .

CSS
( )
. ,
CSS , .
. CSS-Discuss (http://css-discuss.org/).
, CSS. CSS- .

CSS-Discuss , 47000,
""- , , .
, CSS.
http://css-discuss.incutio.com/.

CSSCreator (www.csscreator.com/css-forum/). , -

, CSS .
CSS- SitePoint.com (www.sitepoint.com/forums/forumdisplay.php?f=53).
CSS.
CSS-Tricks.com (http://css-tricks.com/forums). . PHP
JavaScript, .

, CSS
. , , . CSS, , , .
CSS .
CSS-Tricks.com (http://css-tricks.com). , , CSS.
, .
Sitepoint (www.sitepoint.com/subcat/css). CSS.
CSS.

2. , CSS

605

Smashing Magazine (www.smashingmagazine.com/category/css).


, CSS

, -.
NetMagazine (http://www.netmagazine.com/tag/css?ct=tutorial).
CSS.

CSS-
.9 , .
- . ,
,
. ,
.
.
Listutorial (http://css.maxdesign.com.au/listutorial/). .
40 Premium CSS Menu and Navigation Solutions (www.tripwiremagazine.com/2012/06/
css-menu-and-navigation.html). .
Apple.com,
CSS3 (www.marcofolio.net/css/the_apple.com_navigation_menu_created_using_only
_css3.html). Apple.com,
, CSS.

CSS Navigation Bar Code Generator (http://lab.mattvarone.com/navbar).
? -
,
.
CSS Menu Maker (http://cssmenumaker.com). CSS3. , .
CSS Showcase (www.alvit.de/css-showcase/). , CSS-.
Listamatic (http://css.maxdesign.com.au/listamatic/ ).
CSS .
.
Listamatic2 (http://css.maxdesign.com.au/listamatic2/). CSS-,
.
CSS Menu Builder (www.cssmenubuilder.com/). . .
CSS (http://pixelsdaily.com/resources/html-css/
responsive-css-navigation-menu/). , .

606

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

Interactive CSS Box Model (www.redmelon.net/tstme/box_model/) .
- (Paul Irish) * { box-sizing: border-box } FTW (http://
paulirish.com/2012/box-sizing-border-box-ftw/). -,
CSS
box-sizing .

PageBlox (www.pageblox.com). -
CSS.
.
CSS Layout Generator (www.pagecolumn.com). ,
, HTML CSS-. , ? (.)
Even More Layout Generators (www.webdesignbooth.com/15-extremely-usefulcss-gridlayout-generator-for-web-designers). ,
HTML CSS, 15-.
960 Grid System (http://960.gs). CSS, ,
div , ( http://nettuts.com/videos/screencasts/adetailed-look-at-the-960-css-framework/).
-, grid grid- 960: http://grids.heroku.com.
YUI Grids CSS (https://developer.yahoo.com/yui/grids). CSS Yahoo!. 960 Grid System, ,
.
Twitter Bootstrap (http://twitter.github.com/bootstrap/). -, HTML, CSS JavaScript,
, grid JavaScript.
Foundation (http://foundation.zurb.com).
-. Twitter Bootstrap HTML,
CSS JavaScript.
.

2. , CSS

607


Adaptive CSS Layouts (www.smashingmagazine.com/2009/06/09/smart-fixesfor-fluidlayouts). ,
.
TJK Desigh (http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp).
, HTML- CSS.
Variable fixed width layout (www.clagnut.com/blog/1663/).
,
.
3-Column Layout Index (http://css-discuss.incutio.com/?page=ThreeColumnLayouts).
.


CSS , .
.
CSS, , CSS-.
ZenGarden (www.csszengarden.com). - CSS:
HTML-.
CSS Beauty (www.cssbeauty.com/). CSS.
CSS Elite (www.csselite.com). , CSS
CSS Mania (http://cssmania.com/). -, 2004
CSS .
CSS Winner (www.csswinner.com). . , ,
, ,
, .

CSS
(CSS).
,
Windows Mac OS, TextEdit.
CSS-,
-, Dreamweaver,
CSS.
Windows Mac
Style Master (www.westciv.com/style_master/product_info/). CSS- , , , -, CSS.

608

Dreamweaver (www.adobe.com/dreamweaver/).

CSS, - ,
.
CSS -
, .
Sublime Text (http://www.sublimetext.com). , .
CSS, -.
Windows
Top Style (www.topstyle4.com). CSS-, HTML-, ( ) -.
. .
Microsoft Expression Web (www.microsoft.com/expression/products/Web_Overview.
aspx). ,
CSS.
Mac
Espresso (http://www.macrabbit.com/espresso/). , , FTP- CSSEdit 3, CSS.
Code (http://panic.com/coda/).
- CSS.