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

-

htmlbook.ru


HTML , , ,
, - . (CERN),
HTML , , , ,
. - ,
, ,
. lib.ru.
, ,
. Netscape HTML ,
.
Netscape, , . Netscape
90% .
Netscape ,
-. ,
.
, , .
, .
, HTML-,
, .
Netscape , Microsoft
Internet Explorer, .
Netscape Internet Explorer , ,
,
.
CSS (Cascading Style Sheets,
), HTML CSS. ,
, .
,
Cascading Style Sheets Level 2, CSS2. Cascading Style Sheets
Level 2 Revision 1 (CSS 2.1), . ,
, , ,
. , ,
, ,
.
,
. , yandex.ru, lenta.ru ,
.
.
, ,
CSS.
,
, .
,
, .. .

, ,
.
, , .
, .
, , .
? ,
, , , , .
,
, .


, ,
, , , . ,

.

, .
, .
,
,
.


,
, ,
.
, . ,
, , . ,
, ,
. ,
.
, .
.
I. CSS. CSS
.
II. . ,
. <!DOCTYPE>,
.
III. . ,
: , , .
.
IV. . ,
, .

V. Internet Explorer. ,
.
VI. , . : ,
, , .
VII. -.
, , , .
VIII. .
.
IX. HTML5. HTML5,
.
X. .
, - .

,
vlad@htmlbook.ru.



.
<strong> , .
align , , .
right .
layer .
File > Open .
Tab .

:
;
;
, ,
, ;
, .
, .

, , .
.
IE Internet Explorer.
Cr Google Chrome.
Op Opera.
Sa Apple Safari.
Fx Mozilla Firefox.
,
.

CSS


,
. .

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

PSPad
,
.

http://www.pspad.com/ru/download.php

Notepad++
. ,
.

http://notepad-plus.sourceforge.net/ru/download.php?lang=ru

, -. - ,
,
. ,
, , ,
.
: Firefox, Internet Explorer, Opera, Safari Chrome.

Mozilla Firefox
, .
, , .
Firefox , ,
, ,
.
Firefox , Mozilla.

Firefox, FF (.), Fx (.), (.), (.), (.)



http://www.mozilla.ru/products/firefox/

Microsoft Internet Explorer


,
Windows. . ,
,
Internet Explorer. ,
- .

MSIE, IE (.), (.), , (.)



http://www.microsoft.com/rus/windows/internet-explorer/

Opera
, ,
.

, Op (.)

http://opera.ru

Safari
Apple iPhone MacOS
Apple. Windows.

http://www.apple.com/ru/safari/

Chrome
, 2008
. Google.

, Cr (.)

http://www.google.com/chrome?hl=ru

CSS
HTML -, ,
. -, CSS
(Cascading Style Sheets, ). -,
HTML CSS. ? HTML
, . CSS ,
.
, ,
. , .
- , , HTML- CSS-.
.
CSS . , ,
.

?
, . , , . 1.1.

. 1.1. -, HTML
-, . ,
(. 1.2).

. 1.2. -, HTML CSS


, , , ( 1.1).
1.1.

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1></h1>
<p> ,
. , ,
, , ,
, , . ,
.
, ,
. , ,
. ,
.</p>
</body>
</html>
HTML <link
rel="stylesheet" href="style.css" type="text/css" />.
style.css. 1.2.
1.2. style.css
body {
font-family: Arial, Verdana, sans-serif; /* */
font-size: 11pt; /* */
background-color: #f0f0f0; /* - */
color: #333; /* */
}
h1 {
color: #a52a2a; /* */
font-size: 24pt; /* */
font-family: Georgia, Times, serif; /* */
font-weight: normal; /* */
}
p {
text-align: justify; /* */
margin-left: 60px; /* */
margin-right: 10px; /* */
border-left: 1px solid #999; /* */
border-bottom: 1px solid #999; /* */
padding-left: 10px; /* */
padding-bottom: 10px; /* */
}

style.css <body>, <h1> <p>.


, HTML .
-,
.
.


, .
, .


, - .
HTML, .
, , <H1>,
24 .


, . 1.1
.


, .
. Internet
Explorer > >
, . 1.3.

. 1.3. Internet Explorer

Opera > >


> > (. 1.4).

. 1.4. Opera
,
.
, .


- ,
. .



, , css,
<link>. <head>, 1.3.
1.3.

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style/mysite.css" />
<link rel="stylesheet" type="text/css"
href="http://www.htmlbook.ru/main.css" />
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>
<link> rel type ,
. href CSS-,
, . , ,
.
mysite.css <link> 1.4.
1.4.
H1 {
color: #000080;
font-size: 2em;
font-family: Arial, Verdana, sans-serif;
text-align: center; /* */
}
P {
padding-left: 20px;
}
, , CSS.
HTML- , ..
.
.
, HTML- .


CSS
-.
, ,
<style>, 1.5.

1.5.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 {
font-size: 1.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
<h1>,
- (. 1.5).

. 1.5. ,



-. style,
( 1.6).
1.6.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<p style="font-size: 120%; font-family: monospace;
color: #cd66cc"> </p>
</body>
</html>
<p> style,
(. 1.6).

. 1.6.


. , ,
,
.
CSS ,
. .
, . 1.7
.
1.7.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 {
font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
</style>
</head>
<body>
<h1 style="font-size: 36px;
font-family: Times, serif; color: red"> 1</h1>
<h1> 2</h1>
</body>
</html>
36
, (. 1.7).

. 1.7.

CSS
CSS-
@import. ,
. .
@import url(" ") ;
@import " " ;
@import
url . 1.8 ,
.
1.8. CSS

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
@import url("style/mysite.css");
H2 {
font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
</style>
</head>
<body>
<h1> 1</h1>
<h2> 2</h2>
</body>
</html>
mysite.css, style.
,
( 1.9).
1.9.
@import "style/print.css";
@import "style/main.css";
BODY {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 90%;
background: white;
color: black;
}
mysite.css,
, 1.3, <link>.



, . ,
,
. CSS ,
. . 1.1
.
. 1.1.

all

. .

aural

,
. , , .

braille

, ,
.

handheld .
print

projection .
screen

tv

CSS @import @media,


,
.
@media @import -.
@ , .
@ .
.
@import .
, ,
1.10.
1.10.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
@import "style/main.css" screen; /* */
@import "style/print.css" print, handheld; /* */
</style>
</head>
<body>
<p>...</p>
</body>
</html>
main.css
, print.css

.
Internet Explorer
. ,
.
@media
.
@media

}
@media

1 {
1
2 {
2

@media , . 1.1,
, .
, . 1.11 ,
.
1.11.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
@media screen { /* */
BODY {
font-family: Arial, Verdana, sans-serif; /* */
font-size: 0.9em; /* */
color: #000080; /* */
}
H1 {
background: #faf0e6; /* */
border: 2px dashed maroon; /* */
color: #a0522d; /* */
padding: 7px; /* */
}
H2 {
color: #556b2f; /* */
margin: 0; /* */
}
P {
margin-top: 0.5em; /* */
}
}
@media print { /* */
BODY {
font-family: Times, 'Times New Roman', serif; /* */
}
H1, H2, P {
color: black; /* */
}
}
</style>
</head>
<body>
<h1> </h1>
<h2> </h2>
<p> ,
.
,
. ,
, .</p>
</body>
</html>

, .
, , . 1.8
. 1.9.

. 1.8.

. 1.9. ,
, CSS print ,
. print screen,
. . 1.9.
@media ,
. CSS-
, .
<link> media,
, . 1.1.
1.12 , CSS-,
.
1.12.

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link media="print, handheld" rel="stylesheet"
href="style/print.css" type="text/css" />
<link media="screen" rel="stylesheet"
href="style/main.css" type="text/css" />

</head>
<body>
<p>...</p>
</body>
</html>
, ,
.
, .
, media <style>
( 1.13).
1.13.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css" media="handheld">
BODY {
width: 320px; /* */
}
</style>
</head>
<body>
<p> ,
.
,
. ,
, .</p>
</body>
</html>
handheld 320 .

CSS
, , HTML.
,
. , .
.

, , TABLE, ,
<table>, , ,
.
, .
CSS , , ,
. , 1.14
.
1.14.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
H1 { color: #a6780a; font-weight: normal; }
H2 {
color: olive;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1> 1</h1>
<h2> 2</h2>
</body>
</html>
H1 , H2
.
,
.
.


, .


,
1.15.
1.15.
td { background: olive; }
td { color: white; }
td { border: 1px solid black; }

. ,
. .
( 1.16).
1.16.
td {
background: olive;
color: white;
border: 1px solid black;
}
.

,
, ,
, , ( 1.17).
1.17.
P { color: green; }
P { color: red; }
P , .
red , .
.
, , ,
.

. , color,
, .

,
, .
, . ,
, .
,
.
, , /* ... */
( 1.18).
1.18. CSS-
/*
*/

htmlbook.ru

div {
width: 200px; /* */
margin: 10px; /* */
float: left; /* */
}
, CSS-,
. .


: ,
, , , , .

.
,
( 1.19).
1.19.
' ""'
" ''"
" \"\""
,
. ,
, .

, 0 9 ,
( 1.20).
1.20.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
font-weight: 600; /* */
line-height: 1.2; /* */
}
</style>
</head>
<body>
<p> </p>
</body>
</html>
, . .7 0.7
.

,
. , 100%
,
( 1.21).
1.21.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> </title>
<style type="text/css">
TABLE {
width: 100%; /* */
background: #f0f0f0; /* */
}
</style>
</head>
<body>
<table>
<tr><td> </td></tr>
</table>
</body>
</html>
, ,
56.8%, .

, CSS
. ,
.


,
. . 1.2
.
. 1.2.

em

ex

px

em , (
font-size). ,
, . 1em
, .
em, , 1em 100% .
ex x . ex
, em, , , ,
.
, ,
, .
. 1.22 em .
1.22.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 { font-size: 30px; }
P { font-size: 1.5em; }
</style>

</head>
<body>
<h1> 30 </h1>
<p> 1.5 em</p>
</body>
</html>
(. 1.10).

. 1.10.


, . .
1.3 .
. 1.3.

in

(1 2,54 )

cm

mm

pt

(1 1/72 )

pc

(1 12 )

, , ,
. , ,
, ,
. . 1.23
.
1.23.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 { font-size: 24pt; }
P { margin-left: 30mm; }
</style>
</head>
<body>
<h1> 24 </h1>
<p> 30 </p>
</body>
</html>
(. 1.11).

. 1.11.
, width: 30px.
, ,
. (margin: 0).

: , ,
RGB, RGBA, HSL, HSLA.


. ,
, , , 16.
: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. 10 15 .
15 .
, 255 FF .
,
#, #666999. ,
00 FF. ,
#rrggbb, ,
, . #rgb,
. , #fe0 #ffee00.


. . 1.4 ,
, RGB, HSL .
. 1.4.

RGB

HSL

white

#ffffff #fff

rgb(255,255,255)

hsl(0,0%,100%)

silver

#c0c0c0

rgb(192,192,192)

hsl(0,0%,75%)

gray

#808080

rgb(128,128,128)

hsl(0,0%,50%)

black

#000000 #000

rgb(0,0,0)

hsl(0,0%,0%)

maroon

#800000

rgb(128,0,0)

hsl(0,100%,25%)

red

#ff0000 #f00

rgb(255,0,0)

hsl(0,100%,50%)

orange

#ffa500

rgb(255,165,0)

hsl(38.8,100%,50%)

yellow

#ffff00 #ff0

rgb(255,255,0)

hsl(60,100%,50%)

olive

#808000

rgb(128,128,0)

hsl(60,100%,25%)

lime

#00ff00 #0f0

rgb(0,255,0)

hsl(120,100%,50%)

green

#008000

rgb(0,128,0)

hsl(120,100%,25%)

aqua

#00ffff #0ff

rgb(0,255,255)

hsl(180,100%,50%)

blue

#0000ff #00f

rgb(0,0,255)

hsl(240,100%,50%)

navy

#000080

rgb(0,0,128)

hsl(240,100%,25%)

teal

#008080

rgb(0,128,128)

hsl(180,100%,25%)

fuchsia

#ff00ff #f0f

rgb(255,0,255)

hsl(300,100%,50%)

purple

#800080

rgb(128,0,128)

hsl(300,100%,25%)

RGB
, ,
. 0 255.
, 100% 255.
rgb, , ,
rgb(255, 128, 128) rgb(100%, 50%, 50%).

RGBA
RGBA RGB, -,
. 0 , 1 ,
0.5 .
RGBA CSS3, CSS- .
, CSS3
. , RGB background-color
, background .
. . 1.4 ,
RGBA; , , .
. 1.4. RGBA
Internet Explorer
6.0

7.0

8.0

9.0

Chrome
5.0

6.0

7.0

Opera
8.0

9.2

9.6 10 11

Safari
3.1

4.0

5.0

Firefox
2.0

3.0

3.6

4.0

HSL
HSL Hue (), Saturate ()
Lightness (). (. 1.12) . 0
, 120 , 240 .
0 359.

. 1.12.
, 0% 100%. 0%
, 100% .

, 0% 100%.
, , 0% 100%
.
HSL . 1.4. Internet Explorer
(. 1.5).
. 1.5. HSL
Internet Explorer
6.0

7.0

8.0

9.0

Chrome
5.0

6.0

7.0

Opera
8.0

9.2

9.5 10 11

Safari
3.1

4.0

5.0

Firefox
2.0

3.0

3.6

4.0

HSLA
HSLA HSL, -,
. 0 , 1 ,
0.5 . HSL
(. 1.6).
. 1.6. HSLA
Internet Explorer
6.0

7.0

8.0

9.0

Chrome
5.0

6.0

7.0

Opera
8.0

9.2

9.6 10 11

Safari
3.1

4.0

5.0

Firefox
2.0

3.0

3.6

4.0

RGBA, HSL HSLA CSS3,


.
1.24 -.
1.24.

XHTML 1.0 CSS 2.1 CSS 3 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
BODY {
background-color: #F9F2E3;
}
H2 {
background-color: rgb(214,86,43);
color: rgba(255,255,255,.9);
padding: 10px;
}
P {
color: green;
}
DIV {
background-color: hsl(60,100%,25%);
color: hsla(120,100%,50%,0.1);
}
</style>
</head>
<body>
<h2></h2>
<p>
.

. ,
!</p>
<div>!</div>
</body>
</html>
. 1.13.

. 1.13. -

, ,
. url(),
.
( 1.25).
1.25.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
BODY {
background: url('http://webimg.ru/images/156_1.png') no-repeat;
}
DIV {
background: url(images/warning.png) no-repeat;
padding-left: 140px;
}
</style>
</head>
<body>
<div>, !</div>
</body>
</html>
BODY ,
DIV .


,
. .
: P { text-align: right; }
: P { text-align: "right"; }

inherit
, ,
. , ,
. Internet Explorer 7.0
inherit.

initial
initial .
, , ,
, . initial
CSS3 (. 1.7).
. 1.7. initial

Internet Explorer

Chrome

2.0+

initial

Opera

Safari

Firefox

2.0+

1.0+

initial

-moz-initial

-moz-initial ,
CSS.
1.26 initial.
1.26. initial

XHTML 1.0 CSS 2.1 CSS 3 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>initial</title>
<style type="text/css">
H2 {
color: #ffb734;
font-family: Arial, sans-serif;
}
P {
color: green;
}
.initial {
color: initial;
color: -moz-initial;
font-family: initial;
font-family: -moz-initial;
}
</style>
</head>
<body>
<h2> </h2>
<p> <span class="initial">
</span>,
. ,
.
, ,
.</p>
<h2 class="initial"> </h2>
</body>
</html>
. <span>
, <p>. initial
, .
, . ,
<h1> initial, initial (. 1.14).

. 1.14. initial


HTML
, : , , .. .
{ 1: ; 2: ; ... }
, ,
. ,
.
, ( 1.27).
1.27. <p>

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
P {
text-align: justify; /* */
color: green; /* */
}
</style>
</head>
<body>
<p>
.
,
.</p>
</body>
</html>
.
, <p>.
, ,
, <body>.


, -
.
.
. { 1: ; 2: ; ... }
, , .
(-)
(_). .
HTML, , class
( 1.28).
1.28.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P { /* */
text-align: justify; /* */
}
P.cite { /* cite */
color: navy; /* */
margin-left: 20px; /* */
border-left: 1px solid navy; /* */
padding-left: 15px; /* */
}
</style>
</head>
<body>
<p> .
, ,
,
,
.</p>
<p class="cite">
.</p>
</body>
</html>
. 1.15.

. 1.15. ,
(
), , cite
.

, , . .
. { 1: ; 2: ; ... }
, ( 1.29).
1.29.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.gost {
color: green; /* */
font-weight: bold; /* */
}
.term {
border-bottom: 1px dashed red; /* */
}
</style>
</head>
<body>
<p> <span class="gost"> 12.1.003-83 &quot;.
&quot;</span>,

.
<b class="term"> </b>,

1000&nbsp;.</p>
</body>
</html>
<span> <b> . 1.16.

. 1.16. ,
, -:
, , . 1.30
.
1.30.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table.jewel {
width: 100%; /* */
border: 1px solid #666; /* */
}
th {
background: #009383; /* */
color: #fff; /* */
text-align: left; /* */
}
tr.odd {
background: #ebd3d7; /* */

}
</style>
</head>
<body>
<table class="jewel">
<tr>
<th></th><th></th><th> </th>
</tr>
<tr class="odd">
<td></td><td></td><td>10</td>
</tr>
<tr>
<td></td><td></td><td>9</td>
</tr>
<tr class="odd">
<td></td><td></td><td>7</td>
</tr>
<tr>
<td></td><td></td><td>8</td>
</tr>
<tr class="odd">
<td></td><td></td><td>9</td>
</tr>
</table>
</body>
</html>
. 1.17. odd
. , <tr>
.

. 1.17.


,
class , . ,
.
, , ,
. 1.31
.
1.31.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.level1 { font-size: 1em; }
.level2 { font-size: 1.2em; }
.level3 { font-size: 1.4em; }
.level4 { font-size: 1.6em; }
.level5 { font-size: 1.8em; }
.level6 { font-size: 2em; }
A.tag {
color: #468be1; /* */
}

</style>
</head>
<body>
<div>
<a href="/term/2" class="tag level6">Paint.NET</a>
<a href="/term/69" class="tag level6">Photoshop</a>
<a href="/term/3" class="tag level5"></a>
<a href="/term/95" class="tag level5"></a>
<a href="/term/11" class="tag level4"></a>
<a href="/term/43" class="tag level3"></a>
<a href="/term/97" class="tag level2"></a>
<a href="/term/44" class="tag level2"></a>
<a href="/term/16" class="tag level1"></a>
<a href="/term/33" class="tag level1"></a>
<a href="/term/14" class="tag level1"></a>
<a href="/term/27" class="tag level1"></a>
</div>
</body>
</html>
. 1.18.

. 1.18.
.layer1.layer2, layer1 layer2
. ,
layer1 layer2 ( 1.32).
1.32.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.layer1 { color: red; }
.layer2 { color: blue; }
.layer1.layer2 {color: green; }
</style>
</head>
<body>
<p class="layer1"> </p>
<p class="layer2"> </p>
<p class="layer1 layer2"> </p>
</body>
</html>
IE6 .a.b .b, ..
, .
layer2 , , .


( ID ) ,
.
.
# { 1: ; 2: ; ... }
(#),
.
(-) (_). .
, ,
.
,
id, ( 1.33).
.
1.33.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#help {
position: absolute; /* */
right: 20px; /* */
top: 50px; /* */
width: 225px; /* */
padding: 5px; /* */
background: #f0f0f0; /* */
display: none; /* */
}
</style>
</head>
<body>
<p><a href="#"
onclick="document.getElementById('help').style.display='block'">
</a></p>
<div id="help">
,
, , .
, .
</div>
</body>
</html>
<div> help.
,
onclick.
, .
.
# { 1: ; 2: ; ... }
, .
1.34 <p>.
1.34.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
color: green; /* */
font-style: italic; /* */
}
P#opa {
color: red; /* */
border: 1px solid #666; /* */
background: #eee; /* */
padding: 5px; /* */
}
</style>
<script type="text/javascript">
function newText() {
document.getElementById("opa").innerHTML = ' ';
}
</script>
</head>
<body onload="newText()">
<p> </p>
<p id="opa"></p>
</body>
</html>
. 1.19.

. 1.19. -
opa, <p>.
.
innerHTML.


- .
, ,
. , <b> <p>.
, ,
.
. ,
.
1 2 { ... }
2 1, .
<1>
<2> ... </2>
</1>
1.35.
1.35.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
P B {
font-family: Times, serif; /* */
font-weight: bold; /* */
color: navy; /* */
}
</style>
</head>
<body>
<div><b> </b></div>
<p><b>
</b></p>
</body>
</html>
<b> ,
<p>. , . 1.19.

. 1.19.
.
.

. ,

, 10.2.
1.36.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
A {
color: green; /* */
}
.menu {
padding: 7px; /* */
border: 1px solid #333; /* */
background: #fc0; /* */
}
.menu A {
color: navy; /* - */
}
</style>
</head>
<body>
<div class="menu">
<a href="1.html"> </a> |
<a href="2.html"> </a> |
<a href="3.html"> </a>
</div>
<p><a href="text.html"> </a></p>
</body>
</html>
. 1.20.

. 1.20.
. ,
A, , (.menu A)
menu.
, ,
-.


-,
. .
<p>Lorem ipsum <b>dolor</b> sit amet.</p>
<b> <p>,
. <p> <b>.
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
<var> <b> . ,
<p>, .
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing
<tt>elit</tt>.</p>
<b> <i>, <i> <tt>. <b> <tt>
- , <i>.
(+),
. .
1 + 2 { }
, 2,
, 1 .
1.37 .
1.37.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
B + I {
color: red; /* */
}
</style>
</head>
<body>
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i>
adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
</body>
</html>
. 1.22.

. 1.22.

<i>,
<b>. ,
consectetuer . ,
<i>, <b> , .
.
.
, .
. ,
sic, <h2>.
( 1.38). .
1.38.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H2.sic {
font-size: 140%; /* */
color: maroon; /* */
font-weight: normal; /* */
margin-left: 30px; /* */
margin-bottom: 0px; /* */
}
H2.sic + P {
background: #ddd; /* */
margin-left: 30px; /* */
margin-top: 0.5em; /* */
padding: 7px; /* */
}
</style>
</head>
<body>
<h1> </h1>
<h2> </h2>
<p> L x W x H, L -
, W - , H - .
,
. ,
, ,
, 2L x 2W.
,
, , .</p>
<h2 class="sic"> </h2>
<p>
.</p>
<p>
, .
, .</p>
</body>
</html>
. 1.23.

. 11.2.
( <p>), H2.sic + P
<h2>,
sic.
,
, . ,
<h1> <h2>, .
<h2> <p>, .
1.39 .
1.39.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 + H2 {
margin-top: -10px; /* 2 */
}
H2 + P {
margin-top: -1em; /* */
}
</style>
</head>
<body>
<h1> 1</h1>
<h2> 2</h2>
<p>!</p>
</body>
</html>
,
margin-top.
, .


,
. ,
( 1.40).
1.40.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem ipsum</title>
</head>
<body>
<div class="main">
<p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat.</p>
<p><strong><em>Ut wisis enim ad minim veniam</em></strong>,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
, .
,
(. 1.24).

. 1.24.
.
<div> <p>. <strong>
<div>, <p>.
. ,
.
.
1 > 2 { }
2, , 1.
1.40, P > EM { color: red }
, <em> <p>,
. - , <em>
<strong>, .
.
. ,

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

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
DIV I { /* */
color: green; /* */
}
P > I { /* */
color: red; /* */
}
</style>
</head>
<body>
<div>
<p>, ,
.
<i> </i>,
<i></i>.</p>
</div>
</body>
</html>
. 1.25.

. 1.25. ,
<i> : ( <i>
<div>) ( <i> <p>).
,
. , ,
.
DIV I , .
, ,
.
, ,
.
,
, , . 1.42
.
. ,
(. 1.26).

. 1.26.
LI float.

( 1.42).
1.42.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
UL#menu {
margin: 0; padding: 0; /* */
}
UL#menu > LI {
list-style: none; /* */
width: 100px; /* */
background: #b3d9d2; /* */
color: #333; /* */
padding: 5px; /* */
font-family: Arial, sans-serif; /* */
font-size: 90%; /* */
font-weight: bold; /* */
float: left; /* */
}
LI > UL {
list-style: none; /* */
margin: 0; padding: 0; /* */
border-bottom: 1px solid #666; /* */
padding-top: 5px; /* */
}
LI > A {
display: block; /* */
font-weight: normal; /* */
font-size: 90%; /* */
background: #fff; /* */
border: 1px solid #666; /* */
border-bottom: none; /* */
padding: 5px; /* */
}
</style>
</head>
<body>
<ul id="menu">
<li>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>

<li><a href="#"></a></li>
</ul>
</li>
</ul>
</body>
</html>
,
, ,
.


,
. , <input> ,
type.
INPUT .
, CSS .
.
.


, .
. .
[] { }
[] { }
, .
.
1.43 <q>, , title.
1.43.
XHTML 1.0

CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
Q {
font-style: italic; /* */
quotes: "" ""; /* */
}
Q[title] {
color: maroon; /* */
}
</style>
</head>
<body>
<p> , : <q>
, </q>,
:
<q title=" -"> , -
, ,
</q>.</p>
</body>
</html>
. 1.27. Safari Chrome ,
.

. 1.27. title
<q>, title.
, Q[title] ,
Q.


,
. .
[=""] { }
[=""] { }
, .
.
1.44 , <a> target
_blank. ,
.
1.44.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
A[target="_blank"] {
background: url(images/blank.png) 0 6px no-repeat;
/* */
padding-left: 15px; /* */
}
</style>
</head>
<body>
<p><a href="1.html"> </a> |
<a href="link2" target="_blank"> </a></p>
</body>
</html>
(. 1.28).

. 1.28. target

background.
,
no-repeat, .


,
. .
[^=""] { }
[^=""] { }
,
. .
.
, ,
. <a> ,
. , ,
HTTP.
http://, A, 1.45.
1.45.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
A[href^="http://"] {
font-weight: bold /* */
}
</style>
</head>
<body>
<p><a href="1.html"> </a> |
<a href="http://htmlbook.ru" target="_blank">
htmlbook.ru</a></p>
</body>
</html>
(. 1.29).

. 1.29.
.
1.44 ,
, .


,
. .

[$=""] { }
[$=""] { }

. .
ru
com, 1.46.
1.46.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
A[href$=".ru"] { /* .ru */
background: url(images/ru.png) no-repeat 0 6px;
/* */
padding-left: 12px; /* */
}
A[href$=".com"] { /* .com */
background: url(images/com.png) no-repeat 0 6px;
padding-left: 12px;
}
</style>
</head>
<body>
<p><a href="http://www.yandex.com">Yandex.Com</a> |
<a href="http://www.yandex.ru">Yandex.Ru</a></p>
</body>
</html>
, com ru.
(. 1.30).
, href .ru .com.
, (http://www.yandex.ru/)
(http://www.yandex.ru/fun.html), .
*=.

. 1.30.


, ,
. ,
, .
.
[*=""] { }
[*=""] { }
1.47 , href
htmlbook.

1.47.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
[href*="htmlbook"] {
background: yellow; /* */
}
</style>
</head>
<body>
<p><a href="http://www.htmlbook.ru/html/"> HTML</a> |
<a href="http://stepbystep.htmlbook.ru"> </a> |
<a href="http://webimg.ru"> </a></p>
</body>
</html>
. 1.31.

. 1.31. , htmlbook


, .
.
[~=""] { }
[~=""] { }
,
, ( 1.48).
1.48.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
[class~="block"] h3 { color: green; }
</style>
</head>
<body>
<div class="block tag">
<h3></h3>
</div>
</body>
</html>
H3,
block. , , *=
~=.


(-),

id class. ,
, .
[|=""] { }
[|=""] { }
,
, ( 1.49).
1.49.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
DIV[class|="block"] {
background: #306589; /* */
color: #acdb4c; /* */
padding: 5px; /* */
}
DIV[class|="block"] A {
color: #fff; /* */
}
</style>
</head>
<body>
<div class="block-menu-therm">
<h2></h2>
<div class="content">
<ul class="menu">
<li><a href="t1.html"></a></li>
<li><a href="t2.html"></a></li>
<li><a href="t3.html"></a></li>
<li><a href="t4.html"></a></li>
<li><a href="t5.html"></a></li>
<li><a href="t6.html"></a></li>
<li><a href="t7.html"></a></li>
</ul>
</div>
</div>
</body>
</html>
block-menu-therm,
|="block",
.
, ,
. .
[1="1"][2="2"] { }
[1="1"][2="2"] { }


-, ,
. ,
-.
(*)
.
* { }
. , , *.class
.class .
1.50
.
1.50.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
* {
font-family: Arial, Verdana, sans-serif; /* */
font-size: 96%; /* */
}
</style>
</head>
<body>
<p>
180 230 .</p>
</body>
</html>
, , *
BODY.
,
1.51.
1. 51.
* {
margin: 0;
padding: 0;
}
,
, .
.
-, ,
,
. ,
.
.

. CSS,
.

* {
display: block;
border: 1px solid #c00;
}
(. 1.51) .
, ,
, .
, ,
.
.

.
, IE7 - .
* {
padding: 0;
}
a {
text-decoration: none;
border-bottom: 1px dashed red;
}
, ,
. , ,
FORM * , 1.52.
1.52.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
FORM P * {
border: 1px solid #333; /* */
background: #ffe; /* */
}
</style>
</head>
<body>
<form action="handler.php">
<p><input type="text" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>
,
( <p>).


,
, .
, .
,
.
.
: { }
, , ,
.
(A.menu:hover {color: green}), (.menu A:hover {background:
#fc0}). (:hover),
.
:
;
;
.
,
.

,
,
.

:active
. , ,
. ,
-, :active .

:link
, .. , .
,
, .
A {...} A:link {...} ,
, :link .
, :link .

:focus
. ,
, ,
( 1.53).

1.53. focus

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
INPUT:focus {
color: red; /* */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" value=" " /></p>
<p><input type="text" value=" " /></p>
</form>
</body>
</html>
(. 1.32). ,
.

. 1.32.
,
value <input>. ,
. (
, ), .
, . ,
<a>, <input>, <select> <textarea>.

:hover
:hover , ,
.

:visited
.
,
( 1.54).
1.54.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
A:link {
color: #036; /* */
}
A:visited {
color: #606; /* */
}

A:hover {
color: #f00; /* */
}
A:active {
color: #ff0; /* */
}
</style>
</head>
<body>
<p><a href="1.html"> 1</a> |
<a href="2.html"> 2</a> |
<a href="3.html"> 3</a></p>
</body>
</html>
. 1.33.

. 1.33.
.
. :visited, :hover,
.
,
, , . ,
A:visited:hover , A:link:visited . ,
, CSS .
Internet Explorer 6 :active :hover
. 7.0 .
:hover ,
. , 1.55 ,
. :hover
TR.
1.55.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TR:hover {
background: #fc0; /* */
}
</style>
</head>
<body>
<table width="400" border="1" cellpadding="4" cellspacing="0">
<tr>
<th>&nbsp;</th>
<th></th><th></th><th></th><th></th>
</tr>
<tr>
<td></td>
<td>5</td><td>2</td><td>4</td><td>2</td>
</tr>
<tr>

<td> </td>
<td>2</td><td>7</td><td>1</td><td>3</td>
</tr>
<tr>
<td></td>
<td>5</td><td>4</td><td>3</td><td>1</td>
</tr>
<tr>
<td> </td>
<td>1</td><td>0</td><td>5</td><td>7</td>
</tr>
</table>
</body>
</html>
(. 1.34).

. 1.34.

,
,
.

:first-child
,
. , , ( 1.56).
1.56. first-child

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div p:first-child {
font: 1.2em Arial, sans-serif; /* */
color: #E81E26; /* */
margin-bottom: -0.5em; /* */
}
</style>
</head>
<body>
<div>
<p></p>
<p>, A B.
, ,
.</p>
</div>
<div>
<p> </p>
<p> .

.</p>
</div>
</body>
</html>

(. 1.35).

. 1.35. :first-child
:first-child P
. <P> <div> ,
. <p>
. <div> ,
.
Internet Explorer :first-child 7.0.
:first-child ,
. ,
, .
text-indent .
:first-child
( 1.57).
1.57.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
text-indent: 1em; /* */
}
P:first-child {
text-indent: 0; /* */
}
</style>
</head>
<body>
<p> , ,
.</p>
<p>
. , ,
.</p>
<p> . .</p>
</body>
</html>
(. 1.36).

. 1.36.
,
.

,
,
, .
, .

:lang
, . HTML
charset <meta>. :lang
, , , .
.
:lang() { ... }
: ru ; en ; de
; fr ; it .
1.58.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
font-size: 1.50em; /* */
}
q:lang(de) {
quotes: "\201E" "\201C"; /* */
}
q:lang(en) {
quotes: "\201C" "\201D"; /* */
}
q:lang(fr), q:lang(ru) { /* */
quotes: "\00AB" "\00BB";
}
</style>
</head>
<body>
<p> : <q lang="fr">Ce que femme veut, Dieu
le veut</q>.</p>
<p> : <q lang="de">Der Mensch, versuche die
Gotter nicht</q>.</p>
<p> : <q lang="en"> be or not to be</q>.</p>
</body>
</html>

. 1.37.
quotes,
lang, <q>.

. 1.37.


,
, .
.
: { }
, , .
,
,
, .
.foo:first-letter { color: red }
.foo:first-line {font-style: italic}
CSS3 ,
(::after). Internet Explorer ,
.
,
.
, .

:after
.
content, . 1.59
:after .
1.59. :after

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
P.new:after {
content: " - !"; /* */
}
</style>
</head>
<body>
<p class="new"> .</p>
<p> .</p>
</body>
</html>
. 1.38.

. 1.38. :after
new ,
content.
:after :before, content
Internet Explorer .

:before
:before :after, .
1.60
:before.
1.60. :before

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
UL {
padding-left: 0; /* */
list-style-type: none; /* */
}
LI:before {
content: " "; /* */
}
</style>
</head>
<body>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</body>
</html>
(. 1.39).

. 1.39. :before
:before LI,
. content.

, ,
.

:first-letter
, .
.
,
.
, .
. P
:first-letter . ,
( 1.61).
1.61. :first-letter

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
font-family: Arial, Helvetica, sans-serif;
/* */
font-size: 0.9em; /* */
color: black; /* */
}
P:first-letter {
font-family: 'Times New Roman', Times, serif;
/* */
font-size: 2em; /* */
color: red; /* */
}
</style>
</head>
<body>
<p> ,
.
, ,
. ,
, .</p>
<p> ,
.
, .</p>
</body>
</html>
(. 1.40).

. 1.40.

, .

:first-line
. ,
, , , ..
:first-line .
, , , : clear,
line-height, letter-spacing, text-decoration, text-transform, vertical-align word-spacing.
1.62 :first-line .
1.62.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P:first-line {
color: red; /* */
font-style: italic; /* */
}
</style>
</head>
<body>
<p>,
first-line? , , , ,
,
, ,
, -,
.</p>
</body>
</html>
. 1.41.

. 1.41. :first-line
.
, , ,
.


, ,
. ,
. 1.63
, .
1.63.
H1 {
font-family: Arial,
font-size: 160%;
color: #003;
}
H2 {
font-family: Arial,
font-size: 135%;
color: #333;
}
H3 {
font-family: Arial,
font-size: 120%;
color: #900;
}
P {
font-family: Times,
}

Helvetica, sans-serif;

Helvetica, sans-serif;

Helvetica, sans-serif;

serif;

, font-family.
,
1.64.
1.64.
H1, H2, H3 {
font-family: Arial, Helvetica, sans-serif;
}
H1 {
font-size: 160%;
color: #003;
}
H2 {
font-size: 135%;
color: #333;
}
H3 {
font-size: 120%;
color: #900;
}
font-family ,
.
, .
, . .
1, 2, ... N { }
, .


,
. ,
, .
.
. <table>
<tr>, <td>. TABLE ,
, 1.65.
1.65.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TABLE {
color: red; /* */
background: #333; /* */
border: 2px solid red; /* */
}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="0">
<tr>
<td> 1</td><td> 2</td>
</tr>
<tr>
<td> 3</td><td> 4</td>
</tr>
</table>
</body>
</html>
,
, <td> <table>. ,
. , border ,
. background.
, ? , background
transparent, .. .
.
, ,
CSS . ,
.
,
. , .
BODY, ,
( 1.66).
1.66. -

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

BODY {
font-family: Arial, Helvetica, sans-serif; /* */
color: navy; /* */
}
</style>
</head>
<body>
<p> .</p>
</body>
</html>
BODY.
.
, - .
, 1.67.
1.67.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
BODY {
font-family: Arial, Helvetica, sans-serif; /* */
color: navy; /* */
}
P.red {
color: maroon; /* - */
}
</style>
</head>
<body>
<p> .</p>
<p class="red"> .</p>
</body>
</html>
BODY,
red.


CSS Cascading Style Sheets ( ),
.

, .
, ,
, .
,
. , , .
1. .
2. .
3. .
4. !important.
5. !important.
,
- .
HTML, .

!important
!important ,
. ,
, !important
, .

, .
!important .
!important .
!important , .
!important
.
!important .
: !important;
,
!important.

, .

,
, .

, .
( a) 100,
(b) 10, (c) 1.
, .
*
li
li:first-line
ul li
ul ol+li
ul li.red
li.red.level
#t34
#content #wrap

{}
{}
{}
{}
{}
{}
{}
{}
{}

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

a=0
a=0
a=0
a=0
a=0
a=0
a=0
a=1
a=2

b=0
b=0
b=0
b=0
b=0
b=1
b=2
b=0
b=0

c=0
c=1
c=2
c=2
c=3
c=2
c=1
c=0
c=0

->
->
->
->
->
->
->
->
->

=
=
=
=
=
=
=
=
=

0
1
2
2
3
12
21
100
200

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

, style, 1000,
. !important
.
, ,
.
1.68 , .
1.68.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#menu ul li {
color: green;
}
.two {
color: red;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li></li>
<li class="two"></li>
<li></li>
</ul>
</div>
</body>
</html>
, two
. #menu ul li
(100) (2) 102, .two
20, . .
, ,
( 1.69).
1.69.
/* */
ul li {...} /* */
.two {...}
/* */
#menu ul li {...}
#menu .two {...} /* */
#menu ul li {...}
.two { color: red !important; } /* !important */

,
.
, ,
.

CSS
CSS- CSS2.1 CSS3.
, , , ,
.
http://jigsaw.w3.org/css-validator/, ,
.
.

URI
. http://
, (. 1.42).

. 1.42.
: !
,
. ,
.


HTML CSS- (. 1.43).

. 1.43.
HTML-,
.


HTML CSS-,
(. 1.44).

. 1.44.

.

CSS
CSS3 ,
. CSS2.1,
CSS3, .
CSS3
(. 1.45).

. 1.45. CSS


.
,
- ,
. , ,
, ,
.
.

.
.
getElementById
.
, .

.
.
, .

-
- , .
getElementById, .
1.70 userName,
JavaScript , -
. , Submit ,
msg. , ,
action.
1.70.

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript">
function validForm(f) {
user = document.getElementById("userName");
if(user.value == "")
document.getElementById("msg").innerHTML = ', .';
else f.submit();
}
</script>
</head>
<body>
<form action="handler.php" onsubmit="validForm(this); return false">
<p> :</p>
<div id="msg"></div>
<p><input type="text" id="userName" name="user" /></p>
<p><input type="submit" /></p>
</form>
</body>

</html>
, .
<input> userName, getElementById.
, , username, , .
,
. CSS ,
. 1.71.
1.71.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#A, .a {
border: none;
background: #f0f0f0;
color: green;
padding: 5px;
}
.b {
border: 1px solid red;
color: red;
padding: 0;
}
</style>
</head>
<body>
<p id="A" class="b"> </p>
<p class="a b"> a b</p>
<p class="b"> b</p>
</body>
</html>
A b,
. -
. a b .
, , ,
. b. . 1.46
.

. 1.46.

, .
,
, !important, .


. , ,
, .
( 1.72).
1.72.
.r, .b {
padding: 10px;
background: #FCE3EE;
}
.r {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px
}
.b { border: 1px solid #ED1C24; }
.n { border: none; }
class
, , .
, .


CSS ,
CSS, , .
, -
.


-
, .


, ,
. , ,
. , , , ,
, .
.


.
, , .


margin-left,
margin-right, margin-top margin-bottom,
margin.
. margin background, border, font,
padding. .


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

http://www.cssportal.com/format-css/
, , Format
Code .
.
body {
font: 0.9em Arial, Verdana, Helvetica, sans-serif;
color: #000;
background: #fff;
margin: 0;
}
.top {
margin-bottom: 10px;
padding-left: 3%;
border-bottom: 1px solid #acacac;
}
.

CSS (Formatted CSS)


body {
font: 0.9em Arial, Verdana, Helvetica, sans-serif;
color: #000;
background: #fff;
margin: 0;
}
.top {
margin-bottom: 10px;
padding-left: 3%;
border-bottom: 1px solid #acacac;
}
, ,
.
(Properties in Alphabetical Order)
body {
background: #fff;
color: #000;
font: 0.9em Arial, Verdana, Helvetica, sans-serif;
margin: 0;
}
.top {
border-bottom: 1px solid #acacac;
margin-bottom: 10px;
padding-left: 3%;
}
,
, .
(Longest Property to Shortest)
body {
font: 0.9em Arial, Verdana, Helvetica, sans-serif;
background: #fff;
color: #000;
margin: 0;
}
.top {
border-bottom: 1px solid #acacac;
margin-bottom: 10px;
padding-left: 3%;
}
,
, .
, .
(Compact)
body {font: 0.9em Arial, Verdana, Helvetica, sans-serif;color:
#000;background: #fff;margin: 0;}
.top {margin-bottom: 10px;padding-left: 3%;border-bottom: 1px solid #acacac;}
, .
, , ,
, .
. , , .


CSS- .
, ,

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

CSSMin
http://tools.w3clubs.com/cssmin/
, , , JavaScript YUI
Compressor. Source CSS, Crunch
.
(. 1.47).

. 1.47.

CSS compressor
http://www.csscompressor.com
, ,
. . CSS Input CSS,
Compress (. 1.48).

. 1.48.
.
Compression Mode . .
Highest .
High .
Standard ,
Low .
Sort Properties .
Compress colors #ffffff #fff.
Compress font-weight . font-weight
normal 400, bold 700.
Lowercase selectors .

Remove unnecessary backslashes (\) .


Remove unnecessary semi-colons .
: CSS (. 1.49).

. 1.49.

CSS Code Formatter and Optimizer


http://www.generateit.net/css-optimize
, , .
, ,
CSS-.
. 1.50 .

. 1.50.
Preserve CSS , .
.
Sort Selectors (caution) .
Sort Properties .
Regroup selectors , ,
.
Optimize shorthands margin.

Compress colors #ffffff #fff.


Compress font-weight . font-weight
normal 400, bold 700.
Lowercase selectors .
Case for properties .
Remove unnecessary backslashes (\).
Remove last ; .
Discard invalid properties , .
Add timestamp .
Output as file .

minify
CSS-,
. , ,
, .
.
. , .
minify, PHP5. ,
CSS-, JavaScript.
minify
http://code.google.com/p/minify/
minify , WordPress.
. , min,
. CSS- ,
:
http://example.ru/min/?f=themes/default/style.css
f CSS- .
:
http://example.ru/min/?f=themes/default/style.css,themes/default/cms.css
, http://example.ru/min,
, ,
(. 1.51).

. 1.51.
, x
. ,

404!, .
Add file. , , ,
, Update.
( URI) <link> (
HTML), (. 1.52).

. 1.52.
WordPress HTTP CSS JavaScript- 70%.
CSS- ,
gzip .
gzip .

. gzip ,
. .
mod_deflate
- Apache mod_deflate
mod_gzip Apache

CSS

II

Internet Explorer Netscape


,
. Netscape 4 IE4 -, , IE5
IE4,
CSS. , Microsoft
W3C HTML CSS.
IE5 .
,
IE5.
8.0, IE5 .
,
<!DOCTYPE> ().
IE5 Mac ,
.
, Mozilla, Safari Opera.
IE5 Windows, Netscape 4 .
- <!DOCTYPE>,
HTML XHTML. -
, , ,
.


(X)HTML CSS.
.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REChtml40/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
text/xml,
application/xml application/xhtml+xml ( ).
IE 7.0
.
CSS .
.

(width: 500
width: 500px), .

, mydiv
MyDiv .

, .

width, padding, border margin.

,
. .

display inline,
. ,
,
, , .
2.1 .

2.1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
</head>
<body>
<p>HTML5</p>
</body>
</html>

HTML 5.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6


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


<br>
. 2.2 .
2.2.

HTML 4.01 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
</head>
<body>
<p class="img"><img src="images/ecctitle.png" alt=""
width="640" height="158"><br>
<img src="images/navigate.png" alt="" width="640"
height="30"></p>
</body>
</html>
,
(. 2.1).

. 2.1.
(. 2.2).

. 2.2.
:
1. display: block ;
2. line-height .
.
<img>
, . ,
( ). <br>
, , ( 2.3).
2.3. block

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
DIV.img IMG { display: block; }
</style>
</head>
<body>
<div class="img"><img src="images/ecctitle.png" alt=""
width="640" height="158" />
<img src="images/navigate.png" alt=""
width="640" height="30" /></div>
</body>

</html>
block, line-height,
. 1px <p>,
, ( 2.4).
2.4. line-height

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
P.img { line-height: 1px; }
</style>
</head>
<body>
<p class="img"><img src="images/ecctitle.png" alt=""
width="640" height="158" /><br />
<img src="images/navigate.png" alt=""
width="640" height="30" /></p>
</body>
</html>


.
( 2.5). ,
border TABLE.
2.5.

HTML 4.01 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<style type="text/css">
TABLE { border: 1px solid #000; }
</style>
</head>
<body>
<table cellspacing="0">
<tr><td>
<img src="images/figure.jpg" alt="-" width="111" height="110">
</td></tr>
</table>
</body>
</html>
. 2.3.
(. 2.3).

. 2.3. . ,
, . ?
(. 2.4), ,
, . ,
.

. 2.4.
, .
, <img> display
block (. 2.3). :
TABLE IMG { display: block; }
,
. , ,
, .
vertical-align bottom ( 2.6).
2.6.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
TABLE { border: 1px solid #000; }
TD IMG { vertical-align: bottom; }
</style>
</head>
<body>
<table class="data" cellspacing="0">
<tr><td>
<img src="images/figure.jpg" alt="-"
width="111" height="110" />
</td></tr>
</table>
</body>
</html>
,
. Firefox, Safari, IE7
, Opera, IE8, IE9 .



, .
, ,
. ,
.
,
. , .
.

.
.

:
<td><img src="images/1x1.gif" width="1" height="1" alt=""></td>
:
<td class="line"></td>
line .


- .
HTML CSS,
. ,
.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
, .
- ,
.

( <tr>) , .
height <table> <tr> .

,
<body>, , 16px. ,
font-size BODY .

IE Opera .
.

, mydiv MyDiv
.

(fc0 #fc0).
.

, ,
. .
CSS
(10 px, 10px).
.
:hover
:hover , ,
, . .test:hover
IE Firefox, a.test:hover
.

margin: auto IE
margin auto
IE.

width. (padding) (border)
.

, ,
.

IE <span>.
.
, ,
, , , . 2.7
HTML CSS .
2.7.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body { background: F2E0BE; }
table {
width: 100%;
height: 100%;
}
table td { text-align: center; }
#2mc {
font-size: xx-large;
}
sup { font-size: 24; }
</style>
</head>
<body>
<table>
<tr><td>
<div id="2mc">E = mc<sup>2</sup></div>
</td></tr>
</table>
</body>
</html>
Opera (. 2.5),
, .

. 2.5. Opera 11

IE6 , ,
. , ,
IE6 ( 2.8).
2.8. IE6

XHTML 1.0 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<?xml version="1.0" encoding="UTF-8" ?>


<!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">
<head>
<title> </title>
</head>
<body>
<p>...</p>
</body>
</html>
<?xml ?> ,
IE6, . IE7
.

MIME-
MIME (Multipurpose Internet Mail Extensions, -)
, HTTP. MIME
. , text/plain, HTML- text/html.
-.
XHTML text/html, ,
HTML, XHTML-. XHTML
application/xhtml+xml. - Apache,
AddType, .htaccess,
.
AddType application/xhtml+xml .xhtml
, .xhtml application/xhtml+xml.
PHP, :
header ("Content-type: application/xhtml+xml");
, .
Internet Explorer 8.0
application/xhtml+xml , .
, IE9, .
application/xhtml+xml , MathML (Mathematical
Markup Language, ), SVG
(Scalable Vector Graphics, ),
.
, text/html.
.
, text/html .html .htm ,
- .


, ,
. , HTML 4.01 XHTML 1.0
, HTML5 .


, , .
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
, .
: <applet>, <basefont>, <center>, <dir>, <font>,
<isindex>, <noframes>, <plaintext>, <s>, <strike>, <u>, <xmp>.
.
, <body>,
<p> <div>.
target, start ( <ol>), type ( <li>, <ol>, <ul>) .
, ,
, .
2.9.
2.9. HTML

HTML 4.01 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="text">
</form>
</body>
</html>
<form> action, <input>
, .
. ,
. XHTML
2.10.
2.10. XHTML

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
</head>
<body>
<form action="">
<p><input type="text" /></p>
</form>
</body>
</html>


, ,
.
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
.
- ,
HTML XHTML.
, ,
. , , target,
. target , - ,
- . ,
, .
, target .
target <a> ( 2.11).
2.11.

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<a href="http://htmlbook.ru" target="_blank"> </a>
</body>
</html>

, .
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
,
<frameset> <frame> ( 2.12).

2.12.

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<frameset rows="*,80" cols="*">
<frameset cols="80,*">
<frame src="left.html" name="leftFrame" scrolling="no"
noresize="noresize" />
<frame src="main.html" name="mainFrame" />
</frameset>
<frame src="bottom.html" name="bottomFrame" scrolling="no"
noresize="noresize" />
</frameset>
</html>
, ( left.html, main.html bottom.html),
, .

HTML5
HTML5 , .
<!DOCTYPE html>
HTML5 .

Internet Explorer
Internet Explorer ,
6.0 9.0.
.
Internet Explorer Windows
.

.
IE Windows Update,
-.
, , ,
IE.
, ,
.
Microsoft Internet Explorer 2010
IE6 IE7.
, .
IE , -,
- CSS.
IE. ,
Google, vkontakte.ru IE6 ,
. , -
, , - 2%,
2% .
- , IE , IE8
.
;
(. 2.6).
7.0. IE9 IE8 IE7.

. 2.6. IE8
IE , ,
, .
8.0, ( >
), F12 .
: (. 2.7) .

. 2.7.

:
User-Agent, , Microsoft
;
, Microsoft ;
.
,
, . User-Agent ,
. User-Agent
http://www.useragentstring.com. . 2.1 User-Agent
IE.
. 2.1. User-Agent

User-Agent

IE7

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1;


SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729;

.NET CLR 3.0.30729; Tablet PC 2.0; .NET4.0C;
, IE7.
AskTbPTV2/5.9.1.14019)

IE8

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1;


Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR
3.5.30729; .NET CLR 3.0.30729; Tablet PC 2.0;
, IE8.
.NET4.0C; AskTbPTV2/5.9.1.14019)

IE9

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1;


Trident/5.0)
, IE9.

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1;

Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR

3.5.30729; .NET CLR 3.0.30729; Tablet PC 2.0;


IE9
.NET4.0C; AskTbPTV2/5.9.1.14019)


, IE7,
Trident/5.0
IE9.

User-Agent ,
Windows .
IE
.
IE . ,
, IE8.
, .
<!--[if IE 8]>
<p> IE8.</p>
<![endif]-->
(. 2.8).

. 2.8.
IE6, (. 2.2).

. 2.2. IE

, IE5 ,
IE5 (

IE

) . ,
, .
IE6
IE7

6.0.
IE7 IE8
IE9.

IE8

IE8
IE9.

IE9

9.0.

, <meta>,
HTTP- X-UA-Compatible.
<meta http-equiv="X-UA-Compatible" content="IE=" />
(. 2.3).
. 2.2. IE

IE5, .

IE7, .

IE8, .

IE9, .

EmulateIE7

IE7,
.

EmulateIE8

IE8,
.

EmulateIE9

IE9,
.

Edge

. 8.0
IE8, 9.0 IE9.

, IE7.
<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7">
(. 2.6) .


,
, , .
HTML XHTML.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 5
<!DOCTYPE html>
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

.
HTML CSS, , .
(X)HTML.
XHTML : , , ,
, . HTML ,
, , .
HTML5 , HTML4,
XHTML. , , ,
type="text/css". HTML5 ,
, , , ,
, , .
, , XHTML 1.0
HTML 4.01.
W3 Consortium , XHTML 2.0
HTML5. , XHTML ,
HTML.
HTML5 ,
. ,
HTML5 .
, HTML 4.01 XHTML 1.0
HTML5. WebHiTech (http://webhitech.ru)
, .
, , XHTML 1.0,
HTML5.

III

, ,
.
, ,
.
Netscape, <layer>.
/ ,
, .
, JavaScript
.
, <layer> HTML
Netscape.
, , ,
1996
CSS Positioning (CSS-P). ,
, JavaScript.
, ,
, .
HTML
CSS, ,
. ,
.
,
. , .
. ,
.
,
.
, ,
, .
, ,
. ,
.
, CSS. ,
,
(HTML, CSS, DOM). , ,
.
. , . ,
, HTML-, , ?
- . ,
. <div>.
-, <div>,
.
, <div>
. .


HTML ,
.
.
, . ,
, .

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


, , , , ,
, . ,
, , , .
,
.
. -
HTML CSS.
<div>, . -
, <div>
. , content
, <div id="content"> <div class="content">.


,
. ( , .),
width, height; (padding),
;
(border) (margin),
. .
. 3.1 .

. 3.1. ,
(. 3.2).
, .

. 3.2.
, ,
, padding, border margin
.


, . - ,
, ,
.
.

, , .
. 3.1
.
3.1. padding

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.space {
padding: 20px; /* */
background: #E5D3BD; /* */
border: 2px solid #E81E25; /* */
}
</style>
</head>
<body>
<div class="space">
, , ,
, , , ,
.
</div>
</body>
</html>
. 3.3.

. 3.3.
.

, , .
, .
border ,
border-left, border-top, border-right border-bottom,
, , . 3.2
.
3.2.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P.line {
border-left: 1px dotted red;
padding: 10px;
}
</style>
</head>

<body>
<p class="line"> , ,
.</p>
</body>
</html>
. 3.4.

. 3.4.
padding.

, .
, , ,
. ,
, .
.
.
, ,
. , .
,
. , margin-left: -10px,
.
,
, .
, . ,
.
3.3 .
3.3.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.layer1, .layer2 {
background: #F2EFE6;
border: 1px solid #B25538;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="layer1"> , ,
.</div>
<div class="layer2">
.</div>

</body>
</html>
. 3.5. ,
20 , 40, .
, .

. 3.5.
, , background,
.


:
width , .. ;
padding-left padding-right ;
border-left border-right ;
margin-left margin-right .
, -
. . 3.6 .

. 3.6.
width , auto.
, .

,
, .
, .
width: 300px; /* */
margin: 7px; /* */
border: 4px solid black; /* */
padding: 10px; /* */
342 ,
, , ,
. .
= 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342
, .
, .
, , .
, 90%, ,
, ,
. ,
-, .
.


, ,
. Internet Explorer ( ,
) width.
, ,
. CSS3 box-sizing, .
border-box , . , boxsizing border-box ,
border padding, , . ,
, .
, . . 3.1
.
. 3.1. box-sizing

Internet Explorer

Chrome

Opera

Safari

Firefox

8.0+

2.0+

7.0+

3.0+

1.0+

box-sizing

-webkit-box-sizing

box-sizing

-webkit-box-sizing

-moz-box-sizing

, ,
( 3.4).
3.4.

XHTML 1.0 CSS 3 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
div {
width: 100%; /* */
background: #fc0; /* */
padding: 20px; /* */
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari Chrome */
box-sizing: border-box; /* IE Opera */

}
</style>
</head>
<body>
<div> 100%</div>
</body>
</html>
, . 3.1, CSS3 -
-moz -webkit. 100%
padding. box-sizing
.


box-sizing , , IE.
IE7 IE6, .
,
, .
, , -
, .
3.5 .
3.5.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.wrap {
width: 50%; /* */
}
.wrap div {
background: #fc0;
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="wrap">
<div>
100%
</div>
</div>
</body>
</html>
. 3.7.

. 3.7.
(box-sizing ),
, , .
,

. ,
, .
.


, . ,
(height), (padding), (border) (margin).
height , auto,
. . 3.8 , ,
.

. 3.8.
, ,
. , width height ,
auto.
, .
, . width .
height ,
. 3.6 , .
3.6.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
html, body {
height: 100%; /* */
margin: 0; /* */
}
div {
height: 100%; /* */
background: #fc0;
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div> 100%</div>
</body>
</html>
. 3.9.

. 3.9.
<div> <body>,
height 100%. <body> , <div>,
, .
<body>, <html>, height
100%. .
, ,
. , , ,
box-sizing, .

, (. 3.10).

. 3.10.
, , 3.7.
3.7.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
div {
height: 100px;
background: #F2EFE6;
border: 1px solid #B25538;
padding: 0 10px;
}
</style>
</head>
<body>
<div>
<p> , ,
.</p>
<p>
.</p>
</div>

</body>
</html>
, ,
. , , ,
overflow auto hidden.
, auto , (. 11), hidden
, (. 11).

. auto

. hidden
. 11. overflow

, ,
. ,
Internet Explorer 7.0 ,
(. 12). 8.0 ,
(. 12). Opera (. 12), Firefox (12), Safari Chrome (. 12)
. ,
.

. Opera

. Firefox

. IE6, IE7

. IE8, IE9

. Safari, Chrome
. 12.
3.8 , .

3.8.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.layer {
width: 300px; /* */
padding: 10px; /* */
background: #fc0; /* */
border: 5px dashed black;/* */
}
</style>
</head>
<body>
<div class="layer">...</div>
</body>
</html>

. .


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


,
. . 3.13
.

. 3.13.
.
<h1> 20 , <p>
5 .
H1 {
background: #F0BA7D;
margin-bottom: 20px;
}
P {
background: #CADADD;
margin: 5px 0;
}
, ,
20 (. 3.14).

. 3.14.


:
x + (-y) = x y
x y .
<h1> 20 , <p>
10 .
H1 {
background: #F0BA7D;
margin-bottom: 20px;
}
P {
background: #CADADD;
margin: -10px 0 5px;
}
<h1> <p>,
10 (. 3.15).

. 3.15.
,
, , .


,
. , -10px -20px, -20px.
<h1> 1em, <p>
10 .
H1 {
background: #F0BA7D;
margin-bottom: -1em;
}
P {
background: #CADADD;
margin: -10px 0 5px;
}
,
. 1em , 10px, 1em
(. 3.16).

. 3.16.


, , .
,
. .

(. 3.17).

. 3.17.
<h1> 20px, <div> 30px,
<p> <div> 50px.
H1 {
background: #F0BA7D;
margin-bottom: 20px;
}
DIV {
background: #CADADD;
margin-top: 30px;
}
P {
background: #F4E7CF;
margin: 50px 0 5px;
}
.
, . <h1>
<div>. , , .. 30px.
<p>. , <p>
, <h1> <div> (. 3.18).

. 3.18.
.
<div><p>...</p></div> , <div> 50px,
, .. , . 3.18,
.
Internet Explorer 7.0 ,
hasLayout. ,
, ( width).
IE.


,
. , , .
:
, padding.
, ;
, .. , position

absolute;
( float left right);
;
<html>.
:
, overflow auto, hidden scroll
;
, clear,
.
,
, , ( 3.9).
3.9.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.header {
height: 100px;
background: #F0BA7D;
}
.content {
background: #CADADD;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<h1></h1>
<p></p>
</div>
</body>
</html>
, (. 3.19).
- <h1>,
.

. 3.19.
, , .
, padding
content. , , 1px.
.

<h1> padding-top .
overflow auto .
.
.content {
border-top: 1px solid #CADADD; /* ,
*/
padding: 10px; /* */
overflow: auto;
}
.content h1 {
margin-top: 0; /* */
padding-top: 1em; /* */
}
,
. .


HTML .
, , , .
.
.
. ,
, .

position
position
. fixed,
. fixed ,
.
,
3.10. fixed ,
left, top, right, bottom,
.
3.10.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
BODY {
margin-left: 90px; /* */
}
.feedback {
position: fixed; /* */
left: 0; top: 50%; /* */
background: #fc0; /* */
width: 70px; /* */
padding: 5px; /* */
}
</style>
</head>
<body>
<p> ,
, . ,
. , ,
. , , ,
, ,
, .
, , ,
, , . ,
- ,
.</p>
<div class="feedback"><br /></div>
</body>
</html>
. 3.20. ,
. - feedback ,
, .

. 3.20.
absolute position , fixed
. ,
. .
1. ( <body>) position.
2. position absolute relative.
, 3.10, ,
, .
.
3.11 .
layer1 , layer2
layer1.
3.11.

XHTML 1.0 CSS 2.1 CSS 3 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.layer1 {
width: 217px; /* */
height: 512px; /* */
background: url(images/bg2.png) no-repeat; /* */
position: absolute; /* */
right: 20%; /* */
bottom: 0; /* */
}
.layer2 {
background: #000; /* IE */
background: rgba(0,0,0, 0.5); /* */
color: #fff; /* */
position: absolute; /* */
bottom: 30px; /* */
width: 207px; /* */
padding: 5px; /* */
}
</style>
</head>
<body>
<div class="layer1">
<div class="layer2">

</div>
</div>
</body>
</html>
. 3.21. IE 9.0
RGBA .

. 3.21.
,
, .
position , ,
, .

float
float ,
, . ,
, .
,
, .
, float .
:
;
;
;
;
.
float ( <img>), <p>, <div>
(<span>, <a>, <strong>). 3.12 float
.
3.12.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.right {
float: right;
}
</style>
</head>
<body>
<p class="right"><img src="images/cat.jpg" alt="" /></p>
<p> Canon EOS 50D. 24-105,
4.0, 1/500, ISO 400</p>
</body>
</html>

. 3.22.

. 3.22.
float .
, float right left,
.


, - .
, ,
. <address>, <blockquote>, <div>,
<fieldset>, <form>, <h1>,...,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul> .
, display block, list-item,
table run-in.
.
.
.
. ,
<a><h1></h1></a> ,
<h1><a></a></h1>.
.
( width), width,
, , .
, .
( height), height,
, , .
.
, ,
vertical-align.
.
,
<div> . <div>
, <div>.
3.13 CSS Zen Garden,
.
3.13. <div>
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym
title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
</div>
<div id="quickSummary">
<p class="p1"><span>A demonstration of what can be accomplished
visually through <acronym title="Cascading Style Sheets">CSS</acronym>
- based design. Select any style sheet from the list to load it into
this page.</span></p>
</div>
</div>
</div>
,
.
, , . 3.14 <div>
<p> . ,

.
3.14.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<div>
<p> </p>

<p> </p>
</div>
</body>
</html>
. 3.23.
<p>, .

. 3.23.


. ,

width height. 3.15 ,
.
3.15.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.menu {
width: 220px; /* */
padding: 5px; /* */
border: 1px solid #000; /* */
}
.menu P { margin: 0 0 2px; }
.menu A {
padding: 2px; /* */
display: block; /* */
border: 1px solid #fff; /* */
text-decoration: none; /* */
}
.menu A:hover {
background: #faf3d2; /* */
color: #800000; /* */
border: 1px dashed #634f36 /* */
}
</style>
</head>
<body>
<div class="menu">
<p><a href="l.html"> </a></p>
<p><a href="2.html"> </a></p>
<p><a href="3.html"> </a></p>
<p><a href="4.html"> </a></p>
</div>

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

. 3.24.
,
,
.


,
. <img>, <span>, <a>, <q>, <code> .,
, display inline.
.
.
.
.
.
, (width, height) .
, .

.
vertical-align.
, ,
. <span>,
,
.
.
, . ,
<div>, <p>
. , ,
-. 3.16
<span> .
3.16. <span>

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.pose {
background: #fc0; /* */
margin-left: 1em; /* */
}
.press {
padding: 1px; /* */
border: 1px dotted maroon; /* */
color: navy; /* */
}
.num {
font-weight: bold; /* */
color: maroon; /* */
}
</style>
</head>
<body>
<p><span class="pose"> </span>.
, .
.
<span class="press"> </span>.
. <span class="num"></span> .</p>
</body>
</html>

(. 3.25).

. 3.25. ,
<span>
. , ,
. ,
. ,
white-space: nowrap.
, <span>
. (. 3.26).

. 3.26.
<span>,
. , .


display block.
inline ( 3.17).
3.17. display

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.notetitle {
border: 1px solid black; /* */
border-bottom: none; /* */
padding: 3px; /* */
display: inline; /* */
background: #ffeebf; /* */
font-weight: bold; /* */
font-size: 0.9em; /* */
margin: 0; /* */
white-space: nowrap; /* */
}
.note {
border: 1px solid #634f36; /* */
background: #f3f0e9; /* */
padding: 7px; /* */
margin: 0 0 1em 0; /* */
}
</style>
</head>
<body>
<p class="notetitle"></p>
<p class="note"> ,

, . ,
,

.</p>
</body>
</html>
. 3.27.

. 2.
<p> - .
, .
, ,
<p> . ,
<p> <span>.
,
.

-
,
. , .
, . 3.28 ,
, , .
.

. 3.28.
<div>,
.
. float,
. - ,
.
HTML , - , ,
display inline-block.
div {
display: inline-block;
}
.
- , .
, .
, .

.
vertical-align.
.
.

, . 3.28 <div> display


inline-block, <p> ( 3.18).
3.18. display

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.photo {
background: #d9dabb; /* */
width: 150px; /* */
margin: 0 10px 10px 0; /* */
padding: 10px 0; /* */
text-align: center; /* */
display: inline-block; /* - */
}
.photo img {
border: 2px solid #8b8e4b; /* */
}
.photo p {
margin: 0; /* */
}
</style>
</head>
<body>
<div class="photo">
<p><img src="images/thumb1.jpg" alt="" /></p>
<p class="caption"> </p>
</div>
<div class="photo">
<p><img src="images/thumb2.jpg" alt="" /></p>
<p class="caption"> </p>
</div>
<div class="photo">
<p><img src="images/thumb3.jpg" alt="" /></p>
<p class="caption"> </p>
</div>
<div class="photo">
<p><img src="images/thumb4.jpg" alt="" /></p>
<p class="caption"> . </p>
</div>
</body>
</html>
, 150px,
, (.
3.29).

. 3.29.
, ,
. vertical-align,
photo. top, (. 3.30).

. 3.30.
IE 7.0 .
inline-block .
, inline-block
inline hasLayout. inline
,
( 3.19).
3.19. IE
<style type="text/css">
/* 3.18 */
</style>
<!--[if lte IE 7]>
<style type="text/css">
.photo {
display: inline; /* */
zoom: 1; /* hasLayout */
}
</style>
<![endif]-->
[if lte IE 7] IE 7.0 .
. zoom,
hasLayout,
. 5 Internet Explorer.
- ,
-. .
, , ,
IE ( 3.20).
3.20.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
BODY { font: 10pt Arial, Helvetica, sans-serif; }
#catalog A { color: #666; }
#catalog A:hover { color: #1fa0e2; }
#catalog DIV {
width: 110px; /* */
margin: 0 5px 15px 0; /* */
text-align: center; /* */
display: inline-block; /* - */
vertical-align: top; /* */
}
#catalog P { margin: 0 5px; }
#catalog SPAN { color: #ccc; font-size: 0.8em; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
#catalog DIV {
display: inline; /* */
zoom: 1; /* hasLayout */
}
</style>
<![endif]-->

</head>
<body>
<div id="catalog">
<div>
<p><img src="images/category1.jpg" alt="" /></p>
<p><a href="#"></a> <span>1856</span></p>
</div>
<div>
<p><img src="images/category2.jpg" alt="" /></p>
<p><a href="#"></a> <span>315</span></p>
</div>
<div>
<p><img src="images/category3.jpg" alt="" /></p>
<p><a href="#"> </a> <span>2109</span></p>
</div>
<div>
<p><img src="images/category4.jpg" alt="" /></p>
<p><a href="#"> .</a> <span>4296</span></p>
</div>
<div>
<p><img src="images/category5.jpg" alt="" /></p>
<p><a href="#"> </a> <span>731</span></p>
</div>
</div>
</body>
</html>
. 3.31.

. 3.31.
<div>, , ,
<div> catalog .


, , , . ,
, .
-
:
;
;
;
.
float left right.
, -
, none. . 3.32
.

. float: none

. float: left

. float: right
. 3.32.
HTML- 3.21.
3.21. float

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float</title>
</head>
<body>
<div>
<img src="images/figure.jpg" style="float: left" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat. Ut wisis enim ad minim veniam,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
float left <img>.
,
, , . right, ,
, ,
, .
, . 3.21,
.
. <img> fig, margin,
( 3.22).
3.22.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.fig {
float: left; /* */
background: #e69f73; /* */
padding: 4px; /* */
margin: 0 10px 5px 0; /* */
}
</style>
</head>
<body>
<p><img src="images/figure.jpg" class="fig" />
- ,
,
, .
, , , ,
.</p>
</body>
</html>
. 3.33.

. 3.33.


, .
,
(. 3.34).

. 3.34.
, .
,
( 3.23).
3.23.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.note {
float: right; /* */
background: #F3F0E9; /* */
border: 1px solid #000; /* */
padding: 0 10px; /* */
margin: 5px 0 5px 10px; /* */
width: 120px; /* */
font-size: 0.9em; /* */
}
.note P { margin: 0.6em 0; }
.note IMG {
vertical-align: middle; /* */
}
</style>
</head>
<body>
<div class="note">
<p><img src="images/tool_magicerase.gif" width="20" height="17"
alt="Magic Erase" /> &#8212; Magic Erase.</p>
<p> Magic Wand,
, , .</p>
</div>
<p> Magic Erase ( )
. Background ,
, .
.</p>
<p> Magic Erase
Magic Wand. ,
Tolerance, Anti-aliased
, Contiguous
, .
Background ,
.</p>
</body>
</html>

width.
, .


,
float .
float. ,
. 3.24 ,
- , float.
, - .
3.24.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
BODY {
font: 10pt Arial, Helvetica, sans-serif;
background: #f0f0f0; /* - */
}
#catalog A { color: #666; }
#catalog A:hover { color: #1fa0e2; }
#catalog DIV {
width: 110px; /* */
background: #fff;
margin: 0 5px 15px 0; /* */
text-align: center; /* */
float: left; /* */
}
#catalog P { margin: 0 5px; }
#catalog SPAN { color: #ccc; font-size: 0.8em; }
</style>
</head>
<body>
<div id="catalog">
<div>
<p><img src="images/category4.jpg" alt="" /></p>
<p><a href="#"> .</a> <span>4296</span></p>
</div>
<div>
<p><img src="images/category3.jpg" alt="" /></p>
<p><a href="#"> </a> <span>2109</span></p>
</div>
<div>
<p><img src="images/category2.jpg" alt="" /></p>
<p><a href="#"></a> <span>315</span></p>
</div>
<div>
<p><img src="images/category1.jpg" alt="" /></p>
<p><a href="#"></a> <span>1856</span></p>
</div>
</div>
</body>
</html>
. 3.35.

. 3.35. float
- , -
.
height, 100px display: inline.


float ,
. , float
, . 3.25,
left right float.
3.25.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.arrow { background: #f0f0f0; padding: 0 5px; }
.arrow A {
color: red; /* */
text-decoration: none; /* */
font-size: 1.5em;
}
.left { float: left; }
.right { float: right; }
</style>
</head>
<body>
<div class="arrow">
<div class="left"><a href="#"></a></div>
<div class="right"><a href="#"></a></div>
</div>
<p></p>
</body>
</html>
,
, float ,
(. 3.36). arrow - ,
, , , arrow
.

. 3.36.
, .
,
( 3.26).
3.26.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
DIV {
border: 1px solid #000; padding: 10px;
}
.fig {
float: left; margin: 0 10px 5px 0;
}
</style>
</head>
<body>
<div>
<img src="images/figure.jpg" class="fig" />-
</div>
</body>
</html>
(. 3.37).

. 3.37.

-, .
. .


,
. , ,
float .
. .


, ,

, . width 100%.
, 3.25 :
.left { float: left; width: 50%; }
.right { float: right; width: 50%; text-align:

right; }

50% 100% ,
, arrow, .
, ,
.

overflow
overflow ,
. auto ,
, hidden ,
. , overflow auto, scroll hidden
float. 3.25 :
.arrow { overflow: hidden; }
overflow (. 3.38).

. 3.38. overflow
3.26:
DIV { overflow: hidden; }
. 3.39.

. 3.39. overflow
overflow float. ,
. ,
, . 3.27
.
3.27.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
DIV {
border: 1px solid #000; padding: 10px;
overflow: hidden;
}
.fig {
float: left; margin: 0 10px 5px 0;
position: relative; /* */
left: -30px; /* */
}
</style>
</head>
<body>
<div>
<img src="images/figure.jpg" class="fig" />-
</div>
</body>
</html>
. 3.40.

. 3.40.
IE6 hasLayout. ,
zoom: 1 overflow.

clear
float clear .
left (float: left).
, .
right (float: right).
both .
, ,
.
, clear ,
. , , clear <div>
( 3.28).
3.28. clear

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.arrow { background: #f0f0f0; padding: 0 5px; }
.arrow A {
color: red; /* */
text-decoration: none; /* */
font-size: 1.5em;
}

.left { float: left; }


.right { float: right; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="arrow">
<div class="left"><a href="#"></a></div>
<div class="right"><a href="#"></a></div>
<div class="clear"></div>
</div>
<p></p>
</body>
</html>
clear clear both.
, .
.
, clear . ,
. , 3.29
float , float .
3.29. float

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> float</title>
<style type="text/css">
.col1, .col2, .footer { padding: 10px; }
.col1 { float: left; width: 100px; background: #E8D9A9; }
.col2 { margin-left: 120px; background: #ECC0A4; }
.photo { width: 150px; border: 1px solid #333; text-align: center;
margin-right: 10px; background: #fff; float: left; }
.clearleft { clear: left; }
.footer { background: #9A5044; color: #fff; clear: left; }
</style>
</head>
<body>
<div class="col1"><h3></h3><p> </p>
<p> </p><p> </p><p> </p></div>
<div class="col2">
<div class="photo">
<p><img src="images/thumb1.jpg" alt="" /></p>
<p class="caption"> </p>
</div>
<div class="photo">
<p><img src="images/thumb2.jpg" alt="" /></p>
<p class="caption"> </p>
</div><div class="clearleft"></div>
<p> </p>
</div>
<div class="footer"></div>
</body>
</html>
. 3.41. clear photo,
col1, .. , float.
, .

. 3.41.
. ,
overflow clearleft. .
<div class="col2">
<div style="overflow: hidden">
<div class="photo">
<p><img src="images/thumb1.jpg" alt="" /></p>
<p class="caption"> </p>
</div>
<div class="photo">
<p><img src="images/thumb2.jpg" alt="" /></p>
<p class="caption"> </p>
</div>
</div>
<p> </p>
</div>

:after
<div> clear ,
float. , .
:after, content
. , clear.
.
.clearleft:after {
content: "."; /* () */
clear: left; /* */
visibility: hidden; /* */
display: block; /* */
height: 0; /* */
}
,
visibility, , -
.
.
, :after, ,
<div class="clearleft"></div>. ,
clearleft, 3.30.

3.30. :after

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:after</title>
<style type="text/css">
DIV { border: 1px solid #000; padding: 10px; }
.fig { float: left; margin: 0 10px 5px 0; }
.clearleft:after {
content: ".";
clear: left;
visibility: hidden; display: block; height: 0;
}
</style>
</head>
<body>
<div class="clearleft">
<img src="images/figure.jpg" class="fig" />-
</div>
</body>
</html>
IE :after 7.0 ,
. zoom: 1 .
clearleft,
. ,
clear.


.
: , , . ,
position, .
position, left, top, right bottom
, , ,
. CSS
. ,
, .


position static,
. , ,
HTML.
left, top, right, bottom , .



. absolute
position. ,
(. 3.42).

. 3.42. left, right, top bottom


.
, , auto, ,
, .
, right, right, top bottom.
left top right bottom. left right
, right . bottom.
left , ,

. .
top, .
left right
, . top,
.
left right , width
. width right .
, top, bottom height.

.
position absolute .
overflow
auto. .
left,
right top, bottom ( 3.31).
3.31.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
body { margin: 0; }
#sidebar, #content { position: absolute; }
#sidebar, #content { overflow: auto; padding: 10px; }
#header {
height: 80px; /* */
background: #FEDFC0; border-bottom: 2px solid #7B5427;
}
#header h1 { padding: 20px; margin: 0; }
#sidebar {
width: 150px; background: #ECF5E4; border-right: 1px solid #231F20;
top: 82px; /* */
bottom: 0; /* */
}
#content {
top: 82px; /* */
left: 170px; /* */
bottom: 0; right: 0;
}
</style>
</head>
<body>
<div id="header"><h1> </h1></div>
<div id="sidebar">
<p> -</p><p> </p>
<p> </p><p> </p>
<p> </p><p> -</p>
<p> -</p>
</div>
<div id="content">
<h2> -</h2>
<p>
.
, ,
. , ,
- .
.</p>
<p> , ,
11,5 . ,
,
, , ,
. 2025 .</p>
<p> , ,
.</p>
</div>
</body>
</html>
. 3.43. header ,

sidebar content .

. 3.43.
IE6
left, right top, bottom.
, ,
. title <img>
, .
floatTip .
position absolute, display
none width .

( 3.32).
3.32.
#floatTip {
position: absolute; /* */
width: 250px; /* */
display: none; /* */
border: 1px solid #000; /* */
padding: 5px; /* */
font-family: sans-serif; /* */
font-size: 9pt; /* */
color: #333; /* */
background: #ECF5E4; /* */
}
moveTip()
, toolTip()
( 3.33).
3.33.
document.onmousemove = moveTip;
function moveTip(e) {
floatTipStyle = document.getElementById("floatTip").style;
w = 250; //
// IE
if (document.all) {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
//
} else {
x = e.pageX; // X
y = e.pageY; // Y
}
//

if ((x + w + 10) < document.body.clientWidth) {


floatTipStyle.left = x + 'px';
//
} else {
floatTipStyle.left = x - w + 'px';
}
//
floatTipStyle.top = y + 20 + 'px';
}
function toolTip(msg) {
floatTipStyle = document.getElementById("floatTip").style;
if (msg) {
//
document.getElementById("floatTip").innerHTML = msg;
floatTipStyle.display = "block"; //
} else {
floatTipStyle.display = "none"; //
}
}

src <script>. 3.34.
3.34.

XHTML 1.0 CSS 2.1 CSS 3 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
#floatTip {
position: absolute; width: 250px; display: none;
border: 1px solid #000; padding: 5px;
font-family: sans-serif; font-size: 9pt;
color: #333; background: #ECF5E4;
opacity: 0.85; /* */
}
</style>
<script type="text/javascript" src="scripts/tooltip.js"></script>
</head>
<body>
<p><img src="images/odel.jpg" alt="" width="300" height="450"
onmouseover="toolTip(': Canon EOS 350D<br />' +
': Canon EF 24-105 f/4L IS USM<br />' +
': Canon Speedlite 580 EX<br />' +
': 1/125<br />: 5.6')" onmouseout="toolTip()" /></p>
<div id="floatTip"></div>
</body>
</html>
. 3.44. ,
toolTip() JavaScript. Safari
, .
CSS3 opacity, . IE
9.0 .

. 3.44. , JavaScript


fixed position
.
left, top, right bottom -.
absolute ,
, .
, , , ,
, . 3.35
,
.
3.35.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
BODY { margin-bottom: 50px; }
#footer {
position: fixed; /* */
left: 0; bottom: 0; /* */
padding: 10px; /* */
background: #39b54a; /* */
color: #fff; /* */
width: 100%; /* */
}
</style>
</head>
<body>
<div id="content">

.

.
, !
</div>

<div id="footer">&copy; </div>


</body>
</html>
. 3.45.
, BODY. IE6 fixed,
.

. 3.45.


relative position,
. left, top, right bottom
. left
, .
top (. 3.46), .

. 3.46. left top


bottom right . right
, (. 3.47).
top , .

. 3.47. right bottom


.
, , .
, , ,
.
3.36 .
3.36.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
H1 {
font: bold 2em Arial, Tahome, sans-serif; /* */
color: #fff; background: #375D4C;
padding: 0 10px;
}
H1 SPAN {
position: relative; /* */
top: 0.3em; /* */
}
</style>
</head>
<body>
<h1><span> </span></h1>
<p> , -
.</p>
</body>
</html>
. 3.48.

. 3.48.


,
, , margin.
.
relative, absolute,

(. 3.49).

. 3.49. left, right, top bottom


, .
, padding.
<div style="position: relative; padding: 10px; border: 1px solid #000;
background: #fc0; height: 500px;">
<div style="position: absolute; right: 0; bottom: 0">

</div
</div>
left, right, top, bottom
, .
, position
. :
, ,
. , , . 3.50.

. 3.50.
3.37. photo ,
img ( ), comment ( ) tool (
) .
3.37.

XHTML 1.0 CSS 2.1 CSS 3 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.photo { width: 300px; height: 407px; position: relative; }
.img, .comment, .tool { position: absolute; }
.comment {
background: url(images/comment_num.png) no-repeat;
width: 51px; height: 31px; /* */
text-align: center; /* */
right: 10px; top: 15px; /* */
}
.tool {
background: #000; /* IE */
background-color: rgba(0,0,0,0.6); /* */
padding: 3px 0 0;
bottom: 0; /* */
width: 100%; /* */
}
.tool img { margin-left: 5px; }
</style>
</head>
<body>
<div class="photo">
<div class="img"><img src="images/dog.jpg" alt="" /></div>
<div class="comment" title=" ">134</div>
<div class="tool">
<img src="images/comment_add.png" alt=" " />
<img src="images/photo_author.png" alt=" " />
<img src="images/photo_star.png" alt=" " />
</div>
</div>
</body>
</html>


- (. 3.51). ,
, ,
, (. 3.52).

. 3.51.

. 3.52.
- (. 3.53), ,
Z. , ,
, . ( 3.38)
. ,
Z, , , .

. 3.53. -
3.38.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.card IMG { position: relative; }
.seven { left: -120px; top: 25px; }
.ace { left: -240px; top: 50px; }
</style>
</head>
<body>
<p class="card">
<img src="images/3.png" alt="3" class="three" />
<img src="images/7.png" alt="7" class="seven" />
<img src="images/ace.png" alt="" class="ace" />
</p>
</body>
</html>
CSS Z- z-index, ,
. , ,
. - 0, zindex: 1 . 3.38 ,
, , HTML- .
.card IMG { position: relative; }
.three { top: 50px; left: 55px; z-index: 5; }
.seven { left: -120px; top: 25px; z-index: 2; }
.ace { left: -295px; z-index: 1; }
z-index three 5 ,
z-index . , .
z-index , position
absolute, fixed relative.
,
z-index, 9999. , z-index,
. 3.39 z-index 10.
, :hover.
3.39. z-index
.card IMG { position: relative; }
.three { top: 50px; left: 55px; z-index: 5; }
.seven { left: -120px; top: 25px; z-index: 2;}
.ace { left: -295px; z-index: 1; }
.card IMG:hover { z-index: 10; }

IV

,
.
.
,
.
,
.
, .

.
.


, ,
, .


.
, , ,
, .


.
:
;
;
, cellpadding;
, cellspacing.
,
. , ,
, .
, , , ,
. , .
.
,
. , , , , ,
.
<table> table-layout fixed.
, ( 4.1).
4.1. table-layout

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TABLE {
table-layout: fixed; /* */
}
TD.dino { width: 200px; }
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tr>
<td class="dino"><img src="images/dino.gif" width="289"
height="120" alt="" /></td>
<td>...</td>
</tr>
</table>
</body>
</html>

.
(. 4.1), (. 4.1).

. IE6, IE7, Firefox 2

. IE8, IE9, Firefox 3, Safari Chrome


. 4.1. table-layout
,
overflow hidden. , ,
, . 4.1. .
TABLE {
table-layout: fixed; /* */
}
TD.dino {
width: 200px;
overflow: hidden;
}


.
. 4.2 , ,
, .
4.2.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
TABLE {
width: 100%; /* */
}
TD {
padding: 10px; /* */
}
TD.content {
background: #f0f0f0; /* */
}
TD.menu {
width: 120px; /* */
background: #9c3022; /* */
color: #fff; /* */
vertical-align: top;
}
</style>
</head>
<body>
<table>
<tr>
<td class="content">
<p> . , ,

.</p>
<p> , .
, ,
10-15 ,
, , ,
.</p>
<p> 20-25 .
, , .</p>
</td>
<td class="menu"></td>
</tr>
</table>
</body>
</html>
. 4.2.

. 4.2. ,
, .


,
(. 4.3).

. 4.3.
.
, <col> <colgroup>,
. ,
, .
.


, . ,
, , ,
. , .

, , , .
, ( 100 ).
,
table-layout,
.
. table-layout fixed
.
.


,
, , .
. ,
.


background,
TABLE. ,
, . background ,
transparent, .. ,
. TABLE TD TH,
( 4.3).
4.3.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table {
background: maroon; /* */
color: white; /* */
}
td {
background: navy; /* */
}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="1">
<tr><th> 1</th><th> 2</th></tr>
<tr><td> 3</td><td> 4</td></tr>
</table>
</body>
</html>
( <td>) ( <th>).
, TH , ,
, TABLE. TD ,
.
. 4.4.

. 4.4.

cellpadding <table>.
. padding, TD,
4.4.
4.4.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TABLE {
background: white; /* */
color: white; /* */
}
TD, TH {
background: maroon; /* */
padding: 5px; /* */
}
</style>
</head>
<body>
<table cellspacing="1">
<tr><th> 1</th><th> 2</th></tr>
<tr><td> 3</td><td> 4</td></tr>
</table>
</body>
</html>

TD TH. . 4.5.

. 4.5.
padding ,
cellpadding <table> .


cellspacing <table>.
,
. cellspacing
border-spacing, .
.
, (.. ),
( ).
border-spacing , TABLE
border-collapse collapse ( 4.5).
4.5.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title> cellspacing</title>
<style type="text/css">
TABLE {
width: 100%; /* */
border: 1px solid #399; /* */
border-spacing: 7px 5px; /* */
}
TD {
background: #fc0; /* */
border: 1px solid #333; /* */
padding: 5px; /* */
}
</style>
</head>
<body>
<table>
<tr><td></td><td>5</td><td>8</td></tr>
<tr><td></td><td>4</td><td>11</td></tr>
<tr><td></td><td>24</td><td>9</td></tr>
<tr><td></td><td>2</td><td>13</td></tr>
</table>
</body>
</html>
. 4.6.

. 4.6. border-spacing
Internet Explorer border-spacing,
cellspacing
( 2px).
TABLE border-collapse collapse,
cellspacing , border-spacing .


,
border <table>. - ,
, . ,
.

cellspacing
, cellspacing <table> .
, ,
, cellspacing .
4.3 , .
, ,
. ,
.

border
border ,
. ,
border-left, border-right, border-top border-bottom,
, , .
border TABLE, ,
TD TH ( 4.6).
4.6.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TABLE {
background: #dc0; /* */
border: 5px double #000; /* */
}
TD, TH {
padding: 5px; /* */
border: 1px solid #fff; /* */
}
</style>
</head>
<body>
<table>
<tr><th> 1</th><th> 2</th></tr>
<tr><td> 3</td><td> 4</td></tr>
</table>
</body>
</html>

. . 4.7.

. 4.7.
, .
cellspacing <table>.
, . <table cellspacing="0">,
, , .
border-collapse collapse,
TABLE ( 4.7).
4.7.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TABLE {
border-collapse: collapse; /* */
background: #dc0; /* */
border: 4px solid #000; /* */
}

TD, TH {
padding: 5px; /* */
border: 2px solid green; /* */
}
</style>
</head>
<body>
<table>
<tr><th> 1</th><th> 2</th></tr>
<tr><td> 3</td><td> 4</td></tr>
</table>
</body>
</html>

. .
. 4.8.

. 4.8.


.
<th>, , .
text-align ( 4.8).
4.8.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TABLE {
border-collapse: collapse; /* */
width: 300px; /* */
}
TH {
background: #fc0; /* */
text-align: left; /* */
}
TD {
background: #fff; /* */
text-align: center; /* */
}
TH, TD {
border: 1px solid black; /* */
padding: 4px; /* */
}
</style>
</head>
<body>
<table>
<tr><th> 1</th><td> 1</td><td> 2</td></tr>
<tr><th> 2</th><td> 3</td><td> 4</td></tr>
</table>
</body>
</html>
<th> , <td>
. (. 4.9)..

. 4.9.
, .
, , .
vertical-align,
4.9.
4.9.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TABLE {
border-collapse: collapse; /* */
width: 300px; /* */
}
TH, TD {
border: 1px solid black; /* */
text-align: center; /* */
padding: 4px; /* */
}
TH {
background: #fc0; /* */
height: 40px; /* */
vertical-align: bottom; /* */
padding: 0; /* */
}
</style>
</head>
<body>
<table>
<tr><th> 1</th><th> 2</th></tr>
<tr><td> 1</td><td> 2</td></tr>
</table>
</body>
</html>
<th> 40
. . 4.10.

. 4.10.


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

.
<td bgcolor="#ffcc00"></td>,
, , ,
(&nbsp;). ,
12 , -
. ,
, - .
.
.
empty-cells, hide
. , .
:
;
, ;
visibility hidden.
&nbsp; , ..
( 4.10).
4.10.

XHTML 1.0 CSS 2.1 CSS 3 IE 6 IE 7 IE 8 Cr 5 Op 10 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> empty-cells</title>
<style type="text/css">
TABLE {
border: 4px double #399; /* */
}
TD {
background: #fc0; /* */
border: 1px solid #333; /* */
empty-cells: hide; /* */
padding: 5px; /* */
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td></td><td>5</td><td>8</td>
</tr>
<tr>
<td></td><td> </td><td>11</td>
</tr>
<tr>
<td></td><td>24</td><td></td>
</tr>
<tr>
<td></td><td>&nbsp;</td><td>13</td>
</tr>
</table>
</body>
</html>
Safari . 4.11. IE7
. 4.11.

. Safari, Firefox, Opera, IE8, IE9

. IE6, IE7
. 4.11.


: -,
!. , ,
. ,
.
?. , ,
, .
, , ,
(. 4.1).
. 4.1.


,
,

.

.

,
.


,

.
.

.

, ,
. ,
.


,

.

HTML-

,

.

, ,
.



, .
.
, ,
. , , ,
, .
, ,
, , .
4.2 <div>,
( 4.11).
4.11.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.content, .menu { padding: 10px;}
.container {
background: #9c3022; /* */
}
.content {
margin-right: 120px;
background: #f0f0f0; /* */
}
.menu {
width: 100px; /* */
color: #fff; /* */
float: right; /* */
}
</style>
</head>
<body>
<div class="container">
<div class="menu"></div>
<div class="content">
. , ,
.
</div>
</div>
</body>
</html>
, , ,
. ,
,
. , ,
, . ,
padding-bottom , ,
margin-bottom .
.
.content, .menu {
padding: 10px;
padding-bottom: 10000px; /* */
margin-bottom: -10000px; /* */
}
.container {
overflow: hidden; /* */
}
.content {
margin-right: 120px;
background: #f0f0f0;
}
.menu {
background: #9c3022;
width: 100px;
color: #fff;
float: right;
}
.

.
.

. .
,
. .



, -.
,
, .
, ,
, , .



,
( title) ( alt),
.



, ,
.


,
,
. ,
, , .

GIF
GIF-a
.
, .
, .


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


,
, .
. , .
, ,
.


, , . 4.12.
, ,
.

. 4.12.
, , ( <map> <area>). .
, , ,
(. 4.13). -,
( ),
, .

. 4.13.
, .
, .


, , Adobe
Photoshop, .
,
(. 4.14).
, .

. 4.14.
Slice (

, K )

.
.
Slice Select .
, .
(. 4.15).

. 4.15.
Slice Slice Select
Ctrl .
, ,
, . Photoshop
, .
Slice, 13 (. 4.16).
Slice,
.

. 4.16.
, , - ,
. , ,
, .


, , .
File > Save for Web & Devices... ( > Web, Alt + Shift + Ctrl + S )
(. 4.17).

. 4.17.
Slice Select
, , ..
, Shift ,
.
Save, ,
HTML-, , (. 4.18).

. 4.18.
images, HTML-
. , splash.html,
splash_01.png, splash_13.png. , spacer.gif,
11 .
.
, HTML- ,
Settings Other...
, , , HTML- (. 4.19).

. 4.19.
HTML-,
4.12.
4.12.

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> copy</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table id="Table_01" width="486" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td rowspan="2">
<img id="splash_01" src="images/splash_01.png" width="37" height="81"
alt="" /></td>
<td colspan="3">
<img id="splash_02" src="images/splash_02.png" width="194" height="63"
alt="" /></td>
<td colspan="3" rowspan="2">
<img id="splash_03" src="images/splash_03.png" width="254" height="81"
alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="63" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img id="splash_04" src="images/splash_04.png" width="194" height="18"
alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img id="splash_05" src="images/splash_05.png" width="105" height="95"
alt="" /></td>
<td colspan="4">
<img id="splash_06" src="images/splash_06.png" width="254" height="46"
alt="" /></td>
<td rowspan="2">
<img id="splash_07" src="images/splash_07.png" width="126" height="87"
alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="46" alt="" /></td>
</tr>
<tr>
<td rowspan="4">
<img id="splash_08" src="images/splash_08.png" width="92" height="91"
alt="" /></td>

<td colspan="2" rowspan="3">


<img id="splash_09" src="images/splash_09.png" width="71" height="80"
alt="" /></td>
<td rowspan="4">
<img id="splash_10" src="images/splash_10.png" width="91" height="91"
alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="41" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<img id="splash_11" src="images/splash_11.png" width="126" height="50"
alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img id="splash_12" src="images/splash_12.png" width="105" height="42"
alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img id="splash_13" src="images/splash_13.png" width="71" height="11"
alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt="" /></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="37" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="68" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="92" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="34" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="37" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="91" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="126" height="1" alt="" /></td>
<td></td>
</tr>
</table>
</body>
</html>
, ,
-. ,
.
,
. . 4.20.

. 4.20. ,
, toplayer,
( 4.13).
4.13.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">

.toplayer {
background: #aeae9b url(images/bgtop.png) repeat-x; /* */
height: 216px; /* */
border-bottom: 2px solid #8f8f8f; /* */
}
.toplayer table {
margin: auto; /* */
}
</style>
</head>
<body>
<div class="toplayer">
<table>...</table>
</div>
</body>
</html>
background,
, .
, ,
, .
- , .
,
( 4.14).
4.14.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { margin: 0; }
.toplayer {
background: #aeae9b url(images/bgtop.png) repeat-x; /* */
height: 216px; /* */
border-bottom: 2px solid #8f8f8f; /* */
}
.toplayer table { margin: auto; }
.toplayer img {display: block;}
</style>
</head>
<body>
<div class="toplayer">
<table width="486" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" style="width:37px; height:81px"></td>
<td colspan="3">
<img src="images/splash_02.png" width="194" height="63" alt="" /></td>
<td colspan="3" rowspan="2" style="width:254px; height:81px"></td>
<td style="width:1px; height:63px"></td>
</tr>
<tr>
<td colspan="3" style="width:194px; height:18px"></td>
<td style="width:1px; height:18px"></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/splash_05.png" width="105" height="95" alt="" /></td>
<td colspan="4" style="width:254px; height:46px"></td>
<td rowspan="2">
<img src="images/splash_07.png" width="126" height="87" alt="" /></td>
<td style="width:1px; height:46px"></td>
</tr>
<tr>
<td rowspan="4" style="width:92px; height:89px"></td>
<td colspan="2" rowspan="3">
<img src="images/splash_09.png" width="71" height="80" alt="" /></td>
<td rowspan="4" style="width:91px; height:89px"></td>
<td style="width:1px; height:41px"></td>
</tr>
<tr>
<td rowspan="3" style="width:126px; height:48px"></td>
<td style="width:1px; height:8px"></td>
</tr>
<tr>

<td colspan="2" rowspan="2" style="width:105px; height: 40px"></td>


<td style="width:1px; height: 31px"></td>
</tr>
<tr>
<td colspan="2" style="width:71px; height:9px"></td>
<td style="width:1px; height:9px"></td>
</tr>
<tr>
<td style="width:37px; height:1px"></td>
<td style="width:68px; height:1px"></td>
<td style="width:92px; height:1px"></td>
<td style="width:34px; height:1px"></td>
<td style="width:37px; height:1px"></td>
<td style="width:91px; height:1px"></td>
<td style="width:126px; height:1px"></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
,
. , IMG display: block.
,
. ,
, .
, . ,
, .
, .
, .
menu
, . left top
, .. menu.
( 4.15).
4.15.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { margin: 0; }
.toplayer {
background: #aeae9b url(images/bgtop.png) repeat-x; /* */
height: 216px; /* */
border-bottom: 2px solid #8f8f8f; /* */
}
.menu {
width: 486px; /* */
margin: auto; /* */
position: relative; /* */
}
.toplayer img {
position: absolute; /* */
}
.nort { top: 80px; }
.bayki { top: 130px; left: 200px; }
.konkurs { top: 80px; left: 360px; }
</style>
</head>
<body>
<div class="toplayer">
<div class="menu">
<img src="images/ntitle.png" alt=" " class="title" />
<img src="images/nort.png" alt="" class="nort" />
<img src="images/bayki.png" alt="" class="bayki" />
<img src="images/konkurs.png" alt="" class="konkurs" />
</div>
</div>
</body>

</html>
toplayer
. menu ,
. menu top left.
HTML- , ,
, , . ,
.


, , ,
( , ),
.
,
.


,
, .
width <table>
width,
<td> ( 4.16).
4.16.

XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="5">
<tr>
<td width="200" valign="top"> </td>
<td valign="top"> </td>
</tr>
</table>
</body>
</html>
,
valign top. ,
, ,
.
.
( 4.17).
4.17.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
width: 100%; /* */
}
.layout TD {
vertical-align: top; /* */
}
TD.leftcol {
width: 200px; /* */
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" class="layout">
<tr>
<td class="leftcol"> </td>

<td> </td>
</tr>
</table>
</body>
</html>


,
, , .
, background
( 4.18).
4.18.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
width: 100%; /* */
}
TD {
vertical-align: top; /* */
padding: 5px; /* */
}
TD.leftcol {
width: 200px; /* */
background: #ccc; /* */
}
TD.rightcol {
background: #fc3; /* */
}
</style>
</head>
<body>
<table cellspacing="0" class="layout">
<tr>
<td class="leftcol"> </td>
<td class="rightcol"> </td>
</tr>
</table>
</body>
</html>
(. 4.21).

. 4.21.


.
, , .
,
( 4.19).
4.19.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
width: 100%; /* */
}
TD {
vertical-align: top; /* */
padding: 5px; /* */
}
TD.leftcol {
width: 200px; /* */
background: #ccc; /* */
border: 1px solid #000; /* */
}
TD.rightcol {
background: #fc3; /* */
border: 1px solid #000; /* */
}
.spacer {
width: 10px; /* */
}
</style>
</head>
<body>
<table cellspacing="0" class="layout">
<tr>
<td class="leftcol"> </td>
<td class="spacer"></td>
<td class="rightcol"> </td>
</tr>
</table>
</body>
</html>
spacer,
. ,
.
. 4.22 .
.

. 4.22.


,
. border-left
border-right ( 4.20).
4.20.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
width: 100%; /* */

}
TD {
vertical-align: top; /* */
padding: 5px; /* */
}
TD.leftcol {
width: 100px; /* */
background: #ccc; /* */
border-right: 1px dashed #000; /* */
}
TD.rightcol {
background: #fc3; /* */
}
</style>
</head>
<body>
<table cellspacing="0" class="layout">
<tr>
<td class="leftcol"> </td>
<td class="rightcol"> </td>
</tr>
</table>
</body>
</html>
(. 4.23).

. 4.23.
,
. ,
, ,
.


,
. , , ,
, , .

, .


.

.
. 4.21 950 ,
150, 600 200 .
4.21.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
width: 950px; /* */
}
.layout TD {
vertical-align: top; /* */
padding: 5px; /* */
}
.col1 { width: 150px; }
.col2 { width: 600px; }
.col3 { width: 200px; }
</style>
</head>
<body>
<table class="layout" cellspacing="0">
<tr>
<td class="col1"> 1</td>
<td class="col2"> 2</td>
<td class="col3"> 3</td>
</tr>
</table>
</body>
</html>
cellpadding.
, ,
.
. ,
,
. , , ,
. ,
. - .


,
, . :

1. ;
2. , ,
.
,
( 4.22). 100%,
, . ,
-,
.
4.22.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout { width: 90%; }
.layout TD { vertical-align: top; padding: 5px; }
.col1 {
width: 20%; /* */
background: #fc0; /* */
}
.col2 {
width: 40%; /* */
background: #f0f0f0; /* */
}
.col3 {
width: 40%; /* */
background: #cc9; /* */
}
</style>
</head>
<body>
<table class="layout" cellspacing="0">
<tr>
<td class="col1"> 1</td>
<td class="col2"> 2</td>
<td class="col3"> 3</td>
</tr>
</table>
</body>
</html>

-, .
,
.
. , , 200
, 600
. , table-layout
TABLE.


,
. ,
, ,
(. 4.23).

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

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout { width: 100%; }
.layout TD { vertical-align: top; padding: 5px; }
.col1 {
width: 150px; /* */
background: #fc0; /* */
}
.col2 {
background: #afccdb; /* */
}
.col3 {
width: 200px; /* */
background: #fc0; /* */
}
</style>
</head>
<body>
<table class="layout" cellspacing="0">
<tr>
<td class="col1"> 1</td>
<td class="col2"> 2</td>
<td class="col3"> 3</td>
</tr>
</table>
</body>
</html>
, .
. ,
100%, 200 , 20%,
, 60%.
, .
. 4.25 .

. 4.25.
.
, .
, ,
. , .
( 4.24).
4.24.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout { width: 100%; padding: 0; }
.col1, .col2, .col3 { vertical-align: top; padding: 5px; }
.col1 {
width: 150px; /* */
background: #fc0; /* */
}
.col2 {
width: 60%; /* */
background: #afccdb; /* */
}
.col3 {
width: 40%; /* */
background: #fc0; /* */
}
</style>
</head>
<body>
<table class="layout" cellspacing="0">
<tr>
<td class="col1"> 1</td>
<td>
<table class="layout" cellspacing="0">
<tr>
<td class="col2"> 2</td>
<td class="col3"> 3</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
.
100%,
.
,
cellpadding cellspacing. padding,
.
,
. 60%
, .

Internet Explorer

IE -.
CSS,
IE, IE6 IE7.
, Microsoft. IE
Windows . Windows
Update, .
, - . Firefox,
Opera Chrome ,
.
liveinternet.ru .
. 5.1 2010 2011 .

. 5.1. ( IE )
IE9 , IE 8.0.
IE7, 45% IE6.
(. 5.2), IE7 IE8.
IE6 - , ,
IE6 . , 2010 IE6 9,6%,
4%. , .

. 5.2.
,

. , htmlbook.ru,
(. 5.3).

. 5.3. htmlbook.ru ( IE )
IE6 ,
.
, , ,
.
, ,
.
, , , .
Firefox, IE. Firefox
. Opera, Safari, Chrome
-. ,
,
. IE,
. .

IE
IE9, IE8 , 7.0.
, IE7 ,
, .
.
1. .
2. .
,
IE7 . IE7
(. 5.4),
> .

. 5.4 IE9
, , ,
.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
IE 7.0.
( c:\www\page.html) IE7,
( > )
(. 5.5).

. 5.5.
IE6 .
Windows, IE . , Windows (
) . Microsoft

Virtual PC 2007, .
Microsoft IE. ,
Windows.
, .
MultipleIE, IE .
IE6, IE5.5 IE4 . MultipleIE
Windows 2000 Windows XP Windows Vista Windows 7. ,
, , .
IETester,
IE. IETester ,
IE, 5.5.
(. 5.6).

. 5.6. IE
. ,
IE , (. 5.7).

. 5.7.
IETester 1.0 .
, IE7
, . - IETester ,
, .


. IE6 IE7 (.)
http://msdn.microsoft.com/ru-ru/library/cc308490.aspx
Virtual PC 2007
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=04d26402-3199-48a3-afa22dc0b40a73b6
MultipleIE
http://tredosoft.com/Multiple_IE
IETester
http://www.my-debugbar.com/wiki/IETester/HomePage


-
, . IE
.
.
<!--[if ]> HTML- <![endif]-->
<![if ]> HTML- <![endif]>
HTML <!-- -->.
, , IE
. ,
, .
, , ,
.
. IE .

<!--[if ]> <![endif]-->.
. (true),
HTML-, (false), .
(. 5.1).
. 5.1.

IE

IE

IE 6

Internet Explorer 6.0

IE 7

Internet Explorer 7.0

IE 8

Internet Explorer 8.0

IE 9

Internet Explorer 9.0

IE7 5.1.
5.1. IE7

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
P {
color: green; /* , IE7 */
}
</style>
<!--[if IE 7]>
<style type="text/css">
P {
color: red; /* IE7 */
}
</style>
<![endif]-->
</head>
<body>
<div>Lorem ipsum dolor sit amet...</div>

</body>
</html>

(. 5.2).
. 5.2. ,

.
()

,
[if !(IE 6) & (lt IE 9)]

.
!

. ,
! .

IE6
IE9.

[if !(IE 7)]

,
IE7.

&

.
.
true,
.

. true,
[if (IE 6) | (IE 7)]
.

IE6 IE7.

lt

. ,
.


IE9.

lte

.
, [if lte IE 8]
.


IE9.

gt

. ,
.

[if gt IE 7]


IE7.

gte

. ,

.

[if gte IE 7]

IE7, IE8, IE9

[if (gte IE 6) & (lt IE 8)] IE6, IE7.

[if lt IE 9]

IE8 , .
(. 5.8) IE7, [if IE gt 7]
, IE9. 7.

. 5.8.
5.2 RGBA CSS3.
, IE9. IE78
filter, , IE6
background.
5.2. IE

XHTML 1.0 CSS 2.1 CSS 3 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">

BODY {
background: url(images/star.png); /* - */
}
.transparent {
background-color: rgba(0, 120, 201, 0.7);
/* */
padding: 10px; /* */
color: #fff; /* */
}
</style>
<!--[if (lt IE 9) & !(IE 6)]>
<style type="text/css">
.transparent {
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#c80078c9,
endColorstr=#c80078c9);
}
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
.transparent { background: #0078c9; }
</style>
<![endif]-->
</head>
<body>
<div class="transparent">
50 ,
,
, ,
82 .
</div>
</body>
</html>
IE9 . 5.9.

. 5.9. IE
gradient , , .
,
RGBA. startColorstr
endColorstr, .
ARGB #aarrggbb. 0 255
, . . 5.3
.
, FF .
. 5.3.
%

10

20

30

40

50

60

70

80

90

100

19

33

4D

66

80

99

B3

CC

E6

FF

,
IE. ,
HTML. .
<!--[if !IE]>-->

IE
<!--<![endif]-->
-->,
. Internet Explorer
.
Internet Explorer.
, .
IE CSS-,
.
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]><link href="ie.css"
rel="stylesheet" type="text/css" /><![endif]-->
style.css, IE 7.0 ie.css.
.

hasLayout
, IE
hasLayout, true false.
hasLayout true, hasLayout ,
false.
IE6, IE7 , , hasLayout.
IE8 , , , IE
-. ,
.
hasLayout -.
.
.
.
- ,
.
height .
hasLayout, .
,
, CSS . ,
, .
, hasLayout:
( <img>);
(<table>), (<tr>) (<td>, <th>);
(<hr>);
(<html>, <body>);
(<frameset>, <frame>, <iframe>);
(<button>, <fieldset>, <input>, <legend>, <select>,
<textarea>);
(<embed>, <object>) (<applet>);
<marquee>.
hasLayout ,
:
display: inline-block;
position: absolute;
float: left | right;
width: auto;
height: auto;
writing-mode: tb-rl
zoom: 1.

,
: writing-mode zoom.
writing-mode , tb-rl
. CSS3 IE. - ,
.
zoom .
1, 1.0 , 1.0
. zoom: 1 - , ,
.
CSS. , ,
.
IE7 hasLayout :
position: fixed;
overflow: hidden | scroll | auto;
overflow-x: hidden | scroll | auto;
overflow-y: hidden | scroll | auto;
min-width: auto;
max-width: auto;
min-height: auto;
max-height: auto.
hasLayout :
position: static;
float: none
width: auto;
height: auto;
overflow: visible;
writing-mode: lr-tb | rl-tb | bt-rl;
zoom: normal.

hasLayout
,
zoom: 1 height: 1%.


, ,
. 5.3 <div> .
5.3.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#wrapper { border: 2px solid gray; }

#one { border: 2px solid red; }


#two { border: 2px solid blue; margin-top: -2px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="one"></div>
<div></div>
<div id="two"></div>
</div>
</body>
</html>
IE6 . 5.10. .

. 5.10. IE6
hasLayout wrapper.
<!--[if IE 6]>
<style type="text/css">
#wrapper {
zoom: 1; /* hasLayout */
}
</style>
<![endif]-->
. 5.11.

. 5.11.


hasLayout . 5.12
. IE67 .

. 5.12.
5.4.

XHTML 1.0 CSS 2.1 IE6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { border: 3px solid #000; padding: 5px; }
#floated { float: left; width: 100px; margin: 0 10px 10px 0; }
#text { width: 300px; }
</style>
</head>
<body>
<p id="floated"><img src="images/figure.jpg" alt="" /></p>
<p id="text">- ,
,
, .
, , , ,
.</p>

</body>
</html>
, , Firefox, (. 5.13).

. 5.13. Firefox
zoom, hasLayout ,
. width text,
wrapper.
<div id="wrapper">
<p id="floated"><img src="images/figure.jpg" alt="" /></p>
<p id="text">...</p>
</div>
.
p { border: 3px solid #000; padding: 5px; }
#floated { float: left; width: 100px; margin: 0 10px 10px 0; }
#wrapper { width: 300px; }


, display: block, IE6
(. 5.14).

. 5.14. IE6
5.5.
5.5.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
SPAN { display: block; background: #333;color: #fff; }
</style>
</head>
<body>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</body>
</html>
hasLayout <span>, , zoom.

<!--[if IE 6]>
<style type="text/css">
SPAN { zoom: 1; }
</style>
<![endif]-->
IE7, <li> .
width . 5.14, .
LI { width: 200px; }
zoom <span>.


IE6 , .
, ,
. 5.6 .
5.6.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
DIV { height: 30px; background: #fc0; }
</style>
</head>
<body>
<div> , , <br />
.</div>
</body>
</html>
height, ,
overflow hidden.


, ,
. IE6 display: block
.
, float ( 5.7).
5.7.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
DIV {
background: #ffc; padding: 1%; text-align: center;
float: left; width: 98%;
}
A { display: block; }
</style>
</head>
<body>
<div><a href="#"> </a></div>
</body>
</html>
hasLayout <a>, , zoom.
<!--[if IE 6]>
<style type="text/css">

DIV A { zoom: 1; }
</style>
<![endif]-->


, , . IE67
, hasLayout. .
<p></p>
<div> </div>
<div><span></span></div>
.
<p></p>
<div>&nbsp;</div>
<div><span>1</span></div>
5.8 <div> ,
hasLayout.
5.8.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
DIV { background: #fc0; width: 100%; }
</style>
</head>
<body>
<div></div>
</body>
</html>
IE67,
, , .
IE6 overflow: hidden, IE7
.
div {
overflow: hidden; /*
height: 0; /* IE7 */
}

IE6 */


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

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
UL {
width: 300px; /* hasLayout */
}
</style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li>
</ul>
</body>

</html>
.
LI {
margin-left: 1em;}
, marginleft, UL.
UL {
margin-left: -1em;}


, .
5.10 t1 t2, . IE6 , t1, .
5.10.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.t1 {
background: #fc0; padding: 10px;
}
.t2 {
border: 1px solid #000; background: #fff; padding: 5px;
margin-top: -20px; /* */
}
</style>
</head>
<body>
<div class="t1">
<div class="t2"></div>
</div>
</body>
</html>
IE6 . 5.15.

. 5.15.
hasLayout, ,
height: 1%.
.t2 {
height: 1%;
}


hasLayout ,
. ,
IE6 IE7.

.
On having layout the concept of hasLayout in IE/Win (.)
http://haslayout.net (.)

HasLayout

IE
, Internet Explorer ,
, .
, , IE .
CSS3, , IE . IE9
, .
(graceful degradation)
.
, .
, .
CSS3 :
Firefox , -moz-;
Safari Chrome , -webkit-;
Opera , -o-.
, ,
. ,
.
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari Chrome */
border-radius: 10px; /* Opera IE9 */
CSS,
Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, .
5.11 CSS3 .
5.11.

XHTML 1.0 CSS 2.1 CSS 3 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.block {
background: #c5fddb; border: 1px solid #666;
padding: 1px 10px;
/* */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* */
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
box-shadow: 0 0 5px #666;
}
input[type="submit"] {
background: #f0f0f0; border: 1px solid #666;
font-size: 1.2em; padding: 0 40px;
/* */
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
</style>
</head>
<body>
<div class="block">
<p> 20 ,
.
75%
(15 ).</p>
<p><input type="submit" value=" " /></p>

</div>
</body>
</html>
. 5.16.

. 5.16. Safari
IE8 . 5.17.

. 5.17. IE8
, .
, , , .
, , , .
.
?
CSS3 .
CSS3.
,
.
.
, .
, , ,
.
. ,
, , IE8
, .

IE8
IE8 .
CSS3 .
,
, , .

TTF
IE8 TTF @font-face ( 5.12).

.
5.12. @font-face

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title>@font-face</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@font-face {
font-family: Pompadur; /* */
src: url(fonts/pompadur.ttf); /* */
}
p {
font-family: Pompadur;
}
</style>
</head>
<body>
<p> ,
, .</p>
</body>
</html>
IE8 , .


IE68 31 , <style>, <link>
@import. . , 32
,
. ( 5.13).
5.13. 32

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>32 </title>
<style type="text/css"></style> <!--1-->
<style type="text/css"></style> <!--2-->
...
<style type="text/css"></style> <!--30-->
<style type="text/css"></style> <!--31-->
<style type="text/css">body { background: red; }</style> <!--32-->
</head>
<body>
<p>...</p>
</body>
</html>
- .

favicon.ico
IE68 favicon.ico, .
, 404 .
favicon.ico , .

IE68 PNG , ICO.

ICO favicon.ico .


, , <button> <input>
( 5.14).
5.14.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.bg { background: url(images/umbrella.gif) no-repeat;
height: 35px; padding-left: 30px;
}
</style>
</head>
<body>
<p><button> </button></p>
<p><button class="bg"> </button></p>
</body>
</html>

, background
, background,
IE68. , url no-repeat
( 5.15).
5.15.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { background: url(images/ie.png)no-repeat; }
</style>
</head>
<body>
<p>...</p>
</body>
</html>
, CSS , ,

url().

float :first-letter
float, text-transform capitalize :first-letter
. capitalize
. . float :first-letter
( 5.16).
5.16.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
#test { text-transform: capitalize; font-size: 2em; }
#test:first-letter { float: left; }
</style>
</head>
<body>
<p id="test"></p>
</body>
</html>
IE8 . 5.18.

. 5.18.


IE8 .
http://jhop.me/ie8-bugs 68 CSS (.)
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/ 64 (.)
http://haslayout.net/css/ (.)

IE7
IE7 Trident
Internet Explorer ,
CSS 2.1. hasLayout
. .

IE7
IE7 , , ,
. , , ,
.

:before :after
. 5.17
.
5.17.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
HR {
text-align: center; /* */
border: none; /* */
border-top: 1px dashed #000; /* */
height: 18px; /* */
background: url(images/scissors.png) no-repeat 10px -18px;
/* */
}
HR:after {
content: " ";
font-family: Arial, sans-serif; /* */
font-size: 12px; /* */
vertical-align: top; /* */
}
</style>
</head>
<body>
<p> </p>
<hr />
<p> </p>
</body>
</html>
IE7 . 5.19. , , <hr>
, .

. 5.19. IE7

content
-,
. :after :before.

caption-side
, <caption>,
. caption-side
( 5.18).
5.18.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>caption-side</title>
<style type="text/css">
table {
width: 350px; /* */
border-collapse: collapse; /* */
}
td {
border: 1px solid green; /* */
padding: 5px; /* */
}
caption {
caption-side: bottom; /* */
}
</style>
</head>
<body>
<table>
<caption> </caption>
<tr>
<td>&nbsp;</td><td>&spades;</td><td>&clubs;</td>
<td>&hearts;</td><td>&diams;</td>
</tr>
<tr>
<td></td><td>6</td><td>3</td><td>1</td><td>3</td>
</tr>
<tr>
<td> </td><td>1</td><td>5</td><td>5</td><td>2</td>
</tr>
<tr>
<td></td><td>3</td><td>4</td><td>6</td><td>0</td>
</tr>
<tr>
<td> </td><td>3</td><td>1</td><td>1</td><td>8</td>
</tr>
</table>
</body>
</html>

counter-increment counter-reset
counter-increment ,
counter-reset.
content :after
:before. ( ),
, , ,
. ( 5.19).
5.19.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>counter-increment</title>
<style type="text/css">
body {
counter-reset: heading; /* */
}
h2:before {
counter-increment: heading; /* */
content: " " counter(heading) ". ";
/* <h2> */
}
</style>

</head>
<body>
<h2> </h2>
<h2> </h2>
<h2> </h2>
</body>
</html>
- , IE7 , ,
.

empty-cells
, .
border-collapse collapse, empty-cells .
4 (. 4.10).

:focus
. , ,
. 5.20
.
5.20.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:focus</title>
<style type="text/css">
input:focus { border: 1px solid orange; }
</style>
</head>
<body>
<form action="handler.php">
<p><input type="text" /></p>
</form>
</body>
</html>

outline
, ,
. , border, outline
. IE7
outline-color, outline-style outline-width.

quotes
, (. 1.58).

IE7 ,
.

@import
. ,
( 5.21).
5.21. @import

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>@import</title>
<style type="text/css">
@import "style/main.css" screen;
</style>
</head>
<body>
<p>...</p>
</body>
</html>
main.css.
body {
background: #666;
color: #ff0;
}

, dotted, dashed 2px


( 5.22).
5.22. dotted

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
border: 1px dotted #000;
border-top: 2px dotted #000;
}
</style>
</head>
<body>
<p>&nbsp;</p>
</body>
</html>
. 5.20 , .

. 5.20.

button
button[value="x"] !
button[value="1"] { color: red; }

display
IE7 display: inline-table, run-in, table, table-caption,
table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, tablerow-group.
<li> block list-item, inline-block
.

overflow position: fixed


overflow auto scroll position: fixed
!

:first-letter letter-spacing
C letter-spacing, :first-letter, .

line-height
.

list-style-image float
-, list-style-image
float ( 5.23).
5.23.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list-style-image</title>
<style type="text/css">
LI {
list-style-image: url('images/book.gif'); /* */
float: left; /* */
padding-left: 10px; /* */
margin-right: 30px; /* */
}
</style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li>
</ul>
</body>
</html>


text-align , . 5.24
t2 .
5.24.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-align</title>
<style type="text/css">
body { text-align: right; /* */}
.t1 {
background: #fc0; padding: 10px;
}
.t2 {
width: 60%; border: 1px solid #000; background: #fff;
padding: 5px;
}
</style>
</head>
<body>
<div class="t1">
<div class="t2">, </div>
</div>
</body>
</html>
IE7 . 5.21.

. 5.21.


IE7 .
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs 188
http://www.quirksmode.org/bugreports/archives/explorer_7/ 88

VI

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


, :
;
;
;
;
.


: (.), fixed (.), .
,
(. 6.1).

. 6.1.

- , , ,
.
, , ,
.


,
. ,
.

http://bash.org.ru
http://www.youtube.com
http://vkontakte.ru


: (.), liquid (.), .
,
.
(. 6.2).

. 6.2.

.
- .
- iPhone .

-
. max-width.

.
.

http://lenta.ru
http://yandex.ru
http://rutracker.org


. ,
, ,
-. , em,
. em ,
.

,
.
,
.

,
.
, em
.
.

http://www.csszengarden.com/?cssfile=http://green-beast.com/portfolio/zen/css/zen.css


,
, , .
, ,
.

,
, .
.

, , ,
CSS,
.
,
.

http://www.w3.org . 6.3. 500


, (. 6.4).

. 6.3. W3C

. 6.4. W3C


: , hybrid (.).
, ,
, (. 6.3).

. 6.5.
,
.
, , ,
. - .

http://lionindesert.ru


- ,
, .
,
. ,
, ,
. ,
iPad ,
.
. , , ,
..
-
, , , , , .
,
-.
.


,
bash.org.ru (. 6.6).

. 6.6.
,
.
, , .
LiveInternet (. 6.7) 12801024
1024768.

. 6.7. LiveInternet
1024, .
,
.
980990 . , ,
, 800 . .
980px .

layout . layout
width, margin.
.layout {
width: 980px; /* */
margin: auto; /* */
}
margin auto
width.
, , ,
. width ,
, wrap, padding.
.layout {
width: 980px; /* */
margin: auto; /* */
}
.wrap {
padding: 20px;
}
6.1 HTML- .
6.1.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
BODY { margin: 0; }
.layout {
width: 980px; margin: auto; background: #d3dfe9; }
.wrap { padding: 20px; }
</style>
</head>
<body>
<div class="layout">
<div class="wrap">

</div>
</div>
</body>
</html>
, -, BODY
margin .
,
(. 6.8).

. 6.8.
, .
, (. 6.9).
, ,
.

. 6.9.
background .
BODY {
background: url(bg.png) no-repeat center top;
}
center top 50% 0.
,
.
(. 6.10).

. 6.10.
, .
, , , . 6.9.
980
, 1060 .
BODY {
background: url(images/frame-left.png) no-repeat 50% 10px; /* */
margin: 10px 0; /* */
}
layout.
.layout {
width: 978px; /* */
background: url(images/frame-footer.png) 100% 100% no-repeat;
border: 1px solid #00f; /* */
margin: auto; /* */
}
978 , ,
980 .
.
padding, wrap,
layout.
.wrap

padding: 20px

20px 70px; /* */}

content.
, ,
. , min-height.
.content {
min-height: 590px; /* */
background: url(images/robot.png) no-repeat; /* */
padding-left: 500px; /* */
}
6.2.
6.2.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
BODY {
background: url(images/frame-left.png) no-repeat 50% 10px;
/* */
margin: 10px 0; /* */
}
.layout {
width: 978px; /* */
margin: auto; /* */
border: 1px solid #00f; /* */
background: url(images/frame-footer.png) 100% 100% no-repeat;
}
.wrap { padding: 20px 20px 70px; }
.content {
min-height: 590px; /* */
background: url(images/robot.png) no-repeat; /* */
padding-left: 500px; /* */
}
</style>
</head>
<body>
<div class="layout">
<div class="wrap">
<div class="logo"><img src="images/title-robot.png"
alt=" Lego" /></div>
<div class="content">
,
,
.
252525&nbsp;.
, (
Lego).
.
. , .
,
( ).
</div>
</div>
</div>
</body>
</html>


- .
, , -
( . sidebar, ) . ,
, . . 6.11 ,
, , .

. 6.11.
- , , ,
, .
. , layout,
.
<div class="layout">
<div class="sidebar"> 1</div>
<div class="content"> 2</div>
</div>
, sidebar ,
content ().


. layout
, .
left top
( 6.3).
6.3.
.layout {
width: 980px; margin: auto;
position: relative; /* */
}
.sidebar, .content { position: absolute; }
.sidebar {
background: #C6DD7D; /* */
width: 180px; /* */
}
.content {
background: #F4ECCE; /* */
left: 180px; /* */
width: 800px; /* */
}

left 0, sidebar .
, width
.
,
. , .
<div class="layout">
<div class="content"> 2</div>
<div class="sidebar"> 1</div>
</div>
float left,
sidebar. , , content
margin-left
( 6.4).
6.4. float
.layout { width: 980px; margin: auto; }
.sidebar {
background: #C6DD7D; /* */
width: 180px; /* */
float: left; /* */
}
.content {
background: #F4ECCE; /* */
margin-left: 180px; /* */
}
, margin-left, layout
overflow auto hidden.



. , .
, , ,
. 6.5 6.3.
6.5.
.layout {
width: 980px; margin: auto; position: relative;
}
.sidebar, .content { position: absolute; }
.content {
background: #F4ECCE; /* */
width: 800px; /* */
}
.sidebar {
background: #C6DD7D; /* */
left: 800px; /* */
width: 180px; /* */
}
( )
. ,
.
, margin-left.
float right. margin-left
margin-right ( 6.6).

6.6. float
.layout { width: 980px; margin: auto; }
.sidebar {
background: #C6DD7D; /* */
width: 180px; /* */
float: right; /* */
}
.content {
background: #F4ECCE; /* */
margin-right: 180px; /* */
}
, .
, , .
padding width ,
width .
6.7 , ,
, .
6.7.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
BODY { background: #fff1e4; margin: 0; }
.layout { width: 970px; margin: 0 auto 10px; background: #fff; }
.content { margin-right: 350px; padding: 10px; }
.sidebar { width: 320px; float: right; background: #e0ecb8; }
.footer {
clear: both; /* */
border-top: 1px solid #ccc; padding: 10px;
}
</style>
</head>
<body>
<div class="layout">
<div class="sidebar">
<ul>
<li></li><li> </li><li></li>
<li></li><li></li><li></li>
</ul>
</div>
<div class="content">
<img src="images/title-sambarmen.png" alt=" " />
<h1> -</h1>
<p> 40 , 100 , 30 ,
.</p>
<p> ,
.</p>
</div>
<div class="footer">&copy; </div>
</div>
</body>
</html>
. 6.12.

. 6.12.
content padding, ,
. sidebar ,
, . ( footer)
clear, float. ,
, .


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

. 6.13.
,
float position. .
layout, ,
.
<div class="layout">
<div class="nav"> </div>
<div class="content"> </div>
<div class="sidebar"> </div>
</div>

, .


layout , nav, content
sidebar .
left, right, top, bottom. , left right
( 6.8).
6.8. position

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
width: 980px; /* */
margin: auto; /* */
position: relative; /* */

}
.nav, .content, .sidebar {
position: absolute; /* */
color: #FFF; /* */
}
.nav {
background: #7895A4; /* */
width: 180px; /* */
}
.content {
background: #F0EAD6; width: 600px; color: #000;
left: 180px; /* */
}
.sidebar {
background: #C38A6D; width: 200px;
right: 0; /* */
}
</style>
</head>
<body>
<div class="layout">
<div class="nav"> </div>
<div class="content"> </div>
<div class="sidebar"> </div>
</div>
</body>
</html>
- , ,
. , ,
.

float
float ,
, . , float
( 6.9).
6.9. float

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout { width: 980px; margin: auto; }
.nav, .content, .sidebar {
float: left; /* */
}
.nav { width: 180px; background: #7895A4; color: #FFF; }
.content { width: 600px; background: #F0EAD6; }
.sidebar { width: 200px; background: #C38A6D; color: #FFE; }
</style>
</head>
<body>
<div class="layout">
<div class="nav"> </div>
<div class="content"> </div>
<div class="sidebar"> </div>
</div>
</body>
</html>
, .
, 6.8.
float margin. float
left, right, .
.
.nav { /* */
float: left; /* */
width: 180px; /* */

}
.sidebar { /* */
float: right; /* */
width: 200px; /* */
}
.content { /* */
margin: 0 200px 0 180px; /* */
}
, .
<div class="nav"> </div>
<div class="sidebar"> </div>
<div class="content"> </div>
6.10.
6.10. float margin

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout { width: 980px; margin: auto; }
.nav, .content, .sidebar {
color: #FFF; /* */
}
.nav { background: #7895A4; width: 180px; float: left; }
.sidebar { background: #C38A6D; width: 200px; float: right; }
.content {
background: #F0EAD6; color: #000;
margin: 0 200px 0 180px;
}
</style>
</head>
<body>
<div class="layout">
<div class="nav"> </div>
<div class="sidebar"> </div>
<div class="content"> </div>
</div>
</body>
</html>


,
. ,
,
. (. 6.14),
.

. 6.14.
, ,
float margin.
, ,
, .
. . 6.1
.
. 6.1.
20%

float: left
width: 20%

margin-left: 21%

200px
float: left
width: 200px

margin-left: 210px

: float
width, .
, width .
margin-left,
, .
. 6.1 21%, 20% ,
. ,
, .

6.11 -, : ,
. sidebar
120 , content.
- , ,
- , . min-width
layout ,
, . max-width, ,
, .
6.11.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.header, .sidebar, .content, .footer {
padding: 10px; /* */
border: solid 1px #000; /* */
background: #e3e8cc; /* */
}
.header { /* */
background: #e3e8cc; /* */
font-size: 24px; /* */
}
.layout {
margin: 15px 0; /* */
overflow: hidden; /* float */
min-width: 800px; /* */
max-width: 1200px; /* */
}
.sidebar { /* */
width: 100px; /* */
float: left; /* */
}
.sidebar ul {
list-style: none; /* */
padding: 0; /* */
}
.content { /* */
margin-left: 135px; /* */
}
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="sidebar">
<h2></h2>
<ul>
<li><a href="link1.html"> 1</a></li>
<li><a href="link2.html"> 2</a></li>
<li><a href="link3.html"> 3</a></li>
<li><a href="link4.html"> 4</a></li>
</ul>
</div>
<div class="content">
<h1> </h1>
<p>-.</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
min-width . 6.15,
, , max-width . 6.16.

. 6.15. min-width

. 6.16. max-width
, , .
. 6.2 , .
. 6.2.
20%

float: right
width: 20%

margin-right: 21%

200px
float: right
width: 200px

margin-right: 210px

, float right,
margin-right. , 6.11
sidebar content , 6.12.
6.12.
.sidebar {
width: 100px;
float: right;
}
.content {
margin-right: 135px;
}
, HTML , sidebar,
content. , ,
- , .
CSS.


, ,
.
, . . 6.17 ,
.

. 6.17.
(%) , , px
, (),
. ,
: .
.



position relative, ,
, absolute.
6.13.
6.13.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="col1"> 1</div>
<div class="col2"> 2</div>
<div class="col3"> 3</div>
</div>
</body>
</html>
, .. 1 , 2 ,
3 .
,
. , layout

, .
, ,
. IE6 - .
1, , ,
( 6.14).
6.14. 1
.header { background: #D5BAE4; }
.layout { position: relative; /* */ }
.layout DIV { position: absolute; /* */ }
.col1 {
background: #C7E3E4; /* */
left: 0; /* */
right: 300px; /* */
}
.col2 {
background: #E0D2C7;
width: 200px; /* */
right: 100px; /* 3 */
}
.col3 { background: #ECD5DE; width: 100px; right: 0; }
width,
left right.
left right,
.
2 ( 6.15) 3 ( 6.16) .
6.15. 2
.header
.layout
.layout
.col1 {
.col2 {
.col3 {

{ background: #D5BAE4; }
{ position: relative; }
DIV { position: absolute; }
background: #C7E3E4; width: 100px; }
background: #E0D2C7; left: 100px; right: 200px;}
background: #ECD5DE; width: 200px; right: 0; }

6.16. 3
.header
.layout
.layout
.col1 {
.col2 {
.col3 {

{ background: #D5BAE4; }
{ position: relative;}
DIV { position: absolute; }
background: #C7E3E4; width: 100px; }
background: #E0D2C7; width: 200px; left: 100px; }
background: #ECD5DE; left: 300px; right: 0; }

4, .
, (33.33%), Opera
,
(. 6.18).

. 6.18. ,
, , 33%, 34%, 33%,
6.17.

6.17. 4
.header
.layout
.layout
.col1 {
.col2 {
.col3 {

{ background: #D5BAE4; }
{ position: relative;}
DIV { position: absolute; }
background: #C7E3E4; width: 33%; }
background: #E0D2C7; left: 33%; width: 34%; }
background: #ECD5DE; right: 0; width: 33%; }

.
, , .. 33.3% 33%.
, , ,
-. , ,
, . . 6.19
5.

. 6.19.
,
, .
,
. , 100%
.
.
px %. 6.18 5
.
6.18. 5.
.header
.layout
.layout
.col1 {
.col2 {
.col3 {

{ background: #D5BAE4; }
{ position: relative;}
DIV { position: absolute; }
background: #C7E3E4; width: 50%; }
background: #E0D2C7; left: 50%; right: 200px; }
background: #ECD5DE; right: 0; width: 200px; }

5 6.19.
6.19. 5.
.header
.layout
.layout
.col1 {
.col2 {
.col3 {

{ background: #D5BAE4; }
{ position: relative;}
DIV { position: absolute; }
background: #C7E3E4; left: 0; right: 200px; margin-right: 50%; }
background: #E0D2C7; width: 50%; right: 200px; }
background: #ECD5DE; width: 200px; right: 0; }

right,
50%+200px, CSS2 .
200px right 50%

margin-right. ,
.
,
rubber, ( 6.20).
6.20. 5.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.header { background: #D5BAE4; }
.layout { position: relative;}
.layout DIV { position: absolute; }
.rubber { left: 0; right: 200px; }
.col1 { background: #C7E3E4; width: 60%; }
.col2 { background: #E0D2C7; width: 40%; left: 60%; }
.col3 { background: #ECD5DE; width: 200px; right: 0; }
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="rubber">
<div class="col1"> 1</div>
<div class="col2"> 2</div>
</div>
<div class="col3"> 3</div>
</div>
</body>
</html>
6 5, .
7, , .
,
. 50% (. 6.20).

. 6.20. 7
, margin-right
margin-left . . ,
200px, margin-right: 100px ( 6.21).
6.21. 7.
.header
.layout
.layout
.col1 {
.col2 {
.col3 {

{ background: #D5BAE4; }
{ position: relative;}
DIV { position: absolute; }
background: #C7E3E4; left: 0; right: 50%; margin-right: 100px; }
background: #E0D2C7; width: 200px; left: 50%; margin-left: -100px; }
background: #ECD5DE; left: 50%; right: 0; margin-left: 100px; }

width , margin
, , .
left right.
left right, 50%-200px.
50% (left: 50%),
margin-left (margin-left: -100px).
,

, min-width BODY.
.
BODY {
min-width: 800px; /* */
}
min-width
.



. ,
.
float margin width.
, ,
float.

1.

, float
right. margin-right
( 6.22).

6.22. 1

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 1</title>
<style type="text/css">
.header, .footer { background: #D5BAE4; }
.layout {
overflow: hidden; /* */
}
.col1 {
background: #C7E3E4; /* */
margin-right: 300px; /* 2 3 */
}
.col2 {
background: #E0D2C7; width: 200px;
float: right; /* */
}
.col3 {
background: #ECD5DE; width: 100px;
float: right; /* */
}
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="col3"> 3</div>
<div class="col2"> 2</div>
<div class="col1"> 1</div>
</div>
<div class="footer"></div>
</body>
</html>

2.

, float
left right . , ,
margin, ( 6.23).
6.23. 2

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 2</title>
<style type="text/css">
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.col1 { background: #C7E3E4; float: left; width: 200px; }
.col2 { background: #E0D2C7;
margin: 0 100px 0 200px; /* */
}
.col3 { background: #ECD5DE; width: 100px; float: right; }
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="col1"> 1</div>
<div class="col3"> 3</div>
<div class="col2"> 2</div>
</div>
<div class="footer"></div>
</body>
</html>

3.

float left,
(margin-left)
( 6.24).
6.24. 3

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 3</title>
<style type="text/css">
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.col1 { background: #C7E3E4; float: left; width: 100px; }
.col2 { background: #E0D2C7; float: left; width: 200px; }
.col3 { background: #ECD5DE;
margin-left: 300px; /* 1 2 */
}
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="col1"> 1</div>
<div class="col2"> 2</div>

<div class="col3"> 3</div>


</div>
<div class="footer"></div>
</body>
</html>

4.

, ,
. 6.25,
float width.
6.25. 4

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 4</title>
<style type="text/css">
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.layout DIV { float: left; }
.col1 { background: #C7E3E4; width: 20%; }
.col2 { background: #E0D2C7; width: 60%; }
.col3 { background: #ECD5DE; width: 20%; }
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="col1"> 1</div>
<div class="col2"> 2</div>
<div class="col3"> 3</div>
</div>
<div class="footer"></div>
</body>
</html>

5.
. 6.19 , 5, ,
-.
1. , ,
.
2. , ,
.
3. 100%,
.

, float
left, , float right.
( 6.26).

6.26. 5.1

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 5.1</title>
<style type="text/css">
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.col1 { background: #C7E3E4; width: 40%; float: left; }
.col2 { background: #E0D2C7; margin: 0 200px 0 40%; }
.col3 { background: #ECD5DE; width: 200px; float: right; }
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="col1"> 1</div>
<div class="col3"> 3</div>
<div class="col2"> 2</div>
</div>
<div class="footer"></div>
</body>
</html>

, .
margin-right
. CSS2, , ,
col1 wrap . ,
( 6.27).
6.27. 5.2

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 5.2</title>
<style type="text/css">
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.col1 { margin-right: 40%; }
.col1 .wrap { margin-right: 200px; background: #C7E3E4; }
.col2 { background: #E0D2C7; width: 40%; float: right; }
.col3 { background: #ECD5DE; width: 200px; float: right; }
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="col3"> 3</div>
<div class="col2"> 2</div>
<div class="col1">
<div class="wrap">
1
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

100%,
, .
rubber col3 ,
col1 col2 float ( 6.28).
6.28. 5.3

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 5.3</title>
<style type="text/css">
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.rubber { margin-right: 200px; }
.col1 { background: #C7E3E4; width: 60%; float: left; }
.col2 { background: #E0D2C7; width: 40%; float: left; }
.col3 { background: #ECD5DE; width: 200px; float: right; }
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="col3"> 3</div>
<div class="rubber">
<div class="col2"> 2</div>
<div class="col1"> 1</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
6, 7 , 5,
7, .

, HTML-.
<div class="layout">
<div class="col1"> 1</div>
<div class="col3"> 3</div>
<div class="col2"> 2</div>
</div>
.
.col1 { width: 50%; float: left; }
.col2 { width: 200px; float: left; }
.col3 { width: 50%; float: right; }
,
.
(margin-left: -100px) .
, , 50%+100px ( ).

margin-left , .
. , ,
(. 6.21).

. 6.21.
,
. , ,
. ,
( wrap) ,
. 6.29.
6.29. 7

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 7</title>
<style type="text/css">
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.col1 { width: 50%; float: left; }
.col1 .wrap {
background: #C7E3E4;
margin-right: 100px; /* 2 */
padding: 10px; /* */
}
.col2 { background: #E0D2C7; width: 200px; float: left;
margin-left: -100px; }
.col3 { width: 50%; float: right; margin-left: -100px; }
.col3 .wrap {
background: #ECD5DE;
margin-left: 100px; /* 2 */
padding: 10px;
}
</style>
</head>
<body>
<div class="header"> </div>
<div class="layout">
<div class="col1"><div class="wrap"> 1</div></div>
<div class="col3"><div class="wrap"> 3</div></div>
<div class="col2"> 2</div>
</div>
<div class="footer"></div>
</body>
</html>


padding,
, , .
,
. , width.
, , .
div { /* padding */
width: 200px;
padding: 10px;
}
div { /* padding */
position: absolute;
left: 20px right: 20px;
padding: 10px;
}
div { /* padding */
float: left;
width: 50%;
padding: 10px;

}
div { /* padding */
margin-right: 50%;
padding: 10px;
}
, padding border , ,
.
<div style="width: 200px">
<div style="padding: 10px; border: 1px solid #000">

</div>
</div>
200 ,
.


.
. -,
, , float, . -,
,
, . 6.30
1 .
6.30. 1

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 1</title>
<style type="text/css">
.header, .footer { background: #D5BAE4; }
.layout {
width: 100%; /* */
}
.layout TD {
padding: 5px; /* */
vertical-align: top; /* */
}
.col1 { background: #C7E3E4; }
.col2 { background: #E0D2C7; width: 200px; }
.col3 { background: #ECD5DE; width: 100px; }
</style>
</head>
<body>
<div class="header"> </div>
<table class="layout" cellspacing="0">
<tr>
<td class="col1"> 1</td>
<td class="col2"> 2</td>
<td class="col3"> 3</td>
</tr>
</table>
<div class="footer"></div>
</body>
</html>
padding TD cellpadding <table>
. .
, HTML- , 6.30.
2
.header, .footer { background: #D5BAE4; }
.layout { width: 100%;}
.layout TD { padding: 5px; vertical-align: top; }

.col1 { background: #C7E3E4; width: 100px; }


.col2 { background: #E0D2C7; }
.col3 { background: #ECD5DE; width: 200px; }
3
.header, .footer { background: #D5BAE4; }
.layout { width: 100%;}
.layout TD { padding: 5px; vertical-align: top; }
.col1 { background: #C7E3E4; width: 100px; }
.col2 { background: #E0D2C7; width: 200px; }
.col3 { background: #ECD5DE; }
4
.header, .footer { background: #D5BAE4; }
.layout { width: 100%;}
.layout TD { padding: 5px; vertical-align: top; }
.col1 { background: #C7E3E4; width: 33%; }
.col2 { background: #E0D2C7; width: 34%; }
.col3 { background: #ECD5DE; width: 33%; }
6.1 , ,
.

6.1
.header, .footer { background: #D5BAE4; }
.layout { width: 100%;}
.layout TD { padding: 5px; vertical-align: top; }
.col1 { background: #C7E3E4; width: 200px; }
.col2 { background: #E0D2C7; }
.col3 { background: #ECD5DE; width: 40%; }
, width.
7,
, .

50%,
. table-layout
fixed.
.layout
.col1 {
.col2 {
.col3 {

{ width: 100%; table-layout: fixed; }


width: 50%; }
width: 200px; }
width: 50%; }

,
, . ,
, !
6.31 7.
6.31. 7

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 7</title>
<style type="text/css">
BODY { margin: 0; background: #6D775B; }
.layout { width: 100%; table-layout: fixed; }
.layout TD { padding: 7px; vertical-align: top; }
.col1 { background: #6D775B; width: 50%; }
.col2 { background: #F5E8D0; width: 300px; }
.col3 { background: #6D775B; width: 50%; text-align: right; }
</style>
</head>
<body>
<table class="layout" cellspacing="0">
<tr>
<td class="col1"><img src="images/tenniel1.png" alt="" /></td>
<td class="col2">
<img src="images/jabberwock.jpg" alt="" />
<p> ,<br />
.<br />
, <br />
. </p>
<p>-, -! ,
- ,<br />
! ! <br />
.</p>
<p> , , </p>
</td>
<td class="col3"><img src="images/tenniel2.png" alt="" /></td>
</tr>
</table>
</body>
</html>
. 6.22.

. 6.22.


, , . ,
,
.
, .. , .
,
.
.
, :
, , ;
.

, , .
height, .
6.32 .
6.32. height

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
overflow: hidden; /* */
}
.col1, .col2, .col3 {
width: 33.33%; /* */
float: left; /* */
}
.layout DIV DIV {
margin: 0 10px; /* */
padding: 10px; /* */
height: 150px; /* */
background: #4F703E; /* */
color: #F5E8D0; /* */
overflow: auto;
}
</style>
</head>
<body>
<div class="layout">
<div class="col1">
<div>
<h2>SSI</h2>
<p> .</p>
</div>
</div>
<div class="col2">
<div>
<h2></h2>
<p> .</p>
</div>
</div>
<div class="col3">
<div>
<h2>SVG</h2>
<p>
XML.</p>
</div>
</div>
</div>
</body>
</html>

. 6.23.

. 6.23.
, , height
. overflow auto.
, .
, .
, .
, , .


,
. ,
, .
layout , .
.layout {
border-left: 200px solid #C7E3E4; /* */
background: #E0D2C7; /* */
}
, ,
, . .
, col1, float ,
. ,
col1 margin-left ,
.
.col1 {
width: 200px; /* */
float: left; /* */
margin-left: -200px; /* */
}
float margin-left
. col2 ,
.
- , , ,
. ,
float clear. overflow: hidden ,
, .
6.33.
6.33.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
border-left: 200px solid #C7E3E4;
/* */
background: #E0D2C7; /* */
}
.col1 {
width: 180px; /* */
float: left; /* */
margin-left: -200px; /* */
}
.col1, .col2 { padding: 10px; }
.clear { clear: both; /* */ }
</style>
</head>
<body>
<div class="layout">
<div class="col1"></div>
<div class="col2">
- ,
.
</div><div class="clear"></div>
</div>
</body>
</html>
. 6.24.

. 6.24. ,
layout.
em ( ).
.layout {
border-left: 200px solid #C7E3E4; /* */
border-right: 15em solid #ECD5DE; /* */
background: #E0D2C7; /* */
}
,
float right margin-right ( 6.34).
6.34.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
border-left: 200px solid #C7E3E4;
border-right: 15em solid #ECD5DE; background: #E0D2C7;
}
.col1 { width: 180px; float: left; margin-left: -200px; }
.col3 { width: 13em; float: right; margin-right: -15em; padding: 1em; }
.col1, .col2 { padding: 10px; }
.clear { clear: both; }
</style>
</head>

<body>
<div class="layout">
<div class="col1"></div>
<div class="col3"><img src="images/grapefruit.jpg" alt="" /></div>
<div class="col2">
.
1015 , ,
. ,
. , .
</div><div class="clear"></div>
</div>
</body>
</html>
. 6.25.

. 6.25. ,
IE6 .
, .
<!--[if IE 6]>
<style type="text/css">
.col1 { margin-left: -100px; }
.col3 { margin-right: -7.5em; }
</style>
<![endif]-->


,
, .
, ,
. , , .
, 980 ,
200 . 98060 .
, 2030 .
12 , ,
, . .
,
.
2030
.
, ,
- (. 6.26). ,
.

. 6.26.

layout, ( 6.35).
6.35.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
width: 980px; /* */
background: url(images/2col.png) repeat-y; /* */
overflow: hidden; /* */
}
.sidebar { width: 180px; float: left; padding: 10px; }
.content { margin-left: 210px; padding: 10px; }
</style>
</head>
<body>
<div class="layout">
<div class="sidebar">
<ul>
<li></li><li> </li><li></li>
<li></li><li></li>
</ul>
</div>
<div class="content">
<h1> -</h1>
<p> 40 , 100 , 30 ,
.</p>
<p> ,
.</p>
</div>
</div>
</body>
</html>
. 6.27. ,
.

. 6.27. ,
- , ,
padding .
,
- ,
. , , 2000 .
- ,
. .
300 .
200030 - (. 6.27).

. 6.27.
,

, 100% 0 background ( 6.36).


6.36.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
background: url(images/bg-liquid.png) repeat-y 100% 0;
/* */
overflow: hidden; /* */
}
.sidebar { width: 280px; float: right; padding: 10px; color: #fff; }
.content { margin-right: 300px; padding: 10px; }
</style>
</head>
<body>
<div class="layout">
<div class="sidebar"> 2</div>
<div class="content"> 1</div>
</div>
</body>
</html>
.

.
, .
.

,
. , , .
. ,
, .
. ,
, . 6.27, , 200030
275 .



background ( layer).
. layer,
. 6.37 ,
layer, col2.
6.37.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.layout {
background: #B2D235; /* */
overflow: hidden; /* */
}
.layout DIV { float: left; }
.col1 { width: 40%; }
.col2 { background: #FFC60B; /* */
width: 20%; height: 200px; }

.col3 { width: 40%; }


</style>
</head>
<body>
<div class="layout">
<div class="col1"> 1</div>
<div class="col2"> 2</div>
<div class="col3"> 3</div>
</div>
</body>
</html>
height , .
.
, .
, .
,
.
, :
. , ,
W3C.

VII


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

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


,
. , ,
, . ,
:
- , ,
.
.
;
-,
.
.



. , ,
,
. 7.1 .
7.1.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
TABLE.menu {
background: #fc0; /* */
width: 100%; /* */
border: 1px solid black; /* */
text-align: center; /* */
}
.menu TD {
border: 1px solid white; /* */
padding: 4px /* */
}
.menu A { color: #BE1E2D; }
</style>
</head>
<body>
<table cellspacing="0" class="menu">
<tr>
<td><a href="link1.html"></a></td>
<td><a href="link2.html"> </a></td>
<td><a href="link3.html"></a></td>
<td><a href="link4.html"> </a></td>
</tr>
</table>
</body>
</html>
. 7.1.

. 7.1.

.
(. 7.2).

. 7.2.
:hover,
.
background. , .
, ,
A display block. ,
. ,
, ( 7.2).
7.2.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<style type="text/css">
TABLE.menu {
background: #fc0; /* */
width: 100%; /* */
border: 1px solid black; /* */
text-align: center; /* */
}
.menu TD {
border: 1px solid white; /* */
padding: 4px /* */
}
.menu A {
color: #BE1E2D; /* */
display: block; /* */
}
.menu TD:hover {
background: #29B473; /* */
}
.menu TD:hover A {
color: #FFE; /* */
text-decoration: none; /* */
}
</style>
HTML , 7.1.

, <ul> <li>. ,
, .
. <li> ,
, display inline.
.menu LI {
background: #fc0; /* */
list-style: none; /* */
padding: 4px 10px; /* */
display: inline; /* */
}
<ul> , ,
.
UL.menu {
margin: 0; padding: 0; /* */
}
7.3.
7.3. inline

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
UL.menu {
margin: 0; padding: 0; /* */
}
.menu LI {
background: #fc0; /* */
list-style: none; /* */
padding: 4px 10px; /* */
display: inline; /* */
}
.menu A {
color: #BE1E2D; /* */
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="link1.html"></a></li>
<li><a href="link2.html"> </a></li>
<li><a href="link3.html"></a></li>
<li><a href="link4.html"> </a></li>
</ul>
</body>
</html>

, (. 7.3).

. 7.3.
, ,
. IE67 , . ,

(. 7.4).

. 7.4. IE67
zoom
. , ,
.
<!--[if lte IE 7]>
<style type="text/css">
.menu LI {
zoom: 1;
margin-right: 4px;
}
</style>
<![endif]-->

(. 7.5).

. 7.5.
, , <li>
white-space: nowrap min-width. ,
( 7.4).
7.4.
UL {
min-width: 400px; /* */
}
LI {
white-space: nowrap; /* */
}
. ,
. , .
<li><a href="link1.html"></a></li><li><a
href="link2.html"> </a></li>
, ,
HTML.
<li><a href="link1.html"></a></li><!---><li><a href="link2.html"> </a></li><!---><li><a href="link3.html"></a></li><!---><li><a href="link4.html"> </a></li>

margin-right.
.menu LI {
margin-right: -4px;
}
,
.
.
. <li>
, ,

float.
.menu LI {
float: left; /* */
width: 25%; /* */
text-align: center; /* */
}
100% (4).
padding , , margin
A.
7.2. 7.5.
7.5. float

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
UL.menu {
margin: 0; padding: 0; /* */
overflow: hidden; /* */
min-width: 450px; /* */
}
.menu LI {
list-style: none; /* */
float: left; /* */
width: 25%; /* */
text-align: center; /* */
background: #fc0; /* */
}
.menu A {
color: #BE1E2D; /* */
display: block; /* */
margin: 5px; /* */
}
.menu LI:hover {
background: #29B473; /* */
}
.menu LI:hover A {
color: #FFE; /* */
text-decoration: none; /* */
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="link1.html"></a></li>
<li><a href="link2.html"> </a></li>
<li><a href="link3.html"></a></li>
<li><a href="link4.html"> </a></li>
</ul>
</body>
</html>
. 7.6.

. 7.6. , float
,
(. 7.7). 7.4.

. 7.7.


, , .
, , ,
. ,
.
.


, .
, (. 7.8).

display: block.

. 7.8.
width,
menu ( 7.6).
.
, . ,
-, , .
, .
:hover ,
.
7.6.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.menu {
margin: 0; padding: 0; /* */
width: 200px; /* */
padding: 5px; /* */
border: 1px solid black /* */
}
.menu LI {
list-style: none; /* */
}
.menu A {
padding: 2px 5px; /* */
display: block; /* */
border: 1px solid white; /* */
text-decoration: none; /* */
}
.menu A:hover {
background: #faf3d2; /* */
color: #800000; /* */
border: 1px dashed #634f36; /* */
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="link1.html"></a></li>

<li><a href="link2.html"> </a></li>


<li><a href="link3.html"></a></li>
<li><a href="link4.html"> </a></li>
</ul>
</body>
</html>


, .. , ,
. ,

. . 7.9 ,
.

. 7.9.
border-left borderright. ,
. , A:hover
border-left-color,
. , , borderright-color. 7.7 ,
10 . ,
border-left. , display: block.

:hover,
.
, .
, ,
border-bottom .
7.7.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.menu {
margin: 0; padding: 0; /* */
width: 200px /* */
}
.menu LI {
list-style: none; /* */
}
.menu A {
display : block; /* */
padding: 5px; /* */
border-left: 10px solid #13694E; /* */
border-bottom: 1px solid #CCC; /* */
background: #74A18E; /* */
color: #FFF; /* */
text-decoration: none; /* */
}
.menu A:hover {
border-left-color: #FA5; /* */
background: #A18E74; /* */
color: #FFC; /* */
}

</style>
</head>
<body>
<ul class="menu">
<li><a href="link1.html"></a></li>
<li><a href="link2.html"> </a></li>
<li><a href="link3.html"></a></li>
<li><a href="link4.html"> </a></li>
</ul>
</body>
</html>


, , ,
. ,
, ,
.
, , . 7.10 ,
.

. 7.10.
, ,
.
- ,
, <div> . ,
<ul> <li>.
. <ul>,
<li>. <ul>,
<li> ( 7.8).
7.8.
<ul>
<li> 1
<ul>
<li> 1.1</li>
<li> 1.2</li>
</ul>
</li>
<li> 2
<ul>
<li> 2.1</li>
<li> 2.2</li>
</ul>
</li>
</ul>
,
<ul> <li>.
. <ul>
, , LI
list-style: none. ,
( 7.9).
display none,
(display: block).
:hover, LI.
LI.

, .
, UL.
, , ,
, -, . 7.10.
background, .

. 100% 50% ,
.
background-image: none <a>,
, nobullet .
7.9.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.menu, .menu UL {
width: 180px; /* */
margin: 0; padding: 0; /* */
border-bottom: 1px solid #CCC; /* */
}
.menu LI {
list-style: none; /* */
position: relative; /* */
border: 1px solid #CCC; /* */
border-bottom: none; /* */
}
.menu UL {
position: absolute; /* */
display: none; /* */
top: -1px; /* */
left: 178px; /* */
}
.menu A {
display: block; /* */
padding: 5px; /* */
text-decoration: none; /* */
background: url(images/bullet.png) 98% 50% no-repeat;
/* */
color: #666; /* */
}
.menu UL A {
background-image: none; /* */
}
.menu LI:hover {
background-color: #f0f0f0; /* */
}
.menu LI:hover UL {
display: block; /* */
}
.menu .nobullet {
background-image: none; /* */
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="russian.html"> </a>
<ul>
<li><a href="linkrl.html">ecpoao</a></li>
<li><a href="linkr2.html">yc </a></li>
<li><a href="linkr3.html">Kpyne </a></li>
<li><a href="linkr4.html">Pa -</a></li>
</ul>
</li>
<li><a href="ukrainian.html"> </a>
<ul>
<li><a href="linkul.html"></a></li>
<li><a href="linku2.html"> -</a></li>
<li><a href="linku3.html"> </a></li>
<li><a href="linku4.html"> </a></li>
</ul>
</li>
<li><a href="caucasus.html"> </a>
<ul>

<li><a href="linkcl.html">Cy-</a></li>
<li><a href="linkc2.html"></a></li>
<li><a href="linkc3.html"></a></li>
<li><a href="linkc4.html"></a></li>
</ul>
</li>
<li><a href="asia.html" class="nobullet"> </a></li>
</ul>
</body>
</html>
IE6, :hover
, LI.


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

. 7.11.
7.9,
. ,
, . LI
float: left ( 7.10).
HTML 7.9 ,
, . ,
, , ,
. 7.11. background A 4px 50%,
.
, padding.
.
( UL LI) width.
.
, .
7.10.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.menu, .menu UL {
margin: 0; padding: 0; /* */
background: #FFF; /* */
}
.menu > LI {
float: left; /* */
height: 28px; /* */
}
.menu > LI > A {
line-height: 18px; /* */
}
.menu LI {
list-style: none; /* */
position: relative; /* */
border: 1px solid #CCC; /* */
border-right: none; /* */
}
.menu UL {

border-right: 1px solid #CCC; /* */


border-bottom: 1px solid #CCC; /* */
position: absolute; /* */
display: none; /* */
top: 28px; /* */
left: -1px; /* */

}
.menu UL LI {
width: 200px; /* */
border-bottom: none; /* */
}
.menu A {
display: block; /* */
padding: 5px 5px 5px 20px; /* */
text-decoration: none; /* */
background: url(images/bullet2.png) 4px 50% no-repeat;
/* */
color: #666; /* */
}
.menu UL A {
background-image: none; /* */
height: 1%; /* IE7 hasLayout */
}
.menu LI:hover {
background-color: #EEDFAC; /* */
}
.menu LI:hover LI:hover {
background-color: #F0F0F0; /* */
}
.menu LI:hover UL {
display: block; /* */
}
.menu .nobullet {
background-image: none; /* */
padding-left: 5px; /* */
}
.menu .border {
border-right: 1px solid #CCC; /* */
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="russian.html"> </a>
<ul>
<li><a href="linkrl.html">ecpoao</a></li>
<li><a href="linkr2.html">yc </a></li>
<li><a href="linkr3.html">Kpyne </a></li>
<li><a href="linkr4.html">Pa -</a></li>
</ul>
</li>
<li><a href="ukrainian.html"> </a>
<ul>
<li><a href="linkul.html"></a></li>
<li><a href="linku2.html"> -</a></li>
<li><a href="linku3.html"> </a></li>
<li><a href="linku4.html"> </a></li>
</ul>
</li>
<li><a href="asia.html" class="nobullet"> </a></li>
<li><a href="caucasus.html" class="border"> </a>
<ul>
<li><a href="linkcl.html">Cy-</a></li>
<li><a href="linkc2.html"></a></li>
<li><a href="linkc3.html"></a></li>
<li><a href="linkc4.html"></a></li>
</ul>
</li>
</ul><div style="clear: left"></div>
<p> ...</p>
</body>
</html>
- ,
. , ,
.menu > LI , <li>,
menu. , <li> .
IE7 ,
hasLayout. , ,
, UL A height

1%. , IE7.


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

. 7.13.


HTML , <ul>
<li>, .
, .
. active,
.
<ul class="tabs">
<li><a href="linkl.html"> </a></li>
<li class="active"> </li>
<li><a href="link3.html"> </a></li>
<li><a href="link4.html"> </a></li>
</ul>
<li>
- display inline-block.
border-bottom, tabs.
border, ,
, , .. .
, :first-child,
.
, ,
. . ,
. ,
( 7.11).
7.11.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.tabs {
margin: 0; padding: 0; /* */
border-bottom: 1px solid #333; /* */
padding-left: 15px; /* */
}
.tabs LI {
list-style: none; /* */
display: inline-block; /* - */
position: relative; /* */
top: 1px; /* */
background: #f0f0f0; /* */
padding: 4px 10px; /* */

border: 1px solid #333; /* */


border-left: none; border-bottom: none; /* */

}
.tabs LI:first-child {
border-left: 1px solid #333; /* */
}
.tabs .active {
background: #fff; /* */
border-bottom: 1px solid #fff; /* */
}
</style>
<!--[if IE 7]>
<style type="text/css">
.tabs LI {
zoom: 1; /* hasLayout */
display: inline; /* */
vertical-align: top; /* */
}
</style>
<![endif]-->
</head>
<body>
<ul class="tabs">
<li><a href="linkl.html"> </a></li><li
class="active"> </li><li>
<a href="link3.html"> </a></li><li>
<a href="link4.html"> </a></li>
</ul>
</body>
</html>

IE7 inline-block,
inline hasLayout zoom.
- , - ,
. </li>
<li> , .
, ,
.
. . 7.14 ,
.

. 7.14.
.
-moz-border-radius: 5px 5px 0 0; /* Firefox */
-webkit-border-radius: 5px 5px 0 0; /* Safari Chrome */
border-radius: 5px 5px 0 0; /* Opera IE9 */
,
. , , . ,
, , IE7 IE8, .
7.12 .
7.12.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

body { background: #fce3bb; }


.tabs {
margin: 0; padding: 0; border-bottom: 1px solid #333;
padding-left: 15px;
}
.tabs LI {
list-style: none; display: inline-block;
position: relative; top: 1px; background: #f0f0f0;
padding: 4px 10px; border: 1px solid #333;
border-bottom: none; margin-right: 5px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.tabs .active {
background: #fff; border-bottom: 1px solid #fff;
}
.content {
border: 1px solid #333; border-top: none;
background: #fff; padding: 1px 10px 10px;
}
</style>
<!--[if IE 7]>
<style type="text/css">
.tabs LI { zoom: 1; display: inline; vertical-align: top; }
</style>
<![endif]-->
</head>
<body>
<ul class="tabs">
<li><a href="linkl.html"> </a></li>
<li class="active"> </li>
<li><a href="link3.html"> </a></li>
<li><a href="link4.html"> </a></li>
</ul>
<div class="content">
<h1> </h1>
<p>...</p>
</div>
</body>
</html>


,
. . 7.15 .

. 7.15.
, , .
. 7.16 .

. 7.16.
, CSS Tab
Designer, . . 7.15
. .

.
, .
. ,
. . 7.17 .
. tabs.png PNG-24,
.

. 7.17.
,
. HTTP- (
), ,
. , CSS-,
.
. , CSS-
.
. ,
, ,
(. 7.18). .

. 7.18.
HTML- .
, <li> <a> <span>.
<li>, <a> <span>.
<ul class="tabs">
<li><a href="linkl.html"> </a></li>
<li class="active"><span> </span></li>
<li><a href="link3.html"> </a></li>
<li><a href="link4.html"> </a></li>
</ul>
active, <a> , <span>.
,
float, overflow.

.tabs {
margin: 0; padding: 10px 0 0; /* */
padding-left: 15px; /* */
background: #5095e5; /* */
overflow: hidden; /* */
}
.tabs LI {
list-style: none; /* */
float: left; /* */
height: 33px; /* */

background: url(images/tabs.png) no-repeat; /* */


margin-right: 11px; /* */


(. 7.19).

. 7.19.
, .
( , ) ,
, .
.
<a> <span>
100%. , .
.
background 100% -33px,
33
.
.tabs A, .tabs SPAN {
display: block; /* */
height: 100%; /* */
color: #fff; /* */
text-decoration: none; /* */
background: url(images/tabs.png) 100% -33px no-repeat;
/* */
line-height: 30px; /* */
}
line-height, ,
, .
vertical-align , padding
, line-height.


, ,
(. . 7.18).
left 6px.
, ,
. , textindent .
.tabs A, .tabs SPAN {
position: relative; /* */
left: 6px; /* */
text-indent: -6px; /* */
padding: 0 10px; /* */
}
text-indent ,
.
. ,
.
.tabs .active {
background-position: 0 -66px; /* */
}

.tabs .active SPAN {


background-position: 100% -99px; /* */
color: #000; /* */
}
7.13.
7.13.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.tabs {
margin: 0; padding: 10px 0 0; padding-left: 15px;
background: #5095e5; overflow: hidden;
}
.tabs LI {
list-style: none; float: left; height: 33px;
background: url(images/tabs.png) no-repeat; margin-right: 11px;
}
.tabs A, .tabs SPAN {
display: block; height: 100%; color: #fff; text-decoration: none;
background: url(images/tabs.png) 100% -33px no-repeat;
line-height: 30px; position: relative;
left: 6px; text-indent: -6px; padding: 0 10px;
}
.tabs .active { background-position: 0 -66px; }
.tabs .active SPAN { background-position: 100% -99px; color: #000; }
.content {
border: 1px solid #333; border-top: none;
background: #fff url(images/bg.png) repeat-x; padding: 1px 10px 10px;
}
</style>
</head>
<body>
<ul class="tabs">
<li><a href="linkl.html"> </a></li>
<li class="active"><span> </span></li>
<li><a href="link3.html"> </a></li>
<li><a href="link4.html"> </a></li>
</ul>
<div class="content">
<h1> </h1>
<p>...</p>
</div>
</body>
</html>
. 7.20.

. 7.20.
.


, ,
.
.
(. 7.21).

. 7.21.
.
, 7.13 ,
position, left text-indent.
( 7.14).
7.14.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.tabs {
margin: 0; padding: 10px 0 0; padding-left: 15px;
background: #dad7c5; overflow: hidden;
}
.tabs LI {
list-style: none; float: left; height: 33px;
background: url(images/tabs2.png) no-repeat; margin-right: 11px;
}
.tabs A, .tabs SPAN {
display: block; height: 100%; color: #fff;
text-decoration: none;
background: url(images/tabs2.png) 100% -33px no-repeat;
line-height: 30px; padding: 0 10px;
}
.tabs .active { background-position: 0 -66px; }
.tabs .active SPAN { background-position: 100% -99px; color: #000; }
.content {
border: 1px solid #333; border-top: none;
background: #fff url(images/bg.png) repeat-x; padding: 1px 10px 10px;
}
</style>
</head>
<body>
<ul class="tabs">
<li><a href="linkl.html"> </a></li>
<li class="active"><span> </span></li>
<li><a href="link3.html"> </a></li>
<li><a href="link4.html"> </a></li>
</ul>
<div class="content">
<h1> </h1>
<p>...</p>
</div>
</body>
</html>



, , ,
. , , ,
, ,
, . CSS ,
.
.


. ,
, ,
. ,
, , background , border , width
height . 7.15 .
7.15.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
input[type="text"], input[type="password"] {
padding-left: 24px; /* */
border: 1px solid #ccc; /* */
}
input[type="text"] {
background: url(images/user.png) no-repeat 3px center; /* */
}
input[type="password"] {
background: url(images/password.png) no-repeat 3px center;
}
</style>
</head>
<body>
<form action="handler.php">
<p> <input type="text" name="user" /></p>
<p> <input type="password" name="pass" /></p>
<p><input type="submit" value="" /></p>
</form>
</body>
</html>

. , padding-left.
. 7.15.

. 7.22.


.
, , ,
. .
<input> <button>.
, <button> HTML,
.
.
, 7.16.
7.16.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
input[type="submit"] {
background: #688a7e; color: #fff; /* */
}
input[type="reset"] {
border: 1px solid #000; /* */
}
button img {
vertical-align: bottom; /* */
}
</style>
</head>
<body>
<form action="handler.php">
<p><input type="submit" value=" " />
<input type="reset" value=" " />
<input type="button" value=" " />
<button><img src="images/user.png" />
</button></p>
</form>
</body>
</html>
, .
,
(. 7.23).

. 7.23.
, <button>, , background
border .


(radiobutton) ,
.

(checkbox) ,
. ,
(radiobutton).
.
, , -,
.


, ,
<input type="file">. ,
. ,
.
.
, , ,
. .
input[type=file] jQuery
input type=file CSS

, , .
.
: ,
, . ,
.
, ,
, , (. 7.24).
.

. 7.24.
7.17 .
7.17.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
SELECT {
width: 200px; /* */
background: #f0f0f0; /* */

color: #800; /* */
border: 1px solid #333; /* */

}
</style>
</head>
<body>
<form action="handler.php">
<p><select>
<option disabled="disabled"> </option>
<option value=""></option>
<option value=" "> </option>
<option value=""></option>
<option value=" "> </option>
</select></p>
<p><input type="submit" value="" /></p>
</form>
</body>
</html>


<input type="submit">,
,
. ,
, action <form>.



. ,
(. 7.25), .

. 7.25.
. 32846 ,
.
background. ,
, border none ( 7.18).
7.18.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.user {
width: 308px; /* padding */
height: 46px; /* */
background: #dad7c5 url(images/input.png) no-repeat; /* */
padding: 0 10px; /* */
border: none; /* */
font-size: 1em; /* */
line-height: 46px; /* IE */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" class="user" value="" /></p>
</form>
</body>
</html>
, -
IE.
, . line-height
height.
, .
.
, <textarea>,
.
. , <textarea>
( 7.19).

. <input
type="image">, src , .
7.19.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.comment {
width: 347px; /* */
height: 176px; /* */
background: #dad7c5 url(images/textarea.png) no-repeat; /* */
}
.comment textarea {
border: none; /* */
background: transparent; /* */
margin: 3px; /* */
width: 318px; /* */
padding: 5px 0 5px 5px; /* */
height: 160px; /* */
}
</style>
</head>
<body>
<form action="">
<div class="comment"><textarea cols="10" rows="10"></textarea></div>
<p><input type="image" src="images/send.png" /></p>
</form>
</body>
</html>
, ,
transparent.
- ,
, . , Opera . 7.26.

. 7.26.


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

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
INPUT {
color: #fff; /* */
background: #000; /* */
border: 2px solid #ccc; /* */
padding: 2px; /* */
margin: 0; /* */
height: 19px; /* */
}
INPUT[type="submit"] {
height: 27px; /* */
}
</style>
</head>
<body>
<form action="handler.php">
<p> : <input name="user" type="text" />
<input name="pass" type="password" />
<input type="submit" value="" /></p>
</form>
</body>
</html>
. IE8 Firefox
(. 7.27).

. 7.27.
,
:
vertical-align:

bottom;

IE7 ,
baseline.
<!--[if IE 7]>
<style type="text/css">
INPUT[type="submit"] {
vertical-align: baseline;
}
</style>
<![endif]-->
. 7.28.
, .

. 7.28.
float
. , float, <label>.
, for,
. , :
<label for="user"></label> <input id="user" type="text" />
id="user" .
, ( 7.21).
7.21.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#comment LABEL {
width: 110px; /* */
float: left; /* */
text-align: right; /* */
padding-right: 10px; /* */
}
#comment INPUT[type="text"], #comment TEXTAREA {
width: 320px; /* */
}
</style>
</head>
<body>
<form action="handler.php" id="comment">
<p><label for="user"></label>
<input id="user" type="text" /></p>
<p><label for="email">E-mail</label><input id="email" type="text" /></p>
<p><label for="text"></label>
<textarea cols="40" rows="10" id="text"></textarea></p>
<p><label>&nbsp;</label><input type="submit" id="send"
value="" /></p>
</form>
</body>
</html>

VIII

,
.
lionindesert.ru . 8.1.

.
. 8.1. lionindesert.ru
Adobe Illustrator CS4
PSD (Adobe Photoshop CS4), .
, ,
, .
PSD- ,
HTML CSS. , Photoshop
-
. ,
.
(. 8.2).
, : , ,
.
. ,
header footer.

. 8.2.
, -,
760 .



, . 760 ,
,
. . 8.3 , .
760px, .

. 8.3.
,
header.
.header {
height: 405px; /* */
background: url(images/header-bg.png) no-repeat center bottom;
}
2000 ,
, ,
. , ,
.
. , 1280 ,
,
. ,
(. 8.4). .

. 8.4.
,
. ,
, .
, no-repeat ( ) repeat-x (
).
.header {
height: 405px;
background: url(images/header-bg.png) repeat-x center bottom;
}
, (. 8.5).

. 8.5.
PNG-24 1325405 32 , PNG-8 256 , 15 .
,
. , 32
- .
, - ,
.


,
. . 8.6 405 ,
. PNG-24 , (
402 ), .
.

. 8.6. (header-gradient.png)
198 ,
, .
. 8.7. .

. 8.7. (header-animal.png)
PNG-8,
, 256 PNG-24,
. Photoshop- (Matte)
, . #9de1f0.

,
.
, HTML.
<div class="header">
<div class="header-bg">
<img src="images/header-title.png" alt=" " />
</div>
</div>
header header-bg.
.header {
background: #00b0d8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
background: url(images/header-animal.png) repeat-x center bottom;
height: 405px;
}
12,5 , .


,
. , .
1. PNG-24 .
2. GIF PNG-8 ,
, .
,
, , , .
PNG-24. HTML , .
.header {
background: #00b0d8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
background: url(images/header-animal.png) repeat-x center bottom;
height: 405px; /* */
text-align: center; /* */
}
.header img {
position: relative; /* */
top: 40px; /* */
}
text-align, <img>,
top. ,
position relative.
,
. :
<a href="/"><img src="images/header-title.png" alt="
" /></a>
/ href -,
.
8.1.

8.1.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ?</title>
<style type="text/css">
body { margin: 0; }
.header {
background: #00b0d8 url(images/header-gradient.png) repeat-x;
/* */
}
.header-bg {
background: url(images/header-animal.png) repeat-x center bottom;
/* */
height: 405px; /* */
text-align: center; /* */
}
.header img {
position: relative; /* */
top: 40px; /* */
}
</style>
</head>
<body>
<div class="header">
<div class="header-bg">
<img src="images/header-title.png" alt=" "
width="456" height="166" />
</div>
</div>
</body>
</html>


,
, .

. 457
#f9db94 () #f9f2e3 ().
. 8.8.

. 8.8.
,
, .
#f9f2e3, .. .
, .
.content-gradient {
background: #f9f2e3 url(images/content-gradient.png) repeat-x;
}
background,
.


.
760
(. 8.9). PNG-24.

. 8.9.
, .
.content-bg {
width: 760px; /* */
margin: auto; /* */
background: url(images/content-bg.png) repeat-y; /* */
}

, (padding),
. , content-bg,
, .
,
, .
, , .
.content-white {
background: #fff; /* */
margin: 0 11px; /* */
padding: 20px 40px; /* */
text-align: justify; /* */
}
, , .
. 8.2.
8.2.
<div class="content-gradient">
<div class="content-bg">
<div class="content-white">
<p> HTML CSS
.
,
, , ,
. , .</p>
</div>
</div>
</div>
text-align , , .


.
, , ,
. (. 8.10).

. 8.10.
,
. , - (. 8.11)
, (. 8.11).

.
. 8.11.
,
, .
, .
,
. , ,
, 2000 . background
50% 0.
.footer {
background: url(images/grass.png) 50% 0
*/
}

no-repeat; /*

27 ,
, #e2ed9c.

footer-bg .
.footer-bg {
background: #e2ed9c; /* */
}
HTML .
<div class="footer">
<div class="footer-bg">
Copyright
</div>
</div
, ,
. ,
copyright .
.copyright {
width: 740px; /* */
padding: 0 10px 10px; /* */
margin: auto; /* */
color: #526118; /* */
}
.copyright p {
margin: 0 0 5px 170px; /* */
}
(width) padding ,
760px. margin,
P. :
<div class="footer">
<div class="footer-bg">
<div class="copyright">
<p><strong> </strong></p>
<p>&copy; </p>
</div>
</div>
</div>
.
<img>,
<div> lion. , <img>.
8.3.
8.3.
<div class="footer">
<div class="lion"><img src="images/lion.png" alt="" width="130" height="80"
/></div>
<div class="footer-bg">
<div class="copyright">
<p><strong> </strong></p>
<p>&copy; </p>
</div>
</div>
</div>
. footer
position relative, lion absolute. left
top , .. footer. ,
footer , 760px.
left , ,
. : left 50%,
,
margin-left () () .

.footer {
position: relative; /* */
}
.lion {
position: absolute; /* */
left: 50%; /* */
margin-left: -347px; /* */
top: 3px; /* */
}
margin-left top , .
,
, . 53
. (80px)
(27px). 7780 . -, ,
- , -, ,
. 8.10.
, , -
.
, , , , ,
. .
overflow auto. -
, . overflow
.
background: url(images/grass.png) 50% 53px no-repeat; /*
*/
margin-top: -77px; /* */
overflow: auto; /* */
position: relative; /* */
}
, footer-bg
.
.footer-bg {
margin-top: 80px;
}
,
.
.content-white {
padding: 20px 40px 80px; /* */
}
8.4.
8.4.
.footer {
background: url(images/grass.png) 50% 53px no-repeat; /*
*/
margin-top: -77px; /* */
overflow: auto; /* */
position: relative; /* */
}
.lion {
position: absolute; /* */
left: 50%; /* */
margin-left: -347px; /* */
top: 3px; /* */
}
.footer-bg {
background: #e2ed9c; /* */
margin-top: 80px; /* */
}
.copyright {

width: 740px; /* */
padding: 0 10px 10px; /* */
margin: auto; /* */
color: #526118; /* */

}
.copyright p {
margin: 0 0 5px 170px; /* */
}

, (. . 8.11). ,
, , -
background footer-bg BODY.
, , .
, ,
BODY .
BODY {
background: #e2ed9c; /* */
}


-, .
- .
,
.
,
. ,
. ,
() font.
BODY {
font: 0.9em/1.2 Arial, Helvetica,
}

sans-serif;

0.9em , ,
, . Arial
, Helvetica.
, , , .


: , (. 8.12).

. 8.12.
, ,
, float.
.

1.
, .
, ,
( 8.5).
8.5.
<div class="warning">
<img src="/images/head.png" class="voodoohead" alt="" width="49" height="92"
/>
<h2><img src="images/warning-title.png" alt=""
width="137" height="30" /></h2>
<p>
.

. ,
!</p>
</div>
float left,
margin-left. warning overflow
hidden.

.warning {
overflow: hidden; /* */
margin: 30px 0; /* */
}
.voodoohead {
float: left; /* */
}
.warning H2, .warning P {
margin: 0 0 0 70px; /* */
}

2.
8.5,
, background.
.warning {
overflow: hidden; /* */
margin: 30px 0; /* */
background: url(images/head.png) no-repeat;
min-height: 92px; /* */
}
.warning H2, .warning P {
margin: 0 0 0 70px; /* */
}
min-height,
. head.png.


,
. <h2> ,
<p>. <h2> , <h2>
<h2> . , title
link
. , .
<div class="link">
<h2><a href="assumption.html"></a></h2>
<p>
, ,
.</p>
<h2><a href="simple-iteration.html"> </a></h2>
<p> .</p>
</div>
color,
:hover <h2>.
A {
color: #1b75bc; /* */
}
A:hover {
color: #d6562b; /* */
}
.link H2 {
font-weight: normal; /* */
margin-bottom: 0; /* */
}


- .
, (
) , .


, ,
. float margin-right,
. float
right, margin-right
. ,
.
<div class="sidebar"> </div>
<div id="content"> </div>
sidebar (width)
float. content margin-right.
.sidebar { /* */
width: 200px; /* */
float: right; /* */
}
.content { /* */
margin-right: 240px; /* */
}


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

(. 8.13).

. 8.13.
( 8.6), .
8.6.
<ul class="menu">
<li><a href="index.html"> </a></li>
<li class="current"><span></span></li>
<li><a href="simple-iteration.html"> </a></li>
<li><a href="random-number.html"> </a></li>
<li><a href="dixotomia.html"> </a></li>
<li><a href="golden-section.html"> </a></li>
</ul>
current .

<span> .
list style-image, -
,
. .
19225 (. 8.14). 200 ,
? ,
.
.

. 8.14.

(. 8.15).

. 8.15.
8.7.
8.7.
ul.menu {
list-style: none; /* */
margin: 40px 0; /* */
padding: 0; /* */
}
ul.menu li {
padding: 5px; /* */
font-size: 0.8em; /* */
font-weight: bold; /* */
}
ul.menu a, ul.menu span {
padding: 5px; /* */
}
ul.menu li span {
padding-left: 25px; /* */
background: url(images/bullet.png) no-repeat 5px center; /* */
}
ul.menu li.current {
background: #f9f2e2 url(images/menu-gradient.png) repeat-y; /* */
}
, .
padding-left. background
.


, .
(. 8.16).

. 8.16.
.

, , , .
,
background. ,
(. 8.17), .

. 8.17.
.
<div class="interest">
<h3><img src="images/interest-title.png" alt=" "
width="164" height="30" /></h3>
<p>
180 230 .</p>
<p> ,
.</p>
</div>
<h3>,
. .
.interest {
background: #f2efe6 url(images/shadow.png) no-repeat 0 100%;
/* */
padding: 10px; /* */
font-size: 0.9em; /* */
}
.interest h3 {
margin: 0 0 -10px; /* */
}
, background
left bottom 0 100%, .


, ,
. , .
CMS (content management system, ),
. CMS ,
HTML-.
http://liondesert.narod.ru. Narod.ru,
, :
1. Windows-1251;
2. , ,
.
UTF-8 ,
, .
.
(. 8.18).

. 8.18.
CMS, UTF-8
, ,
. , http://lionindesert.ru
, . , HTML5,
.

IX

HTML5

HTML5
XHTML,

, HTML . , , XHTML
. ,
, ,
, . ,
, , Adobe Flash
, Google Gears
. JavaScript
.
, , Flash iPhone iPad,
JavaScript. ,
- , .. ,
. XHTML .
W3 Consortium, HTML XHTML, XHTML 2.0,
.
. Safari,
Firefox Opera WHATWG (Web Hypertext Application
Technology Working Group, ),
. W3C, HTML5.
, , , HTML5 HTML4
XHTML. Web Applications 1.0,
HTML.
HTML5 ,
. , HTML5? .

, ,
, .
.
.

.
JavaScript .
, .
<canvas> JavaScript , ,
.
: , , , , .
HTML5 ,
. -
, XHTML HTML5.


, ,
. :
, . HTML5 ,
.
<!DOCTYPE html>
, .
, , <html> xmlns,
.
<meta charset="utf-8" />
, .
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
type <script> <style> ,
.
9.1.
9.1. HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p> HTML5</p>
</body>
</html>

HTML5
HTML5 : HTML XHTML, ,
. HTML
, , .
XHTML .
( ).
.
, , .
.
, , MIME-
.html. HTML text/html, XHTML,
XHTML5, application/xhtml+xml. -
Apache, AddType,
.htaccess, .

AddType application/xhtml+xml .html


, .html application/xhtml+xml.
PHP, :
header ("Content-type: application/xhtml+xml");
, .
. .
HTML5
.

.
,
, .
XHTML5
.
XML- SVG MathML.
XML
.
, application/xhtml+xml ,
- , text/html .
,
:
<IMG

src= 1.jpg alt="" width="160" height=50 />

, HTML,
XHTML. HTML5
. , .
XHTML,
HTML5. , HTML-
text/html, XHTML.


HTML5 : <article>, <aside>, <footer>,
<header>, <nav>, <div>. ,
<div class="header"> <header> ,
. ,
, , . <div
class="header">, <div class="abrakadabra">
. <header>, , ,
.
? ,
. ,
, .
.
.
XHTML lionindesert.ru,
HTML5. , ( 9.2).
9.2. <header>
<header>
<div class="header-bg">
<img src="images/header-title.png" alt="
</div>
</header>

" />

<header> , .
display,
. 9.3 .
9.3.

HTML 5.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> ?</title>
<style>
body { margin: 0; }
header {
display: block;
background: #00B0D8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
background: url(images/header-animal.png) repeat-x center bottom;
height: 405px;
text-align: center;
}
header img {
position: relative;
top: 40px;
}
</style>
</head>
<body>
<header>
<div class="header-bg">
<img src="images/header-title.png" alt=" " />
</div>
</header>
</body>
</html>
, IE7 IE8. Internet Explorer

, . ,
JavaScript. <head> .
<script>
document.createElement("header");
</script>
, .
,
. , ( 9.4).
9.4. IE
<!--[if lt IE 9]>
<script>
var e =
("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split
);
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
, IE 8.0 .
IE9 HTML5 .
,
MIT.
, 9.5.
9.5. IE
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS.
, HTML5
:
1. <!DOCTYPE html>;
2. 9.4 9.5;
3. display: block.
HTML5 , .

<article>
, , , . 9.6
<article>.
9.6. <article>

HTML 5.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>article</title>
</head>
<body>
<header><h1> </h1></header>
<article>
,
, .
</article>
</body>

</html>

<aside>
,
, ( 9.7). , , ,
, .
9.7. <aside>

HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>aside</title>
<script>
document.createElement('aside');
document.createElement('article');
</script>
<style>
aside {
background: #f0f0f0; /* */
padding: 10px; /* */
width: 200px; /* */
float: right; /* */
}
article {
margin-right: 240px; /* */
display: block; /* */
}
</style>
</head>
<body>
<aside>
<p> </p>
<p> </p>
<p> </p>
</aside>
<article>
, ,
, .
</article>
</body>
</html>

<figure>
, ,
( 9.8).
9.8. <figure>

HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>figure</title>
<script>
document.createElement('figure');
document.createElement('figcaption');
</script>
<style>
figure {
background: #5f6a72; /* */
padding: 10px; /* */
display: block; /* */
width: 150px; /* */
float: left; /* */
margin: 0 10px 10px 0; /* */
text-align: center; /* */
}
figcaption {
color: #fff; /* */
}
</style>
</head>
<body>
<article>
<figure>
<p><img src="images/thumb1.jpg" alt="" /></p>

<figcaption> </figcaption>
</figure>
<figure>
<p><img src="images/thumb2.jpg" alt="" /></p>
<figcaption> </figcaption>
</figure>
</article>
</body>
</html>

<figcaption>
<figure>. <figcaption>
.

<footer>
, , ,
( 9.9).
9.9. <footer>

HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>footer</title>
</head>
<body>
<header>
<h1> </h1>
</header>
<article>
<h2> !</h2>
<p> .</p>
</article>
<footer>
Copyright
</footer>
</body>
</html>

<header>
.

<hgroup>
- ( 9.10).
9.10. <hgroup>

HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hgroup</title>
</head>
<body>
<hgroup>
<h1> </h1>
<h2> </h2>
</hgroup>
</body>
</html>

<nav>
( 9.11). , <nav>
. <nav>
. <nav> <address>.

9.11. <nav>

HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>nav</title>
</head>
<body>
<header>
<h1> </h1>
</header>
<nav><a href="1.html"></a> | <a href="2.html"></a> |
<a href="3.html"></a> | <a href="4.html"></a></nav>
<article>
<h2> !</h2>
</article>
</body>
</html>

<section>
, , ,
( 9.12). <section> .
9.12. <section>

HTML 5 IE 7 IE 8 IE 9 Cr 5 Op 10 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>section</title>
</head>
<body>
<section>
<h2> </h2>
<p> , , ,
, , ,
.</p>
</section>
<section>
<h2> </h2>
<p> , ,
, , ,
, .</p>
</section>
</body>
</html>

<time>
<time> , .
<time>, datetime
( 9.13).
ISO 8601.
. 9.1.
. 9.1.

2012

2012-12

--

2012-12-23

--T:

2004-07-24T18:18

--T::

2004-07-24T18:18:18

--T::: 2004-07-24T18:18:18+04:00
.

(1860).
(01 , 02 , 12 ).
01 31.
00 23.
00 59.
00 59.
.
T.
. ,
+03:00.
9.13. <time>

HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>time</title>
</head>
<body>
<article>
<p>:
<time datetime="2012-12-23T08:23:11+07:00"></time></p>
<p><time>1957-10-04</time> .</p>
<p><time>1960-08-19</time> .</p>
<p><time>1961-04-12</time> .</p>
<p><time>1963-06-16</time> -.</p>
<p><time>1969-07-21</time> .</p></article>
</body>
</html>
, HTML5?
, <figure>
<figcaption>.
<figure>
<p><img src="images/fig2-1.png" alt=". 1" height="252" width="381" /></p>
<figcaption>. 1. N
</figcaption>
</figure>
<figure> <figcaption>,
.
figure {
text-align: center; /* */
}
figcaption {
font: italic 1em Georgia, "Times New Roman", Times, serif;
/* */
display: block; /* */
margin: 0 0 1.5em; /* */
}

HTML5
, HTML5, lionindesert.ru XHTML
HTML5. , <title>,
. 9.14 <head>.
9.14. <head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> ?</title>
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<meta> <link>
. IE 8.0 , IE
HTML5.
<header> 9.2,
. .
<section> <header> ( 9.15).
9.15.
<section>
<header><h1><a href="assumption.html"></a></h1></header>
<p>
,
, .</p>
</section>
<section>
<header><h1><a href="simple-iteration.html">
</a></h1></header>
<p> .</p>
</section>
<section>,
<h1>, <header>.
<header>, , <h1>? HTML5
, HTML4.
HTML <h1>...<h6>. ,
<h1> , <h2> <h3> .
, <h1>. HTML5
, . ,
<article> <section> . HTML5
<h1>.
HTML HTML5 Outliner.
HTML- , .
. 9.1.

. 9.1.
Untitled Section <header>, .
, , .
<h1> <section>.
, , <footer>,
9.16.
9.16.
<footer>
<div class="lion"><img src="images/lion.png" alt=""
width="130" height="80" /></div>
<div class="footer-bg">
<div class="copyright">
<p><strong> </strong></p>
<p>&copy; </p>
</div>
</div>
</footer>

( 9.17).
9.17.

HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> ?</title>
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="header-bg">
<img src="images/header-title.png" alt=" "
width="456" height="166" />
</div>
</header>
<div class="content-gradient">
<div class="content-bg">
<div class="content-white">
<p> HTML CSS
.
,
, ,
, . , .</p>
<section class="warning">
<header><h1><img src="images/warning-title.png" alt=""
width="137" height="30" /></h1></header>
<p>
.

. ,
!</p>
</section>
<section>
<header><h1><a href="assumption.html"></a></h1></header>
<p>
, ,
.</p>
</section>

</div>
</div>
</div>
<footer>
<div class="lion"><img src="images/lion.png" alt="" width="130"
height="80" /></div>
<div class="footer-bg">
<div class="copyright">
<p><strong> </strong></p>
<p>&copy; </p>
</div>
</div>
</footer>
</body>
</html>
HTML , -
. style.css
.
, <header>, <section>, <footer>, <aside>, <nav>,
<article> . .
header, section, footer, aside, nav, article {
display: block; /* */
}
header header, footer footer.
header {
background: #00B0D8 url(images/header-gradient.png) repeat-x; /* */
}
footer {
background: url(images/grass.png) 50% 53px no-repeat; /* */
margin-top: -77px; /* */
overflow: auto; /* */
position: relative; /* */
}
.
<section> (. 9.2).

. 9.2.
<header> <section> ,
, . ,
. <header> <section>,
.
section header {
background: none; /* */
}
, .
header img, header-title.png
, . .header-bg

img.
.header-bg img {
position: relative; /* */
top: 40px; /* */
}
<h1> .
section h1 {
font-size: 1.5em; /* */
font-weight: normal; /* */
margin-bottom: 0; /* */
}
. ,
. <div class="sidebar"> <aside>, sidebar aside.
aside {
width: 200px; /*
float: right; /* */
}

*/

, <div class="content"> <article>,


content article.
article {
margin-right: 240px; /* */
}
. ( <ul>), <nav>.
.
<nav>
<ul class="menu">
<li><a href="/"> </a></li>
<li class="current"><span></span></li>
<li><a href="simple-iteration.html"> </a></li>
<li><a href="random-number.html"> </a></li>
<li><a href="dixotomia.html"> </a></li>
<li><a href="golden-section.html"> </a></li>
</ul>
</nav>

.
9.18.
9.18.
<div class="content-gradient">
<div class="content-bg">
<div class="content-white">
<aside>
<nav>
<ul class="menu">
<li><a href="/"> </a></li>
<li class="current"><span></span></li>
<li><a href="simple-iteration.html"> </a></li>
<li><a href="random-number.html"> </a></li>
<li><a href="dixotomia.html"> </a></li>
<li><a href="golden-section.html"> </a></li>
</ul>
</nav>
<div class="interest">
<h3><img src="images/interest-title.png" alt=" "
width="164" height="30" /></h3>
<p> 180
230 .</p>
<p> ,
.</p>
</div>

</aside>
<article>
<h1></h1>
<p>
, ,
. </p>
</article>
</div>
</div>
</div>
, HTML5?
, <figure>
<figcaption>.
<figure>
<p><img src="images/fig2-1.png" alt=". 1" height="252"
width="381" /></p>
<figcaption>. 1. N
</figcaption>
</figure>
<figure> <figcaption>,
.
figure {
text-align: center; /* */
}
figcaption {
font: italic 1em Georgia, "Times New Roman", Times, serif; /* */
display: block; /* */
margin: 0 0 1.5em; /* */
}
HTML5 , lionindesert.ru.

HTML5
, ,

- . ,
-, . HTML5
, validator.w3.org
validator.nu.

validator.w3.org
http://validator.w3.org , ,
. : ,
.


, ,
(. 9.3).

. 9.3.
, http://lionindesert.ru Validate by URI ( ) Check
() , .
, ,
. , , , http://lionindesert.ru
http://lionindesert.ru/index.html.
HTML-
(. 9.4).

. 9.4. -
HTML5 ,
, HTML5 .
,
, (. 9.5).

. 9.5.


, , ,
Validate by File Upload ( ), . 9.6.

. 9.6.
HTML-, Check .
.


.
(. 9.7).

. 9.7. HTML-

html5.validator.ru

HTML5, XHTML5, XHTML, HTML
. : (Address),
(File Upload) (Text Field).
(. 9.8).

. 9.8.
Validate . ,
, (. 9.9).

. 9.9.
, .
: About this Service ( ),
More options ( ).
(. 9.10).
HTML5.

. 9.10.


,
.
, , ,
, JavaScript .
, . ,
,
Web Developer. Firefox Chrome.

Web Developer
, Firefox
, Chrome.
. Firefox.
, Firefox
Download, , Firefox
(. 10.1).

. 10.1. Firefox
.
https://addons.mozilla.org/ru/firefox/addon/web-developer/
(. 10.2),
.

. 10.2. Web Developer


>
. web developer, Enter ,
(. 10.3).

. 10.3. Firefox
(. 10.4),
> Web Developer . / >
.

. 10.4. Web Developer


Web Developer.


.
.
, ,
. ,
. ,
, . , Firefox
Opera.
Ctrl + F5 ,
.
Java
Java , Sun Microsystems.
( ) . Firefox , .

Firefox 3.6 .
JavaScript
, -
. JavaScript -
, , , .
JavaScript > , .
,
, , .
Web Developer , , .
META-
<meta>
. <meta> Refresh
http-equiv ( 10.1).
10.1.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Refresh" content="5; URL=http://htmlbook.ru" />
</head>
<body>
<p>...</p>
</body>
</html>

. , ,
.
<meta>.

Firefox ,
, .
, , ,
.
, > ... ,
.
.
Web Developer . ,
, .

, background background-color.
, background.
Popup
,
. .

, ,
. Firefox ( >
.. , , , )

, .
Referrers
Referrer HTTP ,
. , .

Cookies

, ,
, .
, , . Firefox
> ... , .
.
:
;
;
, /
;
;
, .
Cookies
.
Cookies
.
, .
, , .
.
Cookies
, .
Cookies
, .
Cookies
, .
(. 10.5).

. 10.5. youtube.com
Cookies
,
(. 10.6).

. 10.6.
.

CSS

.

- .

.

, .
, <h1> <p> .
<h1></h1>
<p></p>
.


<style>.

, style. ,
.
<p style="color: red"> </p>

<link>.

, print . ,
,
.

<link>,
.

, .
CSS
, ,
.


.
(. 10.7).

. 10.7.
, ,
(. 10.8). ,
, , .
, .

. 10.8.
CSS
CSS-, .
CSS
, ,
(. 10.9).

. 10.9. CSS
.
, .
, , ,
. ,
.

,
.

, <form> , .


, <form>. . 10.10
, .

. 10.10.
(. 10.11).
, .

. 10.11.


<input type="password">
.
(. 10.12).

. 10.12.

,
.
Method
method <form> GET POST .
Select
, <select>,
. . 10.13 , .

. 10.13.
.


, . ,
Firefox , >

, . autocomplete,
on ( ) off
(). ,
autocomplete .

, disabled ( 10.2).
.
10.2. disabled

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> disabled</title>
</head>
<body>
<form action="handler.php">
<p><input type="text" size="30" disabled="disabled" /></p>
<p><input type="submit" name="submit" value=""
disabled="disabled" /></p>
</form>
</body>
</html>

, <input
type="radio">. ,
.

, readonly.
( 10.3).
10.3. readonly

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> readonly</title>
</head>
<body>
<form action="handler.php">
<p><input type="text" size="30" readonly="readonly" /></p>
<p><input type="submit" name="submit" value="" /></p>
</form>
</body>
</html>

name. ,
<input type="text" name="username">, username.

, maxlength
<input>. ,
( 10.4).
10.4. maxlength

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> maxlength</title>
</head>
<body>
<form action="handler.php">
<p><input type="text" size="30" maxlength="10" /></p>
<p><input type="submit" name="submit" value="" /></p>
</form>
</body>
</html>
,
.

, <img>.


,
. file:///c:/www/file.html.

.
http://.

GIF.
Alt
alt (. 10.14).

. 10.14. alt

(. 10.15). ,
, . , 400 , width 200,
200.

. 10.15.


(. 10.16).

. 10.16. src

src (. 10.17).

. 10.17. src

, .
.

.

, <img>.

.

, width height.
Alt
, alt="".

,
width height.
Alt
, alt .

, width height.
Title
, title .

.
, , alt (. 10.18).

. 10.18.

.

, .

, width height
.

, , , .
Alt
alt.
.


title <abbr> <acronym>.

Access Key
accesskey
. accesskey ,
.

name id, <a>.

<div> (. 10.19).

. 10.19. <div>
Div
<div> .

,
.
(. 10.20).

. 10.20.
, .
ID Class
id class.

<a>.
Object
<object>
.
z-index
z-index , .
Tab Index
tabindex

Tab . , 1 2,
3 . tabindex , .

, ,
. 10.21.

. 10.21.

.
Title
title , .

, -,
. ,
.

, id name
<a>.

, ,
(. 10.22).

. 10.22.

<h1>...<h6>
(. 10.23).

. 10.23.

, ,
(. 10.24).

. 10.24.
,
.
JavaScript
, JavaScript, ,
.

.
Meta-
<meta> .

, > .

, . ,
, . , 200 ,
, 404 .

. 10.25.


> ,
.

,
(. 10.26). ,
.

. 10.26.

.

. ,
(. 10.27).
Web Developer,
.

. 10.27.
,
.

.

, .. <!-- -->.

<input type="hidden">, .
Chrome
, Chrome .
HTML
CSS (. . 10.9)
. .

.

<frame> noresize, .
noresize.

, .

.

.

.

<h1> <h6>.

, title.

, .

.


HTML <basefont>, <center>, <font>, <strike>
.

, , ,
( float).

.
.

.
(. 10.28).

. 10.28.

.

,
.

,
(. 10.29).

. 10.29.

(. 10.30).

. 10.30.
...
.
. , , 1024768 1024
768 .
.
...
.

.
CSS
CSS http://jigsaw.w3.org.

http://validator.w3.org/feed Atom
RSS. .
HTML
HTML http://validator.w3.org.


http://validator.w3.org/checklink. ,
.
.
Section 508
.
cynthiasays.com, .
WAI
Web Accessibility Initiative ( )

.

.
DOM
DOM (Document Object Model, ),
Firefox. , .

, , JavaScript
CSS (. 10.32).

. 10.32.
Web Developer,
(. 10.33).

. 10.33.
, ( )
( ), CSS, JavaScript.
.
Web Developer CSS3, ,
opacity, -moz-border-radius CSS.
, .
JavaScript,
.
Java
Java. Firefox 3.6.


HTML CSS. ,
, .
CSS
, CSS CSS ,
.
CSS http://jigsaw.w3.org,
.
HTML
, HTML-
http://validator.w3.org.

.

, ,
.

,
. ,
, .
Edit View Source With Applications...
.

.

.

, , ,
, .

.
...
, ,
.

.
.

, Web Developer, .

Firebug

. ,
, , .
, ,
, .
,
. ,
- , .
HTML
, Web Developer Firebug,
HTML CSS .
Firebug , Firefox -.
2007 , ,
, ,
Firebug. -
Apple Safari -.
Opera Dragonfly.
Internet Explorer .
Google Chrome .

Firebug
-,
, , . ,
, .

HTML, Firebug
JavaScript. , ,
, , .
HTML
Firebug
. , , ,
.
CSS
,
, , .
.

,
, . HTML-
.

Firebug .
https://addons.mozilla.org/ru/firefox/addon/firebug/
Firefox (. 10.34).

. 10.34.
(. 10.35), .

. 10.35.
Firebug :
> Firebug ;
F12 ;
Firefox (. 10.36);
( > ).

. 10.36. Firebug

Firebug .
HTML, (. 10.37).

. 10.37. Firebug
HTML , ,
. ,
, .
(. 10.38). HTML,
( Ctrl + Shift + C ).

. 10.38.
, , CSS-
, . - , ,
, .
, .front .info , .info,
background font-size . ,
CSS-, transparent,
.

. ,
, . 10.38.
. , (. 10.39).

. 10.39.
,
(. 10.40).

. 10.40.
,
(10.41).

. 10.41.

( style).

.

. .
CSS
CSS.
DOM
DOM.
,
-. , Firebug .
, .


,
.
. 10.43 ,
.

. 10.43.
, font-family body, em
font-family , font-weight 400.
, .

,
, , , (. 10.44).

. 10.44.
, , ,
, z z-index. , .
position: relative;
top: 15px;
right: 15px;
z-index: 100;
, (. 10.45).
style ,
element.style. ,
.
element.style {
border-top-width: 3px;
top: 20px;
}

. 10.45.

Firebug
, Firebug
.

1
. 10.46 , ,
, . F12 Firebug,

. 10.46.
(. 10.47).

. 10.47.
, , ,
. ,
..., margin Enter .
auto (. 10.48) , .

. 10.48.
10.5 . XHTML
CSS.

10.5.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 1</title>
<style type="text/css">
.d1 {
background: #CCC; color: #737373;
font: 14px/18px Arial;
padding: 0 0 20px;
margin: auto; width: 100%;
}
.d2 {
height: 50px; padding: 20px;
}
.d3 {
background: #FFF; padding: 20px; width: 960px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"> </div>
<div class="d3"></div>
</div>
</body>
</html>

2
,
( 10.6).
10.6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="06.css" type="text/css">
<title> 174</title>
</head><body>
<div id="wrapper">
<div id="border">
<div id="header">
<div id="headertext"> 174</div>
</div>
<div id="all-menu">
<div id="menu">
<div id="menu-in">
<h1> </h1>
<p> 1923
174.
,
. .</p>
</div>
</div>
<div id="menu">
<div id="menu-in">
<h1> </h1>
<p> 1923
174.
,
. .</p>
</div>
</div>
</div>
<div id="bar-all">

</div>
</div>
</div>
</body></html>
:

;
;
, .
. 10.49 .

. 10.49.
.
. HTML- id="menu" class="menu", id="menu-in"
class="menu-in", #menu .menu #menu-in .menu-in. ,
, ,
.
Firebug. ,
.... , - margin,
, .
, . , 350px,
.
(. 10.50).

. 10.50.
, Firebug
.
( 10.7).
10.7.
#headertext {
width:700px;
height:40px;
font-family:"Comic Sans MS";
font-size:33px;
color:#71c15c;
margin:275px 0 0 10px;
float:left;
}
. Firebug .
display #bar-all ,

#all-menu. , , ,
. float left
(. 10.51).

. 10.51.
. ( 10.8)
.
10.8.
#all-menu {
float: left;
width: 530px;
}

- Safari
Safari ,
. , Safari , iPhone iPad.

(. 1.52).

. 1.52.
Safari HTML CSS . > -
Ctrl + Alt + I . , ,
.
- , - , ,
. - .
- . 1.53.
.

. 1.53. -
- Firebug HTML-

, .
,

.
,
. (. 1.54)
, ,
.

. 1.54.
, - . ,
, , RGB
HSL.
, .. ,
style. , .

(. 1.55).

. 1.55.
, .
padding margin ,
, padding-left, padding-top . ,
.
(. 1.56).

. 1.56.
,
, , (. 1.57).

. 1.57.
, padding, margin, ..
, .
, .
.
, .

Opera Dragonfly
- Opera .
> > Opera Dragonfly
Ctrl+Shift+I. . 1.58 Dragonfly.

. 1.58. Opera Dragonfly


, Dragonfly, Firebug - Safari,
, . , Dragonfly
- .
10.9
. HTML CSS , ,
.
10.9.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table { border-collapse: collapse; width: 100%; }
table td { border-spacing: 0; padding: 0; }
.top { height: 20px; background: url(images/top.gif) repeat-x; }
.topright { width: 30px;
background: url(images/topright.gif) no-repeat; }
.center { background: #c5b39f; }
.centerright { width: 30px;
background: url(images/center.gif) no-repeat; }
.bottom { height: 20px;
background: url(images/bottom.gif) repeat-x; }
.bottomright { width:30px;
background: url(images/bottomright.gif) no-repeat;
}
</style>
</head>
<body>
<table class="tbl">
<tr>
<td class="top"></td><td class="topright"></td>
</tr>
<tr>
<td class="center"></td><td class="centerright"></td>
</tr>
<tr>
<td class="bottom"></td><td class="bottomright"></td>
</tr>
</table>
</body>
</html>

Opera (. 1.59), -
.

. 1.59.
Dragonfly , :
.
.
, , ,
, topright (. 10.60).

. 10.60.
, , center. , ,
. 100%,
, table-layout fixed.
,
, style . 10.10 ,
.
10.10.
table { table-layout: fixed; }
.center { width: 100%; }
. , !

Internet Explorer
,
. ,
IE 7.0, 8.0
9.0.
> F12 .
(. 10.61), , Firebug
HTML, .

. 10.61.

( 10.11).
10.11.

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ul {
list-style: url(images/bullet.png); /* */
}
ul ul {
list-style: circle; /* */
margin-bottom: 1em; /* */
padding-left: 20px; /* */
margin-left: 0; /* */
}
ul li {
padding-left: 10px; /* */
}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li>63</li><li>59-1</li><li>59-1</li><li>59-1</li>
</ul>
</li>
<li>
<ul>
<li>1</li><li>1</li><li>2</li><li>2</li>

<li>2</li><li>3</li>
</ul>
</li>
</ul>
</body>
</html>
HTML CSS , ,
.
Firefox, Safari Chrome. , ,
IE.
, ,
IE. IE7 IE8 :
(. 10.62), .

. 10.62. IE78

. (. 10.63)

<ul>.

. 10.63.
inherited , <ul>.
.
, (. 10.64).

. 10.64.
,
(. 10.65), .. , .

. 10.65.
(. 10.66) ,
, . Offset ,
, Z-index z-index.
, .

. 10.66.
. (. 10.63) , :
list-style-image list-style-type. list-style-type list-style-image,
ul ul, , ul. IE7
list-style-image ,
. CSS,
. ,
. 10.67.

. 10.67.
list-style-image none (. 10.68) .

. 10.68.
,
, .
. ,
( 10.12).
10.12. IE
/* F12.
*/
UL {
LIST-STYLE-IMAGE: url(images/bullet.png)
}
UL UL {
LIST-STYLE-TYPE: circle; PADDING-LEFT: 20px; MARGIN-BOTTOM: 1em;
MARGIN-LEFT: 0px; LIST-STYLE-IMAGE: none
}
UL LI {
PADDING-LEFT: 10px
}


-,
.

(http, ftp
.). : http://htmlbook.ru/help,
http://htmlbook.ru/example/help.png.

, .

.

, ()
.

,
. Internet Explorer, Firefox,
Opera, Safari, Chrome.

, ,
.

: HTML,
XML, PDF .

-, ,
.

,
-.

, .
, .

HTML, CSS -.
(WWW Consortium, W3C),
.

, .
, ,
-.

.
HTTP (Hyper Text Transfer Protocol,
).

, ,

.
.

,
,
, .

HTML,
, .

CSS (Cascading Style

Sheets,
)

URL (Universal

resource locator,

, , ,
.
, -
. ,
. ,
.
IE (MSIE, , Internet Explorer.
,
)

. ,
. .

<div>.

<!DOCTYPE>.

Java.

JavaScript.

() .

Mozilla Firefox.

(,
, FF,
Fx)

(Op)

Opera.

.
.

( ).

, ..
.

, .
, , ,
.

(Sa)

Apple Safari.

() .

URL (Uniform Resource Locator ).

, , ,
.

HEX ( , ).

(Cr)

Google Chrome.

()

HTML

( ).

. , ,
.

Оценить