CSS 100 и 1 совет

CSS
: -
:
ISBN 978-5-93286-182-0
9 785932 861820
The CSS
Anthology
101 Essential Tips, Tricks & Hacks
Third Edition
Rachel Andrew
CSS
100 1

-
2010
High tech
CSS: 100 1 , 3-
.

.

.
.
.
.
.
.
.
.
CSS: 100 1 , 3- . . . : -, 2010.
336 ., .
ISBN 978-5-93286-182-0
CSS: 100 1 - , . ,
; , .
CSS, ,
, ,
.
: CSS, , CSS
.

, Firefox 3
Internet Explorer 8.

.
ISBN 978-5-93286-182-0
ISBN 978-0-9805768-0-1 ()
-, 2010
Authorized translation of the English edition 2009 SitePoint Pty Ltd. This translation is published and sold by permission of SitePoint Pty Ltd, the owner of all rights to
publish and sell the same.
, . , , .
-. 199034, -, 16 , 7,
. (812) 324-5353, www.symbol.ru. N 000054 25.12.98.
22.04.2010. 70100 1/16. .
21 . . 1500 .

199034, -, 9 , 12.

............................................................................... 13
1. CSS: ..................................................................... 20
CSS ............................................... 20
.................... 25
,
................................................. 32
.............................................................................. 34
2. ................. 35
................................... 35
:
, , - ..................................... 37
................................................. 44
,
.......................................... 46
........... 48

...................... 50
.......................................... 51
.......................................................... 52
h1
....................................................... 53
..................................................... 55
( ) .......... 56
.................................................. 57
....................................... 58
.............................................................. 59
................................................................ 60
CSS ......................... 61
.............. 62
....................... 64
...................................... 64
..................................66
............................................66
....... 67
.........69
..............................................................................69
3. CSS .......................................................................... 70
................................................ 70
CSS ,
................................................. 72
CSS .......... 72
.............. 74
.................................. 76

..............................................................79
............ 81
....................................... 84
......... 85
.............................................. 87
,
..................................................................... 89
..............................................................................91
4. ............................................................................... 92
...........................93

CSS
JavaScript .............................................................................96

............................................. 98
CSS ............ 102
CSS ......... 105
CSS ....... 107
, .............................. 113
........................................................... 116

JavaScript .................................................... 118
.......................................................... 122
CSS ........ 125

CSS ....................................... 126
............................................................................ 131
5. ................................................................ 132
CSS ....................... 132
:
.................................................. 134

HTML- border ................................... 137
,
..................................... 139

........................................... 139
................................. 143

........................................ 147
............................ 150
CSS ........................................... 153
............................................................................ 163
6. ................................ 164
CSS ........................ 165

............................................................... 168
.......... 171
.............................. 172

...................................... 173
CSS .... 176
........................................ 180
............................... 184
,
select ....................................... 186

, ................................... 188
,
...................................................................... 194
7. - ................................................... 197
? ................... 198

.................................................... 199
, ............ 203

Internet Explorer Windows ...................................................... 205
10
,
.............................. 206
...... 207
...................... 211
Internet Explorer 6 7 ............. 213

Internet Explorer 6 7 ............................................................ 215
PNG
Internet Explorer 6 ................................................................. 219
IE 8 ,
W3C ............................................ 223
, CSS ................................................ 224
,
W3C Validator .................................... 227
............................................................................ 229
8. ............................. 230
,
CSS ............................................................. 230
.................................... 232
....................... 234
........ 235
............. 238
...................... 246

?....................................... 251

................................. 252
............................................................................ 256
9. CSS ........................ 257

,
........................................................................ 257
, .......... 258
CSS............... 261
................................................ 264

float ............................................... 266
, ............... 270
CSS .............. 273
.............................................. 277
.................................... 279
11
: ,
................................................... 286

, ............................. 292

.................................................................. 294
,
....................... 305
........................................................... 307
CSS ..................... 310
....................... 315
...................................................... 318
CSS- ....................... 323
............................................................................ 328
.............................................................. 330

, , ,
. - ,
, . CSS , ,
, .
,
,
. GIF
, , .
: CSS , .
CSS ,
- .
CSS, - .
. ,
; , . , -
, ,
-
. , .
, .
. , .
, .
14
, . ,
, CSS.

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

1. CSS:
.
,
CSS, .
CSS ,
.
2.
:
,
, .
,
CSS .
3. CSS
CSS , .
,
, .
15
4.
,
CSS.
CSS , , CSS ,
.
5.
: ,
.
.
6.
, ,
, . , CSS
,
.
7. -
, ,
CSS, ? 7.
,
- .
8.

? , ,
,
? ,
- ? ,
,
,
.
9. CSS
, .
16
-
, http://www.sitepoint.com/books/
cssant3/, .

. , ZIP,
Code Archive . , 1.

, - . Corrections and Typos
, , .2
SitePoint
SitePoint .3
, , CSS, , . - ,
, , .4
SitePoint
, , SitePoint , The SitePoint Tribune, The SitePoint
Tech Times The SitePoint Design View. , : , , . , , CSS, ,
. http://www.sitepoint.com/newsletter.
1
www.
symbol.ru/library/css-101-tips
http://www.sitepoint.com/books/cssant3/errata.php
http://www.sitepoint.com/forums/
http://www.sitepoint.com/launch/cssforum/
17
SitePoint
SitePoint ; . , . http://www.sitepoint.com/blogs/category/
podcast/; , iTunes.

- , books@sitepoint.com. , .
,
.
, SitePoint . , ,
.
, CSS,
, , .
, , CSS, ,
, ,
, , . ,
, , , ,
. , .
,
HTML CSS , :
<h1>A perfect summers day</h1>
<p>It was a lovely day for a walk in the park. The birds
were singing and the kids were all back at school.</p>
18
, , :
example.css
.footer {
background-color: #CCC;
border-top: 1px solid #333;
}
,
:
example.css ()
, :
function animate() {
new_variable = Hello;
}
,
:
function animate() {
return new_variable;
}
- . . .
URL.open(http://www.sitepoint.com/blogs/2007/05/28/user-style-she
ets-come-of-age/);
, , :
, .
19
, .
C (www.symbol.ru/library/css-101-tips)
,
.
CSS:
... .
, . CSS , -.
, ,
CSS
.
CSS
-, , .
CSS
CSS ( ) ( , , ) HTML-
, .
HTML-:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html xmlns=http://www.w3.org/1999/xhtml lang=en-US>
<head>
<title>A Simple Page</title>
CSS
21
<meta http-equiv=content-type
content=text/html; charset=utf-8 />
</head>
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content.</p>
<h2>Second Title</h2>
<h2>Third title</h2>
</body>
</html>
( ), <h1> <h2>. , , . . h1 , h2 , h1,

. , , , .
CSS-:
<head>
<style type=text/css>
h1, h2 {
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h2>Third title</h2>
</body>
</html>
<style>, ( head). , -
22
1. CSS:
h1 h2 sans-serif -
. .
, ,

, <h1> <h2>.
HTML XHTML? -,
HTML. HTML / XHTML, .
, CSS, HTML-.

. HTML style, :
<p style=font-family: sans-serif; color: #3366CC;>
Amazingly few discotheques provide jukeboxes.
</p>

, ( <p>).
. ,
p, style.
, , . , .

CSS- -
style, . , ,
<style>:
CSS Styles
</style>
CSS
23
<style> head -.
type ,
. CSS, text/css.

<style> : ,
.
, . .

( , .css), CSS- .
,
.
,
.
( , styles.css) link:
<link rel=stylesheet type=text/css href=styles.css />
, ?
styles.css:
<head>
<meta http-equiv=content-type content=text/html; charset=utf-8 />
<link rel=stylesheet type=text/css href=styles.css />
</head>
<body>
<p></p>
<p></p>
<h2>Third Title</h2>
<p></p>
</body>
</html>
24
1. CSS:
rel stylesheet, type text/

css. href
.
styles.css :
h1, h2 {
color: #3366CC;
}
, styles.css .
, ,
.
CSS
. ( ) :
, .
, .
, , , .
,
.
, (;). , (:).
. 1.1.
. 1.1. CSS:
,
, . .
. 1.1 ,
.
25
;
, .
:
h1, h2 {
color: #3366CC;
}
h1, h2 { font-family: sans-serif; color: #3366CC; }
, .

h1 h2. , h1 h2:
h1, h2 {
color: #3366CC;
}
CSS2.1 .

, .
HTML-
, .
. ,
, :
p {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
,
( p) .
26
1. CSS:

, , , ,
, ? .
, :
p {
color: #0000FF;
}
! , . , - .
, ,
,
CSS.
sidebar class :
<p class=sidebar>This text will be white, as specified by the CSS style
definition below.</p>
:
p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}
,
sidebar class.
, , , HTML-.
?
. , class=sidebar, :
<p class=sidebar>This text will be white, <a class=sidebar
href=link.html>and so will this link</a>.</p>
. , , ,
? , . sidebar ,
27
, . CSS- , sidebar. :
p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}
a.sidebar:link, a.sidebar:visited {
font-weight: bold;
}
,
:link :visited. .

, ,
,
sidebar . , , , CSS .
,
; . .
ID
, , ID . ,
id , . , (ID)
HTML- :
<p id=tagline>This paragraph is uniquely identified by the ID tagline.</p>
( ID) (#). ,
:
#tagline {
color: #FFFFFF;
}
28
1. CSS:
ID
. new, tagline
id:
#tagline .new {
font-weight: bold;
color: #FFFFFF;
}
;
.

, <p>.
class sidebar ,
,
p .
(-).
:
p {
color: #0000FF;
}
.sidebar p {
color: #FFFFFF;
}
HTML-:
<div class=sidebar>
<p>This paragraph will be displayed in white.</p>
<p>So will this one.</p>
</div>
, , , . div
sidebar, .sidebar p p, div.

, .
:
<div class=sidebar>
29
<p>So will this one.</p>

<div class=tagline>
<p>If we use a descendant selector, this will be white too. But if we
use a child selector, it will be blue.</p>
</div>
</div>
.sidebar p. p, div
.sidebar p, , div
tagline. div sidebar, .
>.
, div sidebar ( div tagline):
p {
color: #0000FF;
}
.sidebar>p {
color: #FFFFFF;
}
Internet Explorer 6 .
,
, .

, . ,
HTML-:
<h2>This is a title</h2>
<p>Ths paragraph will be displayed in black.</p>
:
p {
color: #000000;
}
h2+p {
color: #FFFFFF;
}
30
1. CSS:
. p h2
, p.
Internet Explorer 6 . , ,
.

HTML ( a )
. CSS

. :
a:link { color: #0000FF; }
a:visited { color: #FF00FF; }
a:hover { color: #00CCFF; }
a:active { color: #FF0000; }
CSS.
a. , . (:). :
:link
.
:visited .
:hover -
,
.
:active .

. :active ;
, ,
, ,
.
31
:hover :active , .
:hover . :hover, , ,

. Internet Explorer 6
.
:first-child
:first-child.
,
, :firstchild . ,
,
:
<div class=article>
<p>
This is an intro paragraph to be
displayed with a larger font size.
</p>
<p>
Here is a second paragraph of text
displayed at normal text size.
</p>
</div>
CSS- :
p {
font-size: 100%
}
.article p:first-child {
font-size: 160%;
}
div article,
. p .
32
1. CSS:
Internet Explorer 6 :first-child. , IE6 :first-child, , , .
,

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

,
.
, .
: ,
, .
!important, .
, , . !important
; ,
. , .
SitePoint CSS Reference.1
, .
, -, . . . ,
, 1
http://reference.sitepoint.com/css/importantdeclarations/
33
, , ,
.
, , , ,
, . SitePoint CSS
Reference.1
, CSS .
,
. HTML:
<div id=content>
<p class=message>
This is an important message.
</p>
</div>
, :
p { color: #000000; }
.message { color: #CCCCCC; }
p.message { color: #0000FF; }
#content p.message { color: #FF0000; }
,
, p. ?
, (#FF0000). p ( p)
.message ( message)
; p.message ( p message) ,
#content p.message ( p message, content id).
. , ID , . , , -
http://reference.sitepoint.com/css/cascade/
34
1. CSS:
. SitePoint CSS Reference.1

, ,
,
,
. p .message ,
, , .message.

, .message.
, .
,
.
CSS. ,
.
CSS, , ,
.
, , , , , CSS,
. , ,
, ()
.
http://reference.sitepoint.com/css/specificity

CSS
,
; . CSS,

, . CSS, ,
, ,
.

, . , - .

font-family, :
p {
font-family: Verdana;
}
36
2.
CSS , :
serif
sans-serif
monospace
cursive
fantasy
, , .
, ,
.
-
, ,
. ,
sans-serif, , , Arial, :
p {
}
? . , .
,
p:
p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
, Verdana
;
, Geneva; , Arial, Helvetica.
sansserif.
, , :
p {
font-family: Courier New, Andale Mono, monospace;
}
: , ,
37

.
:
Windows Arial, Lucida, Impact, Times New Roman, Courier New,
Tahoma, Comic Sans, Verdana, Georgia, Garamond
Mac
Helvetica, Futura, Bodoni, Times, Palatino, Courier, Gill Sans,

Geneva, Baskerville, Andale Mono
, , : Verdana,, Windows,, Mac Geneva.. , ,

.
:
, , -
CSS font-size, :
font-size: 12px;
,
.
, .

. 2.1 , .
2.1.
pt
pc
em
,
font-size
ex
,
x
38
2.
.

p {
font-size: 10pt;
}
, . ;
. 1/72 , . ,
,
4, . ,
, - -.
( 8,
)
, , .
-: .
p {
font-size: 12px;
}
, . ; , Internet
Explorer . ,
.
,
, , . , ,
,
: , ,
39
.
,
, .
Em
Em .
, , , , . CSS 1em ,
, , .
em ( ) ,
, . , p 1em:
p {
font-size: 1em;
}
Internet Explorer 8, Medium, ,

. 2.1.
Largest, 1em , . 2.2.
em
.
, , ,
,
.
em . , 10
( ), :
p {
font-size: 0.9em;
}
10 , , :
p {
font-size: 1.1em;
}
40
2.
. 2.1. font-size 1em

text size Medium
. 2.2. font-size 1em

text size Largest
: , ,
41
Ex
x ,
. ,
font-size 1ex,
, x,
(
).
,
, .

p {
font-size: 100%;
}
em ex,
, .
100% p , ( ,
1em).
:
p {
font-size: 90%;
}
:
p {
font-size: 150%;
}

, ,
.

-
CSS:
xx-small
x-small
small
42
2.
medium
large
x-large
xx-large
,
-. medium , medium .
, .
,
,
, .
, , xx-small
. Internet Explorer 6
, , small
.
7.

larger smaller , , , em %. , p
small, , , :
chapter02/relative.css
p {
font-size: small;
}
em {
font-size: larger;
}
, . 2.3, <em> </em> , p:
: , ,
43
chapter02.relative.html ()
<p>These <em>stuffed peppers</em> are lovely as a starter or as a side dish
for a Chinese meal. They also go down well as part of a buffet, and even
children seem to like them.</p>
. 2.3.

,
. , . ,
,
,
.
; , , , , ,
. Internet Explorer,, , ; Firefox
(3- zoom text only Zoom )
, .

,
, . ,
44
2.

. :
chapter02/nesting.html ()
<div>
<p>
Youll <em>probably</em> be surprised when using
<a href=#>a relative <code>font-size</code></a>
and nested elements.
</p>
</div>
, font-size
130% ,
:
chapter02/nesting.css ()
div, p, em, a, code {
font-size: 130%;
}
, 130% , , , 130% . .,
. 2.4.1
. 2.4.

, , ,
.
.
.
, text-decoration.
1
www.symbol.ru/library/css-101-tips
45
underline a. none :
text-decoration: none;
CSS-:
chapter02/textdecoration.css
a:link, a:visited {
}
. 2.5. text-decoration

underline none text-decoration :

overline
line-through
blink
. , , , . 2.6, :
chapter02/textdecoration2.css
a:link, a:visited {
text-decoration: underline overline;
}
. 2.6. text-decoration

46
2.
. C text-decoration , , .
, .
?
, , , . ,
. . ,
.
, ,
,
, .
, , .
,

.
CSS ;
.
:hover :active.
.
, :
a:link, a:visited, a:hover, a:active {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
47
,
(#6A5ACD) , . 2.7.
.2.7.

:hover :active
. CSS-
- . ,
. . 2.8. :
a:link, a:visited {
color: #6A5ACD;
}
a:hover, a:active {
color: #191970;
background-color: #C9C3ED;
}
,
. ,
.
:visited.
. 2.8. ,

. -
48
2.
, , .
. :link, :visited, :hover, :active.

.
LoVeHAte.1

a, , -?
,
, . , ,
.
,
:
chapter02/linktypes.css ()
a:link, a:visited {
color: #6A5ACD;
}
a:hover, a:active {
color: #191970;
}

. , , , . ,
- . .
49
, , .
, class id , .
CSS, class id,
. , :
chapter02/linktypes.html ()
<div class=boxout>
<p>Visit our <a href=store.html>online store</a>, for all your widget
needs.</p>
</div>
,
boxout:
chapter02/linktypes.css ()
.boxout {
color: #FFFFFF;
background-color: #6A5ACD;
}
.boxout a:link, .boxout a:visited {
color: #E4E2F6;
}
.boxout a:hover, .boxout a:active {
color: #191970;
}
. 2.9,
, , div boxout .
. 2.9.
50
2.

, , .
, , . first-child.
:
chapter02/firstchild.html ()
<ul>
<li>Brie</li>
<li>Cheddar</li>
<li>Red Leicester</li>
<li>Shropshire Blue</li>
</ul>
first-child
first-child
,
.
ul, . 2.10:
chapter02/firstchild.css ()
li:first-child {
color: red;
}
. 2.10.
, :first-child Internet Explorer 6. , , , , - ,

.
51

, IE6,
6, class id ,
. class:
chapter02/firstchildwithclass.html ()
<ul>
<li class=unusual>Brie</li>
<li>Cheddar</li>
<li>Red Leicester</li>
<li>Shropshire Blue</li>
</ul>
:
chapter02/firstchildwithclass.css ()
li.unusual {
color: red;
}

CSS ,
.
CSS,, :
chapter02/headingcolor.css ()
h1 {
background-color: #ADD8E6;
color: #256579;
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em;
}
. 2.11.
, ! ,
, , , .
52
2.
. 2.11.
. text-decoration,
.
, , . 2.12:
chapter02/headingunderline.css ()
h1 {
}
. 2.12.
text-decoration

. , . 2.13, ,
, .
, , , ,
text-decoration.
h1
53
,
,
. :
chapter02/headingunderline2.css
h1 {
padding: 0.2em;
border-bottom: 1px solid #AAAAAA;
}
. 2.13.
h1

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

,
. -
54
2.
, Internet Explorer 7 ,
CSS.. .

, , .
, ,
; ,
, . , , ,
.
,
.
, , h1,
:
chapter02/headingnospace.css ()
h1 {
margin-bottom: 0;
}
h1+p {
margin-top: 0;
}
. 2.15 , .
. 2.15.

, h1
;
.
, , Internet Explorer
55
7- . ,
.
, ,
.
, , margin .
, . , . .
. CSS margin, , , . padding, ,

.
margin
.
, . 2.15:
h1 {
margin-bottom: -0.6em;
}

- ,
, , . CSS.
<span> class, CSS. ,

stuffed
stuffed pappers
<span> hilite.
chapter02/hilite.html ()
<p>These <span class=hilite>stuffed peppers</span> are lovely as a starter
or as a side dish for a Chinese meal. They also go down well as part of
a buffet, and even children seem to like them.</p>
56
2.
hilite; . 2.16. stuffed

peppers .
chapter02/hilite.css ()
.hilite {
background-color: #FFFFCC;
color: #B22222;
}
. 2.16. CSS

( )
CSS , <font> . ., ,
. .
, line-height:
chapter02/leading.css
p {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}
. 2.17.
! , ,
,
.
57
. 2.17.
line-height
? ,
2.0.
line-height CSS,
em,
.
, span font-size, , line-height
2.0.
2em 200%, span , , . ,
, , .

,
, . CSS.
text-align, :
chapter02/justify.css
p {
text-align: justify;
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}
. 2.18 justify text-align.
58
2.
. 2.18. text-align
text-align :
right
left
center

,
, , (hr). , , ; . , , .
hr

, CSS.
CSS , . ,
- . , , color background-color, , ,
Gecko, Firefox,
background-color, Internet Explorer
color:
59
chapter02/hrstyle.css ()
hr {
border: none;
background-color: #256579;
color: #256579;
height: 2px;
width: 80%;
}
. 2.19.
. 2.19. ,

padding-left, :
chapter02/indent.html ()
<h1>Chinese-style stuffed peppers</h1>
<p class=indent>These stuffed peppers </p>
chapter02/indent.css ()
.indent {
padding-left: 1.5em;
}
. 2.20.
HTML- <blockquote>,
.

60
2.
. 2.20. CSS
Dreamweaver. ,
, CSS-,
-, , . .
<blockquote> ,
, : ,
, , .
<blockquote> , , ,
.
. .
text-indent:
chapter02/indent2.css
p {
text-indent: 1.5em;

text-align center:
chapter02/center.html ()
<p class=centered>These stuffed peppers </p>
chapter02/center.css ()
.centered {
text-align: center;
}
CSS
61
. 2.21.
. 2.21. text-align

CSS

text-transform:
chapter02/uppercase.html ()
<p class=transform>These stuffed peppers are lovely </p>
chapter02/uppercase.css ()
.transform {
text-transform: uppercase;
}
. 2.22.
. 2.22. text-transform

text-transform .
capitalize
, . 2.23.
62
2.
chapter02/capitalize.css ()
.transform {
text-transform: capitalize;
}
:
lowercase ( )
none ( , )
. 2.23. text-transform

list-style-type. :
chapter02/listtype.html ()
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
</ul>
, . 2.24, list-style-type square:

chapter02/listtype.css
ul {
list-style-type: square;
}
63
. 2.24.
list-style-type : disc, circle, decimal-leading-zero, decimal, lower-roman, upper-roman, lower-alpha,

upper-alpha none.
.
,
, .
CSS2 list-style-type.1 none ,
- ,
,
. 2.25.
ul {
list-style-type: none;
}
. 2.25.
http://www.meyerweb.com/eric/css/tests/css2/sec12-06-02a.htm
64
2.
, list-style-image list-style-type.
URL- :
chapter02/listimage.css
ul {
list-style-image: url(bullet.gif);
}
. 2.26 , :
. 2.26.
. list-styleimage ( li). ( ul ol),

.
,
class id.
.

list-style-type none, , ,

.
65
,
, . 2.27. :
chapter02/listnomargin.css
ul {
padding-left: 0;
margin-left: 0;
}
. 2.27.
.
, , :
chapter02/listsmallmargin.css
ul {
padding-left: 5px;
margin-left: 0;
}
66
2.

, . . .
, , .
.
?

display li inline, :
chapter02/listinline.html ()
<ul class=horiz>
<li><a href=#>Big Widgets</a></li>
<li><a href=#>Small Widgets</a></li>
<li><a href=#>Short Widgets</a></li>
<li><a href=#>Tall Widgets</a></li>
</ul>
chapter02/listinline.css
ul.horiz li {
display: inline;
}
. 2.28.
. 2.28.

. ,
. ,
, .

, body:
67
body {
margin: 0;
padding: 0;
}
. 2.29.
. 2.29.

,
. , -.
,
.
. , , . . , . 2.30.
68
2.
chapter02/zeropagemargin.css ()
* {
margin: 0;
padding: 0;
}
. 2.30.
*
.
1. ,
.

. , .
, ,
, ,

, , .
.
:
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
69
h1, h2, h3, h4, h5, h6, ul, ol {

margin: 0;
padding: 0;
}

CSS-
- ( , , ,
). . ,
, .
JavaScript,, CSS-
- . :
/*

*/

:
/*
*/
, .
. , , ,
CSS .
CSS
, CSS.. CSS,
, . .
,
.

, ,
.
, , , . ,
CSS
.
CSS . , . 3.1 .

1 :
71
. 3.1. -
img {
border-width: 1px;
border-style: solid;
border-color: #000000;
}
, :
chapter03/borderbasic.css ()
img {
border: 1px solid #000000;
}
. 3.2. .
. 3.2. CSS
, , .
:
chapter03/borderclass.css ()
.imgborder {
}
72
3. CSS
chapter03/borderclass.html ()
<img src=food1.jpg alt=food preparation class=imgborder />
, , , , , .
chapter03/borderalbum.css ()
#album img {
}
chapter03/borderalbum.html ()
<ul id=album>
<li><img src=food1.jpg alt=food preparation /></li>
<li><img src=food2.jpg alt=food preparation /></li>
</ul>
CSS
,
, , , . CSS .
.
, border none:
chapter03/bordernone.css ()
img {
border: none;
}

CSS
- background-image body.
CSS
73
background-norepeat.jpg. , .
chapter03/backgrounds.css ()
body {
background-color: #D2D7E4;
color: #000000;
background-image: url(background-norepeat.jpg);
background-repeat: no-repeat;
}
. 3.3.1
. 3.3.
CSS- background-image . 1
www.symbol.ru/library/css-101-tips
74
3. CSS
, body. , , .
, , . . 3.3. . 3.4. no-repeat
background.

,
. background-repeat.
. 3.4 no-repeat
background-repeat.
. 3.4.
; background-repeat no-repeat
400 , -,
, . .
75
, ,
. , . 3.5.
. 3.5.
background-repeat
repeat-x, , , . ,
, .
,
,
, 90 . backgroundrepeat repeat-y,
, . 3.6.
76
3. CSS
. 3.6. repeat-y
background-repeat

, , .
, , .
.
CSS- background-position:
chapter03/backgroundposition.css ()
#content {
margin: 2em 4em 2em 4em;
background-color: #FFFFFF;
padding: 1em 1em 40px 1em;
background-image: url(tick.gif);
77
background-position: bottom right;

}

, . 3.7. , .
background-position ,

.
. 3.7.
background-position

, , div, , .
78
3. CSS
chapter03/backgroundposition.css ()
background-position: bottom right;

:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
, center:
background-position: top;
:
background-position: top center;

. ,
: (
, 9):
background-position: 30% 80%;
, . , 0% 0%; , 100%
100%
.
, , 50%. :
background-position: 30%;
:
79

CSS
, , :
background-position: 20px 20px;
, , .
.

, 50%.

,
,
. backgroundattachment.
fixed background-attachment , .
chapter03/backgroundfixed.html ()
body {
color: #000000;
background-image: url(background-repeatx.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
. 3.8.
,

CSS-.
background.
80
3. CSS
. 3.8.

background-color,
background-image, background-repeat, background-attachment backgroundposition . CSS:
chapter03/backgroundfixed.css ()
body {
background-attachment: fixed;
background-position: 0 0;
}
:
body {
background: #D2D7E4 url(background-repeatx.jpg) repeat-x fixed 0 0;
}
backgroundattachment: fixed. ,
CSS-, Internet Explorer . IE , -
81
IE7.
JavaScript, , , .1
Internet Explorer, background-attachment: fixed,
,
( ).

.
.
, . 3.9.
chapter03/backgrounds2.css ()
#smallbox {
background-image: url(boxbg.gif);
float: left;
margin-right: 20px;
width: 220px;
border:1px solid #D2D7E4;
}
, ,
, ,
.
, .

, , . 3.10.
, . ,
, .
1
http://www.howtocreate.co.uk/fixedBackground.html
82
3. CSS
. 3.9.

chapter03/backgrounds2.html ()
h1 {
background-image: url(dotty.gif);
background-position: bottom left;
padding: 0 0 6px 0;
color: #41667F;
font-size: 160%;
font-weight: normal;
}
, , . 3.11.
a:link, a:visited {
color: #41667F;

padding-right: 10px;
}
a:hover {
background-image: url(arrow.gif);
background-position: center right;
}
. 3.10.

. 3.11.

83
84
3. CSS

, CSS , ! CSS
.

. Ingredients :
. 3.12.
#smallbox h2 {
margin: 0;
padding: 0.2em;
background-image: url(boxheaderbg.jpg);
color: #FFFFFF;
background-color: red;
85
font-size: 140%;
}
CSS
.
-, :
,
.
-, ,
, . , , , CSS;
. : , , CSS.
! ( . 3.12) .
, .

CSS2
,
Safari Apple.
, , ?
, , , html body:
html {
86
3. CSS
}
body {
color: #000000;
background-image: url(recipes.gif);
margin: 0;
padding: 46px 0 0 0;
}
. 3.13.
. 3.13. html body
87
,
. ,
( ).
CSS Zen Garden
.1

PNG 24- PNG,, . GIF ,
(matte) ,
, .
GIF , , . , , ,
. - , CSS.
GIF
(), . . 3.14 , .
. 3.14.
http://csszengarden.com/
88
3. CSS
. 3.15 PNG.
#content.
Photoshop.. , 40%.
24- PNG opaque.png.
24- PNG
recipes.gif. ( background-attachment: fixed),
. GIF ( - ),
.
CSS . 3.15:
. 3.15.
Recipes
chapter03/background5.css ()
body {
color: #000000;
background-image: url(recipes.png);
background-position:98% 2%;
background-attachment:fixed;
89
margin: 0;
padding: 46px 0 0 0;
}
#content {
margin: 0 4em 2em 4em;
background-image: url(opaque.png);
padding: 1em 50px 40px 1em;
}
PNG . , , Internet Explorer 6 .

, ,
,
,
Firefox, Safari, Opera Internet Explorer 7 . ,
Internet Explorer 6 JavaScript.
7.
,

, , ,
.

CSS.. Photoshop .
. 3.16 , . .
, :
chapter03/doubleborder.css ()
img.doubleborder {
padding: 5px;
background-color: #EEEEEE;
}
90
3. CSS
. 3.16. , CSS
. CSS-
- , . 3.17:
chapter03/doubleborder-bg.css ()
img.doubleborder {
border: 5px solid #8E787B;
padding: 20px;
background-image: url(doubleborder-bg.gif);
}
. 3.17.
,
.
91
, .
. , , ,

CSS .
, .
, , , . ,
9 , , .
,
.
, , .
,
CSS .
, , , JavaScript. ,
. ,
JavaScript,, , JavaScript,, , , (,
). , . ,
, !
CSS
, ,
, ,
. CSS.

,
. , CSS.
93

, ,
, CSS .
,

.
, . 4.1, , CSS.
. 4.1.
, :
chapter04/listnav1.html
<head>
<title>Lists as navigation</title>
<meta http-equiv=content-type content=text/html;
charset=utf-8 />
<link rel=stylesheet type=text/css href=listnav1.css />
</head>
<body>
<div id=navigation>
<ul>
<li><a href=#>Recipes</a></li>
<li><a href=#>Contact Us</a></li>
<li><a href=#>Articles</a></li>
<li><a href=#>Buy Online</a></li>
</ul>
</div>
</body>
</html>
CSS-,
:
94
4.
chapter04/listnav1.css
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
}
,
li:
chapter04/listnav1.html ()
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
href=#>Recipes</a></li>
href=#>Contact Us</a></li>
href=#>Articles</a></li>
href=#>Buy Online</a></li>
div ID:
chapter04/listnav1.html ()
<div id=navigation>
<ul>
</ul>
</div>
95
. 4.2, ,
, .
. 4.2. ( )
, , navigation:
chapter04/listnav1.css ()
#navigation {
width: 200px;
}
. CSS , , , .
:
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
. 4.3, ,
.
. 4.3.
li
navigation, :
96
4.
#navigation li {
}
, :
font-size: 90%;
display: block;
color: #FFFFFF;
}

CSS,, , . . block
display, .
, .
.

CSS
JavaScript

, .
, , JavaScript.
CSS,
. :hover,
.
:
#navigation li a:hover {
CSS
97
color: #FFFFFF;
}
. 4.4 :
. 4.4. ,
CSS
CSS- .

. ,
: ,
, .
, ... , Internet Explorer 7, :hover , Internet Explorer

6 .
Internet Explorer
, ( li) . , : .
CSS ( Internet Explorer 6 ).
:
* html #navigation li a {
width: 100%;
}
,
. -
7.
98
4.

. .
CSS?
. , CSS .
. 4.4
:
chapter04/listnav_sub.html
<head>
<link rel=stylesheet type=text/css href=listnav_sub.css />
</head>
<body>
<div id=navigation>
<ul>
<li><a href=#>Recipes</a>
<ul>
<li><a href=#>Starters</a></li>
<li><a href=#>Main Courses</a></li>
<li><a href=#>Desserts</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
chapter04/listnav_sub.css
#navigation {
width: 200px;
99
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
}
font-size: 90%;
display: block;
color: #FFFFFF;
}
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
color: #FFFFFF;
}
. 4.5.

.
,
Recipes . CSS,
. 4.6.
100
4.
. 4.5. CSS
. 4.6.
CSS
HTML-:
li.
chapter04/listnav_sub.html
<div id=navigation>
<ul>
<li><a href=#>Recipes</a>
<ul>
<li><a href=#>Starters</a></li>
<li><a href=#>Main Courses</a></li>
<li><a href=#>Desserts</a></li>
</ul>
</li>
</ul>
</div>
HTML-
, . 4.7 ;
101
,
.
,
, , :
chapter04/listnav_sub.css ()
#navigation ul ul {
margin-left: 12px;
}

, . 4.7, .
. 4.7.

, li
a, :
chapter04/listnav_sub.css ()
#navigation ul ul li {
margin: 0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
color: #FFFFFF;
}
102
4.

CSS
, .
.
. 4.8, CSS . display li

inline
.
. 4.8.
CSS
HTML- CSS-.
chapter04/listnav_horiz.html
<head>
<link rel=stylesheet type=text/css href=listnav_horiz.css />
</head>
<body>
<div id=navigation>
<ul>
</ul>
</div>
</body>
</html>
chapter04/listnav_horiz.css
body {
padding: 1em;
CSS
103
}
#navigation {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
}
#navigation a:hover {
color: #FFFFFF;
}
, , , :
chapter04/listnav_horiz.html ()
<div id=navigation>
<ul>
</ul>
</div>
#navigation ,
.
:
chapter04/listnav_horiz.css ()
#navigation {
font-size: 90%;
}
104
4.
, ul:
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
, , li. , display inline , . 4.9.

#navigation li {
display: inline;
}
. 4.9.
:
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
}
color: #FFFFFF;
}
, ,
, ,

(padding) , (margin)
margin)) .
CSS
105
CSS

,
. ,
.
JavaScript,, , .
:
CSS? !
CSS . border.
. 4.10. CSS
:
chapter04/listnav_button.html
<head>
<link rel=stylesheet type=text/css href=listnav_button.css
/>
</head>
<body>
<div id=navigation>
<ul>
</ul>
</div>
</body>
</html>
106
4.
chapter04/listnav_button.css
#navigation {
font-size:90%
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #A62020;
background-color: #FCE6EA;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

,
CSS.
, , , . ,
:
chapter04/listnav_button.css ()
margin-right: 0.2em;
color: #A62020;
background-color: #FCE6EA;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
CSS
107

}

, :
chapter04/listnav_button.css ()
border-right: 1px solid #FFFFFF;
}

,
.
CSS

- , . .
,
(CMS),
CMS),
), ,
. , CSS.
. 4.11 .
. 4.11. CSS
HTML- CSS-.
chapter04/tabs.html
108
4.
<head>
<link rel=stylesheet type=text/css href=tabs.css />
</head>
<body id=recipes>
<div id=header>
<ul>
<li class=recipes><a href=#>Recipes</a></li>
<li class=contact><a href=#>Contact Us</a></li>
<li class=articles><a href=#>Articles</a></li>
<li class=buy><a href=#>Buy Online</a></li>
</ul>
</div>
<div id=content>
<h1>Recipes</h1>
<p>Lorem ipsum dolor sit amet, </p>
</div>
</body>
</html>
chapter04/tabs.css
body {
font: .8em/1.8em verdana, arial, sans-serif;
color: #000000;
margin: 0 10% 0 10%;
}
#header {
float: left;
width: 100%;
border-bottom: 1px solid #8DA5FF;
margin-bottom: 2em;
}
#header ul {
margin: 0;
padding: 2em 0 0 0;
list-style: none;
}
#header li {
float: left;
background-image: url(images/tab_left.gif);
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}
CSS
109
#header a {
float: left;
display: block;
background-image: url(images/tab_right.gif);
background-position: right top;
padding: 0.2em 10px 0.2em 0;
font-weight: bold;
color: #333366;
}
#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
background-image: url(images/tab_active_left.gif);
}
#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
background-image: url(images/tab_active_right.gif);
color:#FFFFFF;
}

(Douglas Bowman).1
, , , , li class
. ,
div (id) header.
.
:
.
. 4.12. ,
, , ,
.
1
http://www.alistapart.com/articles/slidingdoors/
110
4.
. 4.12.
:
chapter04/tabs.html ()
<div id=header>
<ul>
<li class=recipes><a href=#>Recipes</a></li>
<li class=contact><a href=#>Contact Us</a></li>
<li class=articles><a href=#>Articles</a></li>
<li class=buy><a href=#>Buy Online</a></li>
</ul>
</div>
, . , , ,
(,
).
#header {
float: left;
width: 100%;
border-bottom: 1px solid #8DA5FF;
margin-bottom: 2em;
}
, float
.
; , ; , .
ul:
chapter04/tabs.css ()
#header ul {
margin: 0;
CSS
111
padding: 2em 0 0 0;
list-style: none;
}

. ul
2em. . 4.13 :
. 4.13. ul
:
#header li {
float: left;
background-image: url(images/tab_left.gif);
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}
float , .
, . . . . 4.14
, .
. 4.14.
.
,
, :
112
4.
#header a {
float: left;
display: block;
background-image: url(images/tab_right.gif);
background-position: right top;
font-weight: bold;
color: #333366;
}
. 4.15.
. 4.15.
, ,
.
,
, .
, , . ,
. body ID , CSS.
chapter04/tabs.html ()
<body id=recipes>
, CSS-
- , , body, .
, , .
CSS-:
#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
113
background-image: url(images/tab_active_left.gif);
}
#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
background-image: url(images/tab_active_right.gif);
color: #FFFFFF;
}

body ID recipes, Recipes
; contact, Contact Us . .
. 4.16.
. 4.16. Contact Us contact

ID body
. ID body . , , . body
, ,
, .
,

, ,
. CSS,, .
CSS3,
.
, - (Google).
114
4.
chapter04/external_links.html
<head>
<title>Chapter 4 - Show external links</title>
charset=utf-8 />
<link rel=stylesheet type=text/css
href=external_links.css />
</head>
<body>
<p>Lorem ipsum dolor sit amet, <a
href=page2.html>consectetur
adipiscing elit</a>. Aenean porta. Donec eget quam. Morbi libero.Curabitur
ut justo vehicula elit feugiat lacinia. Morbi
ac quam. <a href=http://www.google.com>Sed venenatis</a>,
lectus quis porta viverra, lectus sapien tempus odio, ac
volutpat mi dolor ac elit.</p>
</body>
</html>
, http:,
, CSS3:
chapter04/external_links.css
a[href ^=http:] {
padding-left: 20px;
background-image: url(link_icon_external.gif);
}
. 4.17. , ,

, http: (
, , http:),
.
115
CSS3
3 ( Internet Explorer 6). ,
.
a[href ^=http:] .
href, ,
, http:. ^= .
, , : a[href ^=mailto:].
, . , , ,
, PDF . . a[href $=.pdf] .pdf. $= , , href .pdf.
:
chapter04/external_links.html
<ul class=links>
<li><a href=http://www.google.com>Go somewhere else</a></li>
<li><a href=/files/example.pdf>Download a PDF</a></li>
<li><a href=mailto:info@example.com>Email someone</a></li>
</ul>
chapter04/external_links.css
a[href ^=http:] {
padding-left: 20px;
background-image: url(link_icon_external.gif);
}
a[href ^=mailto:] {
padding-left: 20px;
background-image: url(link_icon_email.gif);
}
a[href $=.pdf] {
padding-left: 20px;
background-image: url(link_icon_pdf.gif);
116
4.
}
. 4.18. , ,
, pdf1

- .
- ( ).
CSS- cursor. , , :
a.help {
cursor: help;
}
. 4.1 CSS 2.1

cursor . - ,
. (,
).
, . 4.18, http://www.famfamfam.
com/lab/icons/silk/.
117
!
, ,
, ,
.
4.1. CSS2.1 IE8
pointer
default
crosshair
text
help
move
n-resize
ne-resize
nw-resize
s-resize
se-resize
sw-resize
e-resize
w-resize
wait
auto
url("url")
progress
. 4.1 CSS- cursor.

, Internet Explorer 6 , Safari,, Opera,, Firefox Chrome.. , .
CSS3
, . 4.2, Safari, Firefox Chrome; Internet Explorer
8 , Opera ( CSS 2.1).
118
4.
4.2. cursor CSS3
( IE8)
copy
alias
cell
all-scroll
no-drop
not-allowed
col-resize
row-resize
vertical-text

JavaScript
CSS ,
.
?
CSS JavaScript. ,
WellStyled.com.1 :
chapter04/images.html
http://wellstyled.com/css-nopreload-rollovers.html.
JavaScript 119
<head>
<link rel=stylesheet type=text/css href=images.css />
</head>
<body>
<ul id=nav>
</ul>
</body>
</html>
chapter04/images.css
ul#nav {
padding: 0;
margin: 0;
}
#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url(peppers.gif) top left no-repeat;
}
#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}
#nav a:active {
color: #006E01;
}
. 4.19,
,
!
120
4.
. 4.19.

, .
, ,
, . 4.20.
. 4.20.
:
chapter04/images.html ()
<ul id=nav>
</ul>
.
, :
JavaScript 121
chapter04/images.css ()
display: block;
width: 150px;
padding: 10px 0 16px 32px;
color: #FF9900;
background: url(peppers.gif) top left no-repeat;
}
:hover
,
. 69 ,
. ,
, :
#nav a:hover {
color: #B51032;
}
:active
, :
#nav a:active {
color: #006E01;
}
! ,
,
. , .
Internet Explorer.
Internet Explorer.
, , . , .1
1
http://wellstyle.com/css-nopreload-rollovers.html
122
4.

. , . ,
.

, . ;

.
; . . 4.21 :
chapter04/sitemap.html ()
<ul id=sitemap>
<li><a href=/about>About us</a>
<ul>
<li><a href=/about/team>The team</a></li>
<li><a href=/about/history>Our history</a></li>
</ul>
</li>
<li><a href=/products>Our products</a></li>
<li><a href=/order>Ordering information</a>
<ul>
<li><a href=/order/shops>Our shops</a></li>
<li><a href=/order/stockists>Other stockists</a></li>
<li><a href=/order/onlinestockists>Online stockists</a></li>
</ul>
</li>
<li><a href=/contact>Contact us</a></li>
</ul>
chapter04/sitemap.css ()
ul#sitemap {
margin: 0;
padding: 0;
list-style: none;
}
ul#sitemap ul {
padding-left: 1em;
list-style: none;
123
}
ul#sitemap li {
}
ul#sitemap li a:link, ul#sitemap li a:visited{
background-color: #CCCCCC;
display: block;
padding: 0.4em;
color: #057FAC;
}
ul#sitemap li a:hover {
color: #FFFFFF;
}
ul#sitemap li li a:link, ul#sitemap li li a:visited{
display: block;
padding: 0.4em;
}
ul#sitemap li li a:hover {
color: #057FAC;
}
. 4.21. CSS
124
4.
. , , , . ,
.
.
</li> .
, . 4.22.
.
,
1em, ,
:
. 4.22. CSS
ul#sitemap {
margin: 0;
padding: 0;
list-style: none;
}
ul#sitemap ul {
padding-left: 1em;
list-style: none;
}
, , . , , block display,
, :
ul#sitemap li {
}
CSS
125
ul#sitemap li a:link, ul#sitemap li a:visited{

display: block;
padding: 0.4em;
color: #057FAC;
}
ul#sitemap li a:hover {
color: #FFFFFF;
}
,
, . :
ul#sitemap li li a:link, ul#sitemap li li a:visited{
display: block;
padding: 0.4em;
}
ul#sitemap li li a:hover {
color: #057FAC;
}
.
.

CSS
.
.
, , , ,
CSS , , JavaScript.
, JavaScript.
126
4.
, CSS . , JavaScript. , ,
,
display: none , , .
,
UDM4,
CSS
.1

CSS
CSS
,
.
CSS,
. .

, CSS.. . 4.23 .
chapter04/image_nav.html ()
<ul id=nav>
<li class=recipes><a href=#><span>Recipes</span></a></li>
<li class=contact><a href=#><span>Contact Us</span></a></li>
<li class=articles><a href=#><span>Articles</span></a></li>
<li class=buy><a href=#><span>Buy Online</span></a></li>
</ul>
chapter04/image_nav.css ()
ul#nav {
width: 360px;
height: 30px;
overflow:hidden;
margin: 0;
http://www.udm4.com/

padding: 0;
list-style: none;
}
ul#nav li {
float: left;
}
ul#nav li a span {
margin-left: -5000px;
}
ul#nav li a {
background-image: url(reflectonav.gif);
display: block;
width: 75px;
overflow:hidden;
}
ul#nav li.recipes a {
}
ul#nav li.recipes a:hover {
}
ul#nav li.contact a {
background-position: -75px 0;
width: 105px;
}
ul#nav li.contact a:hover {
background-position: -75px -42px;
}
ul#nav li.articles a {
width: 85px;
}
ul#nav li.articles a:hover {
}
ul#nav li.buy a {
width: 85px;
}
127
128
4.
ul#nav li.buy a:hover {
}
. 4.23.
, , . . span, :
chapter04/image_nav.html ()
<ul id=nav>
<li class=recipes><a href=#><span>Recipes</span></a></li>
<li class=contact><a href=#><span>Contact Us</span></a></li>
<li class=articles><a href=#><span>Articles</span></a></li>
<li class=buy><a href=#><span>Buy Online</span></a></li>
</ul>
. .
,
, ,
,
. 4.24.
. 4.24. ,
, , , , . , ,
, .
ul ,
.
129
, . , .
:
ul#nav {
width: 360px;
height: 30px;
overflow:hidden;
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
float: left;
}
,
CSS.
span ,
:
ul#nav li a span {
margin-left: -5000px;
}
.
a , display block,
li , :
ul#nav li a {
display: block;
background-image: url(reflectonav.gif);
width: 75px;
overflow:hidden;
}

Recipes. ,
, , . 4.25.
.
130
4.
. 4.25.
, , . CSS-
, . 4.26 .
ul#nav li.recipes a {
}
ul#nav li.contact a {
width: 105px;
}
ul#nav li.articles a {
width: 85px;
}
ul#nav li.buy a {
width: 85px;
}
. 4.26.

. , . CSS , :
ul#nav li.recipes a:hover {
}
131
ul#nav li.contact a:hover {

}
ul#nav li.articles a:hover {
}
ul#nav li.buy a:hover {
}
, , .
,
,
CSS
.

: , .
HTML-,
. - . ,
. -
, . , 9.
- : ( ) . ,
, . , ,
,
-.

CSS
, !
HTML.. , , CSS -
CSS
133
. , ,
.
, .
, .
, , , , , . 5.1.
. 5.1.
Excel
, . , ,
. , , . 5.2.
. 5.2. HTML-
134
5.
HTML , , ,
. , - .
:
chapter05/table.html ()
<table summary=This table shows the yearly income for years 1999
through 2002>
<caption>Yearly Income 1999 - 2002</caption>
<tr>
<th></th>
<th scope=col>1999</th>
</tr>
<tr>
<th scope=row>Grants</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope=row>Donations</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope=row>Investments</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope=row>Fundraising</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
135
<td>4,210</td>
</tr>
<tr>
<th scope=row>Sales</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope=row>Miscellaneous</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope=row>Total</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
,
. .
summary table
<table summary=This table shows the yearly income for years 1999
through 2002>
summary ,
. , .
,
, .
caption
<caption>Yearly Income 1999 - 2002</caption>
136
5.
caption . ,
CSS- caption-side.
table {
caption-side: bottom;
}
,
? caption
. ,
?
CSS,
.
th
th , . ; scope <th>. col (, ) row (, ) ,

.

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

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

<table> . .datatable th ( ), .datatable td ( ) .datatable caption ( ).
HTML- border
137
. ,
.datatable. , .

HTML- border
HTML-
- , .
CSS .
:
chapter05/table.css ()
.datatable {
border: 1px solid #338BA6;
}
, . 5.3.
. 5.3. CSS
:
chapter05/table.css ()
.datatable td, .datatable th {
border: 1px solid #73C0D4;
}
td th datatable,
. 5.4.
138
5.
. 5.4. CSS
CSS-,
, ,
!
,
.
, .
border-style . solid, ;
. 5.1.
5.1. CSS- border-style
double
groove
inset
outset
ridge
solid
dashed
dotteda
none / hidden
Internet Explorer 6 : dotted

dashed.
139
,

- cellspacing=0 table.
, , . .

collapse border-collapse:
chapter05/table.css
.datatable {
border: 1px solid #338BA6;
border-collapse: collapse;
}
border: 1px solid #73C0D4;
}
. 5.4. border-collapse;
. 5.5 .
. 5.5.

HTML,
140
5.
. ,
CSS,

.
. 5.6.
HTML-
. , . 5.6.
:
chapter05/spreadsheet.css
body {
}
.datatable {
border: 1px solid #D6DDE6;
}
text-align: right;
padding: 0.2em;
}
.datatable th {
background-color: #BCBCBC;
font-weight: bold;
text-align: left;
padding: 0.2em;
}
141
.datatable caption {
font: bold 120% Times New Roman, Times, serif;
background-color: #B0C4DE;
color: #33517A;
padding: 0.4em 0 0.3em 0;
border: 1px solid #789AC6;
}
. 5.7 . , !
. 5.7. CSS
Excel.. body.
, ,
, CSS:
chapter05/spreadsheet.css ()
body {
}
:
.datatable {
}
, border
, border-collapse
.
142
5.
:
.datatable td {
text-align: right;
padding: 0.2em
}

text-align, . , ,
, . 5.8.
. 5.8. border table td
. , , :
.datatable th {
font-weight: bold;
text-align: left;
padding: 0.2em;
}
caption,
.
font: bold 0.9em Times New Roman, Times, serif;
143
color: #33517A;
border: 1px solid #789AC6;
}

.
,
. ,
, CSS.
:
chapter05/alternate.html ()
<table summary=List of new students 2003 class=datatable>
<caption>Student List</caption>
<tr>
<th scope=col>Student Name</th>
<th scope=col>Date of Birth</th>
<th scope=col>Class</th>
<th scope=col>ID</th>
</tr>
<tr>
<td>Joe Bloggs</td>
<td>27/08/1997</td>
<td>Mrs Jones</td>
<td>12009</td>
</tr>
<tr class=altrow>
<td>William Smith</td>
<td>20/07/1997</td>
<td>Mrs Jones</td>
<td>12010</td>
</tr>
<tr>
<td>Jane Toad</td>
<td>21/07/1997</td>
<td>Mrs Jones</td>
<td>12030</td>
</tr>
<tr class=altrow>
<td>Amanda Williams</td>
<td>19/03/1997</td>
<td>Mrs Edwards</td>
<td>12021</td>
144
5.
</tr>
<tr>
<td>Kylie Jameson</td>
<td>18/05/1997</td>
<td>Mrs Jones</td>
<td>12022</td>
</tr>
<tr class=altrow>
<td>Louise Smith</td>
<td>17/07/1997</td>
<td>12019</td>
</tr>
<tr>
<td>James Jones</td>
<td>04/04/1997</td>
<td>12007</td>
</tr>
</table>
:
chapter05/alternate.css ()
body {
font: 0.8em Arial, Helvetica, sans-serif;
}
.datatable {
width: 80%;
}
.datatable td {
padding: 0.3em;
}
.datatable th {
font-weight: bold;
text-align: left;
padding-left: 0.3em;
}
color: #33517A;
text-align: left;
}
145
.datatable tr.altrow {
background-color: #DFE7F2;
color: #000000;
}
. 5.9.
. 5.9.

altrow:
chapter05/alternate.html ()
<tr class=altrow>
,
CSS- . ,
:
.datatable tr.altrow {
color: #000000;
}
tr altrow, datatable.
ASP, PHP
, ,

.
146
5.

,
, . CSS. , . CSS3 :nth-child,
, HTML-. , , CSS . , CSS Reference, .1

.

. CSS-:
.datatable tr:nth-child(2n) {
color: #000000;
}
CSS-:
.datatable tr:nth-child(2n+1) {
color: #000000;
}
, , ,
, CSS3
. :
.datatable tr:nth-child(even) {
}
.datatable tr:nth-child(odd) {
}
Opera Safari,, , -
http://reference.sitepoint.com/css/understandingnthchildexpressions/
147
,
.
JavaScript. JavaScript-
jQuery CSS3,1 . ,
, JavaScript;
.
,
. . 5.10.
. 5.10.
, :
.datatable tr:hover {
color: #000000;
}
http://docs.jquery.com/Selectors
148
5.

, Internet Explorer 7, Internet
Explorer 6.
, ,
.
- Internet Explorer 6,
JavaScript.
Internet Explorer 6
CSS- (
hilite).
chapter05/hiliterow.css ()
.datatable tr:hover, .datatable tr.hilite {
color: #000000;
}
JavaScript:
chapter05/hiliterow.html ()
<script type=text/javascript>
var rows = document.getElementsByTagName(tr);
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.className += hilite;
}
rows[i].onmouseout = function() {
this.className = this.className.replace(hilite, );
}
}
</script>
<tr>
mouseover mouseout.
CSS- hilite . . 5.11, CSS JavaScript .
JavaScript CSS-
. hilite <tr> mouseover, onmouseover:
rows[i].onmouseover = function() {
}
149
. 5.11. Internet Explorer 6 JavaScript
mouseout :
rows[i].onmouseout = function() {
}
JavaScript,
. , ,

div mouseover.
JavaScript. , JavaScript
; script. JavaScript;
, , .
JavaScript , ,
. ,
; JavaScript , . ,
Internet Explorer 6, .

Internet Explorer 6 7 7.
, , jQuery,, , .
150
5.

, .
.
col.
CSS.
col, (
).
chapter05/columns.html ()
<table
<col
<col
<col
<col
class=datatable>
class=odd />
class=even />
class=odd />
class=even />
<tr>
<th>Pool A</th>
<th>Pool B</th>
<th>Pool C</th>
<th>Pool D</th>
</tr>
<tr>
<td>England</td>
<td>Australia</td>
<td>New Zealand</td>
<td>France</td>
</tr>
<tr class=even>
<td>South Africa</td>
<td>Wales</td>
<td>Scotland</td>
<td>Ireland</td>
</tr>
<tr>
<td>Samoa</td>
<td>Fiji</td>
<td>Italy</td>
<td>Argentina</td>
</tr>
<tr class=even>
<td>USA</td>
151
<td>Canada</td>
<td>Romania</td>
<td>Europe 3</td>
</tr>
<tr>
<td>Repechage 2</td>
<td>Asia</td>
<td>Repechage 1</td>
<td>Namibia</td>
</tr>
</table>
, col, , ; . 5.12.
chapter05/columns.css ()
body {
}
.datatable {
width: 80%;
}
.datatable col.odd {
background-color: #80C9FF;
color: #000000;
}
.datatable col.even {
background-color: #BFE4FF;
color: #000000;
}
.datatable td {
border:2px solid #ffffff;
padding: 0.3em;
}
.datatable th {
border:2px solid #ffffff;
background-color: #00487D;
color: #FFFFFF;
font-weight: bold;
text-align: left;
padding: 0.3em;
}
152
5.
. 5.12.
col
col
, , . col colgroup,
. colgroup , , col.
col:
chapter05/colgroups.html ()
<table class=datatable>
<colgroup class=odd>
<col />
<col />
</colgroup>
<colgroup class=even>
<col />
<col />
</colgroup>
,
colgroup, col:
chapter05/colgroups.css ()
.datatable colgroup.odd {
background-color: #80C9FF;
color: #000000;
}
.datatable colgroup.even {
background-color: #BFE4FF;
color: #000000;
}
CSS
153

, . 5.13.
. 5.13. colgroup
CSS
. ,
, . 5.14.

.
; HTML-
- , CSS .
. 5.14.
154
5.
, CSS ,
. 5.15. ,
, , :
chapter05/cal.html ()
<head>
<title>Calendar</title>
<link rel=stylesheet type=text/css href=cal.css />
</head>
<body>
<table class=clmonth summary=Calendar for June 2009>
<caption>June 2009</caption>
<tr>
<th scope=col>Monday</th>
<th scope=col>Tuesday</th>
<th scope=col>Wednesday</th>
<th scope=col>Thursday</th>
<th scope=col>Friday</th>
<th scope=col>Saturday</th>
<th scope=col>Sunday</th>
</tr>
<tr>
<td class=previous>31</td>
<td class=active>1
<ul>
<li>New pupils open day</li>
<li>Year 8 theater trip</li>
</ul></td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class=active>7
<ul>
<li>Year 7 English exam</li>
</ul></td>
<td>8</td>
CSS
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td class=active>17
<ul>
<li>Sports Day</li>
</ul></td>
<td class=active>18
<ul>
<li>Year 7 parents evening</li>
<li>Prizegiving</li>
</ul></td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td class=active>24
<ul>
<li>Year 8 parents evening</li>
</ul></td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td class=active>30
<ul>
<li>First night of school play</li>
</ul></td>
<td class=next>1</td>
</tr>
</table>
</body>
</html>
155
156
5.
chapter05/cal.css
body {
color: #000000;
font-size: 90%;
}
.clmonth {
width: 780px;
}
.clmonth caption {
text-align: left;
font: bold 110% Georgia, Times New Roman, Times, serif;
padding-bottom: 0.4em;
}
.clmonth th {
border: 1px solid #AAAAAA;
border-bottom: none;
color: #3F3F3F;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 110px;
}
.clmonth td {
border: 1px solid #EAEAEA;
vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
background-color: #F6F6F6;
color: #C6C6C6;
}
.clmonth td.active {
background-color: #B1CBE1;
color: #2B5070;
border: 2px solid #4682B4;
}
.clmonth ul {
margin: 0;
padding-left: 1em;
padding-right: 0.6em;
}
.clmonth li {
margin-bottom: 1em;
}
CSS
157
. 5.15. , CSS
. ( ),
,
<th>:
<tr>
<th scope=col>Monday</th>
<th scope=col>Tuesday</th>
<th scope=col>Wednesday</th>
<th scope=col>Thursday</th>
<th scope=col>Friday</th>
<th scope=col>Saturday</th>
<th scope=col>Sunday</th>
</tr>
clmonth.
ID , .
, ID , JavaScript, .
,
.
158
5.
, . previous , ,
( ,
, next); , , active:
<tr>
<td class=active>1
<ul>
<li>New pupils open day</li>
<li>Year 8 theater trip</li>
</ul></td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
CSS . 5.16.
. 5.16. CSS
, , . body, . clmonth,
, :
CSS
159
chapter05/cal.css ()
body {
color: #000000;
font-size: 90%;
}
.clmonth {
width: 780px;
}
caption, clmonth, (th)

(td) :
.clmonth caption {
text-align: left;
}
.clmonth th {
color: #3F3F3F;
width: 110px;
}
.clmonth td {
}
. 5.17, .
, , :
.clmonth ul {
margin: 0;
padding-left: 1em;
}
160
5.
. 5.17. caption, th td

.clmonth li {
margin-bottom: 1em;
}
, previous next,
. ,
active,
:
color: #C6C6C6;
}
color: #2B5070;
}
. :
. HTML ,
CSS
161
CSS-,
-, , (. 5.18).
. 5.18.
HTML- CSS- :
chapter05/cal_mini.html ()
<tr>
<th scope=col>M</th>
<th scope=col>T</th>
<th scope=col>W</th>
<th scope=col>T</th>
<th scope=col>F</th>
<th scope=col>S</th>
<th scope=col>S</th>
</tr>
<tr>
<td class=active>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
162
5.
<td>15</td>
<td>16</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
</tr>
</table>
chapter05/cal_mini.css
body {
color: #000000;
font-size: 90%;
}
.clmonth {
}
.clmonth caption {
text-align: left;
}
.clmonth th {
color: #3F3F3F;
}
.clmonth td {
163

}
color: #C6C6C6;
}
color: #2B5070;
}
, -
,
, ! CSS
, .
, , !
.
, , , !
-, , , HTML, , , , ,
.
CSS , ,
. ,
HTML-
- , ; ,
CSS-.
,
CSS.. ; :
( , ),
. , ,
, CSS.
.
,
CSS
165
- , , , , .
, . , ,
,
CSS-
.

CSS

. CSS , .
, HTML-,
CSS.
. 6.1. Safari
. 6.1 , Safari Mac OS X.

. :
166
6.
chapter06/elements.html ()
<head>
<title>CSS styled form elements</title>
<link rel=stylesheet type=text/css href=elements.css />
</head>
<body>
<form method=post action=example1.html id=form1>
<div><label for=name>What is your name?</label><br/>
<input type=text name=name id=name /></div>
<div><label for=color>Select your favorite color:</label>
<select name=color id=color>
<option value=blue>blue</option>
<option value=red>red</option>
<option value=green>green</option>
<option value=yellow>yellow</option>
</select>
</div>
<div><label for=sex>Are you male or female?</label><br/>
<input type=radio name=sex id=male
value=male />Male<br/>
<input type=radio name=sex id=female
value=female />Female
</div>
<div>
<label for=comments>Comments:</label><br/>
<textarea name=comments id=comments cols=30
rows=4></textarea>
</div>
<div>
<input type=submit name=btnSubmit id=btnSubmit
value=Submit />
</div>
</form>
</body>
</html>
,
form, input, textarea select:
chapter06/elements.css
form {
border: 1px dotted #AAAAAA;
padding: 0.5em;
}
input {
CSS
167
color: #00008B;
border: 1px solid #00008B;
}
select {
width: 100px;
color: #00008B;
background-color:
border: 1px solid
}
textarea {
width: 200px;
height: 40px;
color: #00008B;
background-color:
border: 1px solid
}
#ADD8E6;
#00008B;
#ADD8E6;
#00008B;
, . 6.2.
. 6.2. CSS-
, HTML form, input, textarea select

, ,
. . CSS <input type=text>:
168
6.
<input type=text name=name id=name />
input {
color: #00008B;
border: 1px solid #00008B;
padding: 0.2em;
width: 200px;
}
. , , , . , .
:
color
background-color
border
font
padding
width
,
( ,
)

input , .
?
, CSS. input,
, Submit.
:
169
chapter06/fields.html ()
<form method=post action=fields.html>
<div>
<label for=name>What is your name?</label><br />
<input type=text name=name id=name class=txt />
</div>
value=Submit class=btn />
</form>
chapter06/fields.css
form {
border: 1px dotted #AAAAAA;
padding: 3px 6px 3px 6px;
}
input.txt {
color: #00008B;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
border: 1px outset #00008B;
}
. 6.3 .
. 6.3. input
, input ,
, . input text submit
.
input, (
):
170
6.
input {
color: #00008B;
width: 200px;
}
. 6.4.
Submit ,
!
, , .
, , .
; , .
CSS-
- , . , ,
.
: , . , , . ,
. , , .
.
.
, 4. :
171
input[type=text] {
}
:
input[type=submit] {
}
- . , Internet Explorer 6 , . , .

, ,
. , ,

. , .
, , , inline display:
chapter06/inline.html ()
Your email address:
<form method=post action=inline.html>
<div><input type=text name=name id=name class=txt />
value=Submit class=btn /></div>
</form>
chapter06/inline.css
form {
display: inline;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
172
6.
width: 200px;
}
input.btn {
color: #00008B;
}
. 6.5, CSS
:
. 6.5.

, , , .
Submit .
:
chapter06/textbutton.css ()
.btn {
border: 0;
padding: 0;
}
Next >> (. 6.6)!
. 6.6. ,
173

, , . , ,
.
, .
, , ,
,
.
label .
. , label CSS:
chapter06/textonly.html ()
<form method=post action=textonly.html>
<table>
<tr>
<td><label for=fullname>Name:</label></td>
<td><input type=text name=fullname id=fullname
class=txt /></td>
</tr>
<tr>
<td><label for=email>Email Address:</label></td>
<td><input type=text name=email id=email class=txt/></td>
</tr>
<tr>
<td><label for=password1>Password:</label></td>
<td><input type=password name=password1 id=password1 class=txt
/></td>
</tr>
<tr>
<td><label for=password2>Confirm Password:</label></td>
/></td>
</tr>
<tr>
<td><label for=level>Membership Level:</label></td>
174
6.
<td><select name=level>
<option value=silver>silver</option>
<option value=gold>gold</option>
</select></td>
</tr>
</table>
<p>
value=Sign Up! class=btn />
</p>
</form>
chapter06/textonly.css
h1 {
}
input.txt {
color: #00008B;
width: 200px;
}
input.btn {
color: #00008B;
}
label {
font : bold 0.9em Arial, Helvetica, sans-serif;
}
. 6.7, ,
. , ,
. 6.7.
175
, . , label !
label , . ,
. label
, ,
, . ( ,
.)
label for <label>. ID :
<tr>
class=txt /></td>
</tr>
label
.
, label CSS-:
chapter06/textonly.css ()
label {
font: bold 0.9em Arial, Helvetica, sans-serif;
}
. label .
label ( );
for, :
<label> Name: <input type=text name=fullname id=fullname
class=txt /></label>
, ,
.1
for.
1
http://www.w3.org/TR/WCAG20-GENERAL/H44.html
176
6.

CSS
, . . 6.8
,
HTML-.
. 6.8. , CSS
chapter06/tablefree.html
<head>
<title>Table-free form layout</title>
<link rel=stylesheet type=text/css href=tablefree.css />
</head>
<body>
<h1>User Registration Form</h1>
<form method=post action=tablefree.html>
<div>
<label for=fullname>Name:</label>
<input type=text name=fullname id=fullname
class=txt />
</div>
<div>
<label for=email>Email Address:</label>
<input type=text name=email id=email class=txt />
</div>
<div>
<label for=password1>Password:</label>
CSS
<input type=password name=password1 id=password1
class=txt />
</div>
<div>
<label for=password2>Confirm Password:</label>
class=txt />
</div>
<div>
<label for=level>Membership Level:</label>
<select name=level>
</select>
</div>
<div>
</div>
</form>
</body>
</html>
chapter06/tablefree.css
h1 {
}
input.txt {
color: #00008B;
width: 200px;
}
input.btn {
color: #00008B;
}
form div {
clear: left;
margin: 0;
padding: 0;
padding-top: 0.6em;
}
form div label {
float: left;
width: 40%;
}
177
178
6.
. ,
, ,
, :
<form method=post action=textonly.html>
<table>
<tr>
class=txt /></td>
</tr>
<tr>
<td><label for=email>Email Address:</label></td>
<td><input type=text name=email id=email
class=txt/></td>
</tr>
<tr>
<td><label for=password1>Password:</label></td>
/></td>
</tr>
<tr>
<td><label for=password2>Confirm Password:</label></td>
/></td>
</tr>
<tr>
<td><label for=level>Membership Level:</label></td>
<td><select name=level>
</select></td>
</tr>
</table>
<p>
</p>
</form>
, . , . 6.9.
. 6.9 div, .
CSS
179
. 6.9. ,
chapter06/tablefree.html ()
<form method=post action=tablefree.html>
<div>
<input type=text name=fullname id=fullname class=txt
/>
</div>
<div>
</div>
CSS ,
HTML-
- CSS-:
chapter06/tablefree.css
form div {
clear: left;
margin: 0;
padding: 0;
padding-top: 0.6em;
}
form div label {
float: left;
width: 40%;
}
label . , .
180
6.
float
, div
clear left, div. ,
padding-top,
, !

, , . , ,
, .
fieldset legend:
chapter06/fieldset.html ()
<form method=post action=fieldset.html>
<fieldset>
<legend>Personal Information</legend>
<div>
<input type=text name=fullname id=fullname
class=txt />
</div>
<div>
</div>
<div>
class=txt />
</div>
<div>
class=txt />
</div>
</fieldset>
<fieldset>
<legend>Address Details</legend>
<div>
<label for=address1>Address line one:</label>
<input type=text name=address1 id=address1

class=txt />
</div>
<div>
<label for=address2>Address line two:</label>
<input type=text name=address2 id=address2
class=txt />
</div>
<div>
<label for=city>Town / City:</label>
<input type=text name=city id=city class=txt />
</div>
<div>
<label for=zip>Zip / Post code:</label>
<input type=text name=zip id=zip class=txt />
</div>
</fieldset>
<div>
</div>
</form>
chapter06/fieldset.css
h1 {
}
input.txt {
color: #00008B;
width: 200px;
}
input.btn {
color: #00008B;
}
form div {
clear: left;
margin: 0;
padding: 0;
padding-top: 5px;
}
form div label {
float: left;
width: 40%;
}
fieldset {
border: 1px dotted #61B5CF;
margin-top: 1.4em;
181
182
6.
padding: 0.6em;
}
legend {
color: #00008B;
}
. 6.10
.
. 6.10. <fieldset>
<fieldset> <legend> . , ,
. ,
div
,
,
, CSS.

<fieldset> </fieldset>, <legend>, :
183
chapter06/fieldset.html ()
<fieldset>
<legend>Personal Information</legend>
<div>
<input type=text name=fullname id=fullname class=txt/>
</div>
<div>
<input type=text name=email id=email class=txt/>
</div>
<div>
<input type=password name=password1 id=password1 class=txt/>
</div>
<div>
class=txt />
</div>
</fieldset>
<fieldset> <legend>, HTML-,

-, .
, <legend>
. . 6.11 <fieldset> <legend> Firefox Mac OS X.
. 6.11. <fieldset> <legend>
184
6.

.
; , Alt ( ) . , , !
, , . , Windows Alt+F
File. F File, . 6.12.
. 6.12. F File
:
, :
chapter06/accesskeys.html ()
<fieldset>
<legend><span class=akey>P</span>ersonal
Information</legend>
<div>
<input type=text name=fullname id=fullname class=txt accesskey=p
/>
</div>
chapter06/accesskeys.css ()
.akey {
}
185
. 6.13,
.
. 6.13. P Personal A Address

, , , . , , . , , , , , .
, accesskey=x, x
:
<div>
186
6.
<input type=text name=fullname id=fullname class=txt accesskey=p />
</div>

. , .
<legend> span akey:
<legend><span class=akey>P</span>ersonal Information</legend>
akey , underline text-decoration:

chapter06/accesskeys.css ()
.akey {
}
. , Internet Explorer
Firefox 1.5 Windows Alt,
Firefox Alt+Shift ( ,
). Safari Ctrl, Firefox Mac OS X
( ), Opera Shift+Esc,
.
,
. , ,
!
,
select

. , ?

, .
, select
187
color background-color.
Safari . , Safari
select, .
:
chapter06/select.html ()
<form method=post action=example8.html>
<div>
<label for=color>Select your favorite color:</label>
<select name=color id=color>
<option value=>Select One</option>
<option value=blue class=blue>blue</option>
<option value=red class=red>red</option>
<option value=green class=green>green</option>
<option value=yellow class=yellow>yellow</option>
</select>
</div>
<div>
value=Send! class=btn />
</div>
</form>
chapter06/select.css ()
option.blue {
background-color:
color: #000000;
}
option.red {
background-color:
color: #ffffff;
}
option.green {
background-color:
color: #ffffff;
}
option.yellow {
background-color:
color: #000000;
}
#ADD8E6;
#E20A0A;
#3CB371;
#FFF280;
, . 6.14,
.
188
6.
. 6.14. select
Opera
, CSS- ,
. , blue
() , . blue,
, , , . ,
, !
.

select.
: .
CSS. , option.blue
:
option[value=blue] {
color: #000000;
}


,
( ) CSS,
189
.
- .

Microsoft Excel
. . , CSS , . :
chapter06/spreadsheet.html ()
<form method=post action=spreadsheet.html>
<table class=formdata summary=This table contains a form to input the
yearly income for years 1999 through 2002>
<caption>Complete the Yearly Income 1999 - 2002</caption>
<tr>
<th></th>
</tr>
<tr>
<th scope=row>Grants</th>
<td><input type=text name=grants1999 id=grants1999 /></td>
</tr>
<tr>
<th scope=row>Donations</th>
<td><input type=text name=donations1999 id=donations1999/></td>
</tr>
<tr>
<th scope=row>Investments</th>
<td><input type=text name=investments1999
id=investments1999 /></td>
</tr>
<tr>
<th scope=row>Fundraising</th>
<td><input type=text name=fundraising1999
190
6.
id=fundraising1999 /></td>
</tr>
<tr>
<th scope=row>Sales</th>
<td><input type=text name=sales1999 id=sales1999 /></td>
</tr>
<tr>
<th scope=row>Miscellaneous</th>
<td><input type=text name=misc1999 id=misc1999 /></td>
</tr>
<tr>
<th scope=row>Total</th>
<td><input type=text name=total1999 id=total1999 /></td>
</tr>
</table>
<div><input type=submit name=btnSubmit id=btnSubmit
value=Add Data /></div>
</form>
chapter06/spreadsheet.css
table.formdata {
border: 1px solid #5F6F7E;
margin: 1em 0 2em 0;
}
table.formdata th {
background-color: #E2E2E2;
color: #000000;
text-align: left;
margin: 0;
}
191
table.formdata td {
margin: 0;
padding: 0;
border: 1px solid #E2E2E2;
}
table.formdata input {
width: 80px;
margin: 0;
border: none;
}
. 6.15 , .
. 6.15. ,
, , Excel, . 6.16.
-,
. ,
; .

,
(th), , caption summary,
.
. CSS-,
, . 6.17.
192
6.
. 6.16. Excel
. 6.17.
, . formdata:
chapter06/spreadsheet.html ()
<table class=formdata summary=This table contains a form to input
the yearly income for years 1999 through 2002>
, border-collapse collapse:
table.formdata {
193
}
, . .
<th>. th, formdata:
table.formdata th {
background-color: #E2E2E2;
color: #000000;
text-align: left;
margin: 0;
}
. 6.18. table th
.
input, , , input
formdata; .
td border input
0. input, ,
. ,
:
table.formdata td {
margin: 0;
padding: 0;
194
6.
border: 1px solid #E2E2E2;
}
width: 80px;
margin: 0;
border-width: 0;
border-style: none;
}
! , , , .
,
, , , !
input. ( Safari, Mac),

input. , .
,

Excel , , . -?
:focus CSS.
, Internet Explorer 8, Internet Explorer 6 7:
chapter06/spreadsheet2.css ()
width: 80px;
margin: 0;
border: 2px solid #FFFFFF;
}
.formdata input:focus {
}
. 6.19 .
195
. 6.19. , ( Firefox)
. :focus input,
.
, , Internet Explorer 6 :focus, .
, JavaScript. :
chapter06/spreadsheet2.html ()
var editcells =
document.getElementById(form1).getElementsByTagName(input);
for (var i = 0; i < editcells.length; i++) {
editcells[i].onfocus = function() {
}
editcells[i].onblur = function() {
}
}
</script>
CSS- hilite, , :focus:
196
6.
chapter06/spreadsheet2.css ()
.formdata input:focus, .formdata input.hilite {
}
Internet Explorer 6, ,
, :focus.

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

,
CSS . , , ,
. CSS-
- ,
, .
, , ,
, .
198
7. -
: - .
, Internet Explorer 6, . , , :
Internet Explorer, Safari, Firefox, Opera Chrome,
. , .

?
- ,
Internet Explorer Netscape Navigator.
. Internet Explorer ,
, ,
.
,
.
.
. 7.1 ,
Windows,, Mac OS Linux.. , Internet Explorer 6, 7 8, Firefox, Opera,
Safari Chrome.
? , . , , , HTML- CSS- -.
, . ,
Mozilla Foundation Gecko1 Firefox,
Camino, Netscape Navigator.
WebKit2 Safari Chrome, KHTML,3
Konqueror.
https://developer.mozilla.org/en/Gecko
http://webkit.org/
http://konqueror.kde.org/features/browser.php
199
, , ,
, .
, ,
. , , Internet Explorer Opera,, .
. Internet
Explorer ( 6),
, http://browsers.evolt.org/.

. . 7.1
, , .
7.1. ,
()
Win
Mac
Linux
Internet Explorer
6, 7, 8
http://www.microsoft.com/
windows/internet-explorer/
Firefox (Gecko)
http://www.mozilla.com/
Camino (Gecko)
http://www.caminobrowser.org/
Opera
http://www.opera.com/
Safari (WebKit)
http://www.apple.com/safari/
Chrome (WebKit)a
http://www.google.com/chrome/
Konqueror (KHTML)
http://konqueror.kde.org/

, , , , , .
a
Mac OS Linux
, .
200
7. -
,
.
Windows
Windows ,
. , 6070 Internet Explorer,, Windows. ,
Mac OS (,
Safari), , Windows, .
Mac
Mac OS X,
- , Safari.
2007 Apple -, Safari Windows. , Mac .
.
Windows-
- Google Chrome.. , Safari (WebKit),
WebKit),
), Safari Mac.
Linux
Mac Windows,, , Linux.
CD- Linux (Live CD)
Linux, CD-. , Linux . Live CD Linux Knoppix;

Knoppix.1 Knoppix
KDE, Konqueror. Linux Live CD Ubuntu,2
1
http://www.knoppix.net/
http://www.ubuntu.com/
201
Gnome.
Live CD FrozenTech.1
Linux
: , , Windows Linux,, . , https://help.ubuntu.com/community/WindowsDualBoot.

,
. Parallels Workstation2 VMWare Workstation3
, Linux Windows; , Linux.
VirtualBox4
Windows ,
Linux.
Mac
Mac Intel

.
,
Mac Linux!
Boot Camp
Windows Mac Boot Camp.5

; . ., Windows, . . Boot Camp Mac OS X
10.5 (Leopard).
http://www.frozentech.com/content/livecd.php
http://www.parallels.com/products/workstation/
http://www.vmware.com/products/ws/
http://www.virtualbox.org/
http://www.apple.com/macosx/bootcamp/
202
7. -

Apple Intel,
Windows Linux ,
Mac OS X.
Windows Internet Explorer
6, 7 8 !
Parallels Desktop
Mac OS X, . 7.1.1 VMWare Workstation Windows; VMWare Fusion Mac OS X.2 ,
VirtualBox Mac OS X.3
. 7.1. Internet Explorer 8 Safari Mac OS X Parallels
Linux
, Mac,, Linux , Windows.

Linux Internet Explorer.
1
http://www.parallels.com/
http://www.vmware.com/products/fusion/
http://www.virtualbox.org/
203
Mac
Mac Linux,
Windows,
Mac OS X.
Safari Chrome WebKit,
KHTML,, KDE,, Konqueror ( ). Safari, Chrome Linux
( ) . , Mac,
Safari.
Windows
Windows
Linux
, ,
Linux.

VMWare Workstation Parallels Workstation Windows

Linux.. VirtualBox.1

Linux
Windows,, .
,

, ,
.
, , .
,
. , :
http://www.virtualbox.org/wiki/Linux_Downloads
204
7. -
URL-

.
, . , JavaScript
, .
:
BrowserCam
BrowserCam (http://www.browsercam.com/) . .
Litmus
Litmus (http://litmusapp.com/) - HTML-
- , .
.
CrossBrowserTesting.com
CrossBrowserTesting.com (http://crossbrowsertesting.com/) ,
, .
Browser Shots
Browser Shots (http://browsershots.org/) ,
, .
, Adobe Microsoft
.
Adobe BrowserLab
Adobe BrowserLab (https://browserlab.adobe.com/index.html)
,
, . Internet Explorer,, Firefox Safari. BrowserLab Dreamweaver.
Microsoft SuperPreview
Microsoft SuperPreview (http://expression.microsoft.com/en-us/dd565874.
aspx) Windows,, , . IE6,
6, 7 8, .
Internet Explorer Windows
205
, -
, .
, SitePoint Forums,1 , - -,
,

.

Internet Explorer Windows
Internet Explorer (6, 7 8) - CSS-,
-, Windows,, , .
,
Internet Explorer?
Virtual PC Microsoft,
, Internet Explorer
6, 7 8 Windows.
, . Internet Explorer 8,
Internet Explorer 6 7.
1. Internet Explorer 8, .
2. Virtual PC 2007 Microsoft Virtual PC.2
3. Virtual PC ( ) Microsoft Windows Internet
Explorer IE6 IE7 Microsoft.3 Windows.
4. Virtual PC.. , Windows .
http://www.sitepoint.com/forums/
http://www.microsoft.com/windows/virtualpc/default.mspx
http://go.microsoft.com/fwlink/?LinkId=70868
206
7. -
IE7 IE8. Developer Tools Internet Explorer 8

IE7.
7. , ,
IE8.
8. , . ,
IE7,
(
Windows Mac).
Microsoft Internet Explorer,

, 6,
, ,
CSS-. Internet Explorer Tredosoft,1
, . ,
JavaScript, JScript, ,
Internet Explorer. , Internet Explorer.
Internet Explorer. ,
Internet Explorer , . IE Windows,
IE , , ,
, . IE , .
,

,
, , , . CSS
1
http://tredosoft.com/Multiple_IE
207

, .
,
, IE5, , IE8
Firefox.
, , YUI Graded Browser Support,1

. ,
Yahoo! , .
Yahoo! ,
.
,
; ,
HTML- ,
CSS.. , CSS 2.1 CSS3
3 ( ), Internet Explorer 6. PNG
Internet Explorer 6 ,
PNG IE6. :
, ,
GIF.. YUI Graded Browser Support
.

CSS -, ,
Netscape 4, . ,
, 1
http://developer.yahoo.com/yui/articles/gbs/
208
7. -
CSS.. ,
.
Netscape 4, Internet Explorer 4 @import,

CSS .
:
, , @import,
.
head
link
, CSS.
( ) @import, :
chapter07/basicstyles.html
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en>
<head>
charset=utf-8 />
<title>Serving a basic stylesheet</title>
<link rel=stylesheet href=basic_basic.css type=text/css
media=screen />
<style type=text/css media=screen>
@import basic_default.css;
</style>
</head>
<body>
<div class=content>
<h1>Serving a basic style sheet to old browsers</h1>
<p>CSS is now used so extensively on the Web that </p>
</div>
</body>
</html>
basic_basic.css , .
Netscape 4,1
1
4.8 evolt.org (http://

browsers.evolt.org/?navigator/32bit/4.8/); Windows XP Vista.
209
, . . ,

, , , .
chapter07/basic_basic.css
body {
background-color: #fff;
color: #000;
margin: 0;
padding: 5%;
}
body, h1, h2, h3, h4, h5, h6, ol, ul, li, p {
font-family: verdana, arial, helvetica, sans-serif;
color: #000;
}
, ,
, - .
, ;
. 7.2 7.3:
. 7.2. Netscape 4.8
210
7. -
chapter07/basic_default.css
h1 {
color: #cc0022;
margin: 0;
}
.content {
background-color: #ececec;
padding: 0.6em;
}
. 7.3. Google Chrome
CSS
, , , ,
! CSS, , .
@import . @import,
.
, , :
211
1.
, Internet Explorer
(
),
. . ,
!

XHTML CSS,, Internet Explorer,, , , , ... Firefox Safari , -. ?
Internet Explorer . . , , Netscape 4

Internet Explorer 4 5, .
W3C ( ).
, doctype ( doctype), .
- DOCTYPE,
XML, XHTML,
Internet Explorer 6 .
, HTML 4
XHTML ( ), .
. : , , , doctype , IE6
. ,
1
http://www.bluerobot.com/web/css/fouc.asp/
212
7. -
Internet
Explorer 6, Internet Explorer 5 Mac, Opera 7, Safari, Firefox Chrome
.1
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN
http://www.w3.org/TR/html4/frameset.dtd>
HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd>
XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
XHTML 1.0 Strict

XHTML 1.1
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
XHTML XML, , :
<?xml version=1.0 encoding=utf-8?>
</html>
, - Internet Explorer 6 , :
doctype http://gutfeldt.ch/
matthias/articles/doctypeswitch/table.html.
Internet Explorer 6 7
213

</html>
Internet Explorer.. CSS,, Internet Explorer 5 5.5. ,

(200 ) 20
( 240 ),
200 . . 7.4 .

. 7.4.
Internet Explorer
, . , , W3C
,
.
,
.

, CSS, . Microsoft
CSS2.1 Internet Explorer 7,
, Internet Explorer 8. , -
214
7. -
, IE7
7 IE8, ,
.
Internet Explorer . Internet Explorer; HTML , ,

. , IE
<link>.
, Internet Explorer 6, ,
. head
, , :

Internet Explorer 6
ie6fixes.css. IE7:

Internet Explorer 7 :

head
, , , IE,, , .
. SitePoint CSS
215
Reference.1 , JavaScript Internet

Explorer 6.

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

IE6 7.

, CSS,, , Firefox,, Opera Safari.. CSS , , , . Internet
Explorer,, .
,
CSS,
.
HTML- CSS-
W3C,
. -
1
http://reference.sitepoint.com/css/conditionalcomments/
216
7. -
, ,
<div> .
,
CSS- W3C1 .

, : Firefox,, Opera,, Safari,, Chrome Internet Explorer 8. -
, , ,
.
,
.
CSS-
,
. , ,
.
, IE6
6 - ,
, . . IE6
,
.
IE7, ,
.
,
,

IE6
6 / IE7
7 . .
(head) HTML , ,
Internet Explorer 6 7,
.
http://validator.w3.org/
217
, Internet Explorer
Internet
Explorer 6 7 , , , ,
. Internet Explorer 6. Internet Explorer 7 .
IE7
7 , IE6,
6, , , .
DOCTYPE
,
. doctype
?. ,
. -
, , , IE6
7, .
min-height IE6
Internet Explorer min-height, ,
height . , height ,
.
,
height IE6 , minheight .
hasLayout
IE6 7 hasLayout,
. ,
; , .
. , , . ,
, hasLayout,
, , div. CSS-, float left right, -
218
7. -
, . CSS-,
, .
IE6 hasLayout ,
1% height. , IE6
height min-height, , , - . ,
, IE6.
IE7, , height, . , min-height,
IE7. ,
min-height 0.
,
, . , . .,
div , , ,
- . -, div . .

, position relative. ,
.
, .

, , . , , ,
,
,
. - . , ,
, , ; !
PNG Internet Explorer 6
219

7 Internet
Explorer PNG.
3 , PNG :
-
.
,
. 7.5. -
IE6 PNG?
. 7.5. PNG Internet Explorer 6

, JavaScript. (Aaron Budman)1 1
http://webapp.youngpup.net/?request=/snippets/sleight.xml
220
7. -
(Drew McLellan) , .1
GIF 11 px
x.gif.
JavaScript ( Internet Explorer 6)
:
chapter07/bgsleight.js
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != function) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
var bgsleight = function() {

function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, );
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.all.length - 1, obj = null; (obj =
document.all[i]); i--) {
if (itsAllGood &&
obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
fnFixPng(obj);
obj.attachEvent(onpropertychange, fnPropertyChanged);
}
if ((obj.tagName==A || obj.tagName==INPUT) &&
obj.style.position == ){
obj.style.position = relative;
}
}
}
function fnPropertyChanged() {
if (window.event.propertyName == style.backgroundImage) {
var el = window.event.srcElement;
if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
1
http://allinthehead.com/retro/289/sleight-update-alpha-png-backgrounds-in-ie
221
var bg = el.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
el.filters.item(0).src = src;
el.style.backgroundImage = url(/img/shim.gif);
}
}
}
function fnFixPng(obj) {
var mode = scale;
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == no-repeat) mode =
crop;
obj.style.filter =
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
+ src + , sizingMethod= + mode + );
obj.style.backgroundImage = url(/img/shim.gif);
}
return {
init: function() {
if (navigator.platform == Win32 && navigator.appName ==
Microsoft Internet Explorer && window.attachEvent) {
addLoadEvent(fnLoadPngs);
}
}
}
}();
bgsleight.init();
Internet Explorer 6,
:
chapter07/bgsleight.html ()

Internet
Explorer, , div content . , height.
1%, Internet Explorer 6
, . Internet Explorer,
style head
,
222
7. -
, :
chapter07/bgsleight.html ()

Internet Explorer, ,
, . 7.6.
. 7.6. PNG Internet Explorer 6
. , ,
, ,
. , -
IE 8 , W3C
223
position:relative;, .
,
, .
. : , Internet
Explorer 6 ,
PNG.
-, , , Internet
Explorer 6
, .
: , GIF,, , JavaScript.
IE 8 ,
W3C
, Internet Explorer 8 , , hasLayout , .
, IE8
, IE7,
-?
,
. CSS-
, ,
IE8, Firefox 3
Safari 3 4. , Internet Explorer 8
, ,
.
, Microsoft (Compatibility View) x-ua-compat-ua-compatua-compat-compatcompatible, ,

224
7. -
,
x-ua-compatible <meta />
HTTP, .
,
Compatibility View; , , Compatibility View List Internet Explorer 8 Windows,
. Microsoft, IE8 .1
x-ua-compatible ,
.
meta:
<meta http-equiv=X-UA-Compatible content=IE=8 />
Internet Explorer
8 . Internet Explorer 7,
IE=EmulateIE7. IE=Edge
Internet Explorer 8
.
, x-ua-compatible IE=Edge.
doctype Internet Explorer x-uacompatible Microsoft?
x-ua-compatible IE=Edge ( IE=IE8 .). 9- Internet Explorer IE8.
, (Faruk Ates) . IE8 and the X-UA-Compatible situation (IE8
X-UA-Compatible).2
, CSS
, CSS-
, ! , 1
Microsoft http://
www.microsoft.com/downloads/details.aspx?FamilyID=b885e621-91b7-432d8175-a745b87d2588&displaylang=en
http://farukat.es/journal/2009/05/245-ie8-and-the-x-ua-compatible-situation
, CSS
225
Internet
Explorer 6 Safari.
,
. !
!
1.
, . : ,
. ,
, : . , .
2.
HTML- CSS-,
. , -
, ,
.
3.

? , , , . .
4.
, , , . , . , :
CSS Pointers Group, http://css.nu/pointers/bugs.html
Position is Everything, http://www.positioniseverything.net/
Browser Bug Category css-d wiki, http://css-discuss.
incutio.com/?page=CategoryBrowserBug
SitePoint CSS Reference1
-
http://reference.sitepoint.com/css/
226
7. -
CSS. , cssdiscuss1 , , Google!

5.
,
. ,
. ,
, .

:
, , , .
, HTML- CSS- ,

, .
, . ,
.
, ,
. , , ,
.
. IE5,
!. :
, .
.
, .
, , ,
REPOST.
,
,
.
1
http://www.css-discuss.org/
, W3C Validator
227
,
. ,
,
.
, ,
. !
, , , , , . ,
, .
, , (
).
, -,
, CSS.
, , CSS, css-discuss.1
, , . SitePoint
,2
.
,
W3C Validator
, , W3C.
3C.
C.. .
(X)HTML- W3C Validator;3 CSS- W3C CSS

Validator.4 , Dreamweaver,
http://www.css-discuss.org/
http://www.sitepoint.com/launch/cssforum/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
228
7. -
, , ,
Firefox, .1
HTML-,
-, CSS-
- .
.
. (X)HTML-.
, ,
, A B.
, , .

HTML ( XHTML),
XML, :
<link rel=stylesheet href=stylesheet.css type=text/css />
, doctype , XHTML,
, </head> .
HTML,
:
<link rel=stylesheet href=stylesheet.css type=text/css>

CSS-
(, ), . ,
, .
CSS- , .
.
. , - . ,
, , (, , ).
, , !
http://users.skynet.be/mgueury/mozilla/
229
, ,
, , ,
, , CSS.. , .
, . ,
,

. , , ,
CSS , 9.

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

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

, , .
, .
,
, . , , , , , . , , , ,
. - !
, , - !

,
. , . , , , ,
.
W3C - (WCAG 2.0 Success Criterion 1.4.31) ,
4,5:1.
http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrastcontrast
232
8.
Luminosity Contrast Ratio Analyser, (Jez Lemon)1.

CSS ,
, , , . , , / CSS, .
, , ,
alt. ,
, , ,
.
line-height,

line-height
, , .
1,2 1,6, ,
.

, .
, , , - .
, Lynx, Lynx Viewer.2 Lynx , ; Lynx.

,
.
1
http://juicystudio.com/services/luminositycontrastratio.php
http://www.delorie.com/web/lynxview.html
233
Linux/UNIX
, Lynx ;
. ,
Lynx.1
Windows
Lynx Windows - ,
csant.info.2 Lynx Start.
Mac OS X
Lynx Mac OS X Apple.3
Lynx , . . 8.1
Lynx.
. 8.1. Lynx
http://lynx.isc.org/release/
http://www.csant.info/lynx.htm
http://www.apple.com/downloads/macosx/unix_open_source/lynxtextwebbrowser.html
234
8.
-, G URL-. Enter, Lynx .

cookies, ,
. Y (), N (), (
cookies ) V ( cookies
).
. , , . , , , , , .
, , .
Lynx , . , Apache IIS,, Lynx (localhost/). , HTML- , .
Lynx , H;
, .
. ,
alt .

,
, ;
, JAWS, (
, 40 ), . -,
?
235
, , Fire
Vox, Firefox. Firefox Windows, Mac
OS X Linux ,
. (Charles L. Chen),1 , . Fire Vox.
, ,
,
,
,
, ,
,
. ,
, .

,
?
CSS2.1 ,
-

.
, ,
, . , , :
1
http://www.firevox.clcworld.net/downloads.html
236
8.
<link rel=stylesheet type=text/css href=screen.css
media=screen />
head
:
<style type=text/css media=all>
</style>
media
, .
,
.
CSS 2.1 :1
all
braille
, ,
embossed
handheld
( , )
print
, (Print Preview)
projection ,
( Opera )
screen
speech
( , CSS2
aural)
tty
(, );
tv
(, , )
http://www.w3.org/TR/CSS21/media.html#media-types
237
media, ,
@media.
.
, , 12 .
:
@media print {
body {
font-size: 10pt;
}
}
@media screen {
body {
font-size: 12px;
}
}
@media screen, print {
body {
color: #000000;
}
}

, , ,
CSS3.1 , Opera Mobile Safari
iPhone handheld,
- ,
.
, , CSS-, ,
.2
http://reference.sitepoint.com/css/mediaqueries/
, , 480 .
Opera (Opera Developer Community) http://dev.opera.com/
articles/view/opera-mobile-9-5-the-developer-angle/ Apple Safari (Apple Safari DevCenter) http://developer.
apple.com/safari/.
238
8.
;
print.

.
.
. , , .

- ,
, , , . , CSS,, , .
, :
chapter08/print-stylesheet.html
<head>
<title>Print Style Sheet</title>
<link rel=stylesheet type=text/css href=main.css
title=default />
<link rel=stylesheet type=text/css href=print.css
media=print />
</head>
<body>
<div id=banner></div>
<div id=content>
<p>These stuffed peppers are lovely as a starter, or as a side dish for a
Chinese meal. They also go down well as part of a buffet and even children
seem to like them.</p>
<h2>Ingredients</h2>

</div>
<div id=navigation>
<ul id=mainnav>
</ul>
</div>
</body>
</html>
chapter08/main.css
body, html {
margin: 0;
padding: 0;
}
#navigation {
width: 200px;
font: 90% Arial, Helvetica, sans-serif;
position: absolute;
top: 41px;
left: 0;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
margin: 0;
}
display: block;
padding: 5px 5px 5px 0.5em;
color: #FFFFFF;
background-color: #b51032;
}
color: #FFFFFF;
}
#content {
margin-left: 260px;
margin-right: 60px;
}
239
240
8.
#banner {
height: 40px;
text-align: right;
margin-top: 0;
}
#banner ul {
margin: 0;
padding: 0;
}
#banner li {
display: inline;
}
#banner a:link, #banner a:visited {
color: #FFFFFF;
}
#content p, #content li {
font: 80%/1.6em Arial, Helvetica, sans-serif;
}
#content p {
margin-left: 1.5em;
}
#content h1, #content h2 {
font: 140% Georgia, Times New Roman, Times, serif;
}
#content h2 {
padding-bottom: 3px;
}
chapter08/print.css
body, html {
margin: 0;
padding: 0;
}
#navigation {
display: none;
}
#content {
margin-left: 20pt;
margin-right: 30pt;
}
#banner {
display: none;
}
font: 12pt/20pt Times New Roman, Times, serif;
241
}
#content p {
margin-left: 20pt;
}
font: 16pt Georgia, Times New Roman, Times, serif;
color: #4b4b4b;
}
#content h2 {
padding-bottom: 2pt;
border-bottom: 1pt dotted #CCCCCC;
}
, . ,
, . ,
- . . 8.2 , , CSS,
, .
. 8.2. , ,
242
8.
. 8.3 Print Preview.

. 4 ,
, .
. 8.3. Print Preview
,
.
, ,
, .
. , Print ()
, .
CSS , ,
,
.
.
243

print.css.
.
,
print:
media=print />

,
. div; :
chapter08/main.css ()
#navigation {
width: 200px;
position: absolute;
top: 41px;
left: 0;
}
, .
display:none:
chapter08/print.css ()
#navigation {
display: none;
}
, , navigation.
, ,
.
, content:
#content {
margin-left: 260px;
margin-right: 60px;
}
,
. , -
244
8.
( ) ( ),

: , , - 2:
#content {
margin-left: 20pt;
margin-right: 30pt;
}
Print Preview, . 8.4,

,

.
. 8.4 , .
.
, .
:
#banner {
height: 40px;
}
. 8.4.

245
display
none .
#banner {
display: none;
}
, .
, , . ,
.
, , , serif .
:
font: 12pt/20pt Times New Roman, Times, serif;
}
#content p {
margin-left: 20pt;
}
color: #4b4b4b;
}
#content h2 {
padding-bottom: 2pt;
border-bottom: 1pt dotted #CCCCCC;
}
, . . 8.5.
. ,
CSS , ,
, ,
CSS. ,
, , div .
246
8.
. 8.5. Print Preview

. ,
, , .
,
rel=alternate stylesheet link , .
(, high contrast
), .
, , :
chapter08/alternate-stylesheets.html ()
<link rel=stylesheet type=text/css href=main.css
title=default />
media=print />
<link rel=alternate stylesheet type=text/css
href=highcontrast.css title=high contrast />
chapter08/highcontrast.css
body, html {
margin: 0;
padding: 0;
color: #FFFFFF;
}
#navigation {
width: 200px;
position: absolute;
top: 41px;
left: 0;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
margin: 0;
}
display: block;
color: #FFFFFF;
background-color: #b51032;
}
color: #FFFFFF;
}
#content {
margin-left: 260px;
margin-right: 60px;
}
#banner {
height: 40px;
text-align: right;
margin-top: 0;
}
#banner ul {
margin: 0;
247
248
8.
padding: 0;
}
#banner li {
display: inline;
}
color: #FFFFFF;
}
}
#content p {
margin-left: 1.5em;
}
color: #FFFFFF;
}
#content h2 {
border-bottom: 1px dotted #CCCCCC;
}
. 8.6 View Firefox.
. 8.6.
High Contrast Firefox
249
, . , , , .
,
, .
, , Internet Explorer . ,
,
.
, !
, ,
. .

.

(Joe Clark); CSS .1 ,
( ,
) , , .
, .

( )

. , ,
, ,
. 8.7 .
1
http://joeclark.org/access/webaccess/zoom/
250
8.
. 8.7. zoom layout
chapter08/zoom.css
body, html {
margin: 1em 2em 2em 2em;
padding: 0;
font-size: 140%;
color: #FFFFFF;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
float:left;
width: 20%;
}
color: #FFFF00;
}
text-decoration:none;
251
}
#content {
padding: 1em 0 0 0;
clear:left;
}
line-height: 1.6em;
}
color: #FFFFFF;
}
#content h2 {
}

?
, ,
, .
;
?
, , , . , ,
, , .

. ,
. , -
252
8.
.
.
, , . ,
, , , ,
. JavaScript , . . ,

.

.
, ?
, . , , , , :
alternate-stylesheets2.html ()
<link rel=stylesheet type=text/css href=main2.css />
<link rel=stylesheet type=text/css href=defaultcolors.css
title=Default />
media=print />
<link rel=alternative stylesheet type=text/css
href=highcontrast2.css title=High Contrast />
chapter08/main2.css
body, html {
margin: 0;
padding: 0;

}
#navigation {
position: absolute;
left: 0;
top: 41px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
margin: 0;
}
display: block;
color: #FFFFFF;
}
color: #FFFFFF;
}
#banner {
text-align: right;
margin-top: 0;
}
#banner ul {
margin: 0;
}
#banner li {
display: inline;
}
color: #FFFFFF
}
}
253
254
8.
#content p {
margin-left: 1.5em;
}
color: #B51032;
}
#content h2 {
border-bottom: 1px dotted #ED9F9F;
}
chapter08/defaultcolors.css
body, html {
color: #000000;
}
color: #B51032;
}
#content h2 {
}
chapter08/highcontrast2.css
body, html {
color: #FFFFFF;
}
color: #FFFFFF;
}
#content h2 {
}
highcontrast.css,
, .
:
255
body, html {
margin: 0;
padding: 0;
color: #000000;
}
chapter08/highcontrast.css (excerpt)
body, html {
margin: 0;
padding: 0;
color: #FFFFFF;
}
, :
color: #B51032;
}
#content h2 {
}
chapter08/highcontrast.css ()
color: #FFFFFF;
}
#content h2 {
}

highcontrast.css, ,
.
, ; -
256
8.

.
.
, .

,

.

CSS
, , ,
CSS . ,
, , , .

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

, : CSS-
(X)HTML-.
X)HTML-.
)HTML-.
HTML-.
-. , ?
258
9. CSS
, ,
.
.
, , . , ,
.
, . ; JavaScript
. -
.
, , .
, : header, content, nav footer. :
<head>
<title>Absolute positioning</title>
<link rel=stylesheet type=text/css href=position2.css />
</head>
<body>
<div id=header> </div>
<div id=content>
Main page content here
</div>
<div id=nav> </div>
</body>
</html>

,
, HTML , .
259
. 9.1 , div , .
. 9.1. ,

:
chapter09/inline-block.html
<head>
<title>Inline and block level elements</title>
#one {
background-color: #CFEAFA;
border: 2px solid #6CB5DF;
}
#two {
display: inline;
}
a {
background-color: #6CB5DF;
color: #FFFFFF;
}
a.block {
260
9. CSS
display: block;
}
</style>
</head>
<body>
<div id=one>A div is a block level element.</div>
<p>It is possible to display a div or any other block level element as
an inline element. </p>
<div id=two>This div is displaying as an inline element.
</div>
<p>This paragraph contains a
<a href=http://www.sitepoint.com/>link</a> that
displays as an inline element.</p>
<p>This paragraph contains a
<a class=block href=http://www.sitepoint.com/>link</a> that
displays as a block element.</p>
</body>
</html>
, .
:
, .
,
,
. HTML-
: (h1, h2, h3,...), (p), (ul, ol) (div, blockquote).
div, . ,
body. div
, .
div -,
:
display: inline;
. ,
a .
,
CSS.. display block.
.
CSS
261

CSS
margin padding
?
margin .
:
margin-top: 1em;
margin-right: 2em;
margin-bottom: 0.5em;
margin-left: 3em;
:
margin: 1em 2em 0.5em 3em;
, :
margin: 1em;
1em.
. 9.2
. :
chapter09/margin.html
<head>
<title>Margins</title>
p {
}
p.margintest {
margin: 40px;
}
</style>
</head>
<body>
<p>This paragraph should be displayed in the default </p>
<p>This is another paragraph that has the default </p>
262
9. CSS
<p class=margintest>This paragraph has a 40-pixel </p>
</body>
</html>
. 9.2. CSS
padding .
:
padding-top: 1em;
padding-left: 2em;
:
padding: 1em 1.5em 0.5em 2em;
margin,
, :
padding: 1em;
. 9.3
. .
, . 9.2,
margin padding .
chapter09/padding.html
<head>
<title>Padding</title>
CSS
263
. 9.3. CSS
p {
background-color: #EEEEEE;
}
p.paddingtest {
padding: 40px;
}
</style>
</head>
<body>
<p>This paragraph should be displayed in the default </p>
<p>This is another paragraph that has the default </p>
<p class=paddingtest>This paragraph has 40 pixels </p>
</body>
</html>

margin padding. ,
,
, . 9.4 .
, , . ,
400 , 40 .
480 ( 400 40
). 20 ,
520 ( 480 , 20 ).
, -
264
9. CSS
. 9.4. ,

,
.
. Internet Explorer,
5 5.5, , ;
400 , -
. ,
, . Internet Explorer 5 ,
, , Internet
Explorer 6 . 7.

HTML,
align. , CSS !
CSS- float, . 9.5.

:
265
chapter09/float.html
<head>
<title>Float</title>
.featureimg {
float: left;
width: 319px;
}
</style>
</head>
<body>
<img src=peppers1.jpg width=319 height=213 alt=peppers
class=featureimg />
<p>These stuffed peppers are lovely as a starter, or as a </p>
More paragraphs
</body>
</html>
. 9.5. float
float1
.
, float, ,
. . .
266
9. CSS
, . , , , , float .
. 9.5, . .

.
, , :
chapter09/float2.html ()
.featureimage {
float: left;
width: 319px;
margin-right: 20px;
margin-bottom: 6px;
}
. 9.6 :
.
. 9.6.

float
float
, -
float
267
,
. ?
clear
, float,
. ,
both ,
:
chapter09/float-clear.html
<head>
<title>float and clear</title>
.featureimg {
float: right;
width: 319px;
margin-left: 20px;
margin-bottom: 6px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<h1>Chinese style stuffed peppers</h1>
<img src=peppers1.jpg width=319 height=213 alt=peppers
class=featureimg />
<ul>
<li>1 tablespoon of oil</li>
<li>1 crushed garlic clove</li>
<li>Peeled and finely chopped fresh ginger root</li>
<li>250g minced pork, beef or Quorn</li>
<li>1 chopped spring onion</li>
<li>1 chopped celery stick</li>
<li>Grated rind of 1 lemon</li>
<li>Finely chopped red chilli (optional)</li>
<li>4 large green peppers</li>
</ul>
<p class=clear>These stuffed peppers are lovely as a</p>
More paragraphs
268
9. CSS
</body>
</html>
. 9.7,
,
.
. 9.7.
float , - . ,
ul p, . 9.8.
. 9.8. ul p
float?
269

. , . , , , ,
. 9.8.
clear:
chapter09/float-clear.html ()
.clear {
clear: both;
}
CSS- <p>, :
chapter09/float-clear.html ()
<p class=clear>These stuffed peppers are lovely as a
starter, or as a side dish for a Chinese meal. They also go
down well as part of a buffet and even children seem to like
them.</p>
.
. 9.9; ,
, .
. 9.9. clear
clear left right,

, , -
270
9. CSS
float .
both. ,
float clear , Internet Explorer
Internet Explorer 6, 7.
,

- ,
,
. 9.10 . , , , . , CSS.
. 9.10. , CSS
float:
chapter09/slogan-align.html ()
<body>
<div id=header>
<img src=stage-logo.gif width=187 height=29
alt=Stage & Screen class=logo />
<span class=slogan>theatre and film reviews</span>
</div>
</body>
chapter09/slogan-align.css
body {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
271
border-bottom: 1px dotted #B2BCC6;

height: 3em;
}
#header .slogan {
color: #778899;
float: right;
width: 300px;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
width: 187px;
margin-left: 1.5em;
margin-top: 0.5em;
}
float
.
, . 9.11.
HTML-,
. .
. 9.11.
HTML-, :
chapter09/slogan-align.html ()
<div id=header>
<span class=slogan>theatre and film reviews<span>
</div>
float logo , slogan . ,

, span,
! . 9.12.
272
9. CSS
. 9.12. float
,
:
chapter09/slogan-align.css ()
#header .slogan {
color: #778899;
float: right;
width: 300px;
text-align: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
width: 187px;
margin-left: 1.5em;
margin-top: 0.5em;
}
:
, , ,
. 9.13.
. 9.13. float

. . 9.14. float.
. 9.14. float
CSS
273
float ,
, , . 9.13.

height:
chapter09/slogan-align.css ()
#header {
height: 3em;
}
,
. 9.15.
. 9.15. height div c

height .
em, , - , .
,
clear, .

CSS
CSS .
CSS
, , . , . 9.16,
.
274
9. CSS
. 9.16.
:
chapter09/position.html
<head>
<title>Absolute positioning</title>
<link rel=stylesheet type=text/css href=position.css />
</head>
<body>
<div id=box1>This is box one. It is positioned 10 pixels
from the top and 20 pixels from the left of the viewport.
</div>
<div id=box2>This is box two. It is positioned 2em from the bottom and
2em from the right of the viewport.</div>
</body>
</html>
chapter09/position.css
#box1 {
position: absolute;
top: 10px;
left: 20px;
width: 100px;
border: 2px solid #34537D;
}
#box2 {
position: absolute;
bottom: 2em;
CSS
275
right: 2em;
width: 100px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
}
position absolute
. ,

, . 9.17.
. 9.17.

HTML-
- div, , , .

, , ,
margin padding
. ,
,
( ), .
. 9.18 , , . -
276
9. CSS
,
.
. 9.18.
:
chapter09/position2.html ()
<div id=box1>This is box one. It is positioned 100 pixels from the top and
100 pixels from the left of the viewport.
<div id=box2>This is box two. It is positioned 2em from the bottom and
2em from the right of the parent element - box one.
</div>
</div>
chapter09/position2.css
#box1 {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
}
#box2 {
position: absolute;
bottom: 2em;
right: 2em;
width: 150px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
}
box1 height
300 :
chapter09/position3.css ()
#box1 {
position: absolute;
top: 100px;
277
left: 100px;
width: 400px;
height: 300px;
}
. 9.19,
, . .
. 9.19.
. ,
(box2)
(box1), CSS.
position, . . body ( , ).

,
.

, , ,
. 9.20. CSS?
278
9. CSS
. 9.20. CSS

CSS- margin auto:
chapter09/center.html
<head>
<title>Centered Box</title>
<link rel=stylesheet type=text/css href=center.css />
</head>
<body>
<div id=content>
<p>This box is 630 pixels wide and centered in the document.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
</p>
</div>
</body>
</html>
chapter09/center.css
body {
background-color: #CCD3D9;
color: #000000;
}
#content {
width: 630px;
margin-left: auto;
279
margin-right: auto;
border: 2px solid #A6B2BC;
color: #000000;
padding: 0 20px 0 20px;
}
;

.
margin auto
, ,
. ,
,
.
Internet Explorer 5.x.

CSS-,
-, Internet Explorer 5.x,
x,, . , text-align: center
body text-align: left div, .
, .

. :
1: CSS3- border-radius
border-radius,
.
CSS3, .1 , border-radius, Safari Firefox

, .2
1
http://www.w3.org/TR/css3-border/#the-border-radius
http://reference.sitepoint.com/css/vendorspecific/
280
9. CSS
,
, , Gecko ( Camino) WebKit ( Chrome), . Safari, Firefox Camino Chrome,
Internet Explorer Opera. HTML- CSS-, . 9.21:
chapter09/corners1.html
<head>
<title>Rounded Corners</title>
<link rel=stylesheet type=text/css href=corners1.css />
</head>
<body>
<div class=curvebox>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
</div>
</body>
</html>
chapter09/corners1.css
.curvebox {
width: 250px;
padding: 1em;
color: #33527B;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
. 9.21. , CSS

! :
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
281
, , . 9.22.
, .
. 9.22. , border-radius
, , Gecko WebKit, - .
2:
( )
HTML-
. . , . , . 9.23.
.
. 9.23.
, ,
div:
<head>
<title>Rounded corners</title>
<meta http-equiv=Content-Type
282
9. CSS
</head>
<body>
<div class=rndbox>
<div class=rndtop><img src=topleft.gif alt= width=30
height=30 /></div>
<div class=rndbottom><img src=bottomleft.gif alt= width=30
height=30 /></div>
</div>
</body>
</html>
div rndtop rndbottom :

chapter09/corners2.css ()
.rndbox {
background: #C6D9EA;
width: 300px;
font: 0.8em Verdana, Arial, Helvetica, sans-serif;
color: #000033;
}
.rndtop {
background: url(topright.gif) no-repeat right top;
}
.rndbottom {
background: url(bottomright.gif) no-repeat right top;
}
.rndbottom img {
display:block;
}
.rndbox p {
margin: 0 0.4em 0 0.4em;
}
HTML-- CSS-
- , . 9.24.
. 9.24. , HTML
283
3: JavaScript
,
,
. JavaScript. ,
JavaScript,
.
JavaScript ,
NiftyCube, ,
.
, zip- NiftyCube.1 ,
,
, niftycube.js JavaScript niftyCorners.css CSS.
. , :
chapter09/corners3-start.html
<head>
</head>
<body>
<p>Lorem ipsum dolor...</p>
</div>
</body>
</html>
, : . ,
em, Internet Explorer.. . 9.25.
1
http://www.html.it/articoli/niftycube/
284
9. CSS
chapter09/corners3.css
.curvebox {
width: 250px;
padding: 20px;
color: #33527B;
}
. 9.25.
,
JavaScript head , ,
, curvebox:
<head>
<script type=text/javascript src=niftycube.js>
</script>
window.onload=function(){
Nifty(div.curvebox);
}
</script>
</head>
<body>
285
</div>
</body>
</html>
, . 9.26.
. 9.26.
HTML-
JavaScript,
.1
, ,
, .
, div . JavaScript HTML-, ,
, , .
, JavaScript CSS-
- . , , JavaScript, .
,
JavaScript,
.
1
JavaScript Spanky Corners (http://tools.

sitepoint.com/spanky/). (Alex Walker)
SitePoint.
286
9. CSS
: ,

,
. 9.27, .
CSS.
. 9.27. CSS
. 9.27 CSS-:
chapter09/2col.html
<head>
<title>Stage & Screen - theatre and film reviews</title>
<link rel=stylesheet type=text/css href=2col.css />
</head>
<body>
: ,
<div id=header>
<span class=strapline>theatre and film reviews</span>
</div>
<div id=content>
<h1>Welcome to Stage & Screen</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
</div>
<div id=nav>
<ul>
<li><a href=#>Play Reviews</a></li>
<li><a href=#>Film Reviews</a></li>
<li><a href=#>Post a Review</a></li>
<li><a href=#>About this site</a></li>
</ul>
<h2>Latest Reviews</h2>
<ul>
<li><a href=#>Angels & Demons</a></li>
<li><a href=#>Star Trek</a></li>
<li><a href=#>Up</a></li>
<li><a href=#>Land of the Lost</a></li>
</ul>
</div>
</body>
</html>
chapter09/2col.css
body {
margin: 0;
padding: 0;
color: #000000;
}
#header {
height: 3em;
}
#header .strapline {
color: #778899;
float: right;
287
288
9. CSS
width: 300px;
text-align: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
width: 187px;
margin-left: 1.5em;
margin-top: 0.5em;
}
#nav {
position: absolute;
top: 5em;
left: 1em;
width: 14em;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
font-size: 80%;
}
color: #2A4F6F;
}
#nav a:hover {
color: #778899;
}
#nav h2 {
color: #2A4F6F;
}
#content {
margin-left: 16em;
: ,
289
margin-right: 2em;
}
h1 {
}
#content p {
font-size: 80%;
line-height: 1.6em;
}
, , ?. , div ID content. , ID nav.

, -
, ( . 9.28).
. 9.28.
CSS- :
290
9. CSS
chapter09/2col.css ()
body {
margin: 0;
padding: 0;
color: #000000;
}
#header {
height: 3em;
}
#header .slogan {
color: #778899;
float: right;
width: 300px;
text-align: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
width: 187px;
margin-left: 1.5em;
margin-top: 0.5em;
}

,
:
#nav {
position: absolute;
top: 5em;
left: 1em;
width: 14em;
}
. 9.29, ,
.
: ,
291
. 9.29.

, , , ,
.
, .
, margin, . . 9.30.
#content {
margin-left: 16em;
margin-right: 2em;
}
, CSS,
, . 9.27. .
em .
em. , .
292
9. CSS
, .
, ,
. , ,
.
. 9.30.

,
, , ,
, ,
?
, !
, . . 9.31.
293
. 9.31.
,
, nav content:
chapter09/2col-reverse.css
#nav {
position: absolute;
top: 5em;
right: 1em;
width: 14em;
}
#content {
margin-left: 2em;
margin-right: 16em;
}
. ,
, . ,
(, , . .)
. ,
294
9. CSS
.

.

CSS , .
, , , , , ,
, .
, ,
, .
HTML-
- :
chapter09/2col-fixedwidth.html
<head>
<title>Recipe for Success | Perfect Pizza</title>
<link href=2col-fixedwidth.css rel=stylesheet
type=text/css />
</head>
<body>
<div id=wrapper>
<div id=header>
<h1>Perfect Pizza</h1>
</div>
<div id=content>
<h2>Choosing Your Toppings</h2>
<p>Sed nec erat sed sem molestie congue. Cras lacus </p>
</div>
<div id=nav>
<ul>
295
<li><a href=#>Prepare the Dough</a></li>

<li class=cur><a href=#>Choose Your Toppings</a></li>
<li><a href=#>Pizza Ovens</a></li>
<li><a href=#>Side Salads</a></li>
</ul>
</div>
</div>
</body>
</html>

:
chapter09/2col-fixedwidth.css
body {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
width: 760px;
margin-right: auto;
margin-left: auto;
margin-bottom: 1em;
}
#header {
background-image: url(kitchen.jpg);
height: 200px;
position: relative;
}
#header h1 {
margin: 0;
text-align: right;
width: 750px;
color: #FFFFFF;
font-size: 190%;
position: absolute;
bottom: 0;
left: 0;
background-image: url(black80percent.png);
}
#content {
margin-left: 250px;
296
9. CSS
width: 500px;
padding: 0 10px 0 0;
}
#content h2 {
font-size: 120%;
color: #3333FF;
margin: 0;
padding: 1.4em 0 0 0;
}
#content p {
font-size: 80%;
line-height: 1.6;
}
#nav {
position: absolute;
top: 200px;
left: 0;
width: 230px;
}
#nav ul {
list-style: none;
margin: 3em 0 0 0;
padding: 0;
border: none;
}
#nav li {
font-size: 85%;
}
color: #555555;
display: block;
padding: 1em 0 0 10px;
min-height: 40px;
}
#nav a:hover, #nav li.cur a:link, #nav li.cur a:visited {
color: #FFFFFF;
}
. 9.32, . ,
,
, .

float , -
297
. 9.32.
.
, , (
clear both,
, ) . ,
:
chapter09/2col-fixedwidth-float.css
body {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
width: 760px;
margin-right: auto;
margin-left: auto;
margin-bottom: 1em;
background-image: url(sidebar.gif);
background-repeat: repeat-y;
298
9. CSS
}
#header {
background-image: url(kitchen.jpg);
height: 200px;
position: relative;
}
#header h1 {
margin: 0;
text-align: right;
width: 750px;
color: #FFFFFF;
font-size: 190%;
position: absolute;
bottom: 0;
left: 0;
background-image: url(black80percent.png);
}
#content {
float: right;
width: 500px;
}
#content h2 {
font-size: 120%;
color: #3333FF;
margin: 0;
padding: 1.4em 0 0 0;
}
#content p {
font-size: 80%;
line-height: 1.6;
}
#nav {
float: left;
width: 230px;
}
#nav ul {
list-style: none;
margin: 3em 0 0 0;
padding: 0;
border: none;
}
#nav li {

font-size: 85%;
}
color: #555555;
display: block;
padding: 1em 0 0 10px;
min-height: 40px;
}
#nav a:hover, #nav li.cur a:link, #nav li.cur a:visited {
color: #FFFFFF;
}
#footer {
clear: both;
font-size: 80%;
padding: 1em 0 1em 0;
margin-left: 250px;
color: #999999;
}
. 9.33.
. 9.33.
float
299
300
9. CSS
,
, , .
div,
,
. ID wrapper:
chapter09/2col-fixedwidth.css chapter09/2col-fixedwidth-float.css
()
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 760px;
margin-right: auto;
margin-left: auto;
}
. 9.34.
. 9.34.
, ,
, -
301
,
.
, wrapper, .
position absolute relative ;
(
, position
). , position ,
.
, , position:: absolute, position: relative,
.
.
wrapper position relative:
chapter09/2col-fixedwidth.css ()
#wrapper {
position: relative;
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
}
:
#nav {
position: absolute;
top: 200px;
left: 0;
width: 230px;
}
, ,
:
302
9. CSS
#content {
margin-left: 250px;
}
,
,
. , nav
wrapper,
, wrapper . , wrapper , ,
. . 9.35 , wrapper.
. 9.35. wrapper
. ,
,
303
,
. ,
content float:
chapter09/2col-fixedwidth-float.css ()
#content {
float: right;
width: 500px;
}
#nav {
float: left;
width: 230px;
}
, . wrapper ,
. wrapper !
. 9.36.
.
:
chapter09/2col-fixedwidth-float.html ()
<div id=nav>
<ul>
304
9. CSS
</ul>
</div>
<div id=footer>© 2009 Recipe for success</div>
</div>
</body>
</html>
, wrapper , . 9.37.
, footer,
wrapper.
footer clear both, , wrapper
, , ,
. . 9.38:
#footer {
clear: both;
}
. 9.37. footer
305
. 9.38. footer clear: both
,

- , ,
, ,
,
, - . ,
, , ,
. 9.39.

, , . , .

wrapper, . 9.40:
306
9. CSS
. 9.39.
. 9.40.
307
#wrapper {
position: relative;
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
margin-bottom: 1em;
}
.
wrapper,
; . , :
, .
. ,
, , no-repeat.

,
, .
, , , .
:
, . . 9.41
.
308
9. CSS
. 9.41. ,
, .
shadow-bg.jpg, . 9.42,
div c ID wrapper.
. , shadow-bottom.jpg,
.
. 9.42.
wrapper 20 , , ,
. ,
:
309
chapter09/2col-fixedwidth-shadow.css ()
#wrapper {
position: relative;
text-align: left;
width: 780px;
margin-right: auto;
margin-left: auto;
background-image: url(shadow-bg.jpg);
}
div wrapper2,
content, nav footer wrapper.
<head>
<link href=2col-fixedwidth-shadow.css rel=stylesheet
type=text/css />
</head>
<body>
<div id=wrapper><div id=wrapper2>
<div id=header>
</div>
<div id=content>
<p>Vestibulum dictum massa at odio. In dignissim </p>
</div>
<div id=nav>
<ul>
</ul>
</div>
</div></div>
</body>
</html>
,
( wrapper). ,
padding, :
310
9. CSS
#wrapper2 {
background-repeat:repeat-y;
margin: 0 10px 0 10px;
}
, .
div btm
</div> wrapper.
chapter09/2col-fixedwidth-shadow.html ()
</div>
<div id=btm></div></div>
</body>
</html>
, .
#btm {
background-image: url(shadow-bottom.jpg);
display: block;
height: 13px;
}
, !

CSS

. . 9.43, , , , .
CSS.

,
,
, :
CSS
. 9.43. , CSS
chapter09/3col.html
<head>
<title>Recipe for Success</title>
<link rel=stylesheet type=text/css href=3col.css />
</head>
<body>
<div id=content>
<h1>Recipe for Success</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
<p>Quisque sodales imperdiet enim. Quisque cursus </p>
</div>
<div id=side1>
<form method=post action= id=searchform>
<h3><label for=keys>Search the Recipes</label></h3>
<div>
<input type=text name=keys id=keys class=txt />
<br />
<input type=submit name=Submit value=Submit />
</div>
</form>
311
312
9. CSS
<ul>
<li><a href=#>About Us</a></li>
</ul>
</div>
<div id=side2>
<h3>Please Visit our Sponsors</h3>
<div class=adbox><p>Lorem ipsum dolor sit amet </p></div>
<div class=adbox><p>Sed mattis, orci eu porta </p></div>
<div class=adbox><p>Quisque mauris nunc, mattis </p></div>
</div>
</body>
</html>
chapter09/3col.css
body {
margin: 0;
padding: 0;
background-image: url(tomato_bg.jpg);
}
p {
font: 80%/1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-top: 0;
margin-top: 0;
}
form {
margin: 0;
padding: 0;
}
#content {
margin: 66px 260px 0px 240px;
padding: 10px;
}
#content h1 {
text-align: right;
color: #901602;
}
#side1 {
position: absolute;
width: 200px;
top: 30px;
left: 10px;
}
CSS
#side2 {
position: absolute;
width: 220px;
top: 30px;
right: 10px;
border-left: 1px dotted #CCCCCC;
background-image: url(sm-tomato.jpg);
background-position: top right;
}
#side2 h3 {
margin: 0;
}
.adbox {
margin: 0 0 10px 0;
border: 1px dotted #B1B1B1;
}
#side1 h3 {
color: #621313;
margin: 0;
}
#side1 .txt {
width: 184px;
background-color: #FCF5F5;
border: 1px inset #901602;
}
#side1 ul {
list-style: none;
margin-left: 0;
padding-left: 0;
width: 184px;
}
#side1 li {
border-bottom: 1px solid #E7AFAF;
}
#side1 a:link, #side1 a:visited {
color: #901602;
}
313
314
9. CSS
#side1 a:hover {
color: #621313;
}
. , . 9.44,
div: content,
side1 side2.
. 9.44. XHTML-
CSS-.
: side1 , side2 . , , , :
#side1 {
position: absolute;
width: 200px;
top: 30px;
left: 10px;
}
#side2 {
position: absolute;
315
width: 220px;
top: 30px;
right: 10px;
}
content , content margin:

#content {
margin: 66px 260px 0px 240px;
padding: 10px;
}
. 9.45 .
. 9.45. , CSS
, ,
, . body
side2, , . 9.43.

- , , , , ,
316
9. CSS
. ,
.
, .

. float
. , . , CSS,
, ( ),
,
.
, ,
,
. ,
:
chapter09/3col-alt.html
<head>
<link rel=stylesheet type=text/css href=3col-alt.css />
</head>
<body>
<div id=wrapper>
<div id=content>
<div id=side1>
<div>
<input type=text name=keys id=keys
class=txt /><br />
</div>
</form>
<ul>
317
</ul>
</div>
<div id=main>
<p>Lorem ipsum dolor sit amet, consectetuer </p>
<p>Quisque sodales imperdiet enim. Quisque </p>
</div>
</div>
</div>
<div id=side2>
<div class=adbox><p>Lorem ipsum dolor sit amet </p></div>
<div class=adbox><p>Sed mattis, orci eu porta </p></div>
<div class=adbox><p>Quisque mauris nunc, mattis </p></div>
</div>
<div id=footer>
footer content
</div>
</body>
</html>
wrapper 100%
230 .
( 230 ).

float:
chapter09/3col-alt.css ()
body {
margin: 0;
padding: 0;
}
#wrapper {
width:100%;
float:left;
margin-right: -230px;
margin-top: 66px;
}
#content {
margin-right: 220px;
}
#main {
margin-left: 220px;
}
318
9. CSS
#side1 {
width:200px;
float:left;
}
#side2 {
width: 190px;
padding: 80px 10px 0 10px;
float:right;
}
#footer {
clear:both;
border-top: 10px solid #CECECE;
}
. 9.46, , ,
. , :
float left
right. , , ,
.
. 9.46.

, ,
. ,
. 9.47, CSS,, , .
319
. 9.47. CSS

CSS:
chapter09/gallery.html
<head>
<title>CSS photo album</title>
<link href=gallery.css rel=stylesheet type=text/css />
</head>
<body>
<ul id=albumlist>
<li><img src=thumb1.jpg alt=Candle width=240
height=160 />A light in the darkness</li>
<li><img src=thumb2.jpg alt=Pete Ryder width=240
height=160 />Pete Ryder</li>
<li><img src=thumb3.jpg alt=La Grande Bouffe width=240
height=160 />La Grande Bouffe</li>
<li><img src=thumb4.jpg alt=sculpture width=240
height=160 />Sculpture</li>
<li><img src=thumb5.jpg alt=Duck stretching wings
width=240 height=160 />Splashing about</li>
<li><img src=thumb6.jpg alt=Duck width=240
height=160 />Duck</li>
320
9. CSS
<li><img src=thumb7.jpg alt=Red leaves width=240
height=160 />Red</li>
<li><img src=thumb8.jpg alt=Autumn leaves width=240
height=160 />Autumn</li>
</ul>
</body>
</html>
chapter09/gallery.css
body {
color: #000000;
margin: 0;
padding: 0;
}
#albumlist {
}
#albumlist li {
float: left;
width:240px;
margin-right: 6px;
margin-bottom: 10px;
color: #333333;
}
#albumlist img {
display: block;
}
, . CSS
, . 9.48.
chapter09/gallery.html ()
<ul id=albumlist>
<li><img src=thumb1.jpg alt=Candle width=240
height=160 />A light in the darkness</li>
<li><img src=thumb2.jpg alt=Pete Ryder width=240
height=160 />Pete Ryder</li>
<li><img src=thumb3.jpg alt=La Grande Bouffe width=240
height=160 />La Grande Bouffe</li>
<li><img src=thumb4.jpg alt=sculpture width=240
height=160 />Sculpture</li>
<li><img src=thumb5.jpg alt=Duck stretching wings
width=240 height=160 />Splashing about</li>
<li><img src=thumb6.jpg alt=Duck width=240
height=160 />Duck</li>
321
<li><img src=thumb7.jpg alt=Red leaves width=240

height=160 />Red</li>
<li><img src=thumb8.jpg alt=Autumn leaves width=240
height=160 />Autumn</li>
</ul>
, id
albumlist.
. 9.48.
, float li. :
#albumlist {
}
#albumlist li {
float: left;
width:240px;
}
#albumlist img {
display: block;
}

float left, . 9.49.
, ,
, .
322
9. CSS
.
, , ,
,
.
. 9.49. float
left
.
, :
chapter09/gallery.css ()
#albumlist li {
float: left;
width:240px;
margin-right: 6px;
margin-bottom: 10px;
color: #333333;
}
:
chapter09/gallery.css ()
#albumlist img {
}
CSS-
323
, ,
,
.

. ,
ul:
#albumlist {
width: 600px;
}
, , . 9.50.
. 9.50. ul

CSS-
,
, CSS . -
324
9. CSS
, , , , CSS,, .
CSS-
CSS 2.1 display, :
table, table-row table-cell. HTML-
- .
SS- Firefox 2,
Opera 9.5, Safari 3, Chrome 1 Internet Explorer 8. , Internet Explorer 6 7 ,
, .
CSS- ,
. ,
display table,
, .
, ,
.
HTML- :
chapter09/2col-fixedwidth-tables.htm ()
<head>
<link href=2col-fixedwidth-table.css rel=stylesheet
type=text/css />
</head>
<body>
<div id=wrapper>
<div id=header>
</div>
<div id=main>
<div id=nav>
<ul>
<li class=cur><a href=#>Choose Your Toppings</a>
</li>
CSS-
325

</ul>
</div>
<div id=content>
<p>Vestibulum dictum massa at odio. In dignissim </p>
</div>
</div>
</div>
</body>
</html>
, div main, content nav. ,

: CSS-
-
, . clear: both; footer, ,
div.
CSS- . -,
wrapper,
; main
display table, content nav
table-cell. nav, margin-left clear
footer,
. CSS-:
chapter09/2col-fixedwidth-tables.css
#wrapper {
position: relative;
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
margin-bottom: 1em;
}
#main {
display: table;
}
326
9. CSS
#content {
display: table-cell;
width: 500px;
}
#nav {
width: 230px;
background-repeat:repeat-y;
}
#footer {
font-size: 80%;
padding: 1em 0 1em 0;
color: #999999;
}
,
, , . CSS-
- .
, , .
, CSS-:
chapter09/3col-table.html ()
<head>
<link rel=stylesheet type=text/css href=3col-table.css />
</head>
<body>
<div id=wrapper>
<div id=content>
<div id=side1>
CSS-
327
<div>
<input type=text name=keys id=keys
class=txt /><br />
</div>
</form>
<ul>
</ul>
</div>
<div id=main>
<p>Lorem ipsum dolor sit amet, consectetuer </p>
<p>Quisque sodales imperdiet enim. Quisque </p>
</div>
<div id=side2>
<div class=adbox><p>Lorem ipsum dolor sit </p></div>
<div class=adbox><p>Sed mattis, orci eu </p></div>
<div class=adbox><p>Quisque mauris nunc, </p></div>
</div>
</div>
</div>
<div id=footer>
footer content
</div>
</body>
</html>

, . CSS- :
chapter09/3col-table.css ()
#wrapper {
width:100%;
}
#content {
display: table;
width: 100%;
}
#main {
}
#side1 {
328
9. CSS
width:200px;
}
#side2 {
width: 190px;
padding: 80px 10px 0 10px;
}
#footer {
border-top: 10px solid #CECECE;
}
CSS-
- : , . . .
.
, , ,
.
, , . , . .
,
Internet
Explorer 6 7. ,
, IE6 7
. , CSS-
Internet Explorer 6 7 .
, (Kevin Yank) Everything You
Know About CSS Is Wrong, SitePoint.1
.
, , , , 1
http://www.sitepoint.com/books/csswrong1/
329
. , ,
, , .

CSS,, , . CSS
, ,
CSS Zen Garden.1
http://www.csszengarden.com/

A
<a>, , 30
accesskey, , 185
Adobe BrowserLab, , 204
all, , 236
alt, , 232
B
background-attachment, , 79
background-color, , 168
background-image, , 72
background-position, , 76
background-repeat, , 74
background, , 79
<blockquote>, , 59
Boot Camp, , 201
border-collapse, , 139
border-radius, , 279
border, , 72, 105, 168
braille, , 236
BrowserCam, , 204
Browser Shots, , 204
C
<caption>, , 135
clear, , 267
<col>, , 150
<colgroup>, , 152
color, , 168
CrossBrowserTesting.com, , 204
CSS-, 324
cursor, , 116
embossed, , 236
F
<fieldset>, , 180
Fire Vox, Firefox, 235
first-child, , 31, 50
float, , 110, 264
:focus, , 194
font, , 168
font-family, , 35
font-size, , 37
for, , 175
G
Gecko, , 198
GIF, , 87
H
handheld, , 236
hasLayout, , 217
:hover, , 97
HTML, 22
HTML 4.01 Frameset, 212
HTML 4.01 Strict, 212
HTML 4.01 Transitional, 212
I
id, , 27
!important, , 32
@import, , 208
<input>, , 168
Internet Explorer, , 205
, 206
display, , 66, 96, 104, 171, 260,

324
<!DOCTYPE>, , 211
em, , 39
, 291
KHTML, , 198
Knoppix, , 200
Konqueror, , 203
JAWS, , 234
jQuery, , 147
331
<label>, , 173
<legend>, , 180
line-height, , 232
list-style-image, , 64
list-style-type, , 62
Litmus, , 204
localhost, 234
Lynx, , 232
VirtualBox, , 201, 202

VMWare Fusion, , 202
VMWare Workstation, , 201,
202
M
margin, , 55, 261
media, , 236
@media, , 237
Microsoft SuperPreview, , 204
min-height, , 217
mouseout, , 148
mouseover, , 148
W
W3C CSS Validator, , 227
W3C Validator, , 227
WebKit, , 198
width, , 168
XHTML, 22
XHTML 1.0 Frameset, 212
XHTML 1.0 Strict, 212
XHTML 1.0 Transitional, 212
XHTML 1.1, 212
XML, 212
x-ua-compatible, , 223
NiftyCube, , 283
nth child, , 146
, 246
, 230
padding, , 55, 168, 261

Parallels Desktop, , 202
Parallels Workstation, , 201
PNG, , 87
, 219
position, , 218, 275
, 24
, 96
, 198
, 198
rel, , 24
, 215
, 32
, 201

, 202
, 107
, 112
, 23
, 23
, 22
, 55
, 125
S
<select>,
, 186
Spanky Corners, , 285
style, , 22
<style>, , 21
summary, , 135
T
text-align, , 57, 60
text-decoration, , 44, 52
text-height, , 56
text-indent, , 60
text-transform, , 61
<th>, , 136
U
Ubuntu, , 200
, 68
, 58
, 102
332
,
31
, 230
, 37, 39, 41, 244
, , 51
, 279
, 257
, , 70
, 89
, 188
, , 56
, 32
CSS, 153
, 122
, 27, 32
, 184
, 26, 257
, 41, 77
, 41
, 42
, 105
, 172
, , 69
, 34
, 231
-, 231
, , 116
, 249
, 310
, 294
, 56

, 126
, 105
, 118
, 93
, 92

, 43
JavaScript, 149
, 328
, 206
, 265
, 20, 24
, 218
, 55
, 66
, 21
,
211
, 171
, 38
, 38
, 265
, 273, 277
, 273
, 301
, 34
, 54
, 24
, 24
, 228
, , 87
, 41
, 30
, 38

, 139
, 109

, 43
, 137
, 42, 211, 264
, 78, 286
, 24
, 20, 24
ID, 27
, 115, 170, 188
, 28
, 26
, 28
, 30
333

, 29
, 25
CSS, 24
, 99
, 62
, 64
,
66
, 236
, 96, 97
, 46
, 44
, 211
, 22
, 38, 238
, 137
, 150
, 132, 133
, 57
,
61
, 59
, 84
, 60
, 232
, , 307
, 199
, 68
, 214
, 72
, 74
, 79
, , 307
, 164
, 188
, 176
, 165
, 180
,
171
, 168
, , 318
, 277
, 35
, 37, 39, 41, 244
, 36
, 235
, 258
, 258
, 87
, 175

Язык

CSS 100 и 1 совет

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

CSS 100 и 1 совет

Загружено:

Авторское право:

Доступные форматы

CSS

9. CSS ........................ 257

( ), <h1> <h2>. , , . . h1 , h2 , h1,

rel stylesheet, type text/

<p>So will this one.</p>

Internet Explorer 6 :first-child. , IE6 :first-child, , , .

. SitePoint CSS Reference.1

Helvetica, Futura, Bodoni, Times, Palatino, Courier, Gill Sans,

, , : Verdana,, Windows,, Mac Geneva.. , ,

Internet Explorer 8, Medium, ,

. 2.1. font-size 1em

. 2.2. font-size 1em

, . 2.3, <em> </em> , p:

underline none text-decoration :

. :link, :visited, :hover, :active.

, :first-child Internet Explorer 6. , , , , - ,

. CSS margin, , , . padding, ,

<span> class, CSS. ,

hilite; . 2.16. stuffed

. 2.18 justify text-align.

, . 2.24, list-style-type square:

list-style-type : disc, circle, decimal-leading-zero, decimal, lower-roman, upper-roman, lower-alpha,

. list-styleimage ( li). ( ul ol),

h1, h2, h3, h4, h5, h6, ul, ol {

background-position: bottom right;

. 3.13. html body

PNG . , , Internet Explorer 6 .

, ... , Internet Explorer 7, :hover , Internet Explorer

. 4.8, CSS . display li

, , li. , display inline , . 4.9.

border-bottom: 1px solid #717171;

. 4.16. Contact Us contact

. 4.1 CSS 2.1

. 4.1 CSS- cursor.

4.2. cursor CSS3

ul#sitemap li a:link, ul#sitemap li a:visited{

ul#nav li.contact a:hover {

th , . ; scope <th>. col (, ) row (, ) ,

Internet Explorer 6 : dotted

. 5.8. border table td

. 5.11. Internet Explorer 6 JavaScript

caption, clmonth, (th)

font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;

. 6.1 , Safari Mac OS X.

, HTML form, input, textarea select

Next >> (. 6.6)!

<fieldset> <legend>, HTML-,

. 6.11. <fieldset> <legend>

. 6.13. P Personal A Address

akey , underline text-decoration:

input. ( Safari, Mac),

CSS- hilite, , :focus:

Linux, CD-. , Linux . Live CD Linux Knoppix;

: , , Windows Linux,, . , https://help.ubuntu.com/community/WindowsDualBoot.

. 7.1. Internet Explorer 8 Safari Mac OS X Parallels

VMWare Workstation Parallels Workstation Windows

Internet Explorer Windows

IE7 IE8. Developer Tools Internet Explorer 8

Microsoft Internet Explorer,

, , YUI Graded Browser Support,1

Netscape 4, Internet Explorer 4 @import,

4.8 evolt.org (http://

. 7.2. Netscape 4.8