w3pop.com :: ÍøÂçѧԺ :: WEBÉè¼Æ×ÛºÏ :: CSSµÄÈýÖÖÑ¡ÔñÆ÷
CSSµÄÈýÖÖÑ¡ÔñÆ÷
½ñÌìÎÒÃÇÌÖÂÛ CSS (Cascading Style Sheet) µÄ»ù´¡. ¸æËßÄãÓÐÈýÖÖ Ñ¡ÔñÆ÷. µ«Ö»½éÉÜÁËÆäÖÐµÄ HTML Ñ¡ÔñÆ÷. ÕâÒ»½ÚÎÒÃǰÑÈýÖÖ¶¼Ïêϸ½éÉܸøÄãHTML Ñ¡ÔñÆ÷¡¢class Ñ¡ÔñÆ÷¡¢ID Ñ¡ÔñÆ÷:
HTML Ñ¡ÔñÆ÷
HTML Ñ¡ÔñÆ÷ ¾ÍÊÇ HTML µÄ tags, ±ÈÈç P, DIV, TD µÈ. ÈçÄãÓà CSS ¶¨ÒåÁËËüÃÇ, ÔÚÕûÒ³ÖÐ, Õâ¸ö Tag µÄÐÔÖʾͰ´ÕÕÄãµÄ¶¨ÒåÀ´ÏÔʾÁË. HTML Ñ¡ÔñÆ÷ µÄÓï·¨ÈçÏ£º
tag {property:value}±ÈÈçÎÒÃÇÏë½Ð H1 µÄÑÕÉ«ÊǺìµÄH1 {color: red}ÕâÀﻹҪ¸æËßÄã CSS µÄÒ»¸öÌØµã, Ëü¿É¶¨ÒåºÃ¼¸¸ö Ñ¡ÔñÆ÷ ÔÚÒ»¸ö rule Àï. ±ÈÈç H1, H2, TD {color: red}Õâ¸ö¶¨Òå¾ÍÄÜÈÃËùÓÐµÄ H1, H2, ºÍ TD µÄÑÕÉ«¶¼ÎªºìÉ«.
Class Ñ¡ÔñÆ÷
Class Ñ¡ÔñÆ÷ ÓÐÁ½ÖÖ, Ò»ÖÖ½ÐÏà¹Ø class Ñ¡ÔñÆ÷£¬Ëü¸úÒ»¸ö HTML µÄ tag ÓйØÏµ¡£ËüµÄÓï·¨ÊÇtag.Classname {property:value}¡£±ÈÈçÎÒÃÇÏë½ÐһЩ¶ø²»ÊÇÈ«²¿ H1 µÄÑÕÉ«ÊǺìµÄ H1.redone {color: red}£¬ÕâÑùÔÚÏÂÃæµÄÓï¾äÖÐ, µÚÒ»¸ö H1 ÊǺìÉ«µÄ, ¶øµÚ¶þ¸ö¾Í²»ÊÇÁË¡£
<H1 class="redone">ºìÉ«µÄÌâÄ¿</H1>
<H1>ÆÕͨµÄÌâÄ¿</H1>
µÚ¶þÖÖÊǶÀÁ¢class Ñ¡ÔñÆ÷¡£Ëü¿É±»ÈκΠHTML±êÇ©ËùÓ¦ÓÃ. ËüµÄÓï·¨ÈçÏ£º
.Classname {property:value}¡£
¼ÙÈçÎÒÃÇÓÐÏÂÃæÕâ¸ö¶¨Ò壺.blueone {color: blue}ÄÇôÎÒÃÇ¿ÉÒÔ°ÑËûÓ¦Óõ½²»Í¬µÄ Tag µ±ÖÐÈ¥. ±ÈÈ磺
<H1 class="blueone">À¶É«µÄÌâÄ¿</H1>
<P class="blueone">À¶É«µÄ¶ÎÂä</P>
ÏÔÈ» class Ñ¡ÔñÆ÷ ¸øÁËÎÒÃǸü¶àµÄ×ÔÓÉ¡£
ID Ñ¡ÔñÆ÷
ID Ñ¡ÔñÆ÷ Æäʵ¸ú¶ÀÁ¢ class Ñ¡ÔñÆ÷ µÄ¹¦ÄÜÒ»Ñù¡£ ¶øÇø±ðÔÚÓÚËüÃǵÄÓï·¨ºÍÓ÷¨²»Í¬, ÒÔ¼°¶ÔÓÚ Javascript ²Ù×ÝHTMLÔªËØÓаïÖú¡£ ËüµÄÓï·¨ÈçÏ£º
#IDname {property:value}
¼ÙÈçÎÒÃÇÓÐÏÂÃæµÄ¶¨Ò壺
#yelowone {color: yellow}
ÎÒÃÇ¿ÉÒÔÔËÓÃÕâ¸ö¶¨Òåµ½ÈκεÄÓÐͬÑù ID Ãû×ÖµÄ tag£¬±ÈÈ磺
<SPAN ID="yellowone">text here</SPAN>
Äã¿ÉÄܾõµÃ¼ÈÈ» ID Ñ¡ÔñÆ÷ ºÍ¶ÀÁ¢ class Ñ¡ÔñÆ÷ ¹¦ÄÜÒ»Ñù, ΪʲôÁ½Õß¶¼´æÔÚÄØ¡£ Èç¹ûÄãÖªµÀÓà CSS-P À´¶¨Î»µÄ»°, Äã¾ÍÃ÷°×ËüÃǵÄÇø±ðÁË. ÓÐ ID µÄ HTML ÔªËØ¿ÉÒÔ±» CSS-PºÍ JavaScript À´²Ù×Ý¡£µ½ÏÖÔÚΪֹ, ÄãÒѾ´ó¸ÅÖªµÀÈçºÎÀ´Ð´ CSS µÄ¶¨ÒåÁË£¬ ÏÂÃæÎå½ÚÎÒÃǽ«»á¸æËßÄãÈçºÎÓà CSS À´²Ù×Ý»òÐ޸ġ£