×î³£ÓúÍʵÓõÄ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 ºÍ JavaScript ±êÇ© style ÊôÐÔ¶ÔÕÕ±í£º
ºÐ×Ó±êÇ©ºÍÊôÐÔ¶ÔÕÕ
CSSÓï·¨£¨²»Çø·Ö´óСд£© JavaScriptÓï·¨£¨Çø·Ö´óСд£©
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color bor ......
Ê×ÏÈҪ˵µÄÊÇÔªËصÄborder£¬ÔªËصı߿ò (border) ÊÇΧÈÆÔªËØÄÚÈݺÍÄڱ߾àµÄÒ»Ìõ»ò¶àÌõÏß¡£CSS border ÊôÐÔÔÊÐíÄã¹æ¶¨ÔªËر߿òµÄÑùʽ¡¢¿í¶ÈºÍÑÕÉ«¡£
CSS ±ß¿ò
ÔÚ HTML ÖУ¬ÎÒÃÇʹÓñí¸ñÀ´´´½¨Îı¾ÖÜΧµÄ±ß¿ò£¬µ«ÊÇͨ¹ýʹÓà CSS ±ß¿òÊôÐÔ£¬ÎÒÃÇ¿ÉÒÔ´´½¨³öЧ¹û³öÉ«µÄ±ß¿ò£¬²¢ÇÒ¿ÉÒÔÓ¦ÓÃÓÚÈκÎÔªËØ¡£
ÔªËØÍâ±ß¾àÄÚ¾ÍÊÇÔªËØ ......
½ñÌìдÁËÒ»¸ö¼òµ¥µÄÍøÒ³£¬Çë¿´´úÂ룺
´íÎóµÄ£º
HTML´úÂ룺
½ñÌìµÄÈÕ×Ó
//CSS´úÂëʹÓÃÍⲿÒýÈëʽ
ÎҵļÒÏçÔÚ¿Àï
CSS´úÂ룺
/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:red; /*ÒªµÄ¾ÍÊÇÕâÑùµÄЧ¹û£ºÉèÖÃ×ÖÌåÑÕɫΪºìÉ«*/
}
½á¹ûÏÔʾµÄ×ÖÌ ......
ÔÀí£º
µ±Á½¸öͬ¸¸ÔªËØz-indexÏàͬʱ£¬ºóÃæµÄÔªËØÏÔʾÔÚÉÏÃæ¡£
µ±z-index³¬¹ýä¯ÀÀÆ÷×î´óֵʱ£¬ä¯ÀÀÆ÷»á°´×î´óÖµ¼ÆËã¡£
·½·¨£º
Á¬Ðø·ÅÖÃÁ½¸ödivÔªËØd1£¬d2£»²¢É趨position:absolute¼°²»Í¬±³¾°É«¡£
É趨d1.z-index = max + 1, d2.z-index = max£»
µ±max + 1ÓÐЧʱ£¬d1ÔÚÇ°£»µ±max + 1 ÎÞЧʱ£¬d2ÔÚÇ°¡££¨²Î¿´ÔÀí£© ......
/* 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 ......