Submit
Submit. Ÿ , , action <form>. , , , , , HTML-. , , , , , .
Submit <input> <button>.
<input type="submit" >
<button type="submit"> </button>
, ( 3).
3.
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<p><input name="login"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
name . value, , . , Firefox , IE , Opera Chrome . .
Reset
Reset . , . Reset , , .
.
<input type="reset" >
<button type="reset"> </button>
4 , value <input>. , .
4.
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<p><input value=" "></p>
<p><input type="submit" value="">
<input type="reset" value=""></p>
</form>
</body>
</html>
Reset . , , value, .
|
|
|
CSS-1
CSS-2
CSS-3
CSS HTML-
- , . .
, , css, <link>. <head>, 3.1.
3.1.
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://htmlbook.ru/mysite.css">
<link rel="stylesheet" href="http://www.htmlbook.ru/main.css">
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>
<link> rel , . href CSS-, , . , , .
mysite.css <link> 3.2.
3.2.
H1 {
color: #000080;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
P { padding-left: 20px;}
, , CSS. HTML- , . . . . , HTML- .
CSS -. , , <style>, 3.3.
3.3.
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
<h1>, -
-. style, .
|
|
|
3.4.
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<p style="font-size: 120%; font-family: monospace; color: #cd66cc"> </p>
</body>
</html>
<p> style, .
. , , , .
CSS , . . , . 3.5 .
3.5.
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
H1 {
font-size: 120%;
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 , (. 3.3).
CSS
CSS- @import. , . .
@import url(" ") ;
@import " " ;
@import url . 3.6 , .
3.6. CSS
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@import url("style/header.css");
H1 {
font-size: 120%;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
</style>
</head>
<body>
<h1> 1</h1>
<h2> 2</h2>
</body>
</html>
header.css, style.
, .
3.7.
@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, , 3.1, <link>.
CSS
. , :
. , .
. , .
. : {;}.
|
|
|
, . , . , .
(, ).
, (, 24 ).
, : {: ;}.
CSS , , , . (, color border).
, . . , , -
, , . , .
. .
, :
h2 {color: red;}
.thisOtherClass { color: red;}
.yetAnotherClass {color: red;}
,
h2,.thisOtherClass,.yetAnotherClass { color: red;}
, . , . .
id . .
:
#top { background-color: #ccc; padding: 1em }
#top h1 { color: #ff0; }
#top p { color: red; font-weight: bold;}
, HTML:
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
, . h1 id top #ff0, p id top red () bold ( ).
()
CSS Cascading Style Sheets ( ), . , . , , , .
, . , , .
|
|
|
- .
- .
- .
- !important.
- !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 .
, , .
19.1 , .
19.1.
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#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 10, . . , , ( 19.2).
19.2.
/* */
ul li {...} /* */
.two {...}
/* */
#menu ul li {...}
#menu.two {...} /* */
#menu ul li {...}
.two { color: red!important; } /* !important */
, . , , .
|
|
|
, - . .
. { 1: ; 2: ;... }
, , . (-) (_). . HTML, , class=" " ( 8.1).
, , . .
. { 1: ; 2: ;... }
, -: , , .
, class . , . , , , .
.layer1.layer2, layer1 layer2 . , layer1 layer2.
( ID ) , .
.
# { 1: ; 2: ;... }
(#), . (-) (_). . , , .
, id, . .
, . .
# { 1: ; 2: ;... }
, .
.
.
.
getElementById .
, .
.
.
, .
, :
- HTML css , .
- klass. .
- - css . ID, #
: : (div: idnovay); css: (div# novay { })
HTML : . CSS .
| in - | pt - (.) | px - |
| cm - | pc - | em - |
| mm - | ex - "x" | % - |
.
- , . :
in - ;
cm - ;
mm - .
, CSS . , . . :
pt - ;
pc - ;
ex - "x" .
, , - . :
em - ;
px - . ;
% - . , . -.
