¸üÐÂʱ¼ä:2022Äê12ÔÂ09ÈÕ18ʱ00·Ö À´Ô´:ÀÖÓãµç¾º ä¯ÀÀ´ÎÊý:

¶¨ÒåCSSÑùʽʱ£¬¾³£³öÏÖÁ½¸ö»ò¸ü¶àÑùʽ¹æÔòÓ¦ÓÃÔÚÍ¬Ò»ÔªËØÉϵÄÇé¿ö¡£´ËʱCSS¾Í»á¸ù¾ÝÑùʽ¹æÔòµÄÈ¨ÖØ£¬ÓÅÏÈÏÔÊ¾È¨ÖØ×î¸ßµÄÑùʽ¡£CSSÓÅÏȼ¶Ö¸µÄ¾ÍÊÇCSSÑùʽ¹æÔòµÄÈ¨ÖØ¡£ÔÚÍøÒ³ÖÆ×÷ÖУ¬CSSΪÿ¸ö»ù´¡Ñ¡ÔñÆ÷¶¼Ö¸¶¨Á˲»Í¬µÄÈ¨ÖØ£¬·½±ãÎÒÃÇÌí¼ÓÑùʽ´úÂ롣ΪÁËÉîÈëÀí½âCSSÓÅÏȼ¶£¬ÎÒÃÇͨ¹ýÒ»¶ÎʾÀý´úÂë½øÐзÖÎö¡£CSSÑùʽ´úÂëÈçÏ£º
p{ color:red;} /*±êÇ©Ñùʽ*/
.blue{ color:green;} /*classÑùʽ*/
theader{ color:blue;} /*idÑùʽ*/
CSSÑùʽ´úÂë¶ÔÓ¦µÄHTML½á¹¹Îª£º
<p class="blue" id="header">
°ï°ïÎÒ£¬ÎÒµ½µ×ÏÔʾʲôÑÕÉ«?
</p>
ÔÚÉÏÃæµÄʾÀý´úÂëÖУ¬Ê¹Óò»Í¬µÄÑ¡ÔñÆ÷¶Ôͬһ¸öÔªËØÉèÖÃÎı¾ÑÕÉ«£¬Õâʱä¯ÀÀÆ÷»á¸ù¾ÝCSSÑ¡ÔñÆ÷µÄÓÅÏȼ¶¹æÔò½âÎöCSSÑùʽ¡£ÎªÁ˱ãÓÚÅжÏÔªËØµÄÓÅÏȼ¶£¬CSSΪÿһÖÖ»ù´¡Ñ¡ÔñÆ÷¶¼·ÖÅäÁËÒ»¸öÈ¨ÖØ£¬ÎÒÃÇ¿ÉÒÔͨ¹ýÐéÄâÊýÖµµÄ·½Ê½ÎªÕâЩ»ù´¡Ñ¡ÔñÆ÷Æ¥ÅäÈ¨ÖØ¡£¼ÙÉè±êǩѡÔñÆ÷¾ßÓÐÈ¨ÖØÎª1.ÀàÑ¡ÔñÆ÷¾ßÓÐÈ¨ÖØÔòΪ10£¬idÑ¡ÔñÆ÷¾ßÓÐÈ¨ÖØÔòΪl00¡£ÕâÑùidÑ¡ÔñÆ÷“#header”¾Í¾ßÓÐ×î´óµÄÓÅÏȼ¶£¬Òò´ËÎı¾ÏÔʾΪÀ¶É«¡£
¶ÔÓÚÓɶà¸ö»ù´¡Ñ¡ÔñÆ÷¹¹³ÉµÄ¸´ºÏÑ¡ÔñÆ÷(²¢¼¯Ñ¡ÔñÆ÷³ýÍâ)£¬ÆäÈ¨ÖØ¿ÉÒÔÀí½âΪÕâЩ»ù´¡Ñ¡ÔñÆ÷È¨ÖØµÄµþ¼Ó¡£ÀýÈ磬ÏÂÃæµÄCSS´úÂë¡£
p strong{color:black} /*È¨ÖØÎª£º1+1*/
strong.blue{color:green;} /*È¨ÖØÎª£º1+10*/
.father strong{color:yellow} /*È¨ÖØÎª£º10+1*/
p.father strong{color:orange;} /*È¨ÖØÎª£º1+10+1*/
p.father .blue{color:gold;} /*È¨ÖØÎª£º1+10+10*/
theader strong{color:pink;} /*È¨ÖØÎª£º100+1*/
#header strong.blue{color:red;} /*È¨ÖØÎª£º100+1+10*/
¶ÔÓ¦µÄHTML½á¹¹Îª£º
<p class="father" id="header">
<strong class="blue">Îı¾µÄÑÕÉ«</strong>
</p>
Õâʱ£¬CsS´úÂëÖеē#header strong.blue”Ñ¡ÔñÆ÷µÄÈ¨ÖØ×î¸ß£¬Îı¾ÑÕÉ«½«ÏÔʾΪºìÉ«¡£´ËÍ⣬ÔÚ¿¼ÂÇÈ¨ÖØÊ±£¬ÎÒÃÇ»¹ÐèҪעÒâÒ»Ð©ÌØÊâµÄÇé¿ö¡£
(1)¼Ì³ÐÑùʽµÄÈ¨ÖØÎª0
ÔÚǶÌ׽ṹÖС¢h²»¹Ü¸¸ÔªËØÑùʽµÄÈ¨ÖØ¶à´ó£¬±»×ÓÔªËØ¼Ì³Ðʱ£¬ËüµÄÈ¨ÖØ¶¼Îª0£¬Ò²¾ÍÊÇ˵×ÓÔªËØ¶¨ÒåµÄÑùʽ»á¸²¸Ç¼Ì³ÐÀ´µÄÑùʽ¡£ÀýÈ磬ÏÂÃæµÄCSSÑùʽ´úÂë¡£
strong{color:red;}
#header{color:green;}
CSSÑùʽ´úÂë¶ÔÓ¦µÄHTML½á¹¹ÈçÏ£º
<p id="header" class="blue"> <strong>¼Ì³ÐÑùʽ²»Èç×Ô¼º¶¨ÒåµÄÈ¨ÖØ´ó</strong> </p>
ÔÚÉÏÃæµÄ´úÂëÖУ¬ËäÈ»“#header”¾ßÓÐÈ¨ÖØ100£¬µ«±»±êÇ©¼Ì³ÐÊ±È¨ÖØÎª0¡£¶ø“strong”Ñ¡ÔñÆ÷µÄÈ¨ÖØËäÈ»½öΪ1£¬µ«Ëü´óÓڼ̳ÐÑùʽµÄÈ¨ÖØ£¬ËùÒÔÒ³ÃæÖеÄÎı¾ÏÔʾΪºìÉ«¡£
(2)ÐÐÄÚÑùʽÓÅÏÈ
Ó¦ÓÃstyleÊôÐÔµÄÔªËØ£¬ÆäÐÐÄÚÑùʽµÄÈ¨ÖØ·Ç³£¸ß¡£»»ËãΪÊýÖµ£¬ÎÒÃÇ¿ÉÒÔÀí½âΪԶ´óÓÚ100¡£Òò´ËÐÐÄÚÑùʽӵÓбÈÉÏÃæÌáµ½µÄÑ¡ÔñÆ÷¶¼¸ßµÄÓÅÏȼ¶¡£
(3)È¨ÖØÏàͬʱ£¬CSSµÄÓÅÏȼ¶×ñѾͽüÔÔò
Ò²¾ÍÊÇ˵£¬¿¿½üÔªËØµÄÑùʽ¾ßÓÐ×î´óµÄÓÅÏȼ¶£¬»òÕß˵°´ÕÕ´úÂëÅÅÁÐÉÏÏÂ˳Ðò£¬ÅÅÔÚ×îϱߵÄÑùʽÓÅÏȼ¶×î´ó¡£ÀýÈ磬ÏÂÃæÎªÍⲿ¶¨ÒåµÄCSSʾÀý´úÂë¡£
/*CSSÎĵµ,ÎļþÃûΪstyle_red.css*/
#header{color:red;} /*ÍⲿÑùʽ*/
¶ÔÓ¦µÄHTML½á¹¹´úÂëÈçÏ£º
<title>CSSÓÅÏȼ¶</title>
<link rel="stylesheet"href="style_red.css"type="text/css"/> /*ÒýÈëÍⲿ
¶¨ÒåµÄCSS´úÂë*/
<style type="text/css">
#header{color:gray;}
</style>
</head>
<body>
/*ÄÚǶʽÑùʽ*/
<p id="header">È¨ÖØÏàͬʱ£¬¾Í½üÓÅÏÈ</p>
</body>
ÔÚÉÏÃæµÄʾÀý´úÂëÖУ¬µÚ2ÐдúÂëͨ¹ýÍâÁ´Ê½ÒýÈëCSSÑùʽ£¬¸ÃÑùʽÉèÖÃÎı¾ÑùʽÏÔʾΪºìÉ«¡£µÚ3~5ÐдúÂëͨ¹ýÄÚǶʽÒýÈëCSSÑùʽ£¬¸ÃÑùʽÉèÖÃÎı¾ÑùʽÏÔʾΪ»ÒÉ«¡£
ÉÏÃæµÄÒ³Ãæ±»½âÎöºó£¬¶ÎÂäÎı¾½«ÏÔʾΪ»ÒÉ«£¬¼´ÄÚǶʽÑùʽÓÅÏÈ¡£ÕâÊÇÒòΪÄÚǶÑùʽ±ÈÍâÁ´Ê½Ñùʽ¸ü¿¿½üHTML.ÔªËØ¡£Í¬ÑùµÄµÀÀí£¬Èç¹ûͬʱÒýÓÃÁ½¸öÍⲿÑùʽ±í£¬ÔòÅÅÔÚÏÂÃæµÄÑùʽ±í¾ßÓнϴóµÄÓÅÏȼ¶¡£Èç¹û´Ëʱ½«ÄÚǶÑùʽ¸ü¸ÄΪ£º
p{color:gray;} /*ÄÚǶʽÑùʽ*/
´ËʱÍâÁ´Ê½µÄidÑ¡ÔñÆ÷ºÍǶÈëʽµÄ±êǩѡÔñÆ÷È¨ÖØ²»Í¬£¬“#header”µÄÈ¨ÖØ¸ü¸ß£¬ÎÄ×Ö½«ÏÔʾΪÍⲿÑùʽ¶¨ÒåµÄºìÉ«¡£
(4)CSS¶¨Òå“limportant”ÃüÁ»á±»¸³Óè×î´óµÄÓÅÏȼ¶
µ±CSS¶¨ÒåÁË“limportant”ÃüÁîºó£¬½«²»ÔÙ¿¼ÂÇÈ¨ÖØºÍλÖùØÏµ£¬Ê¹ÓÓlimportant”µÄ±êÇ©¶¼¾ßÓÐ×î´óÓÅÏȼ¶¡£ÀýÈ磬ÏÂÃæµÄʾÀý´úÂë¡£
#header{color:red!important;}
Ó¦ÓôËÑùʽµÄ¶ÎÂäÎı¾ÏÔʾΪºìÉ«£¬ÒòΪ“limportant”ÃüÁîµÄÑùʽӵÓÐ×î´óµÄÓÅÏȼ¶¡£ÐèҪעÒâµÄÊÇ£¬“limportant”ÃüÁî±ØÐëλÓÚÊôÐÔÖµºÍ·ÖºÅÖ®¼ä£¬·ñÔòÎÞЧ¡£
¸´ºÏÑ¡ÔñÆ÷µÄÈ¨ÖØÎª×é³ÉËüµÄ»ù´¡Ñ¡ÔñÆ÷È¨ÖØµÄµþ¼Ó£¬µ«ÊÇÕâÖÖµþ¼Ó²¢²»ÊǼòµ¥µÄÊý×ÖÖ®ºÍ¡£ÏÂÃæÍ¨¹ýÒ»¸ö°¸ÀýÀ´¾ßÌå˵Ã÷£¬ÈçÀý1Ëùʾ¡£
Àý1 examplel1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>¸´ºÏÑ¡ÔñÆ÷È¨ÖØµÄµþ¼Ó</title>
<style type="text/css">
.inner{text-decoration:line-through;}/*ÀàÑ¡ÔñÆ÷¶¨Òåɾ³ýÏߣ¬È¨ÖØÎª10*/
div div div div div div div div div div div{text-decoration:underline;}
/*ºó´úÑ¡ÔñÆ÷¶¨ÒåÏ»Ïߣ¬È¨ÖØÎª11¸ö1µÄµþ¼Ó*/
</style>
</head>
<body>
<div>
<div><div><div><div><div><div><div><div><div>
<div class="inner">Îı¾µÄÑùʽ</div>
</div></div></div></div></div></div></div></div></div>
</div>
</body>
</html>
Àý1¹²Ê¹ÓÃÁË11¶Ô<div>±êÇ©£¬ËüÃDzã²ãǶÌס£µÚ15ÐдúÂëÎÒÃǶÔ×îÀï²ãµÄ<div>¶¨ÒåÀàÃû“inner”¡£µÚ7¡¢8ÐдúÂ룬ʹÓÃÀàÑ¡ÔñÆ÷ºÍºó´úÑ¡ÔñÆ÷·Ö±ð¶¨Òå×îÀï²ãdivµÄÑùʽ¡£´Ëʱä¯ÀÀÆ÷ÖÐÎı¾µÄÑùʽµ½µ×ÈçºÎÏÔÊ¾ÄØ?Èç¹û½ö½ö½«»ù´¡Ñ¡ÔñÆ÷µÄÈ¨ÖØÏà¼Ó£¬ºó´úÑ¡ÔñÆ÷(°üº¬11²ãdiv)µÄÈ¨ÖØÎª11£¬´óÓÚÀàÑ¡ÔñÆ÷“.inner”µÄÈ¨ÖØ10£¬Îı¾½«Ìí¼ÓÏ»Ïß¡£
ÔËÐÐÀý1£¬Ð§¹ûÈçÏÂËùʾ¡£

ÔÚÉÏͼÖУ¬Îı¾²¢Ã»ÓÐÏñÔ¤ÆÚµÄÄÇÑùÌí¼ÓÏ»Ïߣ¬¶øÏÔʾÁËÀàÑ¡ÔñÆ÷“.inner”¶¨ÒåµÄɾ³ýÏß¡£¿É¼û£¬ÎÞÂÛÔÚÍâ²ãÌí¼Ó¶àÉÙ¸ö±êÇ©£¬¸´ºÏÑ¡ÔñÆ÷µÄÈ¨ÖØÎÞÂÛΪ¶àÉÙ¸ö<div>±êǩѡÔñÆ÷µÄµþ¼Ó£¬ÆäÈ¨ÖØ¶¼²»»á¸ßÓÚÀàÑ¡ÔñÆ÷¡£Í¬Àí£¬¸´ºÏÑ¡ÔñÆ÷µÄÈ¨ÖØÎÞÂÛΪ¶àÉÙ¸öÀàÑ¡ÔñÆ÷ºÍ±êǩѡÔñÆ÷µÄµþ¼Ó£¬ÆäÈ¨ÖØ¶¼²»»á¸ßÓÚiÑ¡ÔñÆ÷¡£
±±¾©Ð£Çø