·ç¸ñÒ³

Ŀ¼
  1. ÔÚ HTML ÖмÓÈë·ç¸ñ
    1. É趨·ç¸ñÒ³µÄȱʡÓïÑÔ
    2. ÐÐÄÚ·ç¸ñÐÅÏ¢
    3. Í··ç¸ñÐÅÏ¢: STYLE ÔªËØ
    4. Íⲿ·ç¸ñÒ³
    5. É趨ȱʡÃüÃû·ç¸ñ
  2. ¼Ì³ÐºÍÑÓÐø
  3. ¶Ô·ÇÒ»ÖÂÐÔÓû§´úÀíÆ÷Òþ²Ø·ç¸ñÔªËصÄÄÚÈÝ
  4. ͨ¹ýHTTPÍ·Ö¸¶¨·ç¸ñ
·ç ¸ñ Ò³ ÊÇ Íø Ò³ Éè ¼Æ Õß Èç ºÎ ¹¤ ×÷ ÖÐ µÄ Ò» ¸ö Ö÷ Òª µÄ Í» ÆÆ, Ëü À© Õ¹ ÁË Ëû ÃÇ ¸Ä Á¼ Ëû ÃÇ Ò³ Ãæ µÄ ÄÜ Á¦. Web ±» ¹¹ Ïë ÓÚ ¿Æ ¼¼ µÄ »· ¾³ ÖÐ, Óà »§ ¹Ø ÐÄ µÄ ÊÇ Ëü µÄ ÎÄ µµ µÄ ÄÚ ÈÝ È» ºó ÊÇ Ëü µÄ Õ¹ ÏÖ. ×Ô ´Ó ÈË ÃÇ ÔÚ ¿í ¹ã µÄ ÈË Éú µÀ · ÉÏ ·¢ ÏÖ ÁË Web, HTML µÄ ÏÞ ÖÆ ³É Ϊ µç ÄÔ ¼Ì Ðø ÊÜ µ½ ´ì ÕÛ µÄ ¸ù Ô´. Õâ Щ ×÷ Õß Ôø ¾­ ¶Ô ÓÚ Ö½ ÉÏ Ì¸ ±ø (Òë Õß: ±¾ À´ ÊÇ Ö¸ ÔÚ Ö½ ½é ÖÊ ÉÏ) ÓÐ ³ä ·Ö µÄ ¿Ø ÖÆ È¨. Ëû ÃÇ Ñ§ Ï° Èç ºÎ ÔÚ HTML Ìå ²Ã µÄ ÏÞ ÖÆ ÉÏ ´ò ²Á ±ß Çò. Õâ ¸ö Òâ ͼ ÊÇ ºÃ µÄ - Ϊ ÁË Ìá ¸ß Íø Ò³ µÄ Õ¹ ÏÖ Ð§ ¹û - µ« ¶Ô ÓÚ Èç ´Ë ×ö µÄ ¼¼ Êõ È´ ²» ÈÝ ÀÖ ¹Û. Õâ Щ ¼¼ Êõ ÔÚ Ò» ²¿ ·Ö ÈË, Ò» ²¿ ·Ö ʱ ¼ä Ãæ Ç° ¹¤ ×÷, µ« ʼ ÖÕ Ã» ÓРΪ Ëù ÓÐ µÄ ÈË, Ëù ÓÐ µÄ ʱ ¼ä, Ëü ÃÇ °ü À¨: Õâ Щ ¼¼ Êõ ·Ç ³£ µØ Ìá ¸ß ÁË Íø Ò³ µÄ ¸´ ÔÓ ³Ì ¶È, Óë ´í ×Û ¸´ ÔÓ µÄ ÎÊ Ìâ Ëæ Ö® ¶ø À´ µÄ ÊÇ ÓÐ ÏÞ µÄ ÊÊ Ó¦ ÐÔ, ²¢ ÇÒ Ê¹ ÓÐ ²Ð ¼² µ¯ ÐÔ ÏÞ Èë Í´ ¿à.

·ç ¸ñ Ò³ °Ñ ÎÒ ÃÇ ´Ó Íø Ò³ µÄ Õ¹ ʾ, ÒÔ ¼° ÔÚ ¹ý È¥ µÄ ¼¸ Äê ÖÐ ¶Ô ¼Ó µ½ HTML µÄ Õ¹ ÏÖ ½á ¹¹ ÉÏ ¹ý ·Ö µØ ¸ø Óè ·¶ Χ ÏÞ ÖÆ µÄ ×´ ̬ ´ø »Ø µ½ ÁË Ò» ¸ö Ò× ¿Ø ×´ ̬. ·ç ¸ñ Ò³ ʹ  µÃ ÔÚ ÎÄ ±¾ ÐÐ ÖÐ Ö¸ ¶¨ ¼Ó Èë ¿Õ °× µÄ Êý Á¿, ʹ Óà ÎÄ ×Ö ÑÕ É« ¼° Í´ ¾° É«, ¿Ø ÖÆ ×Ö Ìå ³ß ´ç ºÍ ·ç ¸ñ, ÒÔ ¼° Ö÷ ¹Ü Æä Ëü µÄ ϸ ½Ú ¶¼ ±ä µÃ ÈÝ Ò× Æð À´.

HTML 4.0 Ìá ¹© Ï ÁÐ ¹¦ ÄÜ µÄ Ö§ ³Ö:

Áé»îµÄ·ç¸ñÐÅÏ¢´æ·Å
°Ñ ·ç ¸ñ Ò³ ·Å ÔÚ ·Ö ¿ª µÄ ÎÄ  ¸ñ ÖРʹ µÃ Ëü ÃÇ ÈÝ Ò× ÔÙ ´Î ʹ ÓÃ. ÓРʱ ¶Ô ÓÚ ÔÚ Ëü ÃÇ Ìá ¹© µÄ ÎÄ µµ, ÒÔ ¼° ÔÚ ÎÄ µµ µÄ ¿ª ʼ ʱ ±à ×é, ¶Ô ¹á ´© ÎÄ µµ Ö÷ ¸É µÄ Ôª ËØ µÄ ÌØ ÐÔ °ü º¬ äÖ È¾ Ö¸ µ¼ ÊÇ ÓÐ Óà µÄ. Ϊ ÁË Ê¹ Ëü ÔÚ ½Ú µã µÄ »ù ´¡ ÉÏ ¸ü ÈÝ Ò× ¹Ü Àí, Õâ ·Ý Ëµ Ã÷ Êé  Ãè Êö Èç ºÎ Ê¹ Óà HTTP Òý µ¼ Í· À´ Éè ¶¨ ±» Ìá ¹© ¸ø ÎÄ µµ µÄ ·ç ¸ñ Ò³.
¶ÀÁ¢µØÖ¸¶¨·ç¸ñÒ³ÓïÑÔ
Õâ ·Ý Ëµ Ã÷ Êé  Ã» °Ñ HTML Êø ¸¿ ÓÚ ÈÎ ºÎ Ò» ¸ö ÌØ ¶¨ µÄ ·ç ¸ñ Ò³ Óï ÑÔ. Õâ ¾Í ÔÊ Ðí ÁË Ò» ¸ö ·¶ Χ µÄ ´Ë Àà Óï ÑÔ ¿É ±» ʹ ÓÃ, Àý Èç ¶à Êý Óà »§ ʹ Óà µÄ ¼ò µ¥ µÄ ÐΠʽ ºÍ ÉÙ Êý ÓÐ ¸ß ¼¶ ÌØ Êâ Ðè Òª µÄ Óà »§ ʹ Óà µÄ ¸´ ÔÓ µÄ Àà ÐÍ. Ï Ãæ µÄ Àý ³Ì ¾ù ʹ Óà CSS (Cascading Style Sheets) Óï ÑÔ[CSS1], µ« Æä Ëü µÄ ·ç ¸ñ Ò³ Óï ÑÔ Ò² ÊÇ ¿É Óà µÄ..
¼¶Áª·ç¸ñÒ³
Õâ ÊÇ ÓÉ Ä³ Щ ·ç ¸ñ Ò³ Óï ÑÔ Èç CSS Ìá ¹© µÄ ÄÜ Á¦ ÔÊ Ðí ·ç ¸ñ Ò³ ЊϢ À´ ×Ô ÓÚ Êý ¸ö »ì ºÏ µÄ Ô´. Àý Èç, ×é Ö¯ ·ç ¸ñ Ö¸ µ¼ ·½ Õë, Ò» ×é ·ç ¸ñ µÄ ¹² ͬ µÄ ·ç ¸ñ ±ê ×¼, Ö¸ ¶¨ µ¥ ¸ö ÎÄ µµ µÄ ·ç ¸ñ. ͨ ¹ý °Ñ Õâ Щ ÐŠϢ µ¥ ¶À ´¢ ´æ, ·ç ¸ñ Ò³ ¿É ÒÔ ±» ÖØ ¸´ ʹ ÓÃ, ʹ µÃ ´´ ×÷ ¼ò µ¥ »¯ ¶ø ÇÒ ¿É ÒÔ Ê¹ Íø Âç »º ´æ ¸ü ÓРЧ. ¼¶ Áª ¶¨ Òå ÁË Ò» ¸ö ·ç ¸ñ Ò³ µÄ ÅÅ Ðò ÁÐ ÔÚ Æä ÖÐ ºó À´ µÄ ½Ï ÒÔ Ç° µÄ ¹æ Ôò ÓÐ ¸ü ¸ß µÄ ÓÅ ÏÈ È¨. ²¢ ·Ç Ëù ÓÐ µÄ ·ç ¸ñ Ò³ Óï ÑÔ Ìá ¹© ¼¶ Áª.
ýÌå´ÓÊô
HTML ÔÊ Ðí Äã Óà һ ÖÖ Ã½ Ìå ÎÞ ¹Ø µÄ ·½ ·¨ À´ Ö¸ ¶¨ ÎÄ µµ. Õâ ¾Í Ê¹ µÃ ÈË ÃÇ ¿É ÒÔ Óà ¹ã ·º µÄ ²» ͬ µÄ Éè ±¸ ºÍ ý Ìå À´ ´« ËÍ Íø Ò³, Àý Èç ÊÓ ´° ϵ ͳ, Âó ½ð Ëþ ºÍ X11 µÄ ͼ Ïñ ÏÔ Ê¾ Æ÷, µç ÊÓ µÄ ת »» ºÐ (set-top boxes), ÌØ Êâ µÄ ¿É ÒÆ ¶¯ µç »° ºÍ ¸ö ÈË Êä Èë Éè ±¸, Óï Òô ä¯ ÀÀ Æ÷ ÒÔ ¼° ä ÈË Óà µÄ µã Õó Éè ±¸.
Óë Ö® Ïà ·´ µÄ, ·ç ¸ñ Ò³ Ìá ¹© Ö¸ ¶¨ ý Ìå ºÍ Ã½ Ìå ×é. Ò» ¸ö ¹Ê Òâ Óà ×÷ ÆÁ Ä» µÄ ·ç ¸ñ Ò³, Ó¦ ¸Ã ¿É ÊÊ Óà ÓÚ ´ò Ó¡, µ« ¶Ô ÓÚ Óï Òô ä¯ ÀÀ Æ÷ Ôò û ÓÐ Óà ´¦. Õâ ·Ý Ëµ Ã÷ Êé ÔÊ Ðí Äã ÔÚ ·ç ¸ñ Ò³ ¶¨ Òå ¹ã ·º µÄ ý Ìå ÖÖ Àà. Õâ ÔÊ Ðí Óà »§ ´ú Àí Æ÷ À´ ±Ü Ãâ È¡ µÃ ²» ÊÊ µ± µÄ ·ç ¸ñ Ò³. ·ç ¸ñ Ò³ Óï ÑÔ ¿É ÒÔ ÔÚ Í¬ Ò» ·ç ¸ñ Ò³ ÖÐ °ü º¬ ý Ìå ÒÀ Àµ ÐÔ µÄ Ãè Êö.
½»»¥·ç¸ñ
×÷ Õß ¿É ÒÔ Ï£ Íû Ìá ¹© ¸ø ¶Á Õß Êý ¸ö ÔÄ ¶Á ÎÄ ±¾ µÄ ½» »¥ ·ç ¸ñ. Àý Èç, Ò» ¸ö ʹ Óà С ×Ö Ìå µÄ ½ô ´Õ °æ ±¾, Ò» ¸ö ʹ Óà ´ó ×Ö Ìå À´ Ôö ¼Ó Ò× ¶Á Ð﵀ ·ç ¸ñ. Õâ ·Ý Ëµ Ã÷ Êé ÔÊ Ðí Äã Ö¸ ¶¨ Õâ Ñù µÄ ½» »¥, °ü À¨ Ò» ¸ö ȱ Ê¡ µÄ ·ç ¸ñ. Óà »§ Ó¦ ¸Ã ±» ¸³ ÓÚ ÔÚ Õâ Щ ·ç ¸ñ ÖÐ Ñ¡ Ôñ »ò ¸É ´à ¹Ø ±Õ ·ç ¸ñ Ò³ µÄ »ú »á.
×¢ Òâ: ÔÚ Õâ ·Ý ÎÄ µµ µÄ HTML ÎÄ µµ ¿É ÒÔ Ö± ½Ó °ü º¬ ·ç ¸ñ Ò³ ·¨ Ôò Ò² ¿É ÒÔ µ÷ Èë ·ç ¸ñ Ò³.HTML ¿É ÒÔ Ê¹ Óà ÈÎ ºÎ ·ç ¸ñ Ò³ Óï ÑÔ. Ò» ¸ö ¼ò µ¥ µÄ ·ç ¸ñ Ò³ Óï ÑÔ ÒÑ ¾­ ×ã ¹» Âú ×ã ´ó ¶à Êý Óà »§ µÄ Ðè Çó, µ« ¶à ÖÖ Óï ÑÔ ¿É ÒÔ ¸ü ºÃ µÄ ÊÊ Ó¦ ¸ß ¼¶ µÄ ÌØ Êâ Ðè Òª. HTML ²» ÒÀ Àµ ÓÚ Ä³ Ò» ÖÖ Ö¸ ¶¨ µÄ ·ç ¸ñ Ò³ Óï ÑÔ. È» ¶ø, ¸ù ¾Ý Õâ ·Ý ÎÄ µµ µÄ Ä¿ µÄ, ÎÒ ÃÇ ½« ½« Ìá ³ö Ò» Щ Cascading ·ç ¸ñ Ò³ µÄ ¾Ù Àý ˵ Ã÷ (É趨ȱʡµÄ·ç¸ñÒ³ÓïÑÔ ·ç ¸ñ ·¨ Ôò µÄ Óï ·¨ ÊÇ Êô ÓÚ ·ç ¸ñ Ò³ µÄ, ¶ø ²» ÊÇ HTML µÄ. ÓÉ  ÓÚ Ìá ¹© ·ç ¸ñ Ò³ µÄ Óà »§ ´ú Àí Æ÷ ±Ø Ðë ÆÊ Îö Õâ Щ ·¨ Ôò, Óà »§ ±Ø Ðë Éù Ã÷ ÄÄ ¸ö ·ç ¸ñ Ò³ Óï ÑÔ ±» ʹ ÓÃ.

ʹ Óà HEAD ÖÐ ¼Ó Èë Ï ÁÐ µÄ Éù Ã÷:

<META http-equiv="Content-Style-Type" content="text/css">
ȱ Ê¡ µÄ ·ç ¸ñ Ò³ Óï ÑÔ Ò² ¿É ÒÔ ±» HTTP Òý µ¼ Í· Éè ¶¨. ÉÏ Ãæ µÄ META Éù Ã÷ »ò HTTP Òý µ¼ Í· Ö¸ ¶¨ ÁË È± Ê¡ µÄ ·ç ¸ñ Ò³ Óï ÑÔ, ×î ºó Ò» ¸ö Õ¼ ÓÐ ÓÅ ÏÈ È¨. ÔÚ ´Ë ¼Æ »® ÖÐ HTTP Òý µ¼ Í· ÔÚ ÎÄ µµ ÄÚ²ã·ç¸ñÐÅÏ¢
ÌØ ÐÔ ¶¨ Òå
style = cdata
Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË µ± Ç° Ôª ËØ µÄ ·ç ¸ñ ЊϢ.
style ÌØ ÐÔ Ö¸ ¶¨ Ò» ¸ö µ¥ ´¿ Ôª ËØ µÄ ·ç ¸ñ ЊϢ. ·ç ¸ñ ЊϢ ͨ ¹ý ʹ Óà ȱʡ·ç¸ñÒ³ÓïÑÔ À´ Ö¸ ¶¨.
Õâ ¸ö Àý ³Ì Ö¸ ¶¨ ÁË Ò» ¸ö ÌØ Ê⠶ΠÂä µÄ ÎÄ ×Ö µÄ ÑÕ É« ºÍ ×Ö Ìå ´ó С ÐŠϢ.

<P type="text/css" style="font-size: 12pt; color: fuschia">Aren't style sheets wonderful?
 

×¢ Òâ CSS µÄ Éù Ã÷ Óï ·¨: name : value. Êô ÐÔ ¶¨ Òå ÓÉ ·Ö ºÅ ·Ö ÁÐ.
style ÌØ ÐÔ ÔÚ Äã ´ò Ëã Ϊ Ò» ¸ö µ¥ ¶À HTML Ôª ËØ Ìá Ò» ¸ö ÌØ ¶¨ µÄ ·ç ¸ñ ʱ ÊÇ ÊÊ µ± µÄ. Èç ¹û Õâ ¸ö ·ç ¸ñ ½« ±» Êý ¸ö Ôª ËØ ÖØ ¸´ ʹ ÓÃ, Äã Ó¦ ¸Ã ¿¼ ÂÇ Ê¹ Óà STYLE Ôª ËØ. ¸ù ¾Ý Æä »ù ±¾ µÄ Áé »î ÐÔ, ¿É ÒÔ °Ñ ·ç ¸ñ ·Å ÔÚ Ò» ¸ö µ¥ ¶À µÄ ·ç ¸ñ Ò³ ÖÐ.

Òýµ¼·ç¸ñÐÅÏ¢: STYLE ÔªËØ

<!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 Ôª ËØ ÔÊ Ðí ×÷ Õß ÔÚ ÎÄ µµ Òý µ¼ ÖÐ ·Å Öà ·ç ¸ñ Ò³ ·¨ Ôò. HTML ÔÊ Ðí ÈÎ ºÎ ÔÚ ÎÄ µµ µÄ STYLE Ôª ËØ.

²» Ìá ¹© ·ç ¸ñ Ò³ µÄ Óà »§ ´ú Àí Æ÷, »ò ²» Ìá ¹© ÓÉ STYLE Ôª ËØ Ö¸ ¶¨ µÄ ·ç ¸ñ Ò³ µÄ Óà »§ ´ú Àí Æ÷ ±Ø Ðë Òþ ²Ø STYLE Ôª ËØ µÄ ÄÚ ÈÝ. °Ñ Æä ÖÐ µÄ ÄÚ ÈÝ ×÷ Ϊ ÎÄ µµ ÎÄ ±¾ À´ äÖ È¾ ÊÇ ´í Îó µÄ. ij Щ ·Ç Ò» Ö ÐÔ Óà »§ ´ú Àí Æ÷ ·ç ¸ñ Ò³ Óï ÑÔ Ìá ¹© Òþ²ØÄÚÈÝ µÄ Óï ·¨.

Ò» Щ ·ç ¸ñ Ò³ µÄ ÂÄ ÐÐ ¿É ÒÔ ÔÊ Ðí ÔÚ STYLE Ôª ËØ ÖÐ ÓÐ style ÌØ ÐÔ ÖÐ ¸ü ¶à Ñù µÄ ±ä »¯. Àý Èç, ÔÚ CSS ÖÐ, ¿É ÒÔ ÔÚ STYLE Ôª ËØ ÖÐ Éù Ã÷ µÄ ·¨ Ôò Ϊ:

  • Ëù ÓÐ Ã÷ È· µÄ HTML ʵ Àý (Èç: Ëù ÓÐ µÄ H1 Ôª ËØ, µÈ µÈ)
  • Ëù ÓÐ Êô ÓÚ Ò» ¸ö Ã÷ È· µÄ Àà µÄ Ëù ÓÐ HTML Ôª ËØ Êµ Àý  (¾Í ÊÇ Ëµ ÄÇ ¸ö µÄ id ÌØ ¶¨ ±» Éè ÁË Ð© Öµ).
·ç ¸ñ ·¨ Ôò µÄ ÓÅ ÏÈ ºÍ ¼Ì ³Ð ¹æ Ôò ¸ù ¾Ý ·ç ¸ñ Ò³ Óï ÑÔ.
Ï Ãæ µÄ CSS STYLE Éù Ã÷ ÔÚ ÎÄ µµ µÄ ÿ ¸ö    H1 {border-width: 1; border: solid; text-align: center}  </STYLE> </HEAD> Ϊ ÁË Ö¸ ¶¨ Õâ ¸ö ·ç ¸ñ ЊϢ Ö» Ìá ¹© ¸ø ij ¸ö ÌØ Êâ Àà µÄ H1 Ôª ËØ, ÎÒ ÃÇ Èç Ï ÐÞ Õû:
<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>
Ëä È» ·ç ¸ñ Ò³ ЊϢ ¿É Éè ¶¨ ¸ø ¼¸ ºõ Ëù ÓÐ µÄ HTML Ôª ËØ, ÓÐ Á½ ¸ö Ôª ËØ ÓÐ Æä ÌØ Êâ µÄ Óà ´¦ Òò Ϊ Ëü ÃÇ Ã» ÓÐ ÈÎ ºÎ Ô¤ ¶¨ µÄ µÄ ³Â Êö. Òò Ϊ SPAN Ôª ËØ Ö» ¶¨ Òå ½á ¹¹, µ± Ëü ºÍ ·ç ¸ñ Ò³ °ó ¶¨ µÄ ʱ ºò, ÔÊ Ðí Óà »§ ÎÞ ÏÞ µØ À© Õ¹ HTML.

ýÌå¸ñʽ

HTML ÔÊ Ðí ×÷ Õß Éè ¼Æ ²» ÒÀ Àµ ×÷ ºÎ Ö¸ ¶¨ Õ¹ ʾ ý Ìå µÄ ÎÄ µµ. Òò ´Ë, Óà »§ ¿É ÒÔ ÔÚ ¹ã ·º µÄ ²» ͬ µÄ Óà »§ ´ú Àí Æ÷ ÉÏ ä¯ ÀÀ Web: ¸ö ÈË µç ÄÔ ¼° ¹¤ ×÷ Õ¾ µÄ ͼ Ïñ ÏÔ Ê¾ Æ÷, µç ÊÓ µÄ ת »» ºÐ (set-top boxes), ÌØ Êâ µÄ ¿É ÒÆ ¶¯ µç »° ºÍ ¸ö ÈË Êä Èë Éè ±¸, Óï Òô ä¯ ÁÙ Æ÷ ÒÔ ¼° ä ÈË µÄ µã Õó ¸Ð Öª Éè ±¸.
 
media ÌØ ÐÔ Ö¸ ¶¨ ÁË Ï£ Íû µÄ ·ç ¸ñ ·¨ Ôò µÄ Êä ³ö ; ¾¶. ͨ ¹ý Éè ¶¨ media, ×÷ Õß ¿É ÒÔ Èà Óà »§ ´ú Àí Æ÷ ±Ü Ãâ ´Ó Íø Âç ÉÏ È¡ µÃ ²» Ìá ¹© Éè ±¸ µÄ ·ç ¸ñ Ò³.
µ± ý Ìå ¿Ø ÖÆ Ìá ¹© ¸ø Íâ ²¿ ·ç ¸ñ Ò³ ÊÇ Ê± ÊÇ ÓРȤ µÄ, Òò Ϊ Óà »§ ´ú Àí Æ÷ Ö» ÔÚ Õâ Щ ·ç ¸ñ Ò³ Ìá ¹© ¸ø µ± Ç° Éè ±¸ µÄ Çé ¿ö Ï ´Ó Íø ¸ñ ÉÏ È¡ µÃ Õâ Щ ·ç ¸ñ Ò³.
ÏÈ Ç° µÄ Àý ³Ì ¿É ÒÔ Í¨ ¹ý media ÌØ ÐÔ µÄ Á¬ ½Ó À´ д ³É Ö¸ ¶¨ Íâ ²¿ ·ç ¸ñ Ò³ (Óà STYLE Ôª ËØ À´ ´ú Ìæ): Ö» ÓÐ µ± Õâ Щ ·ç ¸ñ Ò³ Óë Ä¿ ±ê ý Ìå Ïà ÒË Ê± ²Å È¡ µÃ.
<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>
²é ¿´ Ï Ãæ µÄ Õ ½Ú À´ »ñ Öª ¸ü ¶à µÄ ¹Ø ÓÚ Íâ ²¿ ·ç ¸ñ Ò³ µÄ ЊϢ.

Íⲿ·ç¸ñÒ³

·ç ¸ñ Ò³ ¿É Óë HTML ÎÄ µµ µ¥ ¶À ¶¨ Òå. Õâ ÊÇ Ìá ¹© Õâ ¸ö ÄÜ Á¦ µÄ ºÃ ´¦:
  • ÔÚ ¶à ¸ö ÎÄ µµ (ºÍ ½Ú µã) ¼ä ¹² Ïí ·ç ¸ñ Ò³
  • ²» Óà ÐÞ ¸Ä ÎÄ µµ ¾Í ÄÜ ¸Ä ±ä ·ç ¸ñ Ò³
µ± ·ç ¸ñ Ò³ ÔÊ Ðí ʹ Óà ʱ, Óà »§ ¿É ÒÔ µÃ µ½ ·ç ¸ñ µÄ Ñ¡ Ôñ. ÿ ÖÖ ·ç ¸ñ ¶¼ ÓÐ ¿É ÄÜ ¼¶ Áª ÓÚ Êý ¸ö Êý ¸ñ Ò³. ij Щ ·ç ¸ñ Ò³ (±» ³Æ ×÷ ¹Ì ÓР) µÄ Ìá ¹© ²» ÒÀ Àµ ÓÚ Óà »§ µÄ Ñ¡ Ôñ (Ëü ¾¡ Á¿ Ö¸ Ïò Õý È· µÄ ý Ìå ¸ñ ʽ), ¶ø Áí Ò» Щ (±» ³Æ ×÷ ÂÖ Ìæ) Ö» Ìá ¹© ÓÚ ÌØ Êâ µÄ Ñ¡ Ôñ. Ò» ¸ö È± Ê¡ ·ç ¸ñ Ò³ ÊÇ Ò» ¸ö µ± Ò³ Ãæ ±»  µ÷ Èë ʱ Ìá ¹© µÄ ·ç ¸ñ Ò³, µ« Óà »§ ¿É ÒÔ ÀÖ Òâ ʹ ÓàÂÖ Ìæ ·ç ¸ñ Ò³ µÄ »° ¿É ÒÔ ½û Ö¹ Ëü.

ʹ Óà href Öµ  Ϊ ·ç ¸ñ Ò³ ÎÄ ¼þ µÄ λ ÖÃ. URL.

  • Éè ¶¨
  • µ± ·ç ¸ñ Ò³ ÊÇ È± Ê¡ ·ç ¸ñ Ò³ ʱ Éè ¶¨ ÔÚ ´Ë Àý ÖÐ, ÎÒ ÃÇ Ê× ÏÈ Ö¸ ¶¨ Ò» ¸ö ÔÚ ÎÄ ¼þ mystyle.css ÖÐ µÄ Íâ ²¿ ·ç ¸ñ Ò³.
  • <LINK href="mystyle.css" rel="stylesheet">

    Éè ¶¨ title ÌØ ÐÔ.

    <LINK href="mystyle.css" title="Compact" rel="stylesheet">

    °Ñ ¹Ø ¼ü ´Ê "alternate" ¼Ó µ½ rel ÌØ ÐÔ Ê¹ Ö® ³É Ϊ Ò» ¸ö ÂÖ Ìæ ·ç ¸ñ Ò³.

    <LINK href="mystyle.css" title="Medium" rel="alternate stylesheet">

     
    Ëù ÓÐ µÄ ÂÖ Ìæ ·ç ¸ñ Ò³ ¹² Ïí ͬ Ò» ¸ö µ± Óà »§ (ͨ ¹ý Óà »§ ´ú Àí Æ÷) ¼¤ »î ÄÇ ¸ö ·ç ¸ñ ʱ Ìá ¹© µÄ ±ê Ìâ. ¾ß ÓÐ ²» ͬ ±ê Ìâ µÄ ·ç ¸ñ Ò³ ½« ²» ÔÚ Õâ ÖÖ Çé ¿ö Ï ±» Ìá ¹©. È» ¶ø, û ÓÐ title ÌØ ÐÔ Öµ À´ Ãü Ãû ÿ ÖÖ Ñ¡ Ôñ.

    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 ºÍ STYLE Ôª ËØ µÄ Àý  ³Ì.
        <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">
    ȱ Ê¡ ·ç ¸ñ Ò² ¿É ÒÔ ±» HTTP Òý µ¼ Í· Éè ¶¨. ÉÏ Ãæ µÄ
    Default-Style: "compact"
    Èç ¹û Á½ ¸ö »ò ¸ü ¶à µÄ HEAD Ö® Ç° Ê× ÏÈ ¿¼ ÂÇ. Èç ¹û û ÓÐ ÏÔ Ê½ µÄ Éù Ã÷, ȱ Ê¡ ·ç ¸ñ ÓÉ µÚ Ò» ¸ö Éè ¶¨ ÁËrel ÌØ ÐÔ ¾ß ÓÐ ¾ß ÓÐ "stylesheet" Öµ µÄ µ± Óà »§ ´ú Àí Æ÷ ´ò Ëã äÖ È¾ Ò» ƪ ÎÄ µµ µÄ ʱ ºò, Ëü Ðè Òª ÕÒ µ½ ·ç ¸ñ Êô ÐÔ µÄ Öµ, Àý Èç ×Ö Ìå Ãû ³Æ, ×Ö Ìå ·ç ¸ñ, ³ß ´ç, ÐÐ ¸ß, ÎÄ ±¾ ÑÕ É« µÈ µÈ. Íê Õû µÄ ½á ¹¹ È¡ ¾ö ÓÚ ·ç ¸ñ Ò³ Óï ÑÔ, µ« Ï Ãæ µÄ Ãè Êö ÊÇ Í¨ ³£ ÊÊ ÒË µÄ:

    cascading ½á ¹¹ ÔÚ ´ó Á¿ µÄ ·ç ¸ñ ·¨ Ôò ¾ù Ö± ½Ó Ìá ¹© ¸ø Ò» ¸ö Ôª ËØ µÄ ʱ ºò ±» ʹ ÓÃ. Õâ ¸ö ½á ¹¹ ÔÊ Ðí Óà »§ ´ú Àí Æ÷ ͨ ¹ý Ö¸ ¶¨ À´ ÅÅ ¶¨ ·¨ Ôò ²¢ ÅÐ ¶Ï Ó¦ Óà ÄÄ ¸ö ·¨ Ôò. Èç ¹û û ÓÐ ·¨ Ôò ±» ÕÒ µ½, Ï һ ²½ È¡ ¾ö ÓÚ Õâ ¸ö ·ç ¸ñ Êô ÐÔ ·ñ ¿É ÒÔ ¼Ì ³Ð. ¶Ô ÓÚ Õâ Щ Êô ÐÔ ·ç ¸ñ Ò³ Óï ÑÔ Ìá ¹© ÁË È± Ê¡ Öµ ÒÔ ±¸ ÔÚ ÌØ ¶¨ µÄ Ôª ËØ Ã» ÓÐ Ã÷ È· µÄ ·¨ Ôò ʱ Ö® ÓÃ.

    Èç ¹û ÐÔ ÐÔ ¿É ±» ¼Ì ³Ð, Óà »§ ´ú Àí Æ÷ Á¢ ¿Ì ¼ì ²é Ïà ¹Ø Ôª ËØ ÊÇ ·ñ ÓÐ ·¨ Ôò ¿É ÒÔ Ó¦ ÓÃ. Õâ ¸ö ´¦ Àí Ö± µ½ ÕÒ µ½ Ïà ÒË µÄ ·¨ Ôò. Õâ ¸ö ½á ¹¹ ÔÊ Ðí ·ç ¸ñ Ò³ ½ô ÃÜ µØ Ö¸ ¶¨. Àý Èç, Äã ¿É ÒÔ ÔÚ BODY Ôª ËØ µÄ ·¨ Ôò Ϊ Ëù ÓÐ µÄ Ôª ËØ Ö¸ ¶¨ ×Ö Ìå.

    ÔÚ·ÇÒ»ÖÂÐÔÓû§´úÀíÆ÷ÖÐÒþ²Ø·ç¸ñÔªËØÄÚÈÝ

    ij Щ ·ç ¸ñ Ò³ Óï ÑÔ ÌØ Òâ Ìá ¹© Ò» ÖÖ Èà ×÷ Õß ÔÚ ·Ç Ò» Ö ÐÔ Óà »§ ´ú Àí Æ÷ ÖÐ Òþ ²Ø STYLE Ôª ËØ ÄÚ ÈÝ µÄ Óï ·¨.
    Õâ ¸ö CSS Àý ³Ì ¾Ù Àý ˵ Ã÷ Èç ¹û °Ñ ÀÏ µÄ ·Ç Ò» Ö ÐÔ Óà »§ ´ú Àí Æ÷ ×¢ ÊÍ µô STYLE Ôª ËØ µÄ ÄÚ ÈÝ ¶ø ²» ±» ×÷ Ϊ ÎÄ ±¾ äÖ È¾.
    <STYLE type="text/css">
    <!--
       H1 { color: red }
       P  { color: blue}
       -->
    </STYLE>

    ͨ¹ý HTTP Òýµ¼Í·Ö¸¶¨·ç¸ñ

    ÓРʱ Ϊ Ò» ¸ö Web ·þ Îñ Æ÷ Éè Öà һ ¸ö ¿É ±» ½Ú µã ÉÏ ³É ×é µÄ Ò³ Ãæ ʹ Óà µÄ ·ç ¸ñ Ò³ ÊÇ ÊÊ µ± µÄ. HTTP  Link Òý µ¼ Í· Óë LINK Ôª ËØ ³ö ÏÖ ÓÚ Ïà ͬ µÄ ´Î Ðò. Òò ´Ë
    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"
    Õâ ÔÚ HTML ÎÄ µµ ͨ ¹ý µç ×Ó ÓÊ ¼þ ´« ËÍ µÄ ʱ ºò ͬ Ñù ÓÐ ÓÃ. ij Щ ÓÊ ¼þ ´ú Àí Æ÷ »á ¸Ä ±ä LINK ºÍ HEAD µÄ ÏÔ Ê½ META Ö® Ç°.