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

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style/mysite.css" />
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css" />
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>

<link> rel type ,


. href CSS-, , . ,
, .
mysite.css <link> 1.4.
1.4.
H1 {
color: #000080;
font-size: 2em;
font-family: Arial, Verdana, sans-serif;
text-align: center; /* */
}
P {
padding-left: 20px;
}

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


CSS
-. ,
, <style>,
1.5.
1.5.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 {
font-size: 1.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

<h1>, -

(. 1.5).

. 1.5. ,



-. style,
( 1.6).
1.6.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<p style="font-size: 120%; font-family: monospace; color: #cd66cc"> </p>
</body>
</html>

<p> style,
(. 1.6).

. 1.6.

. , ,
, .
CSS , .
. ,
. 1.7
.
1.7. XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 {
font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
</style>
</head>
<body>
<h1 style="font-size: 36px; font-family: Times, serif; color: red"> 1</h1>
<h1> 2</h1>
</body>

</html>

36 ,
(. 1.7).

. 1.7.

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

@import
url . 1.8 ,
.
1.8. CSS

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
@import url("style/mysite.css");
H2 {
font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
</style>
</head>
<body>
<h1> 1</h1>
<h2> 2</h2>
</body>
</html>

mysite.css, style.
, ( 1.9).
1.9.
@import "/style/print.css";
@import "/style/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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
@import "style/main.css" screen; /* */
@import "style/print.css" print, handheld; /* */
</style>
</head>
<body>
<p>...</p>
</body>
</html>

main.css
, print.css .
Internet Explorer
. , .
@media
.
@media

}
@media

1 {
1
2 {
2

@media , . 1.1,

, . ,
. 1.11 ,
.
1.11.

XHTML 1.0

CSS 2.1

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

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


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


, .
, , . 1.8 . 1.9.

. 1.8.

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

XHTML 1.0

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link media="print, handheld" rel="stylesheet" href="style/print.css" type="text/css" />
<link media="screen" rel="stylesheet" href="style/main.css" type="text/css" />
</head>
<body>
<p>...</p>
</body>
</html>

, ,
. ,
.
, media <style> ( 1.13).
1.13.

XHTML 1.0

CSS 2.1

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css" media="handheld">
BODY {
width: 320px; /* */
}
</style>
</head>
<body>
<p> ,
.
,
. ,
, .</p>
</body>
</html>

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
H1 { color: #a6780a; font-weight: normal; }
H2 {
color: olive;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1> 1</h1>
<h2> 2</h2>
</body>
</html>

H1 , H2
. ,
.
.


, .


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

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

,
, ,

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

P , . red
, .
.
, , ,
.

. , color,
, .

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

*/
div {
width: 200px; /* */
margin: 10px; /* */
float: left; /* */
}

, CSS-,
. .


: , , ,
, , .

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

, .
, ,
.

, 0 9 ,
( 1.20).
1.20.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
font-weight: 600; /* */
line-height: 1.2; /* */
}
</style>
</head>
<body>
<p> </p>
</body>
</html>

, . .7 0.7 .

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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
TABLE {
width: 100%; /* */
background: #f0f0f0; /* */
}
</style>
</head>
<body>
<table>
<tr><td> </td></tr>
</table>
</body>
</html>

, ,
56.8%, .

, CSS .

,
.


,
. . 1.2 .
. 1.2.

em

ex

px

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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 { font-size: 30px; }
P { font-size: 1.5em; }
</style>
</head>
<body>
<h1> 30 </h1>
<p> 1.5 em</p>
</body>
</html>

(. 1.10).

. 1.10.


, . . 1.3
.
. 1.3.

in

(1 2,54 )

cm

mm

pt

(1 1/72 )

pc

(1 12 )

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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 { font-size: 24pt; }
P { margin-left: 30mm; }
</style>
</head>
<body>
<h1> 24 </h1>
<p> 30 </p>
</body>
</html>

(. 1.11).

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

: , , RGB,
RGBA, HSL, HSLA.


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


. . 1.4 , ,

RGB, HSL .
. 1.4.

RGB

HSL

white

#ffffff #fff

rgb(255,255,255)

hsl(0,0%,100%)

silver

#c0c0c0

rgb(192,192,192)

hsl(0,0%,75%)

gray

#808080

rgb(128,128,128)

hsl(0,0%,50%)

black

#000000 #000

rgb(0,0,0)

hsl(0,0%,0%)

maroon

#800000

rgb(128,0,0)

hsl(0,100%,25%)

red

#ff0000 #f00

rgb(255,0,0)

hsl(0,100%,50%)

orange

#ffa500

rgb(255,165,0)

hsl(38.8,100%,50%)

yellow

#ffff00 #ff0

rgb(255,255,0)

hsl(60,100%,50%)

olive

#808000

rgb(128,128,0)

hsl(60,100%,25%)

lime

#00ff00 #0f0

rgb(0,255,0)

hsl(120,100%,50%)

green

#008000

rgb(0,128,0)

hsl(120,100%,25%)

aqua

#00ffff #0ff

rgb(0,255,255)

hsl(180,100%,50%)

blue

#0000ff #00f

rgb(0,0,255)

hsl(240,100%,50%)

navy

#000080

rgb(0,0,128)

hsl(240,100%,25%)

teal

#008080

rgb(0,128,128)

hsl(180,100%,25%)

fuchsia

#ff00ff #f0f

rgb(255,0,255)

hsl(300,100%,50%)

purple

#800080

rgb(128,0,128)

hsl(300,100%,25%)

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

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

7.0

8.0

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
BODY {
background-color: #F9F2E3;
}
H2 {
background-color: rgb(214,86,43);
color: rgba(255,255,255,.9);
padding: 10px;
}
P {
color: green;
}
DIV {
background-color: hsl(60,100%,25%);
color: hsla(120,100%,50%,0.1);
}
</style>
</head>
<body>
<h2></h2>
<p>
.

. ,
!</p>
<div>!</div>

</body>
</html>

. 1.13.

. 1.13. -

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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
BODY {
background: url('http://webimg.ru/images/156_1.png') no-repeat;
}
DIV {
background: url(images/warning.png) no-repeat;
padding-left: 140px;
}
</style>
</head>
<body>
<div>, !</div>
</body>
</html>

BODY , DIV
.


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

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

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

Internet Explorer

Chrome

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>initial</title>
<style type="text/css">
H2 {
color: #ffb734;
font-family: Arial, sans-serif;
}
P {
color: green;
}
.initial {
color: initial;
color: -moz-initial;
font-family: initial;
font-family: -moz-initial;
}
</style>
</head>
<body>
<h2> </h2>
<p> <span class="initial">
</span>,
. ,
.
, ,
.</p>
<h2 class="initial"> </h2>
</body>
</html>

. <span> ,
<p>. initial
, . ,
. , <h1> initial,
initial (. 1.14).

. 1.14. initial


HTML ,
: , , .. .
{ 1: ; 2: ; ... }

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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
P {
text-align: justify; /* */
color: green; /* */
}
</style>
</head>
<body>
<p>
.
,
.</p>
</body>
</html>

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


, -
. .
. { 1: ; 2: ; ... }

, , .
(-) (_).
. HTML,
, class ( 1.28).
1.28.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P { /* */
text-align: justify; /* */
}
P.cite { /* cite */
color: navy; /* */
margin-left: 20px; /* */
border-left: 1px solid navy; /* */
padding-left: 15px; /* */
}
</style>
</head>
<body>
<p> .
, ,
,
, .</p>
<p class="cite">
.</p>
</body>
</html>

. 1.15.

. 1.15. ,
( ),
, cite .
, , . .
. { 1: ; 2: ; ... }

, ( 1.29).
1.29.

XHTML 1.0

CSS 2.1

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

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 &quot;.
&quot;</span>,

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

1000&nbsp;.</p>
</body>
</html>

<span> <b> . 1.16.

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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table.jewel {
width: 100%; /* */
border: 1px solid #666; /* */
}
th {
background: #009383; /* */
color: #fff; /* */
text-align: left; /* */
}
tr.odd {
background: #ebd3d7; /* */
}
</style>
</head>
<body>
<table class="jewel">
<tr>
<th></th><th></th><th> </th>
</tr>
<tr class="odd">
<td></td><td></td><td>10</td>
</tr>
<tr>
<td></td><td></td><td>9</td>
</tr>
<tr class="odd">
<td></td><td></td><td>7</td>
</tr>
<tr>
<td></td><td></td><td>8</td>
</tr>
<tr class="odd">
<td></td><td></td><td>9</td>
</tr>
</table>
</body>
</html>

. 1.17. odd
. , <tr>

. 1.17.


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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.level1 { font-size: 1em; }
.level2 { font-size: 1.2em; }
.level3 { font-size: 1.4em; }
.level4 { font-size: 1.6em; }
.level5 { font-size: 1.8em; }
.level6 { font-size: 2em; }
A.tag {
color: #468be1; /* */
}
</style>
</head>
<body>
<div>
<a href="/term/2" class="tag level6">Paint.NET</a>
<a href="/term/69" class="tag level6">Photoshop</a>
<a href="/term/3" class="tag level5"></a>
<a href="/term/95" class="tag level5"></a>
<a href="/term/11" class="tag level4"></a>
<a href="/term/43" class="tag level3"></a>
<a href="/term/97" class="tag level2"></a>
<a href="/term/44" class="tag level2"></a>
<a href="/term/16" class="tag level1"></a>
<a href="/term/33" class="tag level1"></a>
<a href="/term/14" class="tag level1"></a>
<a href="/term/27" class="tag level1"></a>
</div>
</body>
</html>

. 1.18.

. 1.18.
.layer1.layer2, layer1 layer2
. , layer1 layer2

( 1.32).
1.32.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.layer1 { color: red; }
.layer2 { color: blue; }
.layer1.layer2 {color: green; }
</style>
</head>
<body>
<p class="layer1"> </p>
<p class="layer2"> </p>
<p class="layer1 layer2"> </p>
</body>
</html>

IE6 .a.b .b, ..


, . layer2
, , .


( ID ) ,
.
.
# { 1: ; 2: ; ... }

(#), .
(-) (_).
.
, , .
, id,
( 1.33). .
1.33.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#help {
position: absolute; /* */
right: 20px; /* */
top: 50px; /* */
width: 225px; /* */
padding: 5px; /* */
background: #f0f0f0; /* */
display: none; /* */
}
</style>
</head>
<body>
<p><a href="#" onclick="document.getElementById('help').style.display='block'"></a></p>
<div id="help">
,
, , .
, .
</div>
</body>
</html>

<div> help.
,
onclick.
, .
.
# { 1: ; 2: ; ... }

, . 1.34
<p>.
1.34.
XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
color: green; /* */
font-style: italic; /* */
}
P#opa {
color: red; /* */
border: 1px solid #666; /* */
background: #eee; /* */
padding: 5px; /* */
}
</style>
<script type="text/javascript">
function newText() {
document.getElementById("opa").innerHTML = ' ';
}
</script>

</head>
<body onload="newText()">
<p> </p>
<p id="opa"></p>
</body>
</html>

. 1.19.

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


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

2 1, .
<1>
<2> ... </2>
</1>

1.35.
1.35.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
P B {
font-family: Times, serif; /* */
font-weight: bold; /* */
color: navy; /* */
}
</style>
</head>
<body>
<div><b> </b></div>
<p><b>
</b></p>
</body>
</html>

<b> , <p>.
, . 1.19.

. 1.19.
.
.
.
, ,
10.2.
1.36.

XHTML 1.0

CSS 2.1

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
A {
color: green; /* */
}
.menu {

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

padding: 7px; /* */
border: 1px solid #333; /* */
background: #fc0; /* */
}
.menu A {
color: navy; /* - */
}
</style>
</head>
<body>
<div class="menu">
<a href="1.html"> </a> |
<a href="2.html"> </a> |
<a href="3.html"> </a>
</div>
<p><a href="text.html"> </a></p>
</body>
</html>

. 1.20.

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


-,
. .
<p>Lorem ipsum <b>dolor</b> sit amet.</p>

<b> <p>,
. <p> <b>.
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

<var> <b> . ,
<p>, .
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

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


- , <i>.
(+),
. .
1 + 2 { }

, 2, ,
1 .
1.37 .
1.37.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
B + I {
color: red; /* */
}
</style>
</head>
<body>
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
</body>
</html>

. 1.22.

. 1.22.
<i>,
<b>. , consectetuer
. , <i>, <b>
, .
.
. ,
. .
, sic, <h2>.

( 1.38). .
1.38.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H2.sic {
font-size: 140%; /* */
color: maroon; /* */
font-weight: normal; /* */
margin-left: 30px; /* */
margin-bottom: 0px; /* */
}
H2.sic + P {
background: #ddd; /* */
margin-left: 30px; /* */
margin-top: 0.5em; /* */
padding: 7px; /* */
}
</style>
</head>
<body>
<h1> </h1>
<h2> </h2>
<p> L x W x H, L -
, W - , H - .
,
. ,
, ,
, 2L x 2W. ,
, , .</p>
<h2 class="sic"> </h2>
<p>
.</p>
<p>
, . ,
.</p>
</body>
</html>

. 1.23.

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

.
1.39.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
H1 + H2 {
margin-top: -10px; /* 2 */
}
H2 + P {
margin-top: -1em; /* */
}
</style>
</head>
<body>
<h1> 1</h1>
<h2> 2</h2>
<p>!</p>
</body>
</html>

,
margin-top.
, .


, .
, ( 1.40).
1.40.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem ipsum</title>
</head>
<body>
<div class="main">
<p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
erat volutpat.</p>
<p><strong><em>Ut wisis enim ad minim veniam</em></strong>,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.</p>
</div>
</body>
</html>

, .
, (. 1.24).

. 1.24.
.
<div> <p>. <strong> <div>,
<p>.
. ,
. .
1 > 2 { }

2, , 1.
1.40, P > EM { color: red }
, <em> <p>, .
- , <em> <strong>,
.
. .
, , ,
.
. , , ( 1.41).
1.41.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
DIV I { /* */
color: green; /* */
}
P > I { /* */
color: red; /* */

}
</style>
</head>
<body>
<div>
<p>, ,
.
<i> </i>,
<i></i>.
</div>
</body>
</html>

. 1.25.

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

. 1.26.
LI float.

( 1.42).
1.42.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
UL#menu {
margin: 0; padding: 0; /* */
}
UL#menu > LI {
list-style: none; /* */
width: 100px; /* */

background: #b3d9d2; /* */
color: #333; /* */
padding: 5px; /* */
font-family: Arial, sans-serif; /* */
font-size: 90%; /* */
font-weight: bold; /* */
float: left; /* */
}
LI > UL {
list-style: none; /* */
margin: 0; padding: 0; /* */
border-bottom: 1px solid #666; /* */
padding-top: 5px; /* */
}
LI > A {
display: block; /* */
font-weight: normal; /* */
font-size: 90%; /* */
background: #fff; /* */
border: 1px solid #666; /* */
border-bottom: none; /* */
padding: 5px; /* */
}
</style>
</head>
<body>
<ul id="menu">
<li>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</body>
</html>

,
, , .


(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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
Q {
font-style: italic; /* */
quotes: "" ""; /* */
}
Q[title] {
color: maroon; /* */
}
</style>
</head>
<body>
<p> , : <q>
, </q>, :
<q title=" -"> , -
, ,
</q>.</p>
</body>
</html>

. 1.27. Safari Chrome ,


.

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


, .
.

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

, .
.
1.44 , <a> target
_blank. ,
.
1.44. XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
A[target="_blank"] {
background: url(images/blank.png) 0 6px no-repeat; /* */
padding-left: 15px; /* */
}
</style>
</head>
<body>
<p><a href="1.html"> </a> |
<a href="link2" target="_blank"> </a></p>
</body>
</html>

(. 1.28).

. 1.28. target
background.
, no-repeat,
.


, .
.
[^=""] { }
[^=""] { }

,
. . .
, ,
. <a> , .
, ,
HTTP. http://,
A, 1.45.
1.45.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
A[href^="http://"] {
font-weight: bold /* */
}
</style>
</head>

<body>
<p><a href="1.html"> </a> |
<a href="http://htmlbook.ru" target="_blank">
htmlbook.ru</a></p>
</body>
</html>

(. 1.29).

. 1.29.
.
1.44 , ,
.


, .
.
[$=""] { }
[$=""] { }


. .
ru
com, 1.46.
1.46.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
A[href$=".ru"] { /* .ru */
background: url(images/ru.png) no-repeat 0 6px; /* */
padding-left: 12px; /* */
}
A[href$=".com"] { /* .com */
background: url(images/com.png) no-repeat 0 6px;
padding-left: 12px;
}
</style>
</head>
<body>
<p><a href="http://www.yandex.com">Yandex.Com</a> |
<a href="http://www.yandex.ru">Yandex.Ru</a></p>
</body>
</html>

, com ru.
(. 1.30).
, href .ru .com. ,
(http://www.yandex.ru/) (http://www.yandex.ru/fun.html),
. *=.

. 1.30.


, ,
. , ,
. .
[*=""] { }
[*=""] { }

1.47 , href htmlbook.


1.47.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
[href*="htmlbook"] {
background: yellow; /* */
}
</style>
</head>
<body>
<p><a href="http://www.htmlbook.ru/html/"> HTML</a> |
<a href="http://stepbystep.htmlbook.ru"> </a> |
<a href="http://webimg.ru"> </a></p>
</body>
</html>

. 1.31.

. 1.31. , htmlbook


, .
.
[~=""] { }
[~=""] { }

, ,
( 1.48).
1.48.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
[class~="block"] h3 { color: green; }
</style>
</head>
<body>
<div class="block tag">

<h3></h3>
</div>
</body>
</html>

H3, block.
, , *= ~=.


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

, ,
( 1.49).
1.49.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
DIV[class|="block"] {
background: #306589; /* */
color: #acdb4c; /* */
padding: 5px; /* */
}
DIV[class|="block"] A {
color: #fff; /* */
}
</style>
</head>
<body>
<div class="block-menu-therm">
<h2></h2>
<div class="content">
<ul class="menu">
<li><a href="t1.html"></a></li>
<li><a href="t2.html"></a></li>
<li><a href="t3.html"></a></li>
<li><a href="t4.html"></a></li>
<li><a href="t5.html"></a></li>
<li><a href="t6.html"></a></li>
<li><a href="t7.html"></a></li>
</ul>
</div>
</div>
</body>
</html>

block-menu-therm, |="block",
.
, ,
. .
[1="1"][2="2"] { }
[1="1"][2="2"] { }


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

. , , *.class .class
.
1.50
.
1.50.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
* {
font-family: Arial, Verdana, sans-serif; /* */
font-size: 96%; /* */
}
</style>
</head>
<body>
<p>
180 230 .</p>
</body>
</html>

, , * BODY.
,
1.51.
1. 51.
* {
margin: 0;
padding: 0;
}

,
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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
FORM P * {
border: 1px solid #333; /* */
background: #ffe; /* */
}
</style>
</head>
<body>
<form action="handler.php">
<p><input type="text" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>

, ( <p>).


,
, .
, .
,
.
.
: { }

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

,
,
.

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

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

:focus
. ,
, , ( 1.53).
1.53. focus

XHTML 1.0

CSS 2.1

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
INPUT:focus {
color: red; /* */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" value=" " /></p>
<p><input type="text" value=" " /></p>
</form>
</body>
</html>

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
A:link {
color: #036; /* */
}
A:visited {
color: #606; /* */
}
A:hover {
color: #f00; /* */
}
A:active {
color: #ff0; /* */
}
</style>
</head>
<body>
<p><a href="1.html"> 1</a> |
<a href="2.html"> 2</a> |
<a href="3.html"> 3</a></p>
</body>
</html>

. 1.33.

. 1.33.

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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TR:hover {
background: #fc0; /* */
}
</style>
</head>
<body>
<table width="400" border="1" cellpadding="4" cellspacing="0">
<tr>
<th>&nbsp;</th>
<th></th><th></th><th></th><th></th>
</tr>
<tr>
<td></td>
<td>5</td><td>2</td><td>4</td><td>2</td>
</tr>
<tr>
<td> </td>
<td>2</td><td>7</td><td>1</td><td>3</td>
</tr>
<tr>
<td></td>
<td>5</td><td>4</td><td>3</td><td>1</td>
</tr>
<tr>
<td> </td>
<td>1</td><td>0</td><td>5</td><td>7</td>
</tr>
</table>
</body>
</html>

(. 1.34).

. 1.34.

,
,
.

:first-child
, .

, , ( 1.56).
1.56. first-child

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div p:first-child {
font: 1.2em Arial, sans-serif; /* */
color: #E81E26; /* */
margin-bottom: -0.5em; /* */
}
</style>
</head>
<body>
<div>
<p></p>
<p>, A B.
, ,
.</p>
</div>
<div>
<p> </p>
<p> .

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

(. 1.35).

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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
text-indent: 1em; /* */

}
P:first-child {
text-indent: 0; /* */
}
</style>
</head>
<body>
<p> , ,
.</p>
<p>
. , ,
.</p>
<p> . .</p>
</body>
</html>

(. 1.36).

. 1.36.
, .

,
,
, .
, .

:lang
, . HTML
charset <meta>. :lang ,
, , . .
:lang() { ... }

: ru ; en ; de ; fr
; it .
1.58.

XHTML 1.0

CSS 2.1

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

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


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

</body>
</html>

. 1.37.
quotes,
lang, <q>.

. 1.37.

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

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

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


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

. 1.38.

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

:before

:before :after, . 1.60



:before.
1.60. :before

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
UL {
padding-left: 0; /* */
list-style-type: none; /* */
}
LI:before {
content: " "; /* */
}
</style>
</head>
<body>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</body>
</html>

(. 1.39).

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

:first-letter
, .
.
,
. ,
.
. P
:first-letter . ,
( 1.61).
1.61. first-letter XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P {
font-family: Arial, Helvetica, sans-serif; /* */
font-size: 0.9em; /* */
color: black; /* */
}
P:first-letter {
font-family: 'Times New Roman', Times, serif; /* */
font-size: 2em; /* */
color: red; /* */

}
</style>
</head>
<body>
<p> ,
.
, ,
. ,
, .</p>
<p> ,
.
, .</p>
</body>
</html>

(. 1.40).

. 1.40.
, .

:first-line
. ,
, , , ..
:first-line . ,
, , : clear, line-height, letter-spacing, 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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
P:first-line {
color: red; /* */
font-style: italic; /* */
}
</style>
</head>
<body>
<p>,
first-line? , , , ,
,
, , ,
-, .</p>
</body>
</html>

. 1.41.

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


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

Helvetica, sans-serif;

Helvetica, sans-serif;

Helvetica, sans-serif;

serif;

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

font-family ,
.
, .
, . .
1, 2, ... N { }

, .


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

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
TABLE {
color: red; /* */
background: #333; /* */
border: 2px solid red; /* */
}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="0">
<tr>
<td> 1</td><td> 2</td>
</tr>
<tr>
<td> 3</td><td> 4</td>
</tr>
</table>
</body>
</html>

, ,
<td> <table>. ,
. , border , .
background. , ?
, background transparent, .. .
.
, ,
CSS . , .
,
. , .
BODY, ,
( 1.66).
1.66. -

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
BODY {
font-family: Arial, Helvetica, sans-serif; /* */
color: navy; /* */
}
</style>
</head>
<body>
<p> .</p>
</body>
</html>

BODY.
.
, - .
, 1.67.
1.67.

XHTML 1.0

CSS 2.1

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
BODY {
font-family: Arial, Helvetica, sans-serif; /* */
color: navy; /* */
}
P.red {
color: maroon; /* - */
}
</style>
</head>
<body>
<p> .</p>
<p class="red"> .</p>
</body>
</html>

BODY,
red.


(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


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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#menu ul li {
color: green;
}
.two {
color: red;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li></li>
<li class="two"></li>
<li></li>
</ul>
</div>
</body>
</html>

, two
. #menu ul li (100) (2)
102, .two 20, .
. ,
, ( 1.69).
1.69.
/* */
ul li {...} /* */
.two {...}
/* */
#menu ul li {...}
#menu .two {...} /* */
#menu ul li {...}
.two { color: red !important; } /* !important */

,
.
, , .

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

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

. 1.42.
: !
, .
, .


HTML CSS- (. 1.43).

. 1.43.

HTML-, .


HTML CSS-,
(. 1.44).

. 1.44.

.

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

. 1.45. CSS


.
, -
, .
, , ,
, .
.

.
.
getElementById
.
, .

.
.
, .

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

XHTML 1.0

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

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript">
function validForm(f) {
user = document.getElementById("userName");
if(user.value == "") document.getElementById("msg").innerHTML = ', .';
else f.submit();
}
</script>
</head>
<body>
<form action="handler.php" onsubmit="validForm(this); return false">
<p> :</p>
<div id="msg"></div>
<p><input type="text" id="userName" name="user" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>

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

XHTML 1.0

CSS 2.1

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

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

<title></title>
<style type="text/css">
#A, .a {
border: none;
background: #f0f0f0;
color: green;
padding: 5px;
}
.b {
border: 1px solid red;
color: red;
padding: 0;
}
</style>
</head>
<body>
<p id="A" class="b"> </p>
<p class="a b"> a b</p>
<p class="b"> b</p>
</body>
</html>

A b,
. - .
a b . , ,
, .
b. . 1.46 .

. 1.46.

, . ,
,
!important, .

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

class
, , .
, .


(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

design

arch.design

3D-

Fjungle.in.ua

Оценить