Ò׽ؽØͼÈí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

×î³£ÓúÍʵÓõÄCSS¼¼ÇÉ[zz]

ÏÂÃæÊÇCSS×î³£ÓúÍʵÓõļ¼ÇÉ¡£ 
1.ÖØÖÃä¯ÀÀÆ÷µÄ×ÖÌå´óС
 
ÖØÖÃä¯ÀÀÆ÷µÄĬÈÏÖµ £¬È»ºóÖØÉèä¯ÀÀÆ÷
µÄ×ÖÌå´óСÄã¿ÉÒÔʹÓÃÑÅ»¢µÄÓû§½çÃæÖØÖÃ
µÄCSS·½°¸ £¬Èç¹ûÄã²»ÏëÏÂÔØ9MBµÄÎļþ£¬´úÂëÈçÏ£º 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }
Æä´Î£¬ÎÒÃÇÖØÉèä¯ÀÀÆ÷×ÖÌåµÄ´óСΪ10ÏñËØ£¬Ê¹ÓÃÈçÏ£º 
html {font-size: 62.5%;}
Õâ¸ö´óС»ù±¾ºÏÊÊ£¬È»ºóÄú¿ÉÒÔ¸ù¾Ý×Ô¼ºµÄÐèÒªµ÷Õû´óС£¬Èç ±êÌâ1Ϊ120ÏñËØ: 
h1 {font-size: 2em;}
2.ÉèÖÃˮƽ¾ÓÖÐ
 
´ó¶àÊýµÄÍøվĿǰ¶¼Êǹ̶¨¿í¶ÈµÄ¡£CSS´úÂëÈçÏ£º 
div#container {margin: 0 auto;}
3.¿ØÖÆλÖ㺾ø¶ÔλÖã¬Ïà¶ÔλÖÃ
 
¼ÙÈçÓÐÁ½¸ödiv 
<div id='parent'>
<div id='son'></div>
</div>
divÓÐleftºÍtopÊôÐÔ,ÊÇÓÃÀ´¶¨Î»µÄ. 
Èç¹ûÄÚ²ãµÄdivµÄpositionÊôÐÔÊÇabsolute.ÄÇËû¾ÍÊÇÏà¶ÔÓÚÎĵµµÄ×óÉϽǵÄλÖÃ.. 
Èç¹ûÄÚ²ãµÄdiv(idΪsonµÄÄǸö)positionÊôÐÔΪrelative,ÄÇËüµÄleftºÍtopÖµ¾ÍÊÇÏà¶ÔÓÚÍâ²ãµÄdivµÄ×óÉϽǵľàÀë. 
4.½«ÖØÒªÔªËØ·ÅÖÃÔÚÆÁÄ»ÖÐÑë
 
Èç¹ûÄãÏ£Íû½«ÄúÏëÒªµÄ¶«Î÷·ÅÔÚ×îÖÐÑ룬¿ÉÒÔʹÓÃÒÔÏÂCSS£º 
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
Äú±ØÐëÃ÷È·µÄÖ¸¶¨¿í¶ÈºÍ¸ß¶È£¬ÔÙ°ÑtopºÍleftÊôÐÔÉèΪËûÃǵÄÒ»°ë£¬ÕâÑù¾Í¿ÉÒÔÊÇÕâ¸ö²¿·Ö»Øµ½ÆÁÄ»µÄÖÐÐÄ¡£ 
5.¿ÉÒÔÖظ´ÀûÓõĹæÔò
 
.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}
ÉèÖÃ×Ô¼ºµÄCSSÑùʽ±í£¬¾Í¿ÉÒÔÔÚÄúÐèÒªµÄʱºòÖ±½ÓµÄÌí¼Ó±ê¼Ç¼´¿É¡£ 
 
6. ½â¾öIE6 µÄ¸¡¶¯ÔªËصÄË«±¶±ß


Ïà¹ØÎĵµ£º

CSSºÍJS±êÇ©styleÊôÐÔ¶ÔÕÕ±í

CSS ºÍ JavaScript ±êÇ© style ÊôÐÔ¶ÔÕÕ±í£º
ºÐ×Ó±êÇ©ºÍÊôÐÔ¶ÔÕÕ
CSSÓï·¨£¨²»Çø·Ö´óСд£© JavaScriptÓï·¨£¨Çø·Ö´óСд£©
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color bor ......

CSS Border


Ê×ÏÈҪ˵µÄÊÇÔªËصÄborder£¬ÔªËصı߿ò (border) ÊÇΧÈÆÔªËØÄÚÈݺÍÄڱ߾àµÄÒ»Ìõ»ò¶àÌõÏß¡£CSS border ÊôÐÔÔÊÐíÄã¹æ¶¨ÔªËر߿òµÄÑùʽ¡¢¿í¶ÈºÍÑÕÉ«¡£
CSS ±ß¿ò
ÔÚ HTML ÖУ¬ÎÒÃÇʹÓñí¸ñÀ´´´½¨Îı¾ÖÜΧµÄ±ß¿ò£¬µ«ÊÇͨ¹ýʹÓà CSS ±ß¿òÊôÐÔ£¬ÎÒÃÇ¿ÉÒÔ´´½¨³öЧ¹û³öÉ«µÄ±ß¿ò£¬²¢ÇÒ¿ÉÒÔÓ¦ÓÃÓÚÈκÎÔªËØ¡£
ÔªËØÍâ±ß¾àÄÚ¾ÍÊÇÔªËØ ......

ÍæתCSS£¬´Ó²ËÄñ¿ªÊ¼Ö® CSS×ÖÌåÑÕÉ«µÄÉèÖÃ

½ñÌìдÁËÒ»¸ö¼òµ¥µÄÍøÒ³£¬Çë¿´´úÂ룺
´íÎóµÄ£º
HTML´úÂ룺
½ñÌìµÄÈÕ×Ó
//CSS´úÂëʹÓÃÍⲿÒýÈëʽ

ÎҵļÒÏçÔÚ¿­Àï
CSS´úÂ룺
/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:red; /*ÒªµÄ¾ÍÊÇÕâÑùµÄЧ¹û£ºÉèÖÃ×ÖÌåÑÕɫΪºìÉ«*/
}
½á¹ûÏÔʾµÄ×ÖÌ ......

CSS: z index È¡Öµ·¶Î§


Ô­Àí£º
µ±Á½¸öͬ¸¸ÔªËØz-indexÏàͬʱ£¬ºóÃæµÄÔªËØÏÔʾÔÚÉÏÃæ¡£
µ±z-index³¬¹ýä¯ÀÀÆ÷×î´óֵʱ£¬ä¯ÀÀÆ÷»á°´×î´óÖµ¼ÆËã¡£
·½·¨£º
Á¬Ðø·ÅÖÃÁ½¸ödivÔªËØd1£¬d2£»²¢É趨position:absolute¼°²»Í¬±³¾°É«¡£
É趨d1.z-index = max + 1, d2.z-index = max£»
µ±max + 1ÓÐЧʱ£¬d1ÔÚÇ°£»µ±max + 1 ÎÞЧʱ£¬d2ÔÚÇ°¡££¨²Î¿´Ô­Àí£© ......

CSSÖ®¹¤×÷ð¤Ìù

/* Cascading Style Sheet for IE4.01 last updated 10-16-97 */
DIV {COLOR: #333333; FONT-FAMILY: "ËÎÌå", "Arial", "Tahoma"; FONT-SIZE: 9pt}
P {COLOR: #333333; FONT-FAMILY: "ËÎÌå", "Arial", "Tahoma"; FONT-SIZE: 9pt}
TD {COLOR: #333333; FONT-FAMILY: "ËÎÌå", "Arial", "Tahoma"; FONT-SIZE: 9pt}
BODY {C ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ