1
CSS
.
:
DIV
CSS
HTML- " ". "" , , .. , .
"" -, ( ), -, . , , , . , , .
(CSS) . , , Web . CSS:
- . , (X)HTML, . , , CSS :
, , <p>, .
- ID. id ( ID ) - , id="navigation_menu". , , , , ID:
CSS :
#highlight { line-height: 2em; color: green;}CSS id, highlight ( # CSS , ID).
- . ID, , . , , :
CSS :
|
|
highlight , ID - CSS
:
;
- ( LINK );
- STYLE;
- STYLE STYLE .
. , "" ( ) BODY .
DIV
DIV . () . DIV . , DIV . CSS. DIV . .
DIV , , "", .. :
<DIV STYLE="margin:20px;padding:10px;"> , DIV.<P> , .</P></DIV>
.1.
(DIV), (P). DIV .
, CSS, DIV . HTML.
( box) , . , , .
: (height), (width), (border), (margin), (padding), (float), (clear).
:
. 2.
. (pt), (px) (em):
<DIV STYLE="width:200px;"></DIV><DIV STYLE="width:200pt;"> </DIV><DIV STYLE="width:5em;"> </DIV>
. 3.
, .. Netscape Navigator CSS , .
|
|
padding. "" " ".
"" margin. "" " ".
padding margin , :
. 4.
"" , , . CSS . ""(margin)", "" "" (padding)".
. CSS , . . "" .
"" .
. .
, . "" , "" . "" , .
CSS , ( Netscape Navigator).
.
, Netscape Navigator. CSS center float.
, .
(margin)
. , . "" (margin), (padding). , "" :
. 5.
. . , . . Padding , margin ().
(margin) :
margin-left . ("", padding) ;
margin-right . ("", padding) ;
margin-top . ("", padding) ;
margin-bottom . ("", padding) ;
margin . , .
|
|
:
. 6.
:
P { margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom:50px; padding:0px;text-align:left; }, -. Netscape Navigator 4.x margin, , .
, margin:
P { margin:5px; }, ("", padding) . , , .
(padding)
. . padding. (margin) padding .
Padding :
. 7.
:
P { padding-left:100px;text-align:left; border-width:1px; }, , . Internet Explorer , Netscape Navigator "".
. , padding :
padding-left , ;
padding-right , ;
padding-top , ;
padding-bottom , ;
padding . .
padding :
. 8.
padding , (margin) . , padding.
(border)
. (margin padding). "" .
:
border-top-width ;
border-bottom-width ;
border-left-width ;
border-right-width ;
border-width . , ;
border-color . CSS1 . , border-right-color:red. (red, blue, navy ..), RGB (border-color:#003366). ;
|
|
border-style . : none, dotted, dashed, solid, double, groove, ridge, inset, outset. CSS1, . , border-right-style:dotted. .
. . , :
P { border-top:1px dotted red; }: _ _ _, :
. 9.
:
P { text-align:left;border-width:2px; border-color:black;border-style:solid; }. , .
Internet Explorer, , .
, , , . "" , () . , , .
CSS: float clear.
float "" . :
left ;
right ;
both .
:
. 10.
right .
. 11.
clear . "" .
: right, left, none, both:
. 12.
CSS
(CSS) . , . (color) (background-color), .
CSS (border-color).
, , Microsoft, Color and Background Properties. , . , ( ).
HTML FONT. CSS color. , .
:
TD { color:darkred; }
. 13. .
, (#003366).
. , :
P { color:darkred; }I { color:#003366;font-style:normal; }
. 14.
, (in-line) I. , . in-line .
HTML . :
|
|
, , :
<TABLE BGCOLOR=...>...</TABLE>:
<SPAN STYLE="background-color:black;color:white;"> </SPAN>
. 15. .
, World Wide Web . : serif ( Times ), sans-serif (Arial, Helvetica ) monospace (Courier). , . .
, :
font-family - ();
font-style - ;
font-weight - "" () , "" ;
font-size - (). (px) (pt).
font-variant - ( - ).
font:
font:bold 12pt sans;, , .
(font-family) , . , .
, - , HTML-. .
CSS , . , Unix Windows . , CSS (serif, sans-serif monospace).
(font-family)
- . "" (normal), (italic), "" (oblique), ("", bold), "" (, small-caps) ..
Web - Times, Arial, Courier. . Times - " " (serif), Arial - " " (sans-serif), Courier - (monospace). Unix Arial Helvetica.
, :
. 16. .
, , .
. :
<b> :</b><br><INPUT VALUE=" "><b> :</b><br>Courier<br><INPUT STYLE="font-family:Courier;" VALUE=" ">Courier New<br><INPUT STYLE="font-family:Courier New;" VALUE=" ">
. 17. .
, , Courier, Courier New. , , Courier, .
, .
, , , , . , . , .
(font-size)
- , , . . , CSS font-size .
(pt, 0,35 ) (px). , font-size , "" , .
font-size:
<P STYLE="font-size:12pt;"> 12 </P><P STYLE="font-size:12px;"> 12 </P> <P STYLE="font-size:120%;"> 120% </P>
. 18. .
, , . , , CSS:
<P STYLE="font-size:large;"> large</P><P STYLE="font-size:small;"> small</P><P STYLE="font-size:x-small;"> x-small</P><P STYLE="font-size:xx-small;"> xx-small</P>
. 19. .
x-small xx-small, x-large xx-large. , larger, smaller medium.
(font-family) . CSS : font-style, font-variant, font-weight.
font-style (normal) :
<P STYLE="color:darkred;font-style:normal;"> </P><P STYLE="color:darkred;font-style:italic;"></P>
. 20. .
("") , font-weight, normal bold:
<P STYLE="color:darkred;font-style:italic; font-weight:bold;"></P>, . . CSS font-variant, normal small-caps. font-variant - .
CSS-P . : , .
CSS-P : . , .
- , . , "" . , HTML- , .
"" (, ), X Y .
10 px 20 px , :
.example { position:absolute;top:10px; left:20px; }position ( - absolute), X left ( - 20 px), Y - top ( - 10 px).
top left .
. 21.
. , 100 px () 200 px (), :
.example { position:absolute; top:-100px;left:-200px; width:200px;height:100px; }
. 22.
, (""), , , .
. : .
. X , Y - .
, :
<DIV STYLE="border-width:1px; border-style:solid;width:100%; height:100px;"><DIV STYLE="position:relative;top:0px;left:0px;border-width:1px;"> </DIV><DIV STYLE="position:relative;top:0px;left:50px;border-width:1px;"> 50px</DIV></DIV>
. 23.
DIV. , Netscape Navigator, , . , , - .
:
<DIV STYLE="position:relative;top:0;left:50;border-width:1px;border-style:solid;width:200px;"><A HREF="javascript:if(flag==0){ window.document.layers[2].left=-50;flag=1; }else{ window.document.layers[2].left=50;flag=0; };void(0);"> </A></DIV>
. 24.
. 25.
, 50 , 100 , X (left:-50 px). .
: (width) (height) . -.
Netscape Navigator - . , , , :
<P STYLE="width:200px;height:100px;background-color:black;color:white;">...</P>, Netscape Navigator :
<P STYLE="width:200px;height:100px;background-color:black;color:white;border-width:1px;border-color:white;"><SPAN STYLE="color:white;">...</SPAN></P>
. 26.
, span . , .
CSS-P visibility. "" HTML-.
, , . "" .
visibility JavaScript-:
function change(){next=current+1; if(next>1) next=0;window.document.all.item("list", current).visibility="hidden";window.document.all.item("list", next).visibility="visible";current=next; }"list" - ID .
URL "javascript":
<A HREF="javascript:change();void(0);">...</A>visibility, , CSS. :
<DIV ID=test STYLE="position:absolute;top:230px;left:55px;width:550px;visibility:hidden;">...</DIV>visibility . Microsoft Internet Explorer. , DHTML, ID .
. , , , . , . , . () z-index.
, . CSS . CSS-P clip.