CSS Manual

CSS
htmlbook.ru
design
arch.design
3D-
Fjungle.in.ua

CSS ( ) Creative Commons:
(Attribution-NonCommercial-NoDerivs 2.5
Generic (CC BY-NC-ND 2.5)).

, .

( ).

.
<strong> .
align , , .
right .
layer .
File > Open .
Tab .
:
;
;
, ,
, ;
, .
, .
, , .
.
IE Internet Explorer.
Cr Google Chrome.
Op Opera.
Sa Apple Safari.
Fx Mozilla Firefox.
, .
HTML -, , .
-, CSS (Cascading Style Sheets,
). -, HTML CSS.
? HTML , . CSS
, .
, ,
. , .
- , , HTML- CSS-.
. CSS
. , , .
?
, -.
, , . 1.1.
. 1.1. -, HTML
-, . ,
(. 1.2).
. 1.2. -, HTML CSS

, , , ( 1.1).
1.1.
XHTML 1.0
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

HTML .
-,
.
.

, . ,
.

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

, . 1.1
.

, .
. Internet Explorer
> > ,
. 1.3.
. 1.3. Internet Explorer

Opera > >
> > (. 1.4).
. 1.4. Opera
,
. ,
.

- ,
. .

,
, css, <link>.
<head>, 1.3.
1.3.
XHTML 1.0
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.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. XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<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
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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/palm.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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1

<head>
<title> </title>
<style type="text/css" media="handheld">
BODY {
width: 320px; /* */
}
</style>
</head>
<body>
<p> ,
.
,
. ,
, .</p>
</body>
</html>
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
handheld 320 .
CSS
, , HTML.
, .
, . .
, , TABLE, ,
<table>, , ,
. ,
.
CSS , , ,
. , 1.14 .
1.14.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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
Chrome
9.0
5.0
6.0
7.0
Opera
8.0
9.2
9.6
10
Safari
11
3.1
4.0
Firefox
5.0
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
Chrome
9.0
5.0
6.0
7.0
Opera
8.0
9.2
9.5
10
Safari
11
3.1
4.0
Firefox
5.0
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
Chrome
9.0
5.0
6.0
7.0
Opera
8.0
9.2
9.6
10
Safari
11
3.1
4.0
Firefox
5.0
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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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
Opera
Safari
Firefox
2.0+
2.0+
1.0+
initial
initial
-moz-initial
-moz-initial , CSS.
1.26 initial.
1.26. initial
XHTML 1.0
CSS 2.1
CSS 3
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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>
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

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

, -
. .
. { 1: ; 2: ; ... }
, , .
(-) (_).
. HTML,
, class ( 1.28).
1.28.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1

<head>
<title></title>
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
.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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<head>
<title></title>
#help {
position: absolute; /* */
right: 20px; /* */
top: 50px; /* */
width: 225px; /* */
padding: 5px; /* */
background: #f0f0f0; /* */
display: none; /* */
}
</style>
</head>
<body>
<p><a href="#" onclick="document.getElementById('help').style.display='block'"></a></p>
<div id="help">
,
, , .
, .
</div>
</body>
</html>
<div> help.
,
onclick.
, .
.
# { 1: ; 2: ; ... }
, . 1.34
<p>.
1.34.
XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1

<head>
<title> </title>
A {
color: green; /* */
}
.menu {
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1

<head>
<title> </title>
DIV I { /* */
color: green; /* */
}
P > I { /* */
color: red; /* */
}
</style>
</head>
<body>
<div>
<p>, ,
.
<i> </i>,
<i></i>.
</div>
</body>
</html>
. 1.25.
. 1.25. ,
<i> : ( <i>
<div>) ( <i> <p>).
, .
, , .
DIV I , .
, ,
.
, , .
,
, , . 1.42 .
.
, (. 1.26).
. 1.26.
LI float.

( 1.42).
1.42.
XHTML 1.0
CSS 2.1

<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 {
list-style: none; /* */
margin: 0; padding: 0; /* */
border-bottom: 1px solid #666; /* */
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>
,
, , .

(X)HTML/CSS .
.
-
-
-
- !
- (x)html/css
-
-
- , ( , 49/50
)
-
100$ .
IE6+ ,
.
e-mail: psywalker09@gmail.com
qip: 366905663
skype: walker1071

http://forum.htmlbook.ru/index.php?showtopic=20231

, . ,
<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] {
color: maroon; /* */
}
</style>
</head>
<body>
<p> , : <q>
, </q>, :
<q title=" -"> , -
, ,
</q>.</p>
</body>
</html>
. 1.27. Safari Chrome ,

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

, .
.
[=""] { }
[=""] { }
, .
.
1.44 , <a> target
_blank. ,
.
1.44. XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<head>
<title> </title>
* {
font-size: 96%; /* */
}
</style>
</head>
<body>
<p>
180 230 .</p>
</body>
</html>
, , * BODY.
,
1.51.
1. 51.
* {
margin: 0;
padding: 0;
}
,
1.51.
,
, . .
-, ,
,
. , .
.
.
CSS, .
* {
display: block;
border: 1px solid #c00;
}
(. 1.51) .
, , ,
. ,
, .
.

. ,
IE7 - .
* {
padding: 0;
}
a {
text-decoration: none;
border-bottom: 1px dashed red;
}
, ,
. , ,
FORM * , 1.52.
1.52.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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
XHTML 1.0
CSS 2.1

<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>
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
(. 1.32). ,
.
. 1.32.
, value
<input>. ,
. ( , ),
.
, . , <a>,
<input>, <select> <textarea>.
:hover
:hover , ,
.
:visited
.
, ( 1.54).
1.54.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1

<head>
<title></title>
TR:hover {
background: #fc0; /* */
}
</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
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
design
arch.design
3D-
Fjungle.in.ua

,
, .
.
: { }
, , .
,
, ,
.
.foo:first-letter { color: red }
.foo:first-line {font-style: italic}
CSS3 ,
(::after). Internet Explorer , .
,
.
, .
:after
.
content, . 1.59
:after .
1.59. :after
XHTML 1.0
CSS 2.1
<!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
XHTML 1.0
CSS 2.1

<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 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>
P {
font-family: Arial, Helvetica, sans-serif; /* */
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, textdecoration, text-transform, vertical-align word-spacing.
1.62 :first-line .
1.62.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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. -
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<head>
<title></title>
BODY {
color: navy; /* */
}
</style>
</head>
<body>
<p> .</p>
</body>
</html>
BODY.
.
, - .
, 1.67.
1.67.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<head>
<title></title>
BODY {
color: navy; /* */
}
P.red {
color: maroon; /* - */
}
</style>
</head>
<body>
<p> .</p>
<p class="red"> .</p>
</body>
</html>
BODY,
red.

(X)HTML/CSS .
.
-
-
-
- !
- (x)html/css
-
-
- , ( , 49/50
)
-
100$ .
IE6+ ,
.
qip: 366905663
skype: walker1071


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. ,
.
*
{} /* a=0 b=0 c=0 -> = 0
*/
li
{} /* a=0 b=0 c=1 -> = 1
*/
li:first-line {} /* a=0 b=0 c=2 -> = 2
*/
ul li
{} /* a=0 b=0 c=2 -> = 2
*/
ul ol+li
{} /* a=0 b=0 c=3 -> = 3
*/
ul li.red
{} /* a=0 b=1 c=2 -> = 12 */
li.red.level
{} /* a=0 b=2 c=1 -> = 21 */
#t34
{} /* a=1 b=0 c=0 -> = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> = 200 */
, style, 1000,
. !important .
, , .
1.68 , .
1.68.
XHTML 1.0
CSS 2.1
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<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.
XHTML 1.0
CSS 2.1

<head>
IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<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
, , .
, .

(X)HTML/CSS .
.
-
-
-
- !
- (x)html/css
-
-
- , ( , 49/50
)
-
100$ .
IE6+ ,
.
qip: 366905663
skype: walker1071


design
arch.design
3D-
Fjungle.in.ua

Язык

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

CSS Manual

Загружено:

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

Описание:

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

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

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

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

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

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

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

Описание:

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

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

CSS Manual

Загружено:

Описание:

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

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

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

CSS

. 1.2. -, HTML CSS

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

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

. 1.3. Internet Explorer

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

<link> rel type ,

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

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

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

CSS @import @media,

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

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

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

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

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

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

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

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

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

RGBA, HSL HSLA CSS3,

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

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

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

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

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

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

<span> <b> . 1.16.

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

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

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

IE6 .a.b .b, ..

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

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

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

<b> <i>, <i> <tt>. <b> <tt>

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

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

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

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

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

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

. 1.27. Safari Chrome ,

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

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

1.47 , href htmlbook.

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

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

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

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

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

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

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

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

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

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

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

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