CSSÑùʽ±í½Ì³Ì£ºä¯ÀÀÆ÷ĬÈÏÑùʽ

2008-06-11 11:00:20  À´Ô´:ÍøÒ³½ÌѧÍø dudo

ÍøÒ³ÖÆ×÷WebjxÎÄÕ¼ò½é£º²»Í¬Äں˵ÄÁ½¸öä¯ÀÀÆ÷ÔÚijЩԪËصıíÏÖ¶¼»á´æÔÚ²îÒ죬±ÈÈçËõ½øµÄ´óÐ ¢×ÖÌåÑ¡Ôñ¡¢×Ö·ûÑùʽµÈ¡£Ò²ÐíÒ»¸öºÜƯÁÁµÄCSSÑùʽ±íÔÚÒ»¸öä¯ÀÀÆ÷ÉϱíÏÖÁ¼ºÃ£¬ÔÚÁíÍâÒ»¸öä¯ÀÀÆ÷Éϼ´Ê¹ÊÇûÓÐCSS BugµÄÇé¿öÒ²»á±äµÃ½á¹¹»ìÂÒÆðÀ´£¬ÎÒ¶¼ÊÇä¯ÀÀÆ÷ĬÈÏÑùʽÔÚ×÷¹Ö¡£

²»Í¬ä¯ÀÀÆ÷¶ÔÓÚÏàͬԪËصÄĬÈÏÑùʽ²¢²»Ò»Ö£¬ÕâÒ²ÊÇΪʲôÎÒÃÇÔÚCSSµÄ×ʼҪд * {padding:0;marging:0}£»

²»¹ýÏÖÔÚ˵µÄ¿É²»Ö»ÊÇÕâЩ¡£»ù±¾ÉÏ£¬²»Í¬Äں˵ÄÁ½¸öä¯ÀÀÆ÷ÔÚijЩԪËصıíÏÖ¶¼»á´æÔÚ²îÒ죬±ÈÈçËõ½øµÄ´óС¡¢×ÖÌåÑ¡Ôñ¡¢×Ö·ûÑùʽµÈ¡£Ò²ÐíÒ»¸öºÜƯÁÁµÄCSSÑùʽ±íÔÚÒ»¸öä¯ÀÀÆ÷ÉϱíÏÖÁ¼ºÃ£¬ÔÚÁíÍâÒ»¸öä¯ÀÀÆ÷Éϼ´Ê¹ÊÇûÓÐCSS BugµÄÇé¿öÒ²»á±äµÃ½á¹¹»ìÂÒÆðÀ´£¬ÎÒ¶¼ÊÇä¯ÀÀÆ÷ĬÈÏÑùʽÔÚ×÷¹Ö¡£

Òò´Ë£¬ÎÒÃÇÔÚÉú³ÉCSSÑùʽ¹æÔòµÄʱºò£¬Ò»¸ö±Ø×öµÄ²½Öè¾ÍÊÇÖØÉèä¯ÀÀÆ÷µÄĬÈÏÑùʽ£¬Ò²¾ÍÊǸ²¸Çµôä¯ÀÀÆ÷µÄĬÈÏÑùʽ¡£ºÍʹÓà * {padding:0;margin:0}ÓÐËù²»Í¬£¬²¢²»ÊÇËùÓеÄÔªËض¼´æÔÚpaddingºÍmarginµÄ²îÒ죨ԪËØÁÐ±í¡¢ÓÐÐòÁбíÔÚInternet XplorerºÍFirefoxÖеIJ»Í¬ÊÇÓÉÓÚËüÃǵÄËõ½ø²ÉÓÃÁËmarginËõ½øºÍpaddingËõ½ø£©¡£ÀýÈçÏÂÃæÕâ¶Î´úÂ룺

<h1> Headlines are very important Elements in XHTML</h1> 

Õâ¶Î´úÂëÔÚInternet ExplorerÖÐʹÓõÄ×ÖÌåÊÇTimes New Roman£¬¶øÔÚFirefoxºÍOperaÖÐʹÓõÄÊÇϵͳĬÈÏ×ÖÌå¡£Òò´ËÎÒÃÇҪΪ<h1>ÔÚCSSÖÐÉ趨һ¸öͳһµÄÑùʽ¡£

    µ«ÊÇ£¬Èç¹ûÎÒÃÇÏñʹÓÃ* {padding:0;margin:0}Ò»ÑùȥʹÓÃͨÅä·û“*”À´¼òµ¥µØÉ趨ȫ¾ÖÑùʽ£¬ÄÇôһ¸öºÜÃ÷ÏÔµÄÎÊÌâ¾Í»á³öÏÖ£¬±ÈÈçÏñformÔªËØ¡¢inputÔªËØ¡¢textareaµÈÔÚijЩä¯ÀÀÆ÷ÖлáºöÂÔ¶ÔËüÃǵÄÖØÐÂÉ趨£¬¸üÖØÒªµÄÊÇÕ⽫»áÑÏÖØÆÆ»µÕâЩԪËصÄÍâ¹Û£¬ËùÒÔÄãÓÖ²»µÃ²»È¥ÊÖ¶¯È¥Ò»Ò»ÎªËüÃÇÖØÐÂÉ趨һ¸öpaddingÖµºÍmarginÖµ¡£ËùÒÔÎÒÃÇÓ¦¸Ã·ÅÆú¼òµ¥µØʹÓÓ*”£¬¶øÊÇΪµÚÒ»¸ö´æÔÚ±íÏÖ²»Ò»ÖµÄÔªËؽøÐÐÖØÉ裬Èçbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,preµÈµÈ¡£

    ͬʱ£¬ÔªËصÄĬÈÏÑùʽ¿ÉÄÜ»áÆÆ»µÒ³ÃæµÄÍâ¹Û¡£±ÈÈç<b>ÔªËØ»á°ÑÎÄ×Ö¼Ó´Ö£¬<blockquote>»á´ó¶ÎËõ½ø£¬<em>»áʹÎÄ×ÖÇãбµÈ£¬Èç¹ûÄãÏëÒªÇóÒ³ÃæÎı¾Íâ¹ÛÒ»ÖµĻ°£¬Ò²Ó¦¸ÃÔÚCSSÖаÑÕâЩԪËصÄÍâ¹Û½øÐÐÖØÉ衣ͬʱ£¬ÓÐʱºòÎÒÃÇÒªÇóÕâЩԪËصÄÍâ¹ÛºÍ¸¸ÔªËØÒ»Ñù£¬¿ÉÒÔÖ±½ÓʹÓà inherit´Ó¸¸ÔªËؼ̳м´¿É¡£

    ÖÁÓÚÄÄЩԪËØÓ¦¸Ã±»ÖØÉ裿Yahoo!ÒѾ­ÎªÎÒÃÇ×öÁ˱ȽϳöµÄ×ܽᡣ¸ù¾ÝÑÅ»¢µÄ½¨Ò飬ÄãÐèÒª°ÑÕâЩ¹æÔò·Åµ½Ò»¸öÃûΪReset.cssµÄÎļþÖе¥¶ÀÒýÓã¨ÍƼöÕâÖÖ×ö·¨£©£º

html{color:#000;background:#FFF;}  
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;  
}

ÄãÒª×öµÄ¾ÍÊÇ°ÑÕâЩ¹æÔò¼òµ¥µØ±£´æµ½reset.cssÖУ¬È»ºóÔÚÒ³ÃæÖÐʹÓá£ÔÚÐèÒª¸øÕâЩԪËØÔö¼ÓеÄÑùʽµÄʱºò£¬ºÍÆäËüÔªËصÄÉ趨ûÓÐʲô²»Í¬¡£
×¢Ò⣺ÉÏÃæreset.cssÖÐ input,textarea,select{*font-size:100%;} Ö»ÓÐInternet Explorer¿ÉÒÔÈÏʶ£¬ÕâÑùµÄÉ趨ÊÇΪÁËʹÔÚInternet ExplorerÖпÉÒÔËõ·Å±íµ¥¿Ø¼þ×ÖÌåµÄ´óС¡£¶ø legend{color:#000;} ÊÇÒòΪÔÚInternet ExplorerÖÐlengendÔªËØʹÓÃ×ÖÌåÑÕÉ«ºÍϵͳÓйأ¨ÉõÖÁºÍϵͳ·ç¸ñÓйأ©¡£ÕâÀﻹҪָ³öµÄÊÇ£¬html{color:#000;background:#FFF;} ÕâÌõ¹æÔòËäÊÇϸ½Ú£¬È´ºÜÖØÒª£¬ÒòΪÔÚijЩʱºòËûÖ±½ÓÓ°ÏìÁËÒ³ÃæµÄÕûÌåÍâ¹Û£¬°Ù¶È¾Í´æÔÚÕâÑùµÄÉè¼ÆʧÎó£¨ÑÅ»¢Ã»ËƺõҲûÓиøÕâÒ»Ìõ£¬µ«ÊÇÔÚij¸öʾÀýÖÐËƺõ³öÏÖÁË£©¡£

    ºÍYahoo!Ò»Ñù£¬Eric MeyerÔÚËûµÄÍøÕ¾Ò²¸ø³öÁËÒ»¸öеÄд·¨£º

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
 margin: 0; 
 padding: 0; 
 border: 0; 
 outline: 0; 
 font-weight: inherit; 
 font-style: inherit; 
 font-size: 100%; 
 font-family: inherit; 
 vertical-align: baseline; 

/* remember to define focus styles! */ 
:focus { 
 outline: 0; 

body { 
 line-height: 1; 
 color: black; 
 background: white; 

ol, ul { 
 list-style: none; 

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
 border-collapse: separate; 
 border-spacing: 0; 

caption, th, td { 
 text-align: left; 
 font-weight: normal; 

blockquote:before, blockquote:after, 
q:before, q:after { 
 content: ""; 

blockquote, q { 
 quotes: "" ""; 

ÔÚÎÄÖÐËû»¹Ìáµ½ÁË Internet Explorer Öнâ¾ö inherit µÄÎÊÌ⣨ÎÒÑо¿Ö®ºóÒ²Ïë¼òµ¥Ð´Ò»Ï£©£¬ÖµµÃÑо¿£¨²é¿´Ô­ÎÄ£ºReset Reloaded£©¡£ÆäʵÕâÁ½¸öreset.css²î±ð²¢²»´ó£¬¿ÉÒÔÑ¡ÔñÆäÖÐÖ®Ò»»òÕߺϲ¢Ê¹Óá£

     reset.cssÊÇÿ¸öÒ³Ã涼±ØÐëµÄÑùʽÎļþ£¨»òÕßÄãÒѾ­°ÑËüÄÚÖõ½Ïà¹ØµÄCSSÎļþÖÐÁË£©£¬ÊÇÎÒÃÇʵÏÖ¿çä¯ÀÀÆ÷Éè¼ÆµÄ²»¿ÉȱÉÙµÄÒ»»·¡£

Ô­ÎÄÁ¬½Ó£ºhttp://www.dudo.org/article.asp?id=243

¸ü¶à