font-family | , : serif|san-serif |cursive |fantasy | monospace. |
font-style | : normal ( ), italic (), oblique (). |
font-variant | : normal ( ), small-caps ( ). |
font-weight | : normal, bold, bolder(), lighter(). |
font-size | : ( xx-small | x-small | small | medium | large | x-large | xx-large | { } : larger | smaller | {. }%; |
, <p>:
<head><style type="text/css">
p {
font-style: italic;
font-variant:normal;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
</style>
</head>
<body>
<p> , </p>
<body>
font, :
p { font: italic normal bold 30px arial, sans-serif; }
font :
font-style|font-variant|font-weight|font-size|font-family
font-family . , , , . () : serif(Times New Roman, Georgia); sans - serif(Arial, Verdana); monospace( Courier, Courier New).
:
<html>
<head>
<title> </title>
<style type="text/css">
body {
font-family: Times New Roman, times, serif;/* */
font-size: 100%; /* */
font-style: oblique;}
th {
font-family: arial, sans-serif; /* */
font-size: 90%; /* */
font-weight: bold /* */
}
h1, h2, h3 {
font-family: verdana, tahoma, arial, sans-serif /**/
}
#cursive { font-style: italic} /* */
</style>
</head>
<body>
<div id=cursive> </div>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<table>
<th></th>
</table>
</html>
:
1
2
3
@font-face - , , , .
:
body {
@font-face: Myfont;
src: url(http://www.atlant.ru/Myfont.eot);
}
.
|
|
text-decoration | none ( ), underline (), line-through (), overline (). |
text-transform | : none, capitalize ( ), uppercase ( ), lowercase ( ). |
text-align | : left ( ), right ( ), center , justify ( ). |
vertical-align | : baseline, middle, sub , super , text-top , text-bottom , top , bottom . |
text-indent | {}|{}%; . |
line-height | . normal|{Y}|{Y}%; . |
word-spacing | . normal|{}; , normal. |
letter-spacing | : normal|{}; |
word-wrap | normal|break-word; , , , . normal , break-word . |
white-space | , : normal, nowrap ; pre , HTML; pre-line ; pre-wrap , , ; inherit . |
. text-indent - . 0. text-align - .
<html>
<head>
<style type="text/css">
p { text-indent: 3em;}
div { text-align: center;}
</style>
</head>
<body>
<p> text-indent.</p>
<div> text-align.</div>
</body>
</html>
vertical-align
<html>
<head>
<title> </title>
<style type="text/css">
.sup {
vertical-align: super; /* */
font-size: 70%; /* */
}
.sub {
vertical-align: sub; /* */
font-size: 70%;
}
<p style="line-height: 1.5">
</style>
</head>
<body>
<div>
f() = a<span class="sub">0</span> + a<span class="sub">1</span> x +... + a
|
|
<span class="sub">n-1</span> x<span class="sup">n-l</span> + a
<span class="sub">n</span> x<span class="sup">n</span>
</div>
<p> </p><br>
.
</body>
</html>
:
f() = a0 + a1 x +... + a n-1 xn-l + a n xn
.
text-decoration - (underline), (overline) (line_through). (none). :
<html>
<head>
<style type="text/css">
a {
text-decoration: none /* */
}
</style>
</head>
<body>
<a href=link.html> </>
</body>
</html>
letter-spacing - . . : normal ; , .
<html>
<head>
<title> </title>
</head>
<body>
<>, </>
< styles ="letter-spacing: 0.3em"> </>
< style = "letter-spacing: 0.2em"> </p>
< style = "letter-spacing: 0"> </>
< style = "letter-spacing: -1"> </>
</body>
</html>
word-spacing - . , . : normal ; , .
<html>
<head>
<style type="text/css">
p { word-spacing: 1 em }
</style>
</head>
<body>
<> word-spacing</>
</body>
</html>
text-transform - . .
<html>
<head>
<title> text-transform </title>
<style type="text/css">
.upper { text-transform: uppercase }
.capital { text-transform: capitalize }
</style>
</head>
<body>
<div class=upper> </div>
<div class=capital> </div>
</body>
</html>
.
color | . |
background | : [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}]; |
background-color | : {}|transparent; transparent "" . |
background-image | . url({- })|none; none . |
background-attachment | Fixed - "" , . <BODY>. |
background-repeat | Web- : repeat|no-repeat|repeat-x|repeat-y; repeat ( ); repeat-x, repeat-y /; |
background-position | [{background-position-x}] [{background-position-y}]; |
background-position-x | . {X}|{X}%|left|center|right; |
background-position-y | . {Y}|{Y}%|top|center|bottom; |
|
|
color - .
<html>
<head>
<title> </title>
</head>
<body>
<p><span style="color: blue"></sn> - .</>
< style="color: rgb(49, 151, 116)"><span style="color:#f0"></sn> .</>
</body>
</html>
background-color - .
<html>
<head>
<title> </title>
<style type="text/css">
. inverse {
font-family: Verdana; /* Verdana */
font-weight: bold; /* */
background-color: green; /* */
color: white; /* */
}
</style>
</head>
<body>
<div class=inverse> </div>
</body>
</html>
background - background-color, background-image, background-repeat, background-attachment background-position.
:
<html>
<head>
<style type="text/css">
body {
background:
white /* */
url(image.gif) /* */
left top /* */
no-repeat /* */
fixed /* */
}
</style>.
</head>
<body>
</body>
</html>
HTML . , . (padding). . (border). (margin), . . , .. HTML.
<div > </div>. <span> </span>
, ,
margin | . . {margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}]; , . , , - . , , - , - . |
margin-top | , : auto|{Y}|{Y}%;. |
margin-right | : auto|{X}|{X}%; |
margin-bottom | : auto|{Y}|{Y}%; |
margin-left | : auto|{X}|{X}%; |
padding | . : {X}|{X}%; |
padding-top | : {Y}|{Y}%; 0, <td> 1. |
padding-right | : pading-right: {X}|{X}%; |
padding-bottom | : pading-bottom: {Y}|{Y}%; |
padding-left | : pading-left: {X}|{X}%; |
width | : auto|{X}|{X}%; |
height | : auto|{X}|{X}%; |
position | static ; relative . absolute - left, top, right bottom, . fixed - , absolute, , |
top | : auto|{Y}|{Y}%; |
bottom | . bottom: auto|{Y}|{Y}%; |
left | . left: auto|{X}|{X}%; |
right | . right: auto|{X}|{X}%; |
float | . float: none|left|right; |
clear | , . float, clear . clear: none | left | right | both | inherit |
clip | rect(Y1, X1, Y2, X2) | auto | inherit , . , , . clip : |
display | , : block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group. none , ; block , ; inline ; inline-block inline, block; list-item ; run-in block, inline; inline-table inline; table ; |
max-height | : | | none | inherit |
max-width | : | | none | inherit |
min-height | : | | inherit |
min-width | : | | inherit |
overflow | , : auto | hidden | scroll | visible | inherit. visible , . hidden , . scroll . auto . inherit . |
visibility | , . , , , : visible | hidden | collapse | inherit visible . hidden , . collapse , , hidden. collapse , , display: none. , , . inherit . |
z-index | - , z- z-index. , position absolute, fixed relative. : | auto | inherit. , , . |
. margin - .
|
|
|
|
0. :
<html>
<head>
h1 {margin: 10px}
<style type="text/css">
p {
margin-top: 0px /* */
margin-bottom: 0px; /* */
}
</style>
</head>
<body>
<p> .</p>
</body>
</html>
padding - . , . , . , , . 0.
:
<html>
<head>
<style type="text/css">
#img {
padding: 10; /* */
border: lpx solid black; /* */
width: 100; /* */
float: left; /* */
}
</style>
</head>
<body>
<div>
<img src=image.gif id= img >
</body>
</html>
:
<html>
<head>
<style type="text/css">
p {
text-indent: 20px; /* */
padding-left: 20px /* c */
padding-right: 20px /* c */
}
</style>
</head>
<body>
<> padding-left padding-right .</>
</body>
</html>
border | : [{border-color}] [{border-style}] [{border-width}]; medium none. |
border-color | : { border-top-color } [{ border-right-color }] [{ border-bottom-color }] [{ border-left-color }]; . , . , , - . , , - , - . |
border-top-color | : {}; |
border-bottom-color | : {}; |
border-left-color | : {}; |
border-right-color | . border-right-color: {}; |
border-style | . border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset; none ( ); dotted ; dashed ; solid ; double ; groove ; ridge ; inset " "; outset " ". |
border-top-style | : none|dotted|dashed|solid|double|groove|ridge|inset|outset; |
border-bottom-style | : none|dotted|dashed|solid|double|groove|ridge|inset|outset; |
border-left-style | : none|dotted|dashed|solid|double|groove|ridge|inset|outset; |
border-right-style | : none|dotted|dashed|solid|double|groove|ridge|inset|outset; |
border-width | : { border-top-width } [{ border-right-width }] [{ border-bottom-width }] [{ border-left-width }]; , . , , - . , , - , - . : thin, medium, thick. medium. |
border-top-width | . border-top-width: medium|thin|thick|{}; |
border-bottom-width | . border-bottom-width: medium|thin|thick|{}; |
border-left-width | . border-left-width: medium|thin|thick|{}; |
border-right-width | . border-right-width: medium|thin|thick|{}; |
border-top | : [{ border-top-color }] [{ border-top-style }] [{ border-top-width }]; medium none. |
border-bottom | : [{ border-bottom-color }] [{ border-bottom-style }] [{ border-bottom-width }]; |
border-left | : [{ border-left-color }] [{ border-left-style }] [{ border-left-width }]; |
border-right | : [{ border-right-color }] [{ border-right-style }] [{ border-right-width }]; |
:
h1 {border-top-width: thin}
h1 {border-width: 5px}
border-top-color - .
:
p {border-top-color: black}
border-top-style - .
:
p {border-top-style: solid}
border-style - . , . , . , , .
:
<html>
<head>
<title> </title>
<style type="text/css">
img { border: none }
</style>
</head>
<body>
<img src=image.gif>
</body>
</html>
Web- .
position - . position :
static . .
relative .
absolute .
top - .
bottom - .
left - .
right - .
:
<img src=img.gif style=position: absolute; top: 30px;
bottom: 30px; left: 30px; right: 30px;>
float - . : left , ; right , ; none .
:
<html>
<head>
<title> </title>
<style type="text/css">
. letter {
font-size: 150%; /* */
float: left; /* */
color: green; /* */
padding: /* */
}
</style>
</head>
<body>
<span class=letter></span>
</body>
</html>
clear - , . . :
left .
right .
none .
:
h1 {float: left }
width - . .
:
p {width: 100px}
height - . .
:
p {height: 100px}
overflow - , . overflow :
scroll ; hidden ; auto , ; visible , . , , .
:
<html>
<style type="text/css">
body { overflow: hidden }
</style>
<body>
<p> -</p>
</body>
</html>
clip - . . clip :
rect(<top>, <right>, <bottom>, <left>), <top>, <right>, <bottom>, <left> , , , .
auto .
visibility - , . : visible ; hidden .
list-style | : [{list-style-image}] [{list-style-position}] [{list-style-type}]; disk outside none. |
list-style-type | : disc|circle|square|decimal|lower|roman|upper-roman|lower-alpha|upper-alpha|none; disc ( ) ; circle ; square ; decimal ; lower-roman ; upper-roman ; lower-alpha ; upper-alpha ; none . |
list-style-image | , . list-style-type. : none|url({- }); none, list-style-type, , . - , , list-style-type. |
list-style-position | : : outside|inside; outside ( ) . inside Web- . |
list-style-type - , , .
:
ol {list-style-type: lower-roman}
list-style-image - .
:
<html>
<head>
<style type="text/css">
a.outer {
list-style-image: url(image.gif);/* */
}
</style>
</head>
<body>
<ol>
<li class=outer>C </li>
<li> </li>
</ol>
</body>
</html>
list-style-position - . ,
:
<html>
<head>
<style type="text/css">
ul { list-style-position: outside }
</style>
</head>
<body>
<ul>
<1i> </li>
<1i> </li>
</ul>
</body>
</html>
list-style - : list-style-type, list-style-image list-style-position.
border-collapse | , : separate|collapse; separate - ( ); collapse - . |
border-spacing | : 1 [2 ]. . , , . |
caption-side | , <caption> : top | bottom top . bottom . right . left . |
empty-cells | , . border-collapse collapse, empty-cells . empty-cells: show | hide. show . hide . , . |
table-layout | , , : auto | fixed | inherit auto , .fixed <col>, . , , , . . inherit . |
. CSS, . , , , . , :
a { text-decoration: none; }
a:hover { text-decoration: underline; }
- <a>, , - hover, , . ( ).
:
: { : }
:active | , :active{ }; : a:active {color: lime;} |
:first-child | :first-child {... } |
:focus | , . , , :focus {... } |
:hover | , : hover { }; : a:hover {color: lime; text-decoration: none;} |
:lang | , . :lang(<>) {... } : ru ; en ; de ; |
:link | : link { };: a:link {color: black;} |
:visited | :visited{ }; : a:link {color: indigo;} |
:
<html>
<head>
<title> </title>
<style type="text/css">
a:link {color: lime}
a:visited {color: indigo }
a:hover {color: red }
a:active {color: #fe0 }
</style>
</head>
<body>
<a href=linkl.html> 1</a>
<a href=link2.html> 2</a>
<a href=link3.html> 3</a>
</body>
</html>
, :
<style type="text/css">
a.link { text-decoration: none; color:red; }
</style>
</head>
, , . , . . :
<a href="#"><span style="color: #000000;">Copyright (C) 1998-2001 Cherry-Design</span></a>
, , .
first-letter - :
p:first-letter { font-size: 200%; font-weight: bold; }
:
<html>
<head>
<style type="text/css">
p:first-letter {
color: red;
font-size: 12px
}
</style>
</head>
<body>
<> first-lette.</>
</body>
</html>
first-line - .
{ }:first-line{ };
:
p:first-line {text-decoration: underline;}
:after | , , . :after { content: "" } |
:before | :before , . content:before { content: "" } |
:first-letter | . :first-letter { }; : st:first-letter {font-size: 16pt;} |
:first-line | :first-line{ }; : st:first-line {text-decoration: underline;} |
content | -. after before. content: | attr() | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none | inherit; c , -, . attr() , . , img:after {content:attr(href)} , .. href. open-quote , close-quote . url . , . counter , counter-reset. normal - none before after. inherit - . |
orphans | orphans , . , . orphans: | inherit |
page-break-after | . page-break-after: always | auto | avoid | left | right | inherit always . auto . avoid . left , . right , . inherit . |
page-break-before | . page-break-before: always | auto | avoid | left | right | inherit always . auto . avoid . left , . right , . inherit . |
page-break-inside | : auto | avoid | inherit auto , avoid , inherit . |
windows | , . widows: | inherit |
scrollbar-arrow-color | . scrollbar-arrow-color: {}; |
scrollbar-base-color | - . scrollbar-base-color:{ }; |
scrollbar-highlight-color | "" ( ). scrollbar-highlight-color:{ }; |
scrollbar-shadow-color | "" ( ). |
scrollbar-track-color | , .. , . scrollbar-track-color: { }; |
, .
cursor: auto|crosshair|default|hand|move|text|wait|help;
auto- ;
crosshair - ; default - , ;
hand - " "; move - , " ";
text - ; wait - " ", ; help - . :
<html>
<head>
<title> -</title>
<style type="text/css">
.cross { cursor: crosshair }
. hand { cursor: hand }
</style>
</head>
<body>
<div class="cross"> .</div>
<a href="ref.htm" class=" hand "></a>
</body>
</html>
CSS.
1. HTML css
<html>
<head>
<style>
#top{margin-top:0px;
height:100px;
margin-left:0px;
/*width:900px;*/
border:1px; /* */
border-style:solid;}/* */
#left-side {
float:left; /* */
width:200px; /* */
height:400px;
border:1px;
border-style:solid;
}
#center {
margin-left:200px; /* */
height:400px;
border:1px;
border-style:solid;
}
#footer {
clear:both; /* */
border:1px;
border-style:solid;
}
#content{}
p{font-size:25px;
text-align:center;
color:red}
a:visited { color: #000000; text-decoration: none}
a:link { color: #000000; text-decoration: none}
a:hover { color: #dd4444; text-decoration: none}
</style>
</head>
<body>
<div id="top">
<p>TOP</p>
</div>
<div id="content">
<div id="left-side"><p>Left-side</p></div>
<div id="center"><p>Center</p></div>
</div>
<div id="footer"> <p>Footer</p>
</div>
</body>
</html>
2.
<html>
<head>
<style>
#left-side {
float:left;
width:200px;
}
#wrapper {
margin-left:200px;
background-color: yellow;
}
#right-side {
float:right;
width:200px;
}
#top{ margin-left:0px;
margin-top:0px;
hight:150px;}
#center {}
#footer { clear:both;}
</style>
</head>
<body>
<div id="top"> top
</div>
<div id="content">
<div id="left-side"> left-side </div>
<div id="wrapper">
<div id="right-side"> right-side </div>
<div id="center"> center </div>
</div>
</div>
<div id="footer"> footer
</div>
</body>
</html>
2.
- , , , , , . , , . , - .
HTML CSS, .
DOCTYPE. Strict 1.0. , , , /> .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset= windows-1251" />
<meta http-equiv="Content-Language" content="en" />
<meta name="description" content=" " />
<meta name="keywords" content=" , , , , , ." />
<title>WebConf 09</title>
<link rel="stylesheet" type="text/css" href="css/style1.css" />
</head>
<!- - - windows-1251. - . . - . CSS, . -->
<body>
<div id="main">
<div class="header">
<div class="headcontent">
<div class="w1"></div>
<a href="/" id="logo"><img src="img/logo.gif" alt="WEB CONF 09" /></a>
<div>
<img src="img/webconf09.gif" alt="WEB CONF 09" />
</div>
</div>
</div>
<!--
<div id="container">
<div id="header"> </div> -->
<div id="nav">
<ul>
<li></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul> </div>
<div id="text">
<img class="img1" src="pig1.jpg" alt="" />
<h2><span> </span></h2>
<p> () : <a href="">X </a>, 37 2008 . (). 2 8 2008 60 . </p>
<p> 40 ., 20 ., 10 .</p>
<div id="members">
<H2> :</H2>
<ol>
</ol>
<ol>
</ol> </div>
<img class="line" src="line.gif" alt="" />
</div>
<div id="news">
<h3> :</h3>
<ul>
<li>. !</li>
<li>. .</li>
<li> . .</li>
</ul>
</div>
<div class="clearfloat"></div>
<div id="footer">
<p> | <a href="#"> </a> | </a> | <a href="#"></a></p>
<p> PIG.RU, 2007 | All right reserved. |
<a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> | | e-mail: <a href="mailto:[email protected]">[email protected]</a></p>
</div> </div> </body> </html>
index.html. .
style.css
* {margin: 0; padding: 0; border: 0; }
body {
padding: 2% 0 0;
background: #fff; color: #333;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif; }
#container { width: 760px; margin: 0 auto; border: 1px solid #999; }
#header {
background: url(header.jpg); width: 760px;
height: 158px; }
#nav {
background: url(navbg.jpg) repeat-x; color: #f00;
font-size: 120%; font-weight: bold;
line-height: 1.8em; text-align: center; }
#nav ul { list-style-type: none; }
#nav li { display: inline; margin: 0 8px; }
#nav li a { color: #0c0; }
#nav li a:hover { color: #f00; }
a { text-decoration: none; }
#text {
width: 545px; font-size: 0.8em; color: #333; margin: 10px auto;
float: left;
}
#text p {
text-align: justify; text-indent: 1.5em; margin: 0; padding: 0 15px; }
#text a {
color: #396; }
#text a:hover {
color: #f36;
border-bottom: 1px dotted #f36; }
.img1 { width: 200px;
height: 287px; margin: 0 0 0 15px; float: right; }
.img2 {
width: 200px; height: 200px;
margin: 10px 10px 0 15px;
float: left;
}
.venzel { width: 300px; height: 23px;
margin: 10px 10px 0 15px;
float: left;
}
#members {
width: 300px;
height: 190px; float: right;
}
#members h2 {
color: #f60; font-size: 120%;
font-weight: bold; text-align: center;
}
#members ol {
color: #999; font-size: 120%;
margin: 10px;
float: left;
}
#members li { margin: 0 5px; }
#members li a {color: #0c0;}
#members li a:hover {color: #f00;}
.line {width: 304px; height: 13px; float: right;}
#news {background: #ffc; width: 185px; color: #665; margin: 10px 5px; float: right;}
#news h3 {color: #f60; font-size: 120%; font-weight: bold; text-align: center; }
#news ul { list-style: url(marker.jpg) inside; }
#news li { font-size: 75%; padding: 5px 10px;}
#footer {
background: #665;
color: #fff; font-size: 70%;
padding: 5px; clear: both;
}
#footer a {
color: #ff0;
}
#footer a:hover {
color: #f00;
}
#footer p { padding: 2px; text-align: center; }
.clearfloat{ clear:both; }
. . : - 0, - 0, - 0. , . , .
: 2%, , . 4 , , , , . , 2% 0 0. , , .
container (#). . div .
? , . : , auto. . 760 .
, . , , .css style.css
:
#nav { background: url(nav-bg.jpg) repeat-x; color: #f00;
font-size:120%;font-wight: bold; line-height: 1.8em; text-align: center; }
#nav ul { list-style-type: none; }
#navli{display:inline;margin: 0 8px; }
#nav li a { color: #0c0; }
#nav li a:hover { color: #f00; }
, ( ). .
HTML ul. () li.
. nav. : nav-bg.jpg 835 . "" . , repeat-x, " ", ( ).
.
#nav li a { color: #0c0; }
#nav li a:hover { color: #f00; }
, , .
:
a {text-decoration: none;}
. , . , , .
, . . :
<div id=&