. , |
|
? |
, <INPUT>, width, , .
<!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=windows-1251">
<title> </title>
<style type="text/css">
#user {
width: 300px; /* 300 */
}
</style>
</head>
<body>
<form name="form1" method="post" action="handler.php">
<p> :</p>
<p><input type="text" name="username" id="user" size="5">
<input type="submit" name="Submit" value=""></p>
</form>
</body>
</html>
.
width user.
, size <INPUT>, .
|
? |
background-color, color. INPUT, <INPUT> , , . , ? .
<!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=windows-1251">
<title> </title>
<style type="text/css">
.textfield {
background-color: #ffe; /* */
color: #930; /* */
}
</style>
</head>
<body>
<form name="form1" method="post" action="handler.php">
<p><input type="text" name="textfield" class="textfield">
<input type="submit" name="Submit" value=""></p>
</form>
</body>
</html>
.
textfield, <INPUT> class="textfield".
, , <INPUT> type="text". INPUT[type="text"] INPUT, , type="text".
<!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=windows-1251">
<title> </title>
<style type="text/css">
INPUT[type="text"] {
background-color: navy;
color: #ffe;
}
</style>
</head>
<body>
<form name="form2" method="post" action="handler.php">
<p><input type="text" name="textfield">
<input type="submit" name="Submit" value=""></p>
</form>
</body>
</html>
Internet Explorer 6 .
|
, ? |
<INPUT>. value . .
<!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=windows-1251">
<title> </title>
</head>
<body>
<form name="form1" method="post" action="">
<p><input name="textfield" type="text" value=" "></p>
</form>
</body>
</html>
, , .
, <textarea> </textarea>.
<!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=windows-1251">
<title> </title>
</head>
<body>
<form name="form1" method="post" action="">
<p>
<textarea name="textarea" cols="50" rows="5">
- ;
.
</textarea>
</p>
</form>
</body>
</html>
, .
|
? |
, <SELECT>, , <OPTION>. , . , width, , . width SELECT.
<!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=windows-1251">
<title> </title>
<style type="text/css">
SELECT {
width: 300px; /* */
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<p><select name="select">
<option></option>
<option> </option>
<option></option>
<option> </option>
</select></p>
</form>
</body>
</html>
.
, ,
300 . , , .
|
, ? |
border, INPUT. , , .
focus, INPUT TEXTAREA.
<!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=windows-1251">
<title> </title>
<style type="text/css">
INPUT.text {
border: 1px solid #ccc; /* */
width: 80%; /* */
}
INPUT.text:focus {
border: 1px solid #39c; /* */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" size="30" class="text">
<input type="submit" value=""></p>
</form>
</body>
</html>
. , , .
text, , .
|
|
|
( , ), "" :
<div style="width: 100%; height: 300px; margin-top: 5px; margin-left: 5px; text-align: justify; font-size: 14px; overflow: auto">
. , .
( , , <IMG>). , .
width: | | auto
, CSS — , (px), (in), (pt) . . , . auto .
<!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=windows-1251">
<title>width</title>
<style type="text/css">
.layer1 {
width: 300px; /* */
background: #fc0; /* */
padding: 7px; /* */
border: 1px solid #ccc; /* */
}
.layer2 {
width: 400px; /* */
}
</style>
</head>
<body>
<div class="layer1">
<p class="layer2">Lorem ipsum dolor sit amet,consectetuer
adipiscing elit,seddiem nonummy nibh euismod tincidunt ut
lacreet dolore magna aliguam erat volutpat.</p>
</div>
</body>
</html>
, Opera . 1.
. 1. Opera
height:
( , , <IMG>). , .
height: | | auto
, CSS — , (px), (in), (pt) . . , . auto
<!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=windows-1251">
<title>height</title>
<style type="text/css">
.layer {
height: 50px; /* */
width: 150px; /* */
overflow: scroll; /* */
background: #fc0; /* */
padding: 7px; /* */
border: 1px solid #333; /* */
}
</style>
</head>
<body>
<div class="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
. 2.
. 2. height
. (. 3).
. 3.
margin-top: | auto
(px), (%) CSS . , . auto , .
<!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=windows-1251">
<title>margin-top</title>
<style type="text/css">
DIV {
background: #fc3; /* */
border: 2px solid black; /* */
padding: 20px; /* */
margin-top: 20%; /* */
}
</style>
</head>
<body>
<div>
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>
. 4.
. 4. margin-top
. (. 5).
. 5.
margin-left: | auto
(px), (%) CSS . , . auto , .
<!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=windows-1251">
<title>margin-left</title>
<style type="text/css">
.layer1 {
background-color: #D36037; /* */
}
.layer2 {
margin-left: 20%; /* */
background-color: #ccc; /* */
padding: 10px; /* */
}
</style>
</head>
<body>
<div class="layer1">
<div class="layer2">
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>
</div>
</body>
</html>
. 6.
. 6. margin-left
. , .
text-align: center | justify | left | right
<!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=windows-1251">
<title>text-align</title>
<style type="text/css">
div {
border: 1px solid black; /* */
padding: 5px; /* */
margin-bottom: 5px; /* */
}
#left { text-align: left; }
#right { text-align: right; }
#center { text-align: center; }
.content {
width: 75%; /* */
background: #fc0; /* */
}
</style>
</head>
<body>
<div id="left"><div class="content"> </div></div>
<div id="center"><div class="content"> </div></div>
<div id="right"><div class="content"> </div></div>
</body>
</html>
. 7.
. 7. Opera
Internet Explorer , Opera Firefox, , (. 8).
. 8. Internet Explorer
. . (xx-small, x-small, small, medium, large, x-large, xx-large) , . , , .
(larger, smaller) . , , .
, .
font-size: | | |
: xx-small, x-small, small, medium, large, x-large, xx-large. HTML . 1.
|
CSS(HTML) |
xx-small(1) | x-small(2) | small(3) | medium(4) | large(5) | x-large(6) | xx-large(7) | |
|---|---|---|---|---|---|---|---|---|
CSS: em ( ), ex ( ), (pt), (px), (%) . 100% . .
<!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=windows-1251">
<title>font-size</title>
<style type="text/css">
H1 {
font-family: 'Times New Roman', Times, serif; /* */
font-size: 250%; /* */
}
P {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt; /* */
}
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p>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.</p>
</body>
</html>
. 9. font-size
overflow , .
overflow: auto | hidden | scroll | visible
, .
, .
.
.
<!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=windows-1251">
<title>overflow</title>
<style type="text/css">
.layer {
overflow: scroll; /* */
width: 300px; /* */
height: 150px; /* */
padding: 5px; /* */
border: solid 1px black; /* */
}
</style>
</head>
<body>
<div class="layer">
<h2>Duis te feugifacilisi</h2>
<p>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.</p>
</div>
</body>
</html>
. 10. oveflow
|
? |
, . , . <TH>, <TD>, . TH , ( 1).
1. <TH>
<!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=windows-1251">
<title> </title>
<style type="text/css">
TABLE {
width: 100%; /* */
border-collapse: collapse; /* */
}
TD, TH {
padding: 4px; /* */
border: 1px solid #000080; /* */
}
TH {
background: #000080; /* */
color: #ffe; /* */
text-align: left; /* */
font-family: Arial, Helvetica, sans-serif; /* */
font-size: 90%; /* */
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td> 600 . JPEG.</td>
</tr>
<tr>
<td></td>
<td></td>
<td> . 1015 1500 . JPEG.</td>
</tr>
<tr>
<td> </td>
<td></td>
<td> 800 . JPEG GIF.</td>
</tr>
<tr>
<td>/ </td>
<td></td>
<td> 800 . TIFF GIF.</td>
</tr>
</table>
</body>
</html>
. 1.
. 1. ,
|
, :-)
