CSSµÄÊ®°Ë°ã¼¼ÇÉ
×î½ü,¾³£ÓÐÅóÓÑÎÊÎÒһЩ¹¤×÷ÖÐÓöµ½µÄCSSÎÊÌâ¡£ËûÃÇ×ÜÊDz»ÄܺܺõĿØÖÆCSS£¬Ó°ÏìCSSµÄЧÂÊ·¢»Ó¡£ÎÒÀ´·ÖÎö×ܽáһϴíÎóËùÔÚ£¬°ïÖú´ó¼Ò¸ü¼ÓÈÝÒ×ʹÓÃCSS¡£
±¾ÎÄ×ܽáÁËÎÒ¿ªÊ¼Ê¹ÓÃCSS²¼¾Ö·½·¨ÒÔÀ´ËùÓеļ¼ÇɺͼæÈÝ·½°¸£¬ÎÒÔ¸Òâ°ÑÕâЩÓëÄã·ÖÏí£¬ÎÒ»áÖØµã½âÊÍһЩÐÂÊÖÈÝÒ×·¸µÄ´íÎó(°üÀ¨ÎÒ×Ô¼ºÒ²·¸¹ýµÄ)£¬Èç¹ûÄãÒѾÊÇCSS¸ßÊÖ£¬ÕâЩ¾Ñé¼¼ÇÉ¿ÉÄÜÒѾ¶¼ÖªµÀ£¬Èç¹ûÄãÓиü¶àµÄ£¬Ï£Íû¿ÉÒÔ°ïÎÒ²¹³ä¡£
Ò».ʹÓÃcssËõд
ʹÓÃËõд¿ÉÒÔ°ïÖú¼õÉÙÄãCSSÎļþµÄ´óС£¬¸ü¼ÓÈÝÒ×ÔĶÁ¡£cssËõдµÄÖ÷Òª¹æÔòÇë²Î¿´¡¶³£ÓÃcssËõдÓï·¨×ܽᡷ£¬ÕâÀï¾Í²»Õ¹¿ªÃèÊö¡£
¶þ.Ã÷È·¶¨Ò嵥룬³ý·ÇֵΪ0
Íü¼Ç¶¨Òå³ß´çµÄµ¥Î»ÊÇCSSÐÂÊÖÆÕ±éµÄ´íÎó¡£ÔÚHTMLÖÐÄã¿ÉÒÔֻдwidth="100"£¬µ«ÊÇÔÚCSSÖУ¬Äã±ØÐë¸øÒ»¸ö׼ȷµÄµ¥Î»£¬±ÈÈ磺width:100px width:100em¡£Ö»ÓÐÁ½¸öÀýÍâÇé¿ö¿ÉÒÔ²»¶¨Ò嵥λ£ºÐиߺÍ0Öµ¡£³ý´ËÒÔÍ⣬ÆäËûÖµ¶¼±ØÐë½ô¸úµ¥Î»£¬×¢Ò⣬²»ÒªÔÚÊýÖµºÍµ¥Î»Ö®¼ä¼Ó¿Õ¸ñ¡£
Èý.Çø·Ö´óСд
µ±ÔÚXHTMLÖÐʹÓÃCSS£¬CSSÀﶨÒåµÄÔªËØÃû³ÆÊÇÇø·Ö´óСдµÄ¡£ÎªÁ˱ÜÃâÕâÖÖ´íÎó£¬ÎÒ½¨ÒéËùÓе͍ÒåÃû³Æ¶¼²ÉÓÃСд¡£
classºÍidµÄÖµÔÚHTMLºÍXHTMLÖÐÒ²ÊÇÇø·Ö´óСдµÄ£¬Èç¹ûÄãÒ»¶¨Òª´óСд»ìºÏд£¬Çë×ÐϸȷÈÏÄãÔÚCSSµÄ¶¨ÒåºÍXHTMLÀïµÄ±êÇ©ÊÇÒ»Öµġ£
ËÄ.È¡ÏûclassºÍidǰµÄÔªËØÏÞ¶¨
µ±Äãд¸øÒ»¸öÔªËØ¶¨Òåclass»òÕßid£¬Äã¿ÉÒÔÊ¡ÂÔÇ°ÃæµÄÔªËØÏÞ¶¨£¬ÒòΪIDÔÚÒ»¸öÒ³ÃæÀïÊÇΨһµÄ£¬¶øclas s¿ÉÒÔÔÚÒ³ÃæÖжà´ÎʹÓá£ÄãÏÞ¶¨Ä³¸öÔªËØºÁÎÞÒâÒå¡£ÀýÈ磺
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
¿ÉÒÔд³É
#content { /* declarations */ }
.details { /* declarations */ }
ÕâÑù¿ÉÒÔ½ÚʡһЩ×Ö½Ú¡£
Îå.ĬÈÏÖµ
ͨ³£paddingµÄĬÈÏֵΪ0£¬background-colorµÄĬÈÏÖµÊÇtransparent¡£µ«ÊÇÔÚ²»Í¬µÄä¯ÀÀÆ÷ĬÈÏÖµ¿ÉÄܲ»Í¬¡£Èç¹ûÅÂÓгåÍ»£¬¿ÉÒÔÔÚÑùʽ±íÒ»¿ªÊ¼¾ÍÏȶ¨ÒåËùÓÐÔªËØµÄmarginºÍpaddingÖµ¶¼Îª0£¬ÏóÕâÑù£º
* {
margin:0;
padding:0;
}
Áù.²»ÐèÒªÖØ¸´¶¨Òå¿É¼Ì³ÐµÄÖµ
CSSÖУ¬×ÓÔªËØ×Ô¶¯¼Ì³Ð¸¸ÔªËصÄÊôÐÔÖµ£¬ÏóÑÕÉ«¡¢×ÖÌåµÈ£¬ÒѾÔÚ¸¸ÔªËØÖж¨Òå¹ýµÄ£¬ÔÚ×ÓÔªËØÖпÉÒÔÖ±½Ó¼Ì³Ð£¬²»ÐèÒªÖØ¸´¶¨Òå¡£µ«ÊÇҪעÒ⣬ä¯ÀÀÆ÷¿ÉÄÜÓÃһЩĬÈÏÖµ¸²¸ÇÄãµÄ¶¨Òå¡£
Æß.×î½üÓÅÏÈÔÔò
Èç¹û¶Ôͬһ¸öÔªËØµÄ¶¨ÒåÓжàÖÖ£¬ÒÔ×î½Ó½ü(×îСһ¼¶)µÄ¶¨ÒåΪ×îÓÅÏÈ£¬ÀýÈçÓÐÕâôһ¶Î´úÂë
Update: Lorem ipsum dolor set
ÔÚCSSÎļþÖУ¬ÄãÒѾ¶¨ÒåÁËÔªËØp£¬ÓÖ¶¨ÒåÁËÒ»¸öclass"update"
p {
mar
Ïà¹ØÎĵµ£º
IE6¡¢IE7¡¢IE8¡¢Firefox¡¢Opera CSS hackÇø·Ö
Õë¶ÔÑùʽÃû
Èç¹ûÖ»ÈÃie6¿´¼ûÓÃ*html .head{color:#000;}
Èç¹ûÖ»ÈÃie7¿´¼ûÓÃ*+html .head{color:#000;}
Èç¹ûÖ»ÈÃff¿´¼ûÓÃ:root body .head{color:#000;}
Èç¹ûÖ»ÈÃff¡¢IE8¿´¼ûÓÃhtml>/**/body .head{color:#000;}
Èç¹ûÖ»ÊDz»ÈÃie6¿´¼ûÓÃhtml>body .head{color:#000;} ......
CSS Hack ÊÇÔÚ±ê×¼ CSS û°ì·¨¼æÈݸ÷ä¯ÀÀÆ÷ÏÔʾЧ¹ûʱ²Å»áÓÃÉϵIJ¹¾È·½·¨,ÔÚ¸÷ä¯ÀÀÆ÷³§É̽âÎö CSS ûÓдï³ÉÒ»ÖÂǰ,ÎÒÃÇÖ»ÄÜÓÃÕâÑùµÄ·½·¨À´Íê³ÉÕâÑùµÄÈÎÎñ¡£ÍøÉÏÄã¿ÉÄÜÄÜËÑË÷µ½Ò»´ó¶ÑµÄ CSS Hack£¬µ«ÊÇÎÒ½ñÌì·¢²¼µÄÄã¿ÉÄܲ¢²»¶¼ºÜÁ˽⣬ÒòΪÕâЩ¶¼ÊÇÖ»Õë¶Ôµ¥¶ÀÒ»¸öä¯ÀÀÆ÷µÄ CSS Hack¡£
ΪÁËÏòÄãչʾÕâЩ CSS Hack ÊÇ·ñÕý³£Ô ......
ÔÎÄÁ´½Ó ×÷Õߣºâø·É
¾¡¹ÜÓÐ CSS µÄ vertical-align ÌØÐÔ£¬µ«ÊDz¢²»ÄÜÓÐЧ½â¾öδ֪¸ß¶ÈµÄ´¹Ö±¾ÓÖÐÎÊÌ⣨ÔÚÒ»¸ö DIV ±êÇ©ÀïÓÐδ֪¸ß¶ÈµÄÎı¾»òͼƬµÄÇé¿öÏ£©¡£
±ê ×¼ä¯ÀÀÆ÷Èç Mozilla, Opera, Safari µÈ.£¬¿É½«¸¸¼¶ÔªËØÏÔʾ·½Ê½É趨Ϊ TABLE(display: table;) £¬ÄÚ²¿×ÓÔªËØ¶¨Îª table-cell (display: table-cell)£¬Í¨¹ý ......
ÊäÈë¿òÖ»Óе׿ò£º
.box
{
border-style:none none solid none;
border-bottom-width:1px;
border-bottom-color:#999999;
}
±í¸ñ
<table>
<tbody>
<tr><td></td></tr>
</tbody>
</table> ......