·ç ¸ñ Ò³ ÊÇ Íø Ò³ Éè ¼Æ Õß Èç ºÎ ¹¤ ×÷ ÖÐ µÄ Ò» ¸ö Ö÷ Òª µÄ Í» ÆÆ, Ëü À©
Õ¹ ÁË Ëû ÃÇ ¸Ä Á¼ Ëû ÃÇ Ò³ Ãæ µÄ ÄÜ Á¦. Web ±» ¹¹ Ïë ÓÚ ¿Æ ¼¼ µÄ »· ¾³
ÖÐ, Óà »§ ¹Ø ÐÄ µÄ ÊÇ Ëü µÄ ÎÄ µµ µÄ ÄÚ ÈÝ È» ºó ÊÇ Ëü µÄ Õ¹ ÏÖ. ×Ô ´Ó
ÈË ÃÇ ÔÚ ¿í ¹ã µÄ ÈË Éú µÀ · ÉÏ ·¢ ÏÖ ÁË Web, HTML µÄ ÏÞ ÖÆ ³É Ϊ µç ÄÔ
¼Ì Ðø ÊÜ µ½ ´ì ÕÛ µÄ ¸ù Ô´. Õâ Щ ×÷ Õß Ôø ¾ ¶Ô ÓÚ Ö½ ÉÏ Ì¸ ±ø (Òë Õß:
±¾ À´ ÊÇ Ö¸ ÔÚ Ö½ ½é ÖÊ ÉÏ) ÓÐ ³ä ·Ö µÄ ¿Ø ÖÆ È¨. Ëû ÃÇ Ñ§ Ï° Èç ºÎ ÔÚ
HTML Ìå ²Ã µÄ ÏÞ ÖÆ ÉÏ ´ò ²Á ±ß Çò. Õâ ¸ö Òâ ͼ ÊÇ ºÃ µÄ - Ϊ ÁË Ìá ¸ß
Íø Ò³ µÄ Õ¹ ÏÖ Ð§ ¹û - µ« ¶Ô ÓÚ Èç ´Ë ×ö µÄ ¼¼ Êõ È´ ²» ÈÝ ÀÖ ¹Û. Õâ Щ
¼¼ Êõ ÔÚ Ò» ²¿ ·Ö ÈË, Ò» ²¿ ·Ö ʱ ¼ä Ãæ Ç° ¹¤ ×÷, µ« ʼ ÖÕ Ã» ÓРΪ Ëù
ÓÐ µÄ ÈË, Ëù ÓÐ µÄ ʱ ¼ä, Ëü ÃÇ °ü À¨:
ʹ Óà HTML À© Õ¹ Êô ÐÔ
°Ñ ÎÄ ×Ö ×ª »» ³É ͼ Ïñ
ʹ Óà ͼ Ïñ ¿Ø ÖÆ ¿Õ °× Çø Óò
ÔÚ Íø Ò³ ½ç Ãæ ʹ Óà ±í ¸ñ
ͨ ¹ý ±à д ³Ì ʽ À´ ´ú Ìæ ʹ Óà HTML
Õâ Щ ¼¼ Êõ ·Ç ³£ µØ Ìá ¸ß ÁË Íø Ò³ µÄ ¸´ ÔÓ ³Ì ¶È, Óë ´í ×Û ¸´ ÔÓ µÄ ÎÊ
Ìâ Ëæ Ö® ¶ø À´ µÄ ÊÇ ÓÐ ÏÞ µÄ ÊÊ Ó¦ ÐÔ, ²¢ ÇÒ Ê¹ ÓÐ ²Ð ¼² µ¯ ÐÔ ÏÞ Èë Í´
¿à.
·ç ¸ñ Ò³ °Ñ ÎÒ ÃÇ ´Ó Íø Ò³ µÄ Õ¹ ʾ, ÒÔ ¼° ÔÚ ¹ý È¥ µÄ ¼¸ Äê ÖÐ ¶Ô ¼Ó
µ½ HTML µÄ Õ¹ ÏÖ ½á ¹¹ ÉÏ ¹ý ·Ö µØ ¸ø Óè ·¶ Χ ÏÞ ÖÆ µÄ ×´ ̬ ´ø »Ø µ½
ÁË Ò» ¸ö Ò× ¿Ø ×´ ̬. ·ç ¸ñ Ò³ ʹ µÃ ÔÚ ÎÄ ±¾ ÐÐ ÖÐ Ö¸ ¶¨ ¼Ó Èë ¿Õ °× µÄ
Êý Á¿, ʹ Óà ÎÄ ×Ö ÑÕ É« ¼° Í´ ¾° É«, ¿Ø ÖÆ ×Ö Ìå ³ß ´ç ºÍ ·ç ¸ñ, ÒÔ ¼°
Ö÷ ¹Ü Æä Ëü µÄ ϸ ½Ú ¶¼ ±ä µÃ ÈÝ Ò× Æð À´.
HTML 4.0 Ìá ¹© Ï ÁÐ ¹¦ ÄÜ µÄ Ö§ ³Ö:
Áé»îµÄ·ç¸ñÐÅÏ¢´æ·Å
°Ñ ·ç ¸ñ Ò³ ·Å ÔÚ ·Ö ¿ª µÄ ÎÄ ¸ñ ÖРʹ µÃ Ëü ÃÇ ÈÝ Ò× ÔÙ ´Î ʹ ÓÃ. ÓРʱ
¶Ô ÓÚ ÔÚ Ëü ÃÇ Ìá ¹© µÄ ÎÄ µµ, ÒÔ ¼° ÔÚ ÎÄ µµ µÄ ¿ª ʼ ʱ ±à ×é, ¶Ô ¹á
´© ÎÄ µµ Ö÷ ¸É µÄ Ôª ËØ µÄ ÌØ ÐÔ °ü º¬ äÖ È¾ Ö¸ µ¼ ÊÇ ÓÐ Óà µÄ. Ϊ ÁË Ê¹
Ëü ÔÚ ½Ú µã µÄ »ù ´¡ ÉÏ ¸ü ÈÝ Ò× ¹Ü Àí, Õâ ·Ý Ëµ Ã÷ Êé Ãè Êö Èç ºÎ Ê¹ ÓÃ
HTTP Òý µ¼ Í· À´ Éè ¶¨ ±» Ìá ¹© ¸ø ÎÄ µµ µÄ ·ç ¸ñ Ò³.
¶ÀÁ¢µØÖ¸¶¨·ç¸ñÒ³ÓïÑÔ
Õâ ·Ý Ëµ Ã÷ Êé û °Ñ HTML Êø ¸¿ ÓÚ ÈÎ ºÎ Ò» ¸ö ÌØ ¶¨ µÄ ·ç ¸ñ Ò³ Óï ÑÔ.
Õâ ¾Í ÔÊ Ðí ÁË Ò» ¸ö ·¶ Χ µÄ ´Ë Àà Óï ÑÔ ¿É ±» ʹ ÓÃ, Àý Èç ¶à Êý Óà »§
ʹ Óà µÄ ¼ò µ¥ µÄ ÐΠʽ ºÍ ÉÙ Êý ÓÐ ¸ß ¼¶ ÌØ Êâ Ðè Òª µÄ Óà »§ ʹ Óà µÄ
¸´ ÔÓ µÄ Àà ÐÍ. Ï Ãæ µÄ Àý ³Ì ¾ù ʹ Óà CSS (Cascading Style Sheets) Óï
ÑÔ[CSS1] , µ«
Æä Ëü µÄ ·ç ¸ñ Ò³ Óï ÑÔ Ò² ÊÇ ¿É Óà µÄ..
¼¶Áª·ç¸ñÒ³
Õâ ÊÇ ÓÉ Ä³ Щ ·ç ¸ñ Ò³ Óï ÑÔ Èç CSS Ìá ¹© µÄ ÄÜ Á¦ ÔÊ Ðí ·ç ¸ñ Ò³ ЊϢ
À´ ×Ô ÓÚ Êý ¸ö »ì ºÏ µÄ Ô´. Àý Èç, ×é Ö¯ ·ç ¸ñ Ö¸ µ¼ ·½ Õë, Ò» ×é ·ç ¸ñ
µÄ ¹² ͬ µÄ ·ç ¸ñ ±ê ×¼, Ö¸ ¶¨ µ¥ ¸ö ÎÄ µµ µÄ ·ç ¸ñ. ͨ ¹ý °Ñ Õâ Щ ÐÅ
Ï¢ µ¥ ¶À ´¢ ´æ, ·ç ¸ñ Ò³ ¿É ÒÔ ±» ÖØ ¸´ ʹ ÓÃ, ʹ µÃ ´´ ×÷ ¼ò µ¥ »¯ ¶ø
ÇÒ ¿É ÒÔ Ê¹ Íø Âç »º ´æ ¸ü ÓРЧ. ¼¶ Áª ¶¨ Òå ÁË Ò» ¸ö ·ç ¸ñ Ò³ µÄ ÅÅ Ðò
ÁÐ ÔÚ Æä ÖÐ ºó À´ µÄ ½Ï ÒÔ Ç° µÄ ¹æ Ôò ÓÐ ¸ü ¸ß µÄ ÓÅ ÏÈ È¨. ²¢ ·Ç Ëù ÓÐ
µÄ ·ç ¸ñ Ò³ Óï ÑÔ Ìá ¹© ¼¶ Áª.
ýÌå´ÓÊô
HTML ÔÊ Ðí Äã Óà һ ÖÖ Ã½ Ìå ÎÞ ¹Ø µÄ ·½ ·¨ À´ Ö¸ ¶¨ ÎÄ µµ. Õâ ¾Í Ê¹ µÃ
ÈË ÃÇ ¿É ÒÔ Óà ¹ã ·º µÄ ²» ͬ µÄ Éè ±¸ ºÍ ý Ìå À´ ´« ËÍ Íø Ò³, Àý Èç ÊÓ
´° ϵ ͳ, Âó ½ð Ëþ ºÍ X11 µÄ ͼ Ïñ ÏÔ Ê¾ Æ÷, µç ÊÓ µÄ ת »» ºÐ (set-top
boxes), ÌØ Êâ µÄ ¿É ÒÆ ¶¯ µç »° ºÍ ¸ö ÈË Êä Èë Éè ±¸, Óï Òô ä¯ ÀÀ Æ÷ ÒÔ
¼° ä ÈË Óà µÄ µã Õó Éè ±¸.
Óë Ö® Ïà ·´ µÄ, ·ç ¸ñ Ò³ Ìá ¹© Ö¸ ¶¨ ý Ìå ºÍ Ã½ Ìå ×é. Ò» ¸ö ¹Ê Òâ
Óà ×÷ ÆÁ Ä» µÄ ·ç ¸ñ Ò³, Ó¦ ¸Ã ¿É ÊÊ Óà ÓÚ ´ò Ó¡, µ« ¶Ô ÓÚ Óï Òô ä¯ ÀÀ
Æ÷ Ôò û ÓÐ Óà ´¦. Õâ ·Ý Ëµ Ã÷ Êé ÔÊ Ðí Äã ÔÚ ·ç ¸ñ Ò³ ¶¨ Òå ¹ã ·º µÄ ý
Ìå ÖÖ Àà. Õâ ÔÊ Ðí Óà »§ ´ú Àí Æ÷ À´ ±Ü Ãâ È¡ µÃ ²» ÊÊ µ± µÄ ·ç ¸ñ Ò³.
·ç ¸ñ Ò³ Óï ÑÔ ¿É ÒÔ ÔÚ Í¬ Ò» ·ç ¸ñ Ò³ ÖÐ °ü º¬ ý Ìå ÒÀ Àµ ÐÔ µÄ Ãè Êö.
½»»¥·ç¸ñ
×÷ Õß ¿É ÒÔ Ï£ Íû Ìá ¹© ¸ø ¶Á Õß Êý ¸ö ÔÄ ¶Á ÎÄ ±¾ µÄ ½» »¥ ·ç ¸ñ. Àý Èç,
Ò» ¸ö ʹ Óà С ×Ö Ìå µÄ ½ô ´Õ °æ ±¾, Ò» ¸ö ʹ Óà ´ó ×Ö Ìå À´ Ôö ¼Ó Ò× ¶Á
Ð﵀ ·ç ¸ñ. Õâ ·Ý Ëµ Ã÷ Êé ÔÊ Ðí Äã Ö¸ ¶¨ Õâ Ñù µÄ ½» »¥, °ü À¨ Ò» ¸ö ȱ
Ê¡ µÄ ·ç ¸ñ. Óà »§ Ó¦ ¸Ã ±» ¸³ ÓÚ ÔÚ Õâ Щ ·ç ¸ñ ÖÐ Ñ¡ Ôñ »ò ¸É ´à ¹Ø ±Õ
·ç ¸ñ Ò³ µÄ »ú »á.
×¢ Òâ: ÔÚ Õâ ·Ý ÎÄ µµ µÄ ·¢ÐкÍÐÂýÌå¸ñʽ
Õ ½Ú ÖÐ °ü º¬ ÁË ¹Ø ÓÚ ·ç ¸ñ Ò³ µÄ ¸ü ϸ ½Ú »¯ ЊϢ..
°Ñ·ç¸ñ¼Óµ½ HTML
HTML ÎÄ µµ ¿É ÒÔ Ö± ½Ó °ü º¬ ·ç ¸ñ Ò³ ·¨ Ôò Ò² ¿É ÒÔ µ÷ Èë ·ç ¸ñ Ò³.HTML
¿É ÒÔ Ê¹ Óà ÈÎ ºÎ ·ç ¸ñ Ò³ Óï ÑÔ. Ò» ¸ö ¼ò µ¥ µÄ ·ç ¸ñ Ò³ Óï ÑÔ ÒÑ ¾ ×ã
¹» Âú ×ã ´ó ¶à Êý Óà »§ µÄ Ðè Çó, µ« ¶à ÖÖ Óï ÑÔ ¿É ÒÔ ¸ü ºÃ µÄ ÊÊ Ó¦ ¸ß
¼¶ µÄ ÌØ Êâ Ðè Òª. HTML ²» ÒÀ Àµ ÓÚ Ä³ Ò» ÖÖ Ö¸ ¶¨ µÄ ·ç ¸ñ Ò³ Óï ÑÔ. È»
¶ø, ¸ù ¾Ý Õâ ·Ý ÎÄ µµ µÄ Ä¿ µÄ, ÎÒ ÃÇ ½« ½« Ìá ³ö Ò» Щ Cascading ·ç ¸ñ
Ò³ µÄ ¾Ù Àý ˵ Ã÷ ([CSS1] ),
Ëõ д Ϊ CSS (Cascading Style Sheets).
·ç ¸ñ ·¨ Ôò µÄ Óï ·¨ ÊÇ Êô ÓÚ ·ç ¸ñ Ò³ µÄ, ¶ø ²» ÊÇ HTML µÄ. ÓÉ ÓÚ Ìá ¹©
·ç ¸ñ Ò³ µÄ Óà »§ ´ú Àí Æ÷ ±Ø Ðë ÆÊ Îö Õâ Щ ·¨ Ôò, Óà »§ ±Ø Ðë Éù Ã÷ ÄÄ
¸ö ·ç ¸ñ Ò³ Óï ÑÔ ±» ʹ ÓÃ.
ʹ Óà META HEAD
<META http-equiv="Content-Style-Type" content="text/css">
ȱ Ê¡ µÄ ·ç ¸ñ Ò³ Óï ÑÔ Ò² ¿É ÒÔ ±» HTTP Òý µ¼ Í· Éè ¶¨. ÉÏ Ãæ µÄ META Content-Style-Type: text/css
Èç ¹û Á½ ¸ö »ò ¸ü ¶à µÄ META HEAD Ò» Ö ÐÔ HTML ÆÊ Îö ±Ø Ðë ÄÜ ¹» Çø ±ð HTML Ò³ Ãæ ·ç ¸ñ ·¨ Ôò. HTML Ôª
ËØ ºÍ ÌØ ÐÔ ÔÚ ·ç ¸ñ Ò³ Êý ¾Ý µÄ ¿ª ʼ ²¿ ·Ö ¶¨ Òå. ·ç ¸ñ Ò³ Êý ¾Ý µÄ ½á
β ÓÉ ¿ª ¿Ú ½á Êø ±ê ¼Ç °ü º¬ (</) È» ºó ½ô ¸ú Ò» ¸ö SGML Ãû ³Æ ¿ª ʼ
×Ö ·û([a-zA-Z]). Ëù ÓÐ µÄ ·ç ¸ñ Ò³ Êý ¾Ý ±Ø Ðë Ìá ¹© Óà »§ ´ú Àí Æ÷ ¿É
Óà µÄ ·ç ¸ñ Ò³ ´¦ Àí.
ÌØ ÐÔ ¶¨ Òå
style = cdata
Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË µ± Ç° Ôª ËØ µÄ ·ç ¸ñ ЊϢ.
style ȱʡ·ç¸ñÒ³ÓïÑÔ
À´ Ö¸ ¶¨.
Õâ ¸ö Àý ³Ì Ö¸ ¶¨ ÁË Ò» ¸ö ÌØ Ê⠶ΠÂä µÄ ÎÄ ×Ö µÄ
ÑÕ É« ºÍ ×Ö Ìå ´ó С ÐŠϢ.
<P type="text/css" style="font-size: 12pt; color: fuschia">Aren't
style sheets wonderful?
×¢ Òâ CSS µÄ Éù Ã÷ Óï ·¨: name : value . Êô
ÐÔ ¶¨ Òå ÓÉ ·Ö ºÅ ·Ö ÁÐ.
style STYLE
Ôª ËØ. ¸ù ¾Ý Æä »ù ±¾ µÄ Áé »î ÐÔ, ¿É ÒÔ °Ñ ·ç ¸ñ ·Å ÔÚ Ò» ¸ö µ¥ ¶À µÄ
·ç ¸ñ Ò³ ÖÐ.
STYLE
ÔªËØ
<!ELEMENT STYLE lang , dir , for use with title --
type media title
¿ª ʼ ±ê ¼Ç: Ðè Òª , ½á Êø ±ê ¼Ç: Ðè Òª
ÌØ ÐÔ ¶¨ Òå
type = cdata
Õâ ¸ö ÌØ ÐÔ ¶¨ Òå ÁË Ôª ËØ ÄÚ ÈÝ µÄ ·ç ¸ñ Ò³ Óï ÑÔ, Òò ´Ë ¿É ÒÔ ³¬ Ô½ ȱ
Ê¡ µÄ ·ç ¸ñ Ò³ Óï ÑÔ. ·ç ¸ñ Ò³ Óï ÑÔ ±» ×÷ Ϊ Ò» ÖÖ »¥ Áª Íø ý Ìå ¸ñ ʽ
(Èç "text/css") Ö¸ ¶¨. »¥ Áª Íø ý Ìå ¸ñ ʽ ÔÚ [MIMETYPES]
¶¨ Òå.
media = cdata-list
Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË Ò» ¸ö ·ç ¸ñ ЊϢ µÄ ÓÐ Òâ µÄ Ä¿ ±ê ý Ìå. ¿É ÒÔ ÊÇ
µ¥ ¸ö µÄ ý Ìå ¸ñ ʽ »ò Óà ¶º ºÅ ·Ö ÁÐ µÄ ý Ìå ÁÐ ±í. ¿É ÄÜ µÄ ý Ìå ¸ñ
ʽ Ϊ:
screen: Êä ³ö ´ò Ëã Ϊ ²» ·Ö Ò³ µÄ ¼Æ Ëã »ú ÆÁ Ä». Õâ ÊÇ È± Ê¡
Öµ.
print: Êä ³ö Ô¤ ¶¨ Ϊ ·Ö Ò³ µÄ, ²» ͸ Ã÷ ²Ä ÁÏ ÒÔ ¼° ÆÁ Ä» ÉÏ
µÄ ´ò Ó¡ Ô¤ ÀÀ Ä£ ʽ.
projection: Êä ³ö µ½ ·Å Ó³ Éè ±¸.
braille: Êä ³ö µ½ ä ÈË ´¥ ¾õ ·´ À£ Éè ±¸.
speech: Êä ³ö ÖÁ Óï Òô ϵ ͳ.
all: Ìá ¹© µ½ Ëù ÓÐ µÄ Éè ±¸.
ÔÚ Ëü ´¦ ¶¨ Òå µÄ ÌØ ÐÔ
STYLE
Ôª ËØ ÔÊ Ðí ×÷ Õß ÔÚ ÎÄ µµ Òý µ¼ ÖÐ ·Å Öà ·ç ¸ñ Ò³ ·¨ Ôò. HTML ÔÊ Ðí ÈÎ
ºÎ ÔÚ ÎÄ µµ µÄ
HEAD
²¿ ·Ö ÖÐ ÓÐ ÈÎ Òâ Êý Á¿ µÄ
STYLE
Ôª ËØ.
²» Ìá ¹© ·ç ¸ñ Ò³ µÄ Óà »§ ´ú Àí Æ÷, »ò ²» Ìá ¹© ÓÉ STYLE ±Ø Ðë Òþ ²Ø STYLE Òþ²ØÄÚÈÝ
µÄ Óï ·¨.
Ò» Щ ·ç ¸ñ Ò³ µÄ ÂÄ ÐÐ ¿É ÒÔ ÔÊ Ðí ÔÚ STYLE style STYLE
Ëù ÓÐ Ã÷ È· µÄ HTML ʵ Àý (Èç: Ëù ÓÐ µÄ P H1
Ëù ÓÐ Êô ÓÚ Ò» ¸ö Ã÷ È· µÄ Àà µÄ Ëù ÓÐ HTML Ôª ËØ Êµ Àý (¾Í ÊÇ Ëµ ÄÇ ¸ö
µÄ class
HTML Ôª ËØ µÄ µ¥ ¸ö ʵ Àý (¾Í ÊÇ Ëµ ÄÄ ¸ö µÄ id
·ç ¸ñ ·¨ Ôò µÄ ÓÅ ÏÈ ºÍ ¼Ì ³Ð ¹æ Ôò ¸ù ¾Ý ·ç ¸ñ Ò³ Óï ÑÔ.
Ï Ãæ µÄ CSS
STYLE
Éù Ã÷ ÔÚ ÎÄ µµ µÄ ÿ ¸ö
H1
Ôª ËØ Íâ ¼Ó Ìõ Ïß ²¢ ʹ Ö® Óë Ò³ Ãæ ¾Ó ÖÐ.
<HEAD>
<STYLE type="text/css">
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
Ôª ËØ, ÓÐ Á½ ¸ö Ôª ËØ ÓÐ Æä ÌØ Êâ µÄ Óà ´¦ Òò Ϊ Ëü ÃÇ Ã» ÓÐ ÈÎ ºÎ Ô¤ ¶¨
µÄ µÄ ³Â Êö. Òò Ϊ
DIV
ºÍ
SPAN Ôª ËØ Ö» ¶¨
Òå ½á ¹¹, µ± Ëü ºÍ ·ç ¸ñ Ò³ °ó ¶¨ µÄ ʱ ºò, ÔÊ Ðí Óà »§ ÎÞ ÏÞ µØ À© Õ¹
HTML.
ÓÐ Ï Ãæ µÄ Àý ³Ì ÖÐ, ÎÒ ÃÇ Ê¹ ÓÃ
SPAN
Ôª ËØ À´ Éè ¶¨ Ò» ¸ö ¶Î Âä µÄ Ç° ¼¸ ¸ö ×Ö Îª small caps ×Ö Ìå.
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN id="sc-ex">The first</SPAN> few words of
this paragraph are in small-caps.
</BODY>
ÔÚ Ï Ãæ µÄ Àý ³Ì ÖÐ, ÎÒ ÃÇ Ê¹ ÓÃ
DIV
ºÍ
class ÌØ ÐÔ À´
Éè ¶¨ Ò» ϵ ÁÐ ¶Î Âä µÄ ÎÄ ×Ö µÄ ¶Ô Æë ·½ ʽ À´ ×÷ Ϊ Ò» ƪ ¿Æ ¼¼ ÂÛ ÎÄ
µÄ Õª Òª Õ ½Ú. Õâ ¸ö ·ç ¸ñ ЊϢ ¿É ÒÔ ÔÚ ÎÄ µµ µÄ ÈÎ ºÎ µØ ·½ ͨ ¹ý Éè
ÖÃ
class ÌØ ÐÔ ¶ø
ÖØ ¸´ ʹ ÓÃ.
<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstract">
<P>The Chieftain product range is our market winner for
the coming year. This report sets out how to position
Chieftain against competing products.
<P>Chieftain replaces the Commander range, which will
remain on the price list until further notice.
</DIV>
</BODY>
HTML ÔÊ Ðí ×÷ Õß Éè ¼Æ ²» ÒÀ Àµ ×÷ ºÎ Ö¸ ¶¨ Õ¹ ʾ ý Ìå µÄ ÎÄ µµ. Òò ´Ë,
Óà »§ ¿É ÒÔ ÔÚ ¹ã ·º µÄ ²» ͬ µÄ Óà »§ ´ú Àí Æ÷ ÉÏ ä¯ ÀÀ Web: ¸ö ÈË µç
ÄÔ ¼° ¹¤ ×÷ Õ¾ µÄ ͼ Ïñ ÏÔ Ê¾ Æ÷, µç ÊÓ µÄ ת »» ºÐ (set-top boxes), ÌØ
Êâ µÄ ¿É ÒÆ ¶¯ µç »° ºÍ ¸ö ÈË Êä Èë Éè ±¸, Óï Òô ä¯ ÁÙ Æ÷ ÒÔ ¼° ä ÈË µÄ
µã Õó ¸Ð Öª Éè ±¸.
media
ÌØ ÐÔ Ö¸ ¶¨ ÁË Ï£ Íû µÄ ·ç ¸ñ ·¨ Ôò µÄ Êä ³ö ; ¾¶. ͨ ¹ý Éè ¶¨
media ,
×÷ Õß ¿É ÒÔ Èà Óà »§ ´ú Àí Æ÷ ±Ü Ãâ ´Ó Íø Âç ÉÏ È¡ µÃ ²» Ìá ¹© Éè ±¸ µÄ
·ç ¸ñ Ò³.
Ï Ãæ µÄ Àý ³Ì Éù Ã÷ ÁË Ìá ¹© ¸ø Ëù ÓÐ µÄ
H1
Ôª ËØ. µ± ÔÚ ¼Æ Ëã »ú ÆÁ Ä» ÏÔ Ê¾ µÄ ʱ ºò, Ëù ÓÐ µÄ ʵ Àý ¶¼ ½« ¾Ó ÖÐ
²¢ ÇÒ ÊÇ À¶ É« µÄ. ÔÚ ´ò Ó¡ ʱ, Ëù ÓÐ µÄ ʵ Àý ¶¼ ¾Ó ÖÐ. ÎÒ ÃÇ Í¬ ʱ Ϊ
Óï Òô ϵ ͳ ¶¨ Òå Ò» ¸ö ²» Ò» Ñù µÄ ·ç ¸ñ.
<HEAD>
<STYLE type="text/css" media="screen">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="screen, print">
H1 { text-align: center }
</STYLE>
<STYLE type="text/acss" media="speech">
H1 { cue-before: url(bell.aiff); cue-after: url(dong.wav)}
</STYLE>
</HEAD>
µ± ý Ìå ¿Ø ÖÆ Ìá ¹© ¸ø Íâ ²¿ ·ç ¸ñ Ò³ ÊÇ Ê± ÊÇ ÓÐ
Ȥ µÄ, Òò Ϊ Óà »§ ´ú Àí Æ÷ Ö» ÔÚ Õâ Щ ·ç ¸ñ Ò³ Ìá ¹© ¸ø µ± Ç° Éè ±¸ µÄ
Çé ¿ö Ï ´Ó Íø ¸ñ ÉÏ È¡ µÃ Õâ Щ ·ç ¸ñ Ò³.
ÏÈ Ç° µÄ Àý ³Ì ¿É ÒÔ Í¨ ¹ý
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 Щ ·ç ¸ñ
Ò³ (±» ³Æ ×÷
¹Ì ÓÐ ) µÄ Ìá ¹© ²» ÒÀ Àµ ÓÚ Óà »§ µÄ Ñ¡ Ôñ (Ëü ¾¡
Á¿ Ö¸ Ïò Õý È· µÄ ý Ìå ¸ñ ʽ), ¶ø Áí Ò» Щ (±» ³Æ ×÷
ÂÖ Ìæ )
Ö» Ìá ¹© ÓÚ ÌØ Êâ µÄ Ñ¡ Ôñ. Ò» ¸ö
ȱ Ê¡ ·ç ¸ñ Ò³ ÊÇ Ò» ¸ö µ±
Ò³ Ãæ ±» µ÷ Èë ʱ Ìá ¹© µÄ ·ç ¸ñ Ò³, µ« Óà »§ ¿É ÒÔ ÀÖ Òâ ʹ ÓÃ
ÂÖ
Ìæ ·ç ¸ñ Ò³ µÄ »° ¿É ÒÔ ½û Ö¹ Ëü.
ʹ Óà LINK
Éè ¶¨ href href URL .
Éè ¶¨ rel
µ± ·ç ¸ñ Ò³ ÊÇ È± Ê¡ ·ç ¸ñ Ò³ ʱ Éè ¶¨ title
ÔÚ ´Ë Àý ÖÐ, ÎÒ ÃÇ Ê× ÏÈ Ö¸ ¶¨ Ò» ¸ö ÔÚ ÎÄ ¼þ mystyle.css
ÖÐ µÄ Íâ ²¿ ·ç ¸ñ Ò³.
<LINK href="mystyle.css" rel="stylesheet">
Éè ¶¨ title title
<LINK href="mystyle.css" title="Compact" rel="stylesheet">
°Ñ ¹Ø ¼ü ´Ê "alternate" ¼Ó µ½ rel
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet">
Ëù ÓÐ µÄ ÂÖ Ìæ ·ç ¸ñ Ò³ ¹² Ïí ͬ Ò» ¸ö µ± Óà »§ (ͨ
¹ý Óà »§ ´ú Àí Æ÷) ¼¤ »î ÄÇ ¸ö ·ç ¸ñ ʱ Ìá ¹© µÄ ±ê Ìâ. ¾ß ÓÐ ²» ͬ ±ê
Ìâ µÄ ·ç ¸ñ Ò³ ½« ²» ÔÚ Õâ ÖÖ Çé ¿ö Ï ±» Ìá ¹©. È» ¶ø, û ÓÐ
title
ÌØ ÐÔ µÄ·ç ¸ñ Ò³ ½« Ò» Ö± Ìá ¹© (³ý ·Ç Óà »§ ͬ ʱ ¹Ø ±Õ ÁË ·ç ¸ñ Ò³).
Óà »§ ´ú Àí Æ÷ Ó¦ µ± Ìá ¹© Óà »§ Ò» ¸ö ²é ¿´ ºÍ ¼ð Ñ¡ ÂÖ Ìæ ·ç ¸ñ µÄ
; ¾¶. ÎÒ ÃÇ ½¨ Òé ʹ Óà title
Cascading ·ç ¸ñ Ò³ Óï ÑÔ Èç CSS ÔÊ Ðí ·ç ¸ñ Ò³ ЊϢ À´ ×Ô
ÓÚ Êý ¸ö ±» »ì ºÏ ÔÚ Ò» Æð µÄ Ô´. È» ¶ø ²¢ ·Ç Ëù ÓÐ µÄ ·ç ¸ñ Ò³ Óï ÑÔ Ìá
¹© cascading. Ϊ ÁË ¶¨ Òå Ò» ¸ö ¼¶ Áª Äã ¿É ÒÔ ¼ò µ¥ µØ Ìá ¹© Ò» ¸ö LINK STYLE HEAD
ÔÚ Ï Ãæ µÄ Àý ³Ì ÖÐ ÎÒ ÃÇ ¶¨ Òå ÁË Á½ ¸ö ÂÖ Ìæ ·ç
¸ñ Ò³ ²¢ Ãü Ãû Ϊ "compact". Èç ¹û Óà »§ Ñ¡ Ôñ "compact" ·ç ¸ñ, Á½ ¸ö ·ç
¸ñ Ò³ ¾ù ±» Ìá ¹©, ¾Í Èç ͬ "common.css" ·ç ¸ñ Ò³, (Òò Ϊ Ëü µÄ
title
ÌØ ÐÔ Ã» ÓÐ Éè ¶¨ Ëù ÒÔ Ò» Ö± ÓÐ Óà ). Èç ¹û Óà »§ Ñ¡ Ôñ "big print" ·ç
¸ñ, ÎÄ ¼þ"bigprint.css" ºÍ "common.css" ½« ±» Óà »§ ´ú Àí Æ÷ Ó¦ Óà ¶ø "compact"
·ç ¸ñ Ò³ Ôò ·ñ.
<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 HEAD
<META http-equiv="Default-Style" content="compact">
ȱ Ê¡ ·ç ¸ñ Ò² ¿É ÒÔ ±» HTTP Òý µ¼ Í· Éè ¶¨. ÉÏ Ãæ µÄ META META HEAD title rel LINK
¼Ì³ÐºÍcascading
µ± Óà »§ ´ú Àí Æ÷ ´ò Ëã äÖ È¾ Ò» ƪ ÎÄ µµ µÄ ʱ ºò, Ëü Ðè Òª ÕÒ µ½ ·ç ¸ñ
Êô ÐÔ µÄ Öµ, Àý Èç ×Ö Ìå Ãû ³Æ, ×Ö Ìå ·ç ¸ñ, ³ß ´ç, ÐÐ ¸ß, ÎÄ ±¾ ÑÕ É«
µÈ µÈ. Íê Õû µÄ ½á ¹¹ È¡ ¾ö ÓÚ ·ç ¸ñ Ò³ Óï ÑÔ, µ« Ï Ãæ µÄ Ãè Êö ÊÇ Í¨
³£ ÊÊ ÒË µÄ:
cascading ½á ¹¹ ÔÚ ´ó Á¿ µÄ ·ç ¸ñ ·¨ Ôò ¾ù Ö± ½Ó Ìá ¹© ¸ø Ò» ¸ö Ôª ËØ
µÄ ʱ ºò ±» ʹ ÓÃ. Õâ ¸ö ½á ¹¹ ÔÊ Ðí Óà »§ ´ú Àí Æ÷ ͨ ¹ý Ö¸ ¶¨ À´ ÅÅ ¶¨
·¨ Ôò ²¢ ÅÐ ¶Ï Ó¦ Óà ÄÄ ¸ö ·¨ Ôò. Èç ¹û û ÓÐ ·¨ Ôò ±» ÕÒ µ½, Ï һ ²½
È¡ ¾ö ÓÚ Õâ ¸ö ·ç ¸ñ Êô ÐÔ ·ñ ¿É ÒÔ ¼Ì ³Ð. ¶Ô ÓÚ Õâ Щ Êô ÐÔ ·ç ¸ñ Ò³ Óï
ÑÔ Ìá ¹© ÁË È± Ê¡ Öµ ÒÔ ±¸ ÔÚ ÌØ ¶¨ µÄ Ôª ËØ Ã» ÓÐ Ã÷ È· µÄ ·¨ Ôò ʱ Ö®
ÓÃ.
Èç ¹û ÐÔ ÐÔ ¿É ±» ¼Ì ³Ð, Óà »§ ´ú Àí Æ÷ Á¢ ¿Ì ¼ì ²é Ïà ¹Ø Ôª ËØ ÊÇ ·ñ
ÓÐ ·¨ Ôò ¿É ÒÔ Ó¦ ÓÃ. Õâ ¸ö ´¦ Àí Ö± µ½ ÕÒ µ½ Ïà ÒË µÄ ·¨ Ôò. Õâ ¸ö ½á
¹¹ ÔÊ Ðí ·ç ¸ñ Ò³ ½ô ÃÜ µØ Ö¸ ¶¨. Àý Èç, Äã ¿É ÒÔ ÔÚ BODY BODY
ij Щ ·ç ¸ñ Ò³ Óï ÑÔ ÌØ Òâ Ìá ¹© Ò» ÖÖ Èà ×÷ Õß ÔÚ
·Ç Ò» Ö ÐÔ Óà »§ ´ú Àí Æ÷ ÖÐ Òþ ²Ø
STYLE
Ôª ËØ ÄÚ ÈÝ µÄ Óï ·¨.
Õâ ¸ö CSS Àý ³Ì ¾Ù Àý ˵ Ã÷ Èç ¹û °Ñ ÀÏ µÄ ·Ç Ò» ÖÂ
ÐÔ Óà »§ ´ú Àí Æ÷ ×¢ ÊÍ µô
STYLE
Ôª ËØ µÄ ÄÚ ÈÝ ¶ø ²» ±» ×÷ Ϊ ÎÄ ±¾ äÖ È¾.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
ͨ¹ý HTTP Òýµ¼Í·Ö¸¶¨·ç¸ñ
ÓРʱ Ϊ Ò» ¸ö Web ·þ Îñ Æ÷ Éè Öà һ ¸ö ¿É ±» ½Ú µã ÉÏ ³É ×é µÄ Ò³ Ãæ ʹ
Óà µÄ ·ç ¸ñ Ò³ ÊÇ ÊÊ µ± µÄ. HTTP Link Òý µ¼ Í· Óë LINK Link Òý µ¼
Í· Ïà µ± ÓÚ ¶à ¸ö LINK Link: REL=stylesheet HREF="corporate.css"
Ïà µ± ÓÚ:
<LINK rel="stylesheet" href="corporate.css">
Äã ¿É ÒÔ Ê¹ Óà ¶à ¸ö Link Òý µ¼ Í· À´ Ö¸ ¶¨ ¶à ¸ö ÂÖ Ìæ ·ç ¸ñ,
È» ºó ʹ Óà rel ÔÚ Ï Ãæ µÄ Àý ³Ì ÖÐ, "compact" ±» ȱ Ê¡ ÔË Óà Òò
Ϊ ÔÚ
rel ÌØ ÐÔ ÖÐ Ê¡
ÂÔ ÁË "alternate" ¹Ø ¼ü ´Ê.
Link: rel="stylesheet" title="compact" href="compact.css"
Link: rel="alternate stylesheet" title="big print" href="bigprint.css"
[RFC822]
Òý µ¼ Í· µÄ ´Î Ðò. Ϊ ÁË ±£ »¤ ÔÚ Á´ ½Ó Òý µ¼ Í· ÖÐ µÄ ·ç ¸ñ Ò³ ¼¶ Áª ´Î
Ðò ²» ÊÜ Ó° Ïì, Äã ¿É ÒÔ ÔÚ Í¬ Ò» ¸ö Òý µ¼ Óò ÖÐ ºÏ ²¢ Êý ¸ö ʵ Àý. Òý
ºÅ Ö» ÓÐ ÔÚ ÌØ ÐÔ Öµ °ü °ü À¨ ¿Õ ¸ñ µÄ ʱ ºò Ðè Òª. ʹ Óà SGML ×÷ Ϊ ×Ö
·û ²Î ÕÕ ÊÇ HTTP Í· »ò ÓÊ ¼þ Í· ²» ±» ÔÊ Ðí ¼° ÔÚ ´« Êä ¿É ÄÜ ÊÜ µ½ Ó°
Ïì ʱ µÄ Áí ÖÖ °ì ·¨.
ÓÉ HTTP Í· °µ ʾ µÄ LINK META HEAD LINK META
