·ç ¸ñ Ò³ °Ñ ÎÒ ÃÇ ´Ó Íø Ò³ µÄ Õ¹ ʾ, ÒÔ ¼° ÔÚ ¹ý È¥ µÄ ¼¸ Äê ÖÐ ¶Ô ¼Ó µ½ HTML µÄ Õ¹ ÏÖ ½á ¹¹ ÉÏ ¹ý ·Ö µØ ¸ø Óè ·¶ Χ ÏÞ ÖÆ µÄ ×´ ̬ ´ø »Ø µ½ ÁË Ò» ¸ö Ò× ¿Ø ×´ ̬. ·ç ¸ñ Ò³ ʹ µÃ ÔÚ ÎÄ ±¾ ÐÐ ÖÐ Ö¸ ¶¨ ¼Ó Èë ¿Õ °× µÄ Êý Á¿, ʹ Óà ÎÄ ×Ö ÑÕ É« ¼° Í´ ¾° É«, ¿Ø ÖÆ ×Ö Ìå ³ß ´ç ºÍ ·ç ¸ñ, ÒÔ ¼° Ö÷ ¹Ü Æä Ëü µÄ ϸ ½Ú ¶¼ ±ä µÃ ÈÝ Ò× Æð À´.
HTML 4.0 Ìá ¹© Ï ÁÐ ¹¦ ÄÜ µÄ Ö§ ³Ö:
ʹ Óà HEAD ÖÐ ¼Ó Èë Ï ÁÐ µÄ Éù Ã÷:
<META http-equiv="Content-Style-Type" content="text/css">ȱ Ê¡ µÄ ·ç ¸ñ Ò³ Óï ÑÔ Ò² ¿É ÒÔ ±» HTTP Òý µ¼ Í· Éè ¶¨. ÉÏ Ãæ µÄ META Éù Ã÷ »ò HTTP Òý µ¼ Í· Ö¸ ¶¨ ÁË È± Ê¡ µÄ ·ç ¸ñ Ò³ Óï ÑÔ, ×î ºó Ò» ¸ö Õ¼ ÓÐ ÓÅ ÏÈ È¨. ÔÚ ´Ë ¼Æ »® ÖÐ HTTP Òý µ¼ Í· ÔÚ ÎÄ µµ ÄÚ²ã·ç¸ñÐÅÏ¢
<P type="text/css" style="font-size: 12pt; color: fuschia">Aren't
style sheets wonderful?
<!ELEMENT STYLE - - CDATA -- style info --> <!ATTLIST STYLE %i18n; -- lang, dir, for use with title -- type CDATA #REQUIRED -- Internet content type for style language -- media CDATA #IMPLIED -- designed for use with these media -- title CDATA #IMPLIED -- advisory title -- >¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
²» Ìá ¹© ·ç ¸ñ Ò³ µÄ Óà »§ ´ú Àí Æ÷, »ò ²» Ìá ¹© ÓÉ STYLE Ôª ËØ Ö¸ ¶¨ µÄ ·ç ¸ñ Ò³ µÄ Óà »§ ´ú Àí Æ÷ ±Ø Ðë Òþ ²Ø STYLE Ôª ËØ µÄ ÄÚ ÈÝ. °Ñ Æä ÖÐ µÄ ÄÚ ÈÝ ×÷ Ϊ ÎÄ µµ ÎÄ ±¾ À´ äÖ È¾ ÊÇ ´í Îó µÄ. ij Щ ·Ç Ò» Ö ÐÔ Óà »§ ´ú Àí Æ÷ ·ç ¸ñ Ò³ Óï ÑÔ Ìá ¹© Òþ²ØÄÚÈÝ µÄ Óï ·¨.
Ò» Щ ·ç ¸ñ Ò³ µÄ ÂÄ ÐÐ ¿É ÒÔ ÔÊ Ðí ÔÚ STYLE Ôª ËØ ÖÐ ÓÐ style ÌØ ÐÔ ÖÐ ¸ü ¶à Ñù µÄ ±ä »¯. Àý Èç, ÔÚ CSS ÖÐ, ¿É ÒÔ ÔÚ STYLE Ôª ËØ ÖÐ Éù Ã÷ µÄ ·¨ Ôò Ϊ:
<HEAD> <STYLE type="text/css"> H1.myclass {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass"> This H1 is affected by our style </H1> <H1> This one is not affected by our style </H1> </BODY>×î ºó, Ϊ ÁË ÏÞ ÖÆ ·ç ¸ñ ЊϢ Ö» Óà ÓÚ µ¥ ¸ö µÄ H1 ʵ Àý, Éè ¶¨id ÌØ ÐÔ:
<HEAD> <STYLE type="text/css"> H1.myid {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass"> This H1 is not affected </H1> <H1 id="myid"> This H1 is affected by style </H1> <H1> This H1 is not affected </H1> </BODY>
<HEAD> <LINK href="doc1-screen.css" rel="stylesheet" type="text/css" media="screen"> <LINK href="doc1-print.css" rel="stylesheet" type="text/css" media="print"> <LINK href="doc1-speech.css" rel="stylesheet" type="text/css" media="speech"> </HEAD>
ʹ Óà href Öµ Ϊ ·ç
¸ñ Ò³ ÎÄ ¼þ µÄ λ ÖÃ. URL.
Éè ¶¨ title ÌØ ÐÔ.
<LINK href="mystyle.css" title="Compact" rel="stylesheet">
°Ñ ¹Ø ¼ü ´Ê "alternate" ¼Ó µ½ rel ÌØ ÐÔ Ê¹ Ö® ³É Ϊ Ò» ¸ö ÂÖ Ìæ ·ç ¸ñ Ò³.
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet">
Cascading ·ç ¸ñ Ò³ Óï ÑÔ Èç CSS ÔÊ Ðí ·ç ¸ñ Ò³ ЊϢ À´ ×Ô
ÓÚ Êý ¸ö ±» »ì ºÏ ÔÚ Ò» Æð µÄ Ô´. È» ¶ø ²¢ ·Ç Ëù ÓÐ µÄ ·ç ¸ñ Ò³ Óï ÑÔ Ìá
¹© cascading. Ϊ ÁË ¶¨ Òå Ò» ¸ö ¼¶ Áª Äã ¿É ÒÔ ¼ò µ¥ µØ Ìá ¹© Ò» ¸ö STYLE Ôª ËØ µÄ ´Î Ðò.
·ç ¸ñ ЊϢ ÒÔ ³ö ÏÖ ÓÚ ÔÚ Ï Ãæ µÄ Àý ³Ì ÖÐ ÎÒ ÃÇ ¶¨ Òå ÁË Á½ ¸ö ÂÖ Ìæ ·ç
¸ñ Ò³ ²¢ Ãü Ãû Ϊ "compact". Èç ¹û Óà »§ Ñ¡ Ôñ "compact" ·ç ¸ñ, Á½ ¸ö ·ç
¸ñ Ò³ ¾ù ±» Ìá ¹©, ¾Í Èç ͬ "common.css" ·ç ¸ñ Ò³, (Òò Ϊ Ëü µÄ
<LINK rel="alternate stylesheet" title="compact" href="small-base.css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css">
<LINK rel=stylesheet href="common.css">
<LINK REL=stylesheet HREF="corporate.css"> <LINK REL=stylesheet HREF="techreport.css"> <STYLE TYPE="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE>
<META http-equiv="Default-Style" content="compact">
Default-Style: "compact"
cascading ½á ¹¹ ÔÚ ´ó Á¿ µÄ ·ç ¸ñ ·¨ Ôò ¾ù Ö± ½Ó Ìá ¹© ¸ø Ò» ¸ö Ôª ËØ µÄ ʱ ºò ±» ʹ ÓÃ. Õâ ¸ö ½á ¹¹ ÔÊ Ðí Óà »§ ´ú Àí Æ÷ ͨ ¹ý Ö¸ ¶¨ À´ ÅÅ ¶¨ ·¨ Ôò ²¢ ÅÐ ¶Ï Ó¦ Óà ÄÄ ¸ö ·¨ Ôò. Èç ¹û û ÓÐ ·¨ Ôò ±» ÕÒ µ½, Ï һ ²½ È¡ ¾ö ÓÚ Õâ ¸ö ·ç ¸ñ Êô ÐÔ ·ñ ¿É ÒÔ ¼Ì ³Ð. ¶Ô ÓÚ Õâ Щ Êô ÐÔ ·ç ¸ñ Ò³ Óï ÑÔ Ìá ¹© ÁË È± Ê¡ Öµ ÒÔ ±¸ ÔÚ ÌØ ¶¨ µÄ Ôª ËØ Ã» ÓÐ Ã÷ È· µÄ ·¨ Ôò ʱ Ö® ÓÃ.
Èç ¹û ÐÔ ÐÔ ¿É ±» ¼Ì ³Ð, Óà »§ ´ú Àí Æ÷ Á¢ ¿Ì ¼ì ²é Ïà ¹Ø Ôª ËØ ÊÇ ·ñ ÓÐ ·¨ Ôò ¿É ÒÔ Ó¦ ÓÃ. Õâ ¸ö ´¦ Àí Ö± µ½ ÕÒ µ½ Ïà ÒË µÄ ·¨ Ôò. Õâ ¸ö ½á ¹¹ ÔÊ Ðí ·ç ¸ñ Ò³ ½ô ÃÜ µØ Ö¸ ¶¨. Àý Èç, Äã ¿É ÒÔ ÔÚ BODY Ôª ËØ µÄ ·¨ Ôò Ϊ Ëù ÓÐ µÄ Ôª ËØ Ö¸ ¶¨ ×Ö Ìå.
<STYLE type="text/css"> <!-- H1 { color: red } P { color: blue} --> </STYLE>
Link: REL=stylesheet HREF="corporate.css"Ïà µ± ÓÚ:
<LINK rel="stylesheet" href="corporate.css">Äã ¿É ÒÔ Ê¹ Óà ¶à ¸ö Link Òý µ¼ Í· À´ Ö¸ ¶¨ ¶à ¸ö ÂÖ Ìæ ·ç ¸ñ, È» ºó ʹ Óà ÔÚ Ï Ãæ µÄ Àý ³Ì ÖÐ, "compact" ±» ȱ Ê¡ ÔË Óà Òò Ϊ ÔÚ Link: rel="stylesheet" title="compact" href="compact.css" Link: rel="alternate stylesheet" title="big print" href="bigprint.css"