CSSµÄÊ®°Ë°ã¼¼ÇÉ

• Ô­ÎÄ×÷ÕߣºRoger Johansson
• ×÷Õß¼ò½é£º×¡ÔÚÈðµä¸çµÂ±¤£¬1994Ä꿪ʼ½Ó´¥ºÍ²ÎÓëwebÉè¼Æ£¬456 Berea StreetÊÇËûµÄסַ£¬Òò´Ë²ÉÓÃÕâ¸öÃû×Ö×÷ΪËûµÄ¸öÈËÖ÷Ò³ÓòÃû
• Ô­Îijö´¦£ºwww.456bereastreet.com
• Ô­ÎÄ·¢±íʱ¼ä£º2005Äê3ÔÂ15ÈÕ
• °¢½Ý˵Ã÷£º´ËÎÄÔ­Ãû"CSS tips and tricks"£¬ÓÐ2ƪ£¬ÎÒ½«ËüÃǺϲ¢·­ÒëÔÚ±¾ÎÄÖС£
• 

  ×î½ü,¾­³£ÓÐÅóÓÑÎÊÎÒһЩ¹¤×÷ÖÐÓöµ½µÄ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 {

  margin:1em 0;

  font-size:1em;

  color:#333;

  }

  .update {

  font-weight:bold;

  color:#600;

  }

  ÕâÁ½¸ö¶¨ÒåÖУ¬class="update"½«±»Ê¹Óã¬ÒòΪclass±Èp¸ü½ü¡£Äã¿ÉÒÔ²éÔÄW3CµÄ¡¶ Calculating a selector¡¯s specificity¡· Á˽â¸ü¶à¡£

  °Ë.¶àÖØclass¶¨Òå

  Ò»¸ö±êÇ©¿ÉÒÔͬʱ¶¨Òå¶à¸öclass¡£ÀýÈ磺ÎÒÃÇÏȶ¨ÒåÁ½¸öÑùʽ£¬µÚÒ»¸öÑùʽ±³¾°Îª#666£»µÚ¶þ¸öÑùʽÓÐ10 pxµÄ±ß¿ò¡£.one{width:200px;background:#666;}

  .two{border:10px solid #F00;}

  ÔÚÒ³Ãæ´úÂëÖУ¬ÎÒÃÇ¿ÉÒÔÕâÑùµ÷ÓÃ

  ÕâÑù×îÖÕµÄÏÔʾЧ¹ûÊÇÕâ¸ödiv¼ÈÓÐ#666µÄ±³¾°£¬Ò²ÓÐ10pxµÄ±ß¿ò¡£Êǵģ¬ÕâÑù×öÊÇ¿ÉÒԵģ¬Äã¿ÉÒÔ³¢ÊÔһϡ£

  ¾Å.ʹÓÃ×ÓÑ¡ÔñÆ÷(descendant selectors)

  CSS³õѧÕß²»ÖªµÀʹÓÃ×ÓÑ¡ÔñÆ÷ÊÇÓ°ÏìËûÃÇЧÂʵÄÔ­ÒòÖ®Ò»¡£×ÓÑ¡ÔñÆ÷¿ÉÒÔ°ïÖúÄã½ÚÔ¼´óÁ¿µÄclass¶¨Òå¡£ÎÒÃÇÀ´¿´ÏÂÃæÕâ¶Î´úÂ룺

  • Item 1
  >
  • Item 1
  • Item 1

  Õâ¶Î´úÂëµÄCSS¶¨ÒåÊÇ£ºdiv#subnav ul { /* Some styling */ }

  div#subnav ul li.subnavitem { /* Some styling */ }

  div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }

  div#subnav ul li.subnavitemselected { /* Some styling */ }

  div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

  Äã¿ÉÒÔÓÃÏÂÃæµÄ·½·¨Ìæ´úÉÏÃæµÄ´úÂë

  • Item 1
  • Item 1
  • Item 1

  Ñùʽ¶¨ÒåÊÇ£º#subnav { /* Some styling */ }

  #subnav li { /* Some styling */ }

  #subnav a { /* Some styling */ }

  #subnav .sel { /* Some styling */ }

  #subnav .sel a { /* Some styling */ }

  ÓÃ×ÓÑ¡ÔñÆ÷¿ÉÒÔʹÄãµÄ´úÂëºÍCSS¸ü¼Ó¼ò½à¡¢¸ü¼ÓÈÝÒ×ÔĶÁ¡£

  Ê®.²»ÐèÒª¸ø±³¾°Í¼Æ¬Â·¾¶¼ÓÒýºÅ

  ΪÁ˽ÚÊ¡×Ö½Ú£¬ÎÒ½¨Òé²»Òª¸ø±³¾°Í¼Æ¬Â·¾¶¼ÓÒýºÅ£¬ÒòΪÒýºÅ²»ÊDZØÐëµÄ¡£ÀýÈ磺background:url("images/***.gif") #333;

  ¿ÉÒÔдΪbackground:url(images/***.gif) #333;

  Èç¹ûÄã¼ÓÁËÒýºÅ£¬·´¶ø»áÒýÆðһЩä¯ÀÀÆ÷µÄ´íÎó¡£

  ʮһ.×éÑ¡ÔñÆ÷(Group selectors)

  µ±Ò»Ð©ÔªËØÀàÐÍ¡¢class»òÕßid¶¼Óй²Í¬µÄһЩÊôÐÔ£¬Äã¾Í¿ÉÒÔʹÓÃ×éÑ¡ÔñÆ÷À´±ÜÃâ¶à´ÎµÄÖظ´¶¨Òå¡£Õâ¿ÉÒÔ½ÚÊ¡²»ÉÙ×Ö½Ú¡£

  ?

  ÀýÈ磺¶¨ÒåËùÓбêÌâµÄ×ÖÌå¡¢ÑÕÉ«ºÍmargin£¬Äã¿ÉÒÔÕâÑùд£ºh1,h2,h3,h4,h5,h6 {

  font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;

  color:#333;

  margin:1em 0;

  }

  Èç¹ûÔÚʹÓÃʱ£¬Óиö±ðÔªËØÐèÒª¶¨Òå¶ÀÁ¢Ñùʽ£¬Äã¿ÉÒÔÔÙ¼ÓÉÏеĶ¨Ò壬¿ÉÒÔ¸²¸ÇÀϵĶ¨Ò壬ÀýÈ磺h1 { font-size:2em; }

  h2 { font-size:1.6em; }

  Ê®¶þ.ÓÃÕýÈ·µÄ˳ÐòÖ¸¶¨Á´½ÓµÄÑùʽ

  µ±ÄãÓÃCSSÀ´¶¨ÒåÁ´½ÓµÄ¶à¸ö״̬Ñùʽʱ£¬Òª×¢ÒâËüÃÇÊéдµÄ˳Ðò£¬ÕýÈ·µÄ˳ÐòÊÇ£º:link :visited :hover :active¡£³éÈ¡µÚÒ»¸ö×ÖĸÊÇ"LVHA"£¬Äã¿ÉÒÔ¼ÇÒä³É"LoVe HAte"(ϲ»¶ÌÖÑá)¡£ÎªÊ²Ã´Õâô¶¨Ò壬¿ÉÒԲο¼Eric MeyerµÄ¡¶Link Specificity¡·¡£

  Èç¹ûÄãµÄÓû§ÐèÒªÓüüÅÌÀ´¿ØÖÆ£¬ÐèÒªÖªµÀµ±Ç°Á´½ÓµÄ½¹µã£¬Ä㻹¿ÉÒÔ¶¨Òå:focusÊôÐÔ¡£:focusÊôÐÔµÄЧ¹ûҲȡ¾öÓëÄãÊéдµÄλÖã¬Èç¹ûÄãÏ£Íû¾Û½¹ÔªËØÏÔʾ:hoverЧ¹û£¬Äã¾Í°Ñ:focusдÔÚ:hoverÇ°Ã棻Èç¹ûÄãÏ£Íû¾Û½¹Ð§¹ûÌæ´ú:hoverЧ¹û£¬Äã¾Í°Ñ:focus·ÅÔÚ:hoverºóÃæ¡£

  Ê®Èý.Çå³ý¸¡¶¯

  Ò»¸ö·Ç³£³£¼ûµÄCSSÎÊÌ⣬¶¨Î»Ê¹Óø¡¶¯µÄʱºò£¬ÏÂÃæµÄ²ã±»¸¡¶¯µÄ²ãËù¸²¸Ç£¬»òÕß²ãÀïǶÌ×µÄ×Ӳ㳬³öÁËÍâ²ãµÄ·¶Î§¡£

  ͨ³£µÄ½â¾ö°ì·¨ÊÇÔÚ¸¡¶¯²ãºóÃæÌí¼ÓÒ»¸ö¶îÍâÔªËØ£¬ÀýÈçÒ»¸ödiv»òÕßÒ»¸öbr£¬²¢ÇÒ¶¨ÒåËüµÄÑùʽΪclear: both¡£Õâ¸ö°ì·¨ÓÐÒ»µãǣǿ£¬ÐÒÔ˵ÄÊÇ»¹ÓÐÒ»¸öºÃ°ì·¨¿ÉÒÔ½â¾ö£¬²Î¿´ÕâƪÎÄÕ¡¶How To Clear Floats Without Structural Markup¡·(×¢£º±¾Õ¾½«¾¡¿ì·­Òë´ËÎÄ)¡£

  ÉÏÃæ2ÖÖ·½·¨¿ÉÒԺܺýâ¾ö¸¡¶¯³¬³öµÄÎÊÌ⣬µ«ÊÇÈç¹ûµ±ÄãÕæµÄÐèÒª¶Ô²ã»òÕß²ãÀïµÄ¶ÔÏó½øÐÐclearµÄʱºòÔõô°ì£¿Ò»ÖÖ¼òµ¥µÄ·½·¨¾ÍÊÇÓÃoverflowÊôÐÔ£¬Õâ¸ö·½·¨×î³õµÄ·¢±íÔÚ¡¶Simple Clearing of Floats¡·£¬ÓÖÔÚ¡¶Clearance¡·ºÍ¡¶Super simple clearing floats¡·Öб»¹ã·ºÌÖÂÛ¡£

  ÉÏÃæÄÇÒ»ÖÖclear·½·¨¸üÊʺÏÄ㣬Ҫ¿´¾ßÌåµÄÇé¿ö£¬ÕâÀï²»ÔÙÕ¹¿ªÂÛÊö¡£ÁíÍâ¹ØÓÚfloatµÄÓ¦Óã¬Ò»Ð©ÓÅÐãµÄÎÄÕÂÒѾ­ËµµÃºÜÇå³þ£¬ÍƼöÄãÔĶÁ£º¡¶Floatutorial¡·¡¢¡¶Containing Floats¡·ºÍ¡¶Float Layouts¡·

  Ê®ËÄ.ºáÏò¾ÓÖÐ(centering)

  ÕâÊÇÒ»¸ö¼òµ¥µÄ¼¼ÇÉ£¬µ«ÊÇÖµµÃÔÙ˵һ±é£¬ÒòΪÎÒ¿´¼ûÌ«¶àµÄÐÂÊÖÎÊÌⶼÊÇÎÊÕâ¸ö£ºCSSÈçºÎºáÏò¾ÓÖУ¿ÄãÐèÒª¶¨ÒåÔªËØµÄ¿í£¬²¢ÇÒ¶¨ÒåºáÏòµÄmargin£¬Èç¹ûÄãµÄ²¼¾Ö°üº¬ÔÚÒ»¸ö²ã(ÈÝÆ÷)ÖУ¬¾ÍÏóÕâÑù£º

  Äã¿ÉÒÔÕâÑù¶¨ÒåʹËüºáÏò¾ÓÖУº#wrap {

  width:760px; /* ÐÞ¸ÄΪÄãµÄ²ãµÄ¿í¶È */

  margin:0 auto;

  }

  µ«ÊÇIE5/Win²»ÄÜÕýÈ·ÏÔʾÕâ¸ö¶¨Ò壬ÎÒÃDzÉÓÃÒ»¸ö·Ç³£ÓÐÓõļ¼ÇÉÀ´½â¾ö£ºÓÃtext-alignÊôÐÔ¡£¾ÍÏóÕâÑù£ºbody {

  text-align:center;

  }

  #wrap {

  width:760px; /* ÐÞ¸ÄΪÄãµÄ²ãµÄ¿í¶È */

  margin:0 auto;

  text-align:left;

  }

  µÚÒ»¸öbodyµÄtext-align:center; ¹æÔò¶¨ÒåIE5/WinÖÐbodyµÄËùÓÐÔªËؾÓÖÐ(ÆäËûä¯ÀÀÆ÷Ö»Êǽ«ÎÄ×Ö¾ÓÖÐ) £¬µÚ¶þ¸ötext-align:left;Êǽ«#warpÖеÄÎÄ×Ö¾Ó×ó¡£

  Ê®Îå.µ¼Èë(Import)ºÍÒþ²ØCSS

  ÒòΪÀÏ°æ±¾ä¯ÀÀÆ÷²»Ö§³ÖCSS£¬Ò»¸öͨ³£µÄ×ö·¨ÊÇʹÓÃ@import¼¼ÇÉÀ´°ÑCSSÒþ²ØÆðÀ´¡£ÀýÈ磺@import url("main.css");

  È»¶ø£¬Õâ¸ö·½·¨¶ÔIE4²»Æð×÷Óã¬ÕâÈÃÎÒºÜÊÇÍ·ÌÛÁËÒ»Õó×Ó¡£ºóÀ´ÎÒÓÃÕâÑùµÄд·¨£º@import "main.css";

  ÕâÑù¾Í¿ÉÒÔÔÚIE4ÖÐÒ²Òþ²ØCSSÁË£¬ºÇºÇ£¬»¹½ÚÊ¡ÁË5¸ö×Ö½ÚÄØ¡£ÏëÁ˽â@importÓï·¨µÄÏêϸ˵Ã÷£¬¿ÉÒÔ¿´ÕâÀcentricle¡¯s css filter chart¡·

  Ê®Áù.Õë¶ÔIEµÄÓÅ»¯

  ÓÐЩʱºò£¬ÄãÐèÒª¶ÔIEä¯ÀÀÆ÷µÄbug¶¨ÒåһЩÌرðµÄ¹æÔò£¬ÕâÀïÓÐÌ«¶àµÄCSS¼¼ÇÉ(hacks)£¬ÎÒֻʹÓÃÆäÖеÄÁ½ÖÖ·½·¨£¬²»¹Ü΢ÈíÔÚ¼´½«·¢²¼µÄIE7 beta°æÀïÊÇ·ñ¸üºÃµÄÖ§³ÖCSS£¬ÕâÁ½ÖÖ·½·¨¶¼ÊÇ×ȫµÄ¡£

  • 1.×¢Ê͵ķ½·¨
    • (a)ÔÚIEÖÐÒþ²ØÒ»¸öCSS¶¨Ò壬Äã¿ÉÒÔʹÓÃ×ÓÑ¡ÔñÆ÷(child selector):

      html>body p {

      /* ¶¨ÒåÄÚÈÝ */

      }

    • (b)ÏÂÃæÕâ¸öд·¨Ö»ÓÐIEä¯ÀÀÆ÷¿ÉÒÔÀí½â(¶ÔÆäËûä¯ÀÀÆ÷¶¼Òþ²Ø)

      * html p {

      /* declarations */

      }

    • (c)»¹ÓÐЩʱºò£¬ÄãÏ£ÍûIE/WinÓÐЧ¶øIE/MacÒþ²Ø£¬Äã¿ÉÒÔʹÓÃ"·´Ð±Ïß"¼¼ÇÉ£º

      /* \*/

      * html p {

      declarations

      }

      /* */

  • 2.Ìõ¼þ×¢ÊÍ(conditional comments)µÄ·½·¨

    ÁíÍâÒ»ÖÖ·½·¨£¬ÎÒÈÏΪ±ÈCSS¡¡Hacks¸ü¼Ó¾­µÃÆð¿¼Ñé¾ÍÊDzÉÓÃ΢ÈíµÄ˽ÓÐÊôÐÔÌõ¼þ×¢ÊÍ(conditional comments)¡£ÓÃÕâ¸ö·½·¨Äã¿ÉÒÔ¸øIEµ¥¶À¶¨ÒåһЩÑùʽ£¬¶ø²»Ó°ÏìÖ÷Ñùʽ±íµÄ¶¨Òå¡£¾ÍÏóÕâÑù£º<!---->

  Ê®Æß.µ÷ÊÔ¼¼ÇÉ£º²ãÓжà´ó£¿

  µ±µ÷ÊÔCSS·¢Éú´íÎó£¬Äã¾ÍÒªÏóÅŰ湤ÈË£¬ÖðÐзÖÎöCSS´úÂë¡£ÎÒͨ³£ÔÚ³öÎÊÌâµÄ²ãÉ϶¨ÒåÒ»¸ö±³¾°ÑÕÉ«£¬ÕâÑù¾ÍÄܺÜÃ÷ÏÔ¿´µ½²ãÕ¼¾Ý¶à´ó¿Õ¼ä¡£ÓÐЩÈ˽¨ÒéÓÃborder£¬Ò»°ãÇé¿öÒ²ÊÇ¿ÉÒԵģ¬µ«ÎÊÌâÊÇ£¬ÓÐʱºòborder »áÔö¼ÓÔªËصijߴ磬border-topºÍboeder-bottom»áÆÆ»µ×ÝÏòmarginµÄÖµ£¬ËùÒÔʹÓÃbackground¸ü¼Ó°²È«Ð©¡£

  ÁíÍâÒ»¸ö¾­³£³öÎÊÌâµÄÊôÐÔÊÇoutline¡£outline¿´ÆðÀ´Ïóboeder£¬µ«²»»áÓ°ÏìÔªËصijߴç»òÕßλÖá£Ö»ÓÐÉÙÊýä¯ÀÀÆ÷Ö§³ÖoutlineÊôÐÔ£¬ÎÒËùÖªµÀµÄÖ»ÓÐSafari¡¢OmniWeb¡¢ºÍOpera¡£

  Ê®°Ë.CSS´úÂëÊéдÑùʽ

  ÔÚдCSS´úÂëµÄʱºò£¬¶ÔÓÚËõ½ø¡¢¶ÏÐС¢¿Õ¸ñ£¬Ã¿¸öÈËÓÐÿ¸öÈ˵ÄÊéдϰ¹ß¡£ÔÚ¾­¹ý²»¶Ïʵ¼ùºó£¬ÎÒ¾ö¶¨²ÉÓÃÏÂÃæÕâÑùµÄÊéдÑùʽ£ºselector1,

  selector2 {

  property:value;

  }

  µ±Ê¹ÓÃÁªºÏ¶¨Òåʱ£¬ÎÒͨ³£½«Ã¿¸öÑ¡ÔñÆ÷µ¥¶ÀдһÐУ¬ÕâÑù·½±ãÔÚCSSÎļþÖÐÕÒµ½ËüÃÇ¡£ÔÚ×îºóÒ»¸öÑ¡ÔñÆ÷ºÍ´óÀ¨ºÅ{Ö®¼ä¼ÓÒ»¸ö¿Õ¸ñ£¬Ã¿¸ö¶¨ÒåÒ²µ¥¶ÀдһÐУ¬·ÖºÅÖ±½ÓÔÚÊôÐÔÖµºó£¬²»Òª¼Ó¿Õ¸ñ¡£

  ÎÒÏ°¹ßÔÚÿ¸öÊôÐÔÖµºóÃ涼¼Ó·ÖºÅ£¬ËäÈ»¹æÔòÉÏÔÊÐí×îºóÒ»¸öÊôÐÔÖµºóÃæ¿ÉÒÔ²»Ð´·ÖºÅ£¬µ«ÊÇÈç¹ûÄãÒª¼ÓÐÂÑùʽʱÈÝÒ×Íü¼Ç²¹ÉϷֺŶø²úÉú´íÎó£¬ËùÒÔ»¹ÊǶ¼¼Ó±È½ÏºÃ¡£

  ×îºó£¬¹Ø±ÕµÄ´óÀ¨ºÅ}µ¥¶ÀдһÐС£

  ¿Õ¸ñºÍ»»ÐÐÓÐÖúÓëÔĶÁ¡£