Layout

-
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-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.

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

<head>
<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.

<head>
<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.

<head>
<title> </title>
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

<head>
<title></title>
@import url("style/mysite.css");
H2 {
font-size: 1.2em;
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

<head>
<title> </title>
@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.

<head>
<title> </title>
@media screen { /* */
BODY {
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.

<head>
<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.

<head>
<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.

<head>
<title></title>
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.

<head>
<title></title>
P {
font-weight: 600; /* */
line-height: 1.2; /* */
}
</style>
</head>
<body>
<p> </p>
</body>
</html>
, . .7 0.7
.
,
. , 100%
,
( 1.21).
1.21.

<head>
<title> </title>
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.

<head>
<title> </title>
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.

<head>
<title> </title>
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

<head>
<title></title>
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.

<head>
<title> </title>
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

<head>
<title>initial</title>
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>

<head>
<title> </title>
P {
color: green; /* */
}
</style>
</head>
<body>
<p>
.
,
.</p>
</body>
</html>
.
, <p>.
, ,
, <body>.

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

<head>
<title></title>
P { /* */
}
P.cite { /* cite */
color: navy; /* */
border-left: 1px solid navy; /* */
}
</style>
</head>
<body>
<p> .
, ,
,
,
.</p>
<p class="cite">
.</p>
</body>
</html>
. 1.15.
. 1.15. ,
(
), , cite
.
, , . .
. { 1: ; 2: ; ... }
, ( 1.29).
1.29.

<head>
<title></title>
.gost {
color: green; /* */
font-weight: bold; /* */
}
.term {
border-bottom: 1px dashed red; /* */
}
</style>
</head>
<body>
<p> <span class="gost"> 12.1.003-83 ".
"</span>,

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

1000 .</p>
</body>
</html>
<span> <b> . 1.16.
. 1.16. ,
, -:
, , . 1.30
.
1.30.

<head>
<title></title>
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>
</tr>
<tr class="odd">
</tr>
<tr>
</tr>
<tr class="odd">
</tr>
</table>
</body>
</html>
. 1.17. odd
. , <tr>
.
. 1.17.

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

<head>
<title> </title>
.level1 { font-size: 1em; }
.level2 { font-size: 1.2em; }
.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>
</div>
</body>
</html>
. 1.18.
. 1.18.
.layer1.layer2, layer1 layer2
. ,
layer1 layer2 ( 1.32).
1.32.

<head>
<title></title>
.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.

<head>
<title></title>
#help {
position: absolute; /* */
right: 20px; /* */
top: 50px; /* */
width: 225px; /* */
padding: 5px; /* */
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.

<head>
<title></title>
P {
color: green; /* */
font-style: italic; /* */
}
P#opa {
color: red; /* */
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.

<head>
<title> </title>
P B {
font-family: Times, serif; /* */
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.

<head>
<title> </title>
A {
color: green; /* */
}
.menu {
padding: 7px; /* */
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.

<head>
<title> </title>
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.

<head>
<title> </title>
H2.sic {
font-size: 140%; /* */
color: maroon; /* */
margin-bottom: 0px; /* */
}
H2.sic + P {
background: #ddd; /* */
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.

<head>
<title> </title>
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.

<head>
<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.

<head>
<title> </title>
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.

<head>
<title> </title>
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%; /* */
float: left; /* */
}
LI > UL {
padding-top: 5px; /* */
}
LI > A {
display: block; /* */
font-size: 90%; /* */
background: #fff; /* */
border-bottom: none; /* */
padding: 5px; /* */
}
</style>
</head>
<body>
<ul id="menu">
<li>
<ul>
<li><a href="#"></a></li>
</ul>
</li>
<li>
<ul>
</ul>
</li>
<li>
<ul>
</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

<head>
<title> </title>
Q {
quotes: "" ""; /* */
}
Q[title] {
}
</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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title> </title>
A[target="_blank"] {
background: url(images/blank.png) 0 6px no-repeat;
/* */
}
</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.

<head>
<title> </title>
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.

<head>
<title> </title>
A[href$=".ru"] { /* .ru */
background: url(images/ru.png) no-repeat 0 6px;
/* */
}
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.

<head>
<title> </title>
[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.

<head>
<title></title>
[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.

<head>
<title></title>
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>
</ul>
</div>
</div>
</body>
</html>
block-menu-therm,
|="block",
.
, ,
. .
[1="1"][2="2"] { }
[1="1"][2="2"] { }

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

<head>
<title> </title>
* {
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.

<head>
<title> </title>
FORM P * {
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

<head>
<title></title>
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.

<head>
<title></title>
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.

<head>
<title></title>
TR:hover {
}
</style>
</head>
<body>
<table width="400" border="1" cellpadding="4" cellspacing="0">
<tr>
<th> </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>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
(. 1.34).
. 1.34.
,
,
.
:first-child
,
. , , ( 1.56).
1.56. first-child

<head>
<title></title>
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.

<head>
<title></title>
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.

<head>
<title></title>
P {
}
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
<!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>
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

<head>
<title></title>
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

<head>
<title></title>
P {
/* */
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.

<head>
<title></title>
P:first-line {
color: red; /* */
}
</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;
serif;
, font-family.
,
1.64.
1.64.
H1, H2, H3 {
}
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.

<head>
<title></title>
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. -

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

<head>
<title></title>
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.

<head>
<title></title>
#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.

<head>
<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.

<head>
<title></title>
#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 {
color: #000;
background: #fff;
margin: 0;
}
.top {
padding-left: 3%;
}
, ,
.
(Properties in Alphabetical Order)
body {
background: #fff;
color: #000;
margin: 0;
}
.top {
padding-left: 3%;
}
,
, .
(Longest Property to Shortest)
body {
background: #fff;
color: #000;
margin: 0;
}
.top {
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>
XHTML:
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>
<head>
<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

<head>
<title> </title>
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

<head>
<title> </title>
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

<html>
<head>
<title> </title>
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.

<head>
<title> </title>
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="-"
</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.
<html>
<head>
<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" ?>

<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:
XHTML 1.0:
, .
: <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>
<head>
<title></title>
</head>
<body>
<form>
<input type="text">
</form>
</body>
</html>
<form> action, <input>
, .
. ,
. XHTML
2.10.
2.10. XHTML

<head>
<title></title>
</head>
<body>
<form action="">
</form>
</body>
</html>

, ,
.
HTML 4.01:
XHTML 1.0:
.
- ,
HTML XHTML.
, ,
. , , target,
. target , - ,
- . ,
, .
, target .
target <a> ( 2.11).
2.11.

<head>
<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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<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

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

Trident/5.0)
, IE9.
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.
, .

(. 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
HTML 5
<!DOCTYPE html>
XHTML 1.0

.
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

<head>
<title></title>
.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.

<head>
<title></title>
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.

<head>
<title></title>
.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; /* */
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

<head>
<title> </title>
div {
width: 100%; /* */
-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.

<head>
<title> </title>
.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.

<head>
<title> </title>
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.

<head>
<title> </title>
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.

<head>
<title></title>
.layer {
width: 300px; /* */
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;
}
P {
background: #CADADD;
margin: 5px 0;
}
, ,
20 (. 3.14).
. 3.14.

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

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

, , .
,
. .

(. 3.17).
. 3.17.
<h1> 20px, <div> 30px,
<p> <div> 50px.
H1 {
}
DIV {
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.

<head>
<title> </title>
.header {
height: 100px;
}
.content {
}
</style>
</head>
<body>
<div class="header"></div>
<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; /* ,
*/
overflow: auto;
}
.content h1 {
margin-top: 0; /* */
padding-top: 1em; /* */
}
,
. .

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

<head>
<title> </title>
BODY {
}
.feedback {
position: fixed; /* */
left: 0; top: 50%; /* */
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.

<head>
<title></title>
.layer1 {
width: 217px; /* */
height: 512px; /* */
background: url(images/bg2.png) no-repeat; /* */
right: 20%; /* */
bottom: 0; /* */
}
.layer2 {
background: #000; /* IE */
background: rgba(0,0,0, 0.5); /* */
color: #fff; /* */
bottom: 30px; /* */
width: 207px; /* */
padding: 5px; /* */
}
</style>
</head>
<body>

</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.

<head>
<title></title>
.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.

<head>
<title> </title>
</head>
<body>
<div>
<p> </p>

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

. ,

width height. 3.15 ,
.
3.15.

<head>
<title></title>
.menu {
width: 220px; /* */
padding: 5px; /* */
}
.menu P { margin: 0 0 2px; }
.menu A {
padding: 2px; /* */
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>
</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>

<head>
<title> </title>
.pose {
margin-left: 1em; /* */
}
.press {
padding: 1px; /* */
border: 1px dotted maroon; /* */
color: navy; /* */
}
.num {
}
</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

<head>
<title> </title>
.notetitle {
padding: 3px; /* */
display: inline; /* */
background: #ffeebf; /* */
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

<head>
<title></title>
.photo {
background: #d9dabb; /* */
width: 150px; /* */
margin: 0 10px 10px 0; /* */
padding: 10px 0; /* */
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">
</div>
<div class="photo">
</div>
<div class="photo">
<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
/* 3.18 */
</style>

[if lte IE 7] IE 7.0 .
. zoom,
hasLayout,
. 5 Internet Explorer.
- ,
-. .
, , ,
IE ( 3.20).
3.20.

<head>
<title></title>
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; /* */
vertical-align: top; /* */
}
#catalog P { margin: 0 5px; }
#catalog SPAN { color: #ccc; font-size: 0.8em; }
</style>

</head>
<body>
<div id="catalog">
<div>
<p><img src="images/category1.jpg" alt="" /></p>
<p><a href="#"></a> <span>1856</span></p>
</div>
<div>
</div>
<div>
<p><a href="#"> </a> <span>2109</span></p>
</div>
<div>
<p><a href="#"> .</a> <span>4296</span></p>
</div>
<div>
</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

<head>
<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.

<head>
<title> </title>
.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.

<head>
<title></title>
.note {
float: right; /* */
background: #F3F0E9; /* */
padding: 0 10px; /* */
margin: 5px 0 5px 10px; /* */
width: 120px; /* */
}
.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" /> — 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.

<head>
<title></title>
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; /* */
float: left; /* */
}
#catalog P { margin: 0 5px; }
#catalog SPAN { color: #ccc; font-size: 0.8em; }
</style>
</head>
<body>
<div id="catalog">
<div>
<p><a href="#"> .</a> <span>4296</span></p>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</body>
</html>
. 3.35.
. 3.35. float
- , -
.
height, 100px display: inline.

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

<head>
<title></title>
.arrow { background: #f0f0f0; padding: 0 5px; }
.arrow A {
color: red; /* */
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.

<head>
<title> </title>
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.

<head>
<title> </title>
DIV {
overflow: hidden;
}
.fig {
float: left; margin: 0 10px 5px 0;
position: relative; /* */
left: -30px; /* */
}
</style>
</head>
<body>
<div>
</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

<head>
<title></title>
.arrow { background: #f0f0f0; padding: 0 5px; }
.arrow A {
color: red; /* */
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

<head>
<title> float</title>
.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">
</div>
<div class="photo">
</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">
</div>
<div class="photo">
</div>
</div>
<p> </p>
</div>
:after
<div> clear ,
float. , .
:after, content
. , clear.
.
.clearleft:after {
content: "."; /* () */
clear: left; /* */
visibility: hidden; /* */
height: 0; /* */
}
,
visibility, , -
.
.
, :after, ,
<div class="clearleft"></div>. ,
clearleft, 3.30.
3.30. :after

<head>
<title>:after</title>
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">
</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.

<head>
<title> </title>
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 {
width: 250px; /* */
padding: 5px; /* */
font-family: sans-serif; /* */
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.

<head>
<title> </title>
#floatTip {
position: absolute; width: 250px; display: none;
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.

<head>
<title> </title>
BODY { margin-bottom: 50px; }
#footer {
position: fixed; /* */
left: 0; bottom: 0; /* */
background: #39b54a; /* */
color: #fff; /* */
width: 100%; /* */
}
</style>
</head>
<body>
<div id="content">

.

.
, !
</div>
<div id="footer">© </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.

<head>
<title></title>
H1 {
font: bold 2em Arial, Tahome, sans-serif; /* */
color: #fff; background: #375D4C;
padding: 0 10px;
}
H1 SPAN {
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.

<head>
<title> </title>
.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; /* */
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.
<head>
<title> </title>
.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- .
.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
.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

<head>
<title></title>
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.

<head>
<title> </title>
TABLE {
width: 100%; /* */
}
TD {
}
TD.content {
}
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.

<head>
<title></title>
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.

<head>
<title></title>
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.

<head>

<title> cellspacing</title>
TABLE {
width: 100%; /* */
border-spacing: 7px 5px; /* */
}
TD {
padding: 5px; /* */
}
</style>
</head>
<body>
<table>
<tr><td></td><td>5</td><td>8</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.

<head>
<title></title>
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.

<head>
<title></title>
TABLE {
border-collapse: collapse; /* */
background: #dc0; /* */
}
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.

<head>
<title></title>
TABLE {
width: 300px; /* */
}
TH {
text-align: left; /* */
}
TD {
}
TH, TD {
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.

<head>
<title></title>
TABLE {
width: 300px; /* */
}
TH, TD {
padding: 4px; /* */
}
TH {
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>,
, , ,
( ). ,
12 , -
. ,
, - .
.
.
empty-cells, hide
. , .
:
;
, ;
visibility hidden.
, ..
( 4.10).
4.10.

<head>
<title> empty-cells</title>
TABLE {
border: 4px double #399; /* */
}
TD {
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> </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.

<head>
<title> </title>
.content, .menu { padding: 10px;}
.container {
background: #9c3022; /* */
}
.content {
margin-right: 120px;
}
.menu {
width: 100px; /* */
color: #fff; /* */
float: right; /* */
}
</style>
</head>
<body>
<div class="container">
<div class="menu"></div>
. , ,
.
</div>
</div>
</body>
</html>
, , ,
. ,
,
. , ,
, . ,
padding-bottom , ,
margin-bottom .
.
.content, .menu {
padding: 10px;
padding-bottom: 10000px; /* */
margin-bottom: -10000px; /* */
}
.container {
overflow: hidden; /* */
}
.content {
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.

<head>
<title> copy</title>
</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">
alt="" /></td>
<td colspan="3" rowspan="2">
alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="63" alt="" /></td>
</tr>
<tr>
<td colspan="3">
alt="" /></td>
<td>
</tr>
<tr>
alt="" /></td>
<td colspan="4">
alt="" /></td>
<td rowspan="2">
alt="" /></td>
<td>
</tr>
<tr>
<td rowspan="4">
alt="" /></td>

alt="" /></td>
<td rowspan="4">
alt="" /></td>
<td>
</tr>
<tr>
<td rowspan="3">
alt="" /></td>
<td>
</tr>
<tr>
alt="" /></td>
<td>
</tr>
<tr>
<td colspan="2">
alt="" /></td>
<td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="37" height="1" alt="" /></td>
<td></td>
</tr>
</table>
</body>
</html>
, ,
-. ,
.
,
. . 4.20.
. 4.20. ,
, toplayer,
( 4.13).
4.13.

<head>
<title> </title>
.toplayer {
background: #aeae9b url(images/bgtop.png) repeat-x; /* */
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.

<head>
<title> </title>
body { margin: 0; }
.toplayer {
}
.toplayer table { margin: auto; }
.toplayer img {display: block;}
</style>
</head>
<body>
<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>
</tr>
<tr>
<td rowspan="2">
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" rowspan="2" style="width:105px; height: 40px"></td>

<td style="width:1px; height: 31px"></td>
</tr>
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
,
. , IMG display: block.
,
. ,
, .
, . ,
, .
, .
, .
menu
, . left top
, .. menu.
( 4.15).
4.15.

<head>
<title> </title>
body { margin: 0; }
.toplayer {
}
.menu {
width: 486px; /* */
margin: auto; /* */
}
.toplayer img {
}
.nort { top: 80px; }
.bayki { top: 130px; left: 200px; }
.konkurs { top: 80px; left: 360px; }
</style>
</head>
<body>
<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.

<head>
<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.

<head>
<title> </title>
.layout {
width: 100%; /* */
}
.layout TD {
}
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.

<head>
<title> </title>
.layout {
width: 100%; /* */
}
TD {
padding: 5px; /* */
}
TD.leftcol {
width: 200px; /* */
background: #ccc; /* */
}
TD.rightcol {
}
</style>
</head>
<body>
<table cellspacing="0" class="layout">
<tr>
<td class="rightcol"> </td>
</tr>
</table>
</body>
</html>
(. 4.21).
. 4.21.

.
, , .
,
( 4.19).
4.19.

<head>
<title> </title>
.layout {
width: 100%; /* */
}
TD {
padding: 5px; /* */
}
TD.leftcol {
width: 200px; /* */
}
TD.rightcol {
}
.spacer {
width: 10px; /* */
}
</style>
</head>
<body>
<tr>
<td class="spacer"></td>
</tr>
</table>
</body>
</html>
spacer,
. ,
.
. 4.22 .
.
. 4.22.

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

<head>
<title> </title>
.layout {
width: 100%; /* */
}
TD {
padding: 5px; /* */
}
TD.leftcol {
width: 100px; /* */
border-right: 1px dashed #000; /* */
}
TD.rightcol {
}
</style>
</head>
<body>
<tr>
</tr>
</table>
</body>
</html>
(. 4.23).
. 4.23.
,
. ,
, ,
.

,
. , , ,
, , .

, .

.

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

<head>
<title> </title>
.layout {
width: 950px; /* */
}
.layout TD {
padding: 5px; /* */
}
.col1 { width: 150px; }
</style>
</head>
<body>
<table class="layout" cellspacing="0">
<tr>
<td class="col1"> 1</td>
</tr>
</table>
</body>
</html>
cellpadding.
, ,
.
. ,
,
. , , ,
. ,
. - .

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

<head>
<title> </title>
.layout { width: 90%; }
.layout TD { vertical-align: top; padding: 5px; }
.col1 {
width: 20%; /* */
}
.col2 {
width: 40%; /* */
}
.col3 {
width: 40%; /* */
background: #cc9; /* */
}
</style>
</head>
<body>
<tr>
</tr>
</table>
</body>
</html>

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

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

<head>
<title> </title>
.layout { width: 100%; }
.layout TD { vertical-align: top; padding: 5px; }
.col1 {
width: 150px; /* */
}
.col2 {
background: #afccdb; /* */
}
.col3 {
width: 200px; /* */
}
</style>
</head>
<body>
<tr>
</tr>
</table>
</body>
</html>
, .
. ,
100%, 200 , 20%,
, 60%.
, .
. 4.25 .
. 4.25.
.
, .
, ,
. , .
( 4.24).
4.24.
<head>
<title> </title>
.layout { width: 100%; padding: 0; }
.col1, .col2, .col3 { vertical-align: top; padding: 5px; }
.col1 {
width: 150px; /* */
}
.col2 {
width: 60%; /* */
background: #afccdb; /* */
}
.col3 {
width: 40%; /* */
}
</style>
</head>
<body>
<tr>
<td>
<tr>
</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]>
HTML .
, , IE
. ,
, .
, , ,
.
. IE .

.
. (true),
HTML-, (false), .
(. 5.1).
. 5.1.
IE
IE
IE 6
IE 7
IE 8
IE 9
IE7 5.1.
5.1. IE7

<head>
<title> </title>
P {
color: green; /* , IE7 */
}
</style>

</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

<head>
<title> </title>
BODY {
background: url(images/star.png); /* - */
}
.transparent {
background-color: rgba(0, 120, 201, 0.7);
/* */
color: #fff; /* */
}
</style>


</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. .

IE

-->,
. Internet Explorer
.
Internet Explorer.
, .
IE CSS-,
.
<link href="style.css" rel="stylesheet" type="text/css" />

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.

<head>
<title> </title>
#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.

. 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

<head>
<title></title>
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.

<head>
<title> </title>
SPAN { display: block; background: #333;color: #fff; }
</style>
</head>
<body>
<ul>
<li><span></span></li>
</ul>
</body>
</html>
hasLayout <span>, , zoom.

IE7, <li> .
width . 5.14, .
LI { width: 200px; }
zoom <span>.

IE6 , .
, ,
. 5.6 .
5.6.

<head>
<title> </title>
DIV { height: 30px; background: #fc0; }
</style>
</head>
<body>
<div> , , <br />
.</div>
</body>
</html>
height, ,
overflow hidden.

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

<head>
<title> </title>
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.


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

<head>
<title> </title>
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.

<head>
<title></title>
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.

<head>
<title> </title>
.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.

<head>
<title></title>
.block {
background: #c5fddb; border: 1px solid #666;
padding: 1px 10px;
/* */
-moz-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;
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

<head>
<title>@font-face</title>
@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

<head>
<title>32 </title>
<style type="text/css"></style> 
...
<style type="text/css">body { background: red; }</style> 
</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.

<head>
<title> </title>
.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.

<head>
<title></title>
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.

<head>
<title> </title>
#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.

<head>
<title> </title>
HR {
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; /* */
}
</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.

<head>
<title>caption-side</title>
table {
width: 350px; /* */
}
td {
border: 1px solid green; /* */
padding: 5px; /* */
}
caption {
caption-side: bottom; /* */
}
</style>
</head>
<body>
<table>
<caption> </caption>
<tr>
<td> </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.

<head>
<title>counter-increment</title>
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.

<head>
<title>:focus</title>
input:focus { border: 1px solid orange; }
</style>
</head>
<body>
</form>
</body>
</html>
outline
, ,
. , border, outline
. IE7
outline-color, outline-style outline-width.
quotes
, (. 1.58).
IE7 ,
.
@import
. ,
( 5.21).
5.21. @import

<head>

<title>@import</title>
@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

<head>
<title></title>
P {
border: 1px dotted #000;
border-top: 2px dotted #000;
}
</style>
</head>
<body>
<p> </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.

<head>
<title>list-style-image</title>
LI {
list-style-image: url('images/book.gif'); /* */
float: left; /* */
}
</style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li>
</ul>
</body>
</html>

text-align , . 5.24
t2 .
5.24.

<head>
<title>text-align</title>
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.

<head>
<title> </title>
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; /* */
}
6.2.
6.2.

<head>
<title> </title>
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 {
background: url(images/robot.png) no-repeat; /* */
}
</style>
</head>
<body>
<div class="wrap">
<div class="logo"><img src="images/title-robot.png"
alt=" Lego" /></div>
,
,
.
252525 .
, (
Lego).
.
. , .
,
( ).
</div>
</div>
</div>
</body>
</html>

- .
, , -
( . sidebar, ) . ,
, . . 6.11 ,
, , .
. 6.11.
- , , ,
, .
. , 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;
}
.sidebar, .content { position: absolute; }
.sidebar {
background: #C6DD7D; /* */
width: 180px; /* */
}
.content {
background: #F4ECCE; /* */
left: 180px; /* */
width: 800px; /* */
}
left 0, sidebar .
, width
.
,
. , .
</div>
float left,
sidebar. , , content
margin-left
( 6.4).
6.4. float
.layout { width: 980px; margin: auto; }
.sidebar {
width: 180px; /* */
float: left; /* */
}
.content {
}
, margin-left, layout
overflow auto hidden.

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

<head>
<title> </title>
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="sidebar">
<ul>
<li></li><li> </li><li></li>
<li></li><li></li><li></li>
</ul>
</div>
<img src="images/title-sambarmen.png" alt=" " />
<h1> -</h1>
<p> 40 , 100 , 30 ,
.</p>
<p> ,
.</p>
</div>
<div class="footer">© </div>
</div>
</body>
</html>
. 6.12.
. 6.12.
content padding, ,
. sidebar ,
, . ( footer)
clear, float. ,
, .

,
. , ,
, (. 6.13).
,
, ,
. 6.13.
,
float position. .
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

<head>
<title> </title>
.layout {
width: 980px; /* */
margin: auto; /* */
}
.nav, .content, .sidebar {
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>
</body>
</html>
- , ,
. , ,
.
float
float ,
, . , float
( 6.9).
6.9. float

<head>
<title> </title>
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>
</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; /* */
}
, .
6.10.
6.10. float margin

<head>
<title> </title>
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>
</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.

<head>
<title> </title>
.header, .sidebar, .content, .footer {
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 {
padding: 0; /* */
}
.content { /* */
}
</style>
</head>
<body>
<div class="header"> </div>
<h2></h2>
<ul>
<li><a href="link1.html"> 1</a></li>
</ul>
</div>
<h1> </h1>
<p>-.</p>
</div>
</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 {
}
, HTML , sidebar,
content. , ,
- , .
CSS.

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

position relative, ,
, absolute.
6.13.
6.13.
<head>
<title> </title>
</head>
<body>
<div class="col1"> 1</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 {
{ position: relative;}
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: #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: #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: #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.
<head>
<title> </title>
.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="rubber">
</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: #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
.

. ,
.
float margin width.
, ,
float.
1.
, float
right. margin-right
( 6.22).
6.22. 1

<head>
<title> 1</title>
.header, .footer { background: #D5BAE4; }
.layout {
}
.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>
</body>
</html>
2.
, float
left right . , ,
margin, ( 6.23).
6.23. 2

<head>
<title> 2</title>
.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>
</body>
</html>
3.
float left,
(margin-left)
( 6.24).
6.24. 3

<head>
<title> 3</title>
.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>
</body>
</html>
4.
, ,
. 6.25,
float width.
6.25. 4

<head>
<title> 4</title>
.layout DIV { float: left; }
.col2 { background: #E0D2C7; width: 60%; }
.col3 { background: #ECD5DE; width: 20%; }
</style>
</head>
<body>
</div>
</body>
</html>
5.
. 6.19 , 5, ,
-.
1. , ,
.
2. , ,
.
3. 100%,
.

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

<head>
<title> 5.1</title>
.col1 { background: #C7E3E4; width: 40%; float: left; }
.col2 { background: #E0D2C7; margin: 0 200px 0 40%; }
</style>
</head>
<body>
</div>
</body>
</html>

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

<head>
<title> 5.2</title>
.col1 { margin-right: 40%; }
.col1 .wrap { margin-right: 200px; background: #C7E3E4; }
.col2 { background: #E0D2C7; width: 40%; float: right; }
</style>
</head>
<body>
<div class="col1">
<div class="wrap">
1
</div>
</div>
</div>
</body>
</html>
100%,
, .
rubber col3 ,
col1 col2 float ( 6.28).
6.28. 5.3

<head>
<title> 5.3</title>
.rubber { margin-right: 200px; }
.col1 { background: #C7E3E4; width: 60%; float: left; }
.col2 { background: #E0D2C7; width: 40%; float: left; }
</style>
</head>
<body>
<div class="rubber">
</div>
</div>
</body>
</html>
6, 7 , 5,
7, .
, HTML-.
</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

<head>
<title> 7</title>
.col1 { width: 50%; float: left; }
.col1 .wrap {
background: #C7E3E4;
margin-right: 100px; /* 2 */
}
.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="col1"><div class="wrap"> 1</div></div>
<div class="col3"><div class="wrap"> 3</div></div>
</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

<head>
<title> 1</title>
.layout {
width: 100%; /* */
}
.layout TD {
padding: 5px; /* */
}
.col1 { background: #C7E3E4; }
.col2 { background: #E0D2C7; width: 200px; }
.col3 { background: #ECD5DE; width: 100px; }
</style>
</head>
<body>
<tr>
</tr>
</table>
</body>
</html>
padding TD cellpadding <table>
. .
, HTML- , 6.30.
2
.layout { width: 100%;}
.layout TD { padding: 5px; vertical-align: top; }
.col1 { background: #C7E3E4; width: 100px; }

.col2 { background: #E0D2C7; }
.col3 { background: #ECD5DE; width: 200px; }
3
.col2 { background: #E0D2C7; width: 200px; }
.col3 { background: #ECD5DE; }
4
.col2 { background: #E0D2C7; width: 34%; }
6.1 , ,
.
6.1
.col2 { background: #E0D2C7; }
, 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

<head>
<title> 7</title>
BODY { margin: 0; background: #6D775B; }
.layout { width: 100%; table-layout: fixed; }
.col1 { background: #6D775B; width: 50%; }
.col2 { background: #F5E8D0; width: 300px; }
.col3 { background: #6D775B; width: 50%; text-align: right; }
</style>
</head>
<body>
<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

<head>
<title> </title>
.layout {
}
.col1, .col2, .col3 {
width: 33.33%; /* */
float: left; /* */
}
.layout DIV DIV {
margin: 0 10px; /* */
background: #4F703E; /* */
color: #F5E8D0; /* */
overflow: auto;
}
</style>
</head>
<body>
<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.
<head>
<title> </title>
.layout {
border-left: 200px solid #C7E3E4;
/* */
}
.col1 {
width: 180px; /* */
float: left; /* */
}
.col1, .col2 { padding: 10px; }
.clear { clear: both; /* */ }
</style>
</head>
<body>
<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; /* */
}
,
float right margin-right ( 6.34).
6.34.

<head>
<title> </title>
.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="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 .
, .


,
, .
, ,
. , , .
, 980 ,
200 . 98060 .
, 2030 .
12 , ,
, . .
,
.
2030
.
, ,
- (. 6.26). ,
.
. 6.26.
layout, ( 6.35).
6.35.

<head>
<title> </title>
.layout {
width: 980px; /* */
background: url(images/2col.png) repeat-y; /* */
}
.sidebar { width: 180px; float: left; padding: 10px; }
.content { margin-left: 210px; padding: 10px; }
</style>
</head>
<body>
<ul>
<li></li><li> </li><li></li>
<li></li><li></li>
</ul>
</div>
<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.

<head>
<title> </title>
.layout {
background: url(images/bg-liquid.png) repeat-y 100% 0;
/* */
}
.sidebar { width: 280px; float: right; padding: 10px; color: #fff; }
.content { margin-right: 300px; padding: 10px; }
</style>
</head>
<body>
</div>
</body>
</html>
.
.
, .
.
,
. , , .
. ,
, .
. ,
, . 6.27, , 200030
275 .

background ( layer).
. layer,
. 6.37 ,
layer, col2.
6.37.

<head>
<title> </title>
.layout {
background: #B2D235; /* */
}
.layout DIV { float: left; }
.col1 { width: 40%; }
.col2 { background: #FFC60B; /* */
width: 20%; height: 200px; }
.col3 { width: 40%; }

</style>
</head>
<body>
</div>
</body>
</html>
height , .
.
, .
, .
,
.
, :
. , ,
W3C.
VII

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

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

,
. , ,
, . ,
:
- , ,
.
.
;
-,
.
.

. , ,
,
. 7.1 .
7.1.

<head>
<title></title>
TABLE.menu {
width: 100%; /* */
}
.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.
TABLE.menu {
width: 100%; /* */
}
.menu TD {
padding: 4px /* */
}
.menu A {
color: #BE1E2D; /* */
}
.menu TD:hover {
background: #29B473; /* */
}
.menu TD:hover A {
color: #FFE; /* */
}
</style>
HTML , 7.1.
, <ul> <li>. ,
, .
. <li> ,
, display inline.
.menu LI {
padding: 4px 10px; /* */
}
<ul> , ,
.
UL.menu {
}
7.3.
7.3. inline

<head>
<title></title>
UL.menu {
}
.menu LI {
}
.menu A {
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="link1.html"></a></li>
<li><a href="link2.html"> </a></li>
</ul>
</body>
</html>

, (. 7.3).
. 7.3.
, ,
. IE67 , . ,
(. 7.4).
. 7.4. IE67
zoom
. , ,
.


(. 7.5).
. 7.5.
, , <li>
white-space: nowrap min-width. ,
( 7.4).
7.4.
UL {
}
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="link3.html"></a></li>
</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.

<head>
<title></title>
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>

</head>
<body>
<ul class="tabs">
<li class="active"> </li>
</ul>
<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 class="active"><span> </span></li>
</ul>
active, <a> , <span>.
,
float, overflow.
.tabs {
margin: 0; padding: 10px 0 0; /* */
background: #5095e5; /* */
}
.tabs LI {
float: left; /* */
height: 33px; /* */
background: url(images/tabs.png) no-repeat; /* */


(. 7.19).
. 7.19.
, .
( , ) ,
, .
.
<a> <span>
100%. , .
.
background 100% -33px,
33
.
.tabs A, .tabs SPAN {
height: 100%; /* */
color: #fff; /* */
background: url(images/tabs.png) 100% -33px no-repeat;
/* */
line-height: 30px; /* */
}
line-height, ,
, .
vertical-align , padding
, line-height.

, ,
(. . 7.18).
left 6px.
, ,
. , textindent .
left: 6px; /* */
text-indent: -6px; /* */
}
text-indent ,
.
. ,
.
.tabs .active {
background-position: 0 -66px; /* */
}
.tabs .active SPAN {

background-position: 100% -99px; /* */
color: #000; /* */
}
7.13.
7.13.

<head>
<title></title>
.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;
}
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 {
background: #fff url(images/bg.png) repeat-x; padding: 1px 10px 10px;
}
</style>
</head>
<body>
<ul class="tabs">
</ul>
<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.

<head>
<title></title>
.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;
}
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 {
background: #fff url(images/bg.png) repeat-x; padding: 1px 10px 10px;
}
</style>
</head>
<body>
<ul class="tabs">
</ul>
<h1> </h1>
<p>...</p>
</div>
</body>
</html>

, , ,
. , , ,
, ,
, . CSS ,
.
.

. ,
, ,
. ,
, , background , border , width
height . 7.15 .
7.15.

<head>
<title> </title>
input[type="text"], input[type="password"] {
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>
<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.

<head>
<title></title>
input[type="submit"] {
background: #688a7e; color: #fff; /* */
}
input[type="reset"] {
}
button img {
vertical-align: bottom; /* */
}
</style>
</head>
<body>
<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.

<head>
<title></title>
SELECT {
width: 200px; /* */
color: #800; /* */
}
</style>
</head>
<body>
<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.

<head>
<title> </title>
.user {
width: 308px; /* padding */
height: 46px; /* */
background: #dad7c5 url(images/input.png) no-repeat; /* */
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.

<head>
<title> </title>
.comment {
width: 347px; /* */
background: #dad7c5 url(images/textarea.png) no-repeat; /* */
}
.comment textarea {
border: none; /* */
background: transparent; /* */
margin: 3px; /* */
width: 318px; /* */
padding: 5px 0 5px 5px; /* */
}
</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.

<head>
<title> </title>
INPUT {
color: #fff; /* */
background: #000; /* */
border: 2px solid #ccc; /* */
padding: 2px; /* */
margin: 0; /* */
height: 19px; /* */
}
INPUT[type="submit"] {
height: 27px; /* */
}
</style>
</head>
<body>
<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.

. 7.28.
, .
. 7.28.
float
. , float, <label>.
, for,
. , :
<label for="user"></label> <input id="user" type="text" />
id="user" .
, ( 7.21).
7.21.

<head>
<title></title>
#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> </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 {
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 {
}
.header-bg {
}
.header img {
top: 40px; /* */
}
text-align, <img>,
top. ,
position relative.
,
. :
<a href="/"><img src="images/header-title.png" alt="
" /></a>
/ href -,
.
8.1.
8.1.

<head>
<title> ?</title>
body { margin: 0; }
.header {
/* */
}
.header-bg {
/* */
}
.header img {
top: 40px; /* */
}
</style>
</head>
<body>
<div class="header">
<img src="images/header-title.png" alt=" "
</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 {
margin: 0 11px; /* */
}
, , .
. 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="copyright">
<p><strong> </strong></p>
<p>© </p>
</div>
</div>
</div>
.
<img>,
<div> lion. , <img>.
8.3.
8.3.
<div class="lion"><img src="images/lion.png" alt="" width="130" height="80"
/></div>
<p>© </p>
</div>
</div>
</div>
. footer
position relative, lion absolute. left
top , .. footer. ,
footer , 760px.
left , ,
. : left 50%,
,
margin-left () () .
.footer {
}
.lion {
left: 50%; /* */
top: 3px; /* */
}
margin-left top , .
,
, . 53
. (80px)
(27px). 7780 . -, ,
- , -, ,
. 8.10.
, , -
.
, , , , ,
. .
overflow auto. -
, . overflow
.
background: url(images/grass.png) 50% 53px no-repeat; /*
*/
overflow: auto; /* */
}
, 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; /*
*/
}
.lion {
left: 50%; /* */
top: 3px; /* */
}
.footer-bg {
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 {
}

-, .
- .
,
.
,
. ,
. ,
() 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 {
margin: 30px 0; /* */
}
.voodoohead {
float: left; /* */
}
.warning H2, .warning P {
margin: 0 0 0 70px; /* */
}
2.
8.5,
, background.
.warning {
margin: 30px 0; /* */
background: url(images/head.png) no-repeat;
}
.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 {
margin-bottom: 0; /* */
}

- .
, (
) , .

, ,
. float margin-right,
. float
right, margin-right
. ,
.
<div id="content"> </div>
sidebar (width)
float. content margin-right.
.sidebar { /* */
width: 200px; /* */
float: right; /* */
}
.content { /* */
}

, ,
<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 {
margin: 40px 0; /* */
padding: 0; /* */
}
ul.menu li {
padding: 5px; /* */
}
ul.menu a, ul.menu span {
padding: 5px; /* */
}
ul.menu li span {
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%;
/* */
}
.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,
.
, .
type <script> <style> ,
.
9.1.
9.1. HTML5
<!DOCTYPE html>
<html>
<head>
<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>
<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>
<title> ?</title>
<style>
body { margin: 0; }
header {
display: block;
background: #00B0D8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
height: 405px;
text-align: center;
}
header img {
position: relative;
top: 40px;
}
</style>
</head>
<body>
<header>
<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

, IE 8.0 .
IE9 HTML5 .
,
MIT.
, 9.5.
9.5. IE

CSS.
, HTML5
:
1. <!DOCTYPE html>;
2. 9.4 9.5;
3. display: block.
HTML5 , .
<article>
, , , . 9.6
<article>.
9.6. <article>
<!DOCTYPE html>
<html>
<head>
<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>
<title>aside</title>
<script>
document.createElement('aside');
document.createElement('article');
</script>
<style>
aside {
width: 200px; /* */
float: right; /* */
}
article {
}
</style>
</head>
<body>
<aside>
<p> </p>
<p> </p>
<p> </p>
</aside>
<article>
, ,
, .
</article>
</body>
</html>
<figure>
, ,
( 9.8).
9.8. <figure>
<!DOCTYPE html>
<html>
<head>
<title>figure</title>
<script>
document.createElement('figure');
document.createElement('figcaption');
</script>
<style>
figure {
background: #5f6a72; /* */
width: 150px; /* */
float: left; /* */
margin: 0 10px 10px 0; /* */
}
figcaption {
color: #fff; /* */
}
</style>
</head>
<body>
<article>
<figure>
<figcaption> </figcaption>
</figure>
<figure>
<figcaption> </figcaption>
</figure>
</article>
</body>
</html>
<figcaption>
<figure>. <figcaption>
.
<footer>
, , ,
( 9.9).
9.9. <footer>
<!DOCTYPE html>
<html>
<head>
<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>
<!DOCTYPE html>
<html>
<head>
<title>hgroup</title>
</head>
<body>
<hgroup>
<h1> </h1>
<h2> </h2>
</hgroup>
</body>
</html>
<nav>
( 9.11). , <nav>
. <nav>
. <nav> <address>.
9.11. <nav>
<!DOCTYPE html>
<html>
<head>
<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>
<!DOCTYPE html>
<html>
<head>
<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>
<!DOCTYPE html>
<html>
<head>
<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 {
}
figcaption {
font: italic 1em Georgia, "Times New Roman", Times, serif;
/* */
margin: 0 0 1.5em; /* */
}
HTML5
, HTML5, lionindesert.ru XHTML
HTML5. , <title>,
. 9.14 <head>.
9.14. <head>
<!DOCTYPE html>
<html>
<head>
<title> ?</title>
<link rel="stylesheet" href="style.css" />

</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>
<p>© </p>
</div>
</div>
</footer>

( 9.17).
9.17.
<!DOCTYPE html>
<html>
<head>
<title> ?</title>
<link rel="stylesheet" href="style.css" />

</head>
<body>
<header>
<img src="images/header-title.png" alt=" "
</div>
</header>
<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>
<p>© </p>
</div>
</div>
</footer>
</body>
</html>
HTML , -
. style.css
.
, <header>, <section>, <footer>, <aside>, <nav>,
<article> . .
header, section, footer, aside, nav, article {
}
header header, footer footer.
header {
background: #00B0D8 url(images/header-gradient.png) repeat-x; /* */
}
footer {
background: url(images/grass.png) 50% 53px no-repeat; /* */
}
.
<section> (. 9.2).
. 9.2.
<header> <section> ,
, . ,
. <header> <section>,
.
section header {
background: none; /* */
}
, .
header img, header-title.png
, . .header-bg
img.
.header-bg img {
top: 40px; /* */
}
<h1> .
section h1 {
margin-bottom: 0; /* */
}
. ,
. <div class="sidebar"> <aside>, sidebar aside.
aside {
width: 200px; /*
float: right; /* */
}
*/
, <div class="content"> <article>,

content article.
article {
}
. ( <ul>), <nav>.
.
<nav>
<ul class="menu">
<li><a href="/"> </a></li>
</ul>
</nav>

.
9.18.
9.18.
<aside>
<nav>
<ul class="menu">
<li><a href="/"> </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 {
}
figcaption {
font: italic 1em Georgia, "Times New Roman", Times, serif; /* */
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.

<head>
<title></title>
<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

<head>
<title> disabled</title>
</head>
<body>
<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

<head>
<title> readonly</title>
</head>
<body>
<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

<head>
<title> maxlength</title>
</head>
<body>
<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.

<head>
<title> 1</title>
.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.
<html><head>
<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.

<head>
<title></title>
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.

<head>
<title></title>
ul {
list-style: url(images/bullet.png); /* */
}
ul ul {
list-style: circle; /* */
margin-bottom: 1em; /* */
margin-left: 0; /* */
}
ul li {
}
</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
( ).
. , ,
.

Язык

Добро пожаловать в Scribd!

Layout

Загружено:

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

Дата загрузки

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

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

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

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

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

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

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

Описание:

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

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

Layout

Загружено:

Описание:

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

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

Похожие издания

-

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

Microsoft Internet Explorer

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

. 1.2. -, HTML CSS

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"

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

. 1.3. Internet Explorer

Opera > >

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"

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"

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"

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"

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"

CSS @import @media,

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"

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"

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"

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"

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"

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"

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"

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"

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"

RGBA, HSL HSLA CSS3,

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"

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"

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"

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"

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"

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"

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"

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"

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"