-
- ÔÎÄ×÷Õߣº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¶¨Òå¡£ÎÒÃÇÀ´¿´ÏÂÃæÕâ¶Î´úÂ룺
Õâ¶Î´úÂëµÄ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
}
/* */
- (a)ÔÚIEÖÐÒþ²ØÒ»¸öCSS¶¨Ò壬Äã¿ÉÒÔʹÓÃ×ÓÑ¡ÔñÆ÷(child selector):
- 2.Ìõ¼þ×¢ÊÍ(conditional comments)µÄ·½·¨
ÁíÍâÒ»ÖÖ·½·¨£¬ÎÒÈÏΪ±ÈCSS¡¡Hacks¸ü¼Ó¾µÃÆð¿¼Ñé¾ÍÊDzÉÓÃ΢ÈíµÄ˽ÓÐÊôÐÔÌõ¼þ×¢ÊÍ(conditional comments)¡£ÓÃÕâ¸ö·½·¨Äã¿ÉÒÔ¸øIEµ¥¶À¶¨ÒåһЩÑùʽ£¬¶ø²»Ó°ÏìÖ÷Ñùʽ±íµÄ¶¨Òå¡£¾ÍÏóÕâÑù£º
Ê®Æß.µ÷ÊÔ¼¼ÇÉ£º²ãÓжà´ó£¿
µ±µ÷ÊÔCSS·¢Éú´íÎó£¬Äã¾ÍÒªÏóÅŰ湤ÈË£¬ÖðÐзÖÎöCSS´úÂë¡£ÎÒͨ³£ÔÚ³öÎÊÌâµÄ²ãÉ϶¨ÒåÒ»¸ö±³¾°ÑÕÉ«£¬ÕâÑù¾ÍÄܺÜÃ÷ÏÔ¿´µ½²ãÕ¼¾Ý¶à´ó¿Õ¼ä¡£ÓÐЩÈ˽¨ÒéÓÃborder£¬Ò»°ãÇé¿öÒ²ÊÇ¿ÉÒԵ쬵«ÎÊÌâÊÇ£¬ÓÐʱºòborder »áÔö¼ÓÔªËØµÄ³ß´ç£¬border-topºÍboeder-bottom»áÆÆ»µ×ÝÏòmarginµÄÖµ£¬ËùÒÔʹÓÃbackground¸ü¼Ó°²È«Ð©¡£
ÁíÍâÒ»¸ö¾³£³öÎÊÌâµÄÊôÐÔÊÇoutline¡£outline¿´ÆðÀ´Ïóboeder£¬µ«²»»áÓ°ÏìÔªËØµÄ³ß´ç»òÕßλÖá£Ö»ÓÐÉÙÊýä¯ÀÀÆ÷Ö§³ÖoutlineÊôÐÔ£¬ÎÒËùÖªµÀµÄÖ»ÓÐSafari¡¢OmniWeb¡¢ºÍOpera¡£
Ê®°Ë.CSS´úÂëÊéдÑùʽ
ÔÚдCSS´úÂëµÄʱºò£¬¶ÔÓÚËõ½ø¡¢¶ÏÐС¢¿Õ¸ñ£¬Ã¿¸öÈËÓÐÿ¸öÈ˵ÄÊéдϰ¹ß¡£ÔÚ¾¹ý²»¶Ïʵ¼ùºó£¬ÎÒ¾ö¶¨²ÉÓÃÏÂÃæÕâÑùµÄÊéдÑùʽ£ºselector1,
selector2 {
property:value;
}
µ±Ê¹ÓÃÁªºÏ¶¨Òåʱ£¬ÎÒͨ³£½«Ã¿¸öÑ¡ÔñÆ÷µ¥¶ÀдһÐУ¬ÕâÑù·½±ãÔÚCSSÎļþÖÐÕÒµ½ËüÃÇ¡£ÔÚ×îºóÒ»¸öÑ¡ÔñÆ÷ºÍ´óÀ¨ºÅ{Ö®¼ä¼ÓÒ»¸ö¿Õ¸ñ£¬Ã¿¸ö¶¨ÒåÒ²µ¥¶ÀдһÐУ¬·ÖºÅÖ±½ÓÔÚÊôÐÔÖµºó£¬²»Òª¼Ó¿Õ¸ñ¡£
ÎÒϰ¹ßÔÚÿ¸öÊôÐÔÖµºóÃæ¶¼¼Ó·ÖºÅ£¬ËäÈ»¹æÔòÉÏÔÊÐí×îºóÒ»¸öÊôÐÔÖµºóÃæ¿ÉÒÔ²»Ð´·ÖºÅ£¬µ«ÊÇÈç¹ûÄãÒª¼ÓÐÂÑùʽʱÈÝÒ×Íü¼Ç²¹ÉϷֺŶø²úÉú´íÎó£¬ËùÒÔ»¹ÊǶ¼¼Ó±È½ÏºÃ¡£
×îºó£¬¹Ø±ÕµÄ´óÀ¨ºÅ}µ¥¶ÀдһÐС£
¿Õ¸ñºÍ»»ÐÐÓÐÖúÓëÔĶÁ¡£