.


:

:



,



( , )

:

































 

 

 

 
FAQ

font : font-family| font-style | font-variant | font-weight| font-size

⇐ 18192021222324252627 ⇒



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=&

⇐ 18192021222324252627 ⇒


:

: 2016-07-29; !; : 1814 |

:

:

, .
==> ...

1459 - | 1281 -


© 2015-2024 lektsii.org - -

: 0.701 .