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

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

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

Õâ¶Î´úÂëµÄ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 »áÔö¼ÓÔªËØµÄ³ß´ç£¬border-topºÍboeder-bottom»áÆÆ»µ×ÝÏòmarginµÄÖµ£¬ËùÒÔʹÓÃbackground¸ü¼Ó°²È«Ð©¡£

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

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

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

selector2 {

property:value;

}

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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值