CSS ³õ¼¶½Ì³Ì
CSS ¸ÅÊö
CSS Ö¸²ãµþÑùʽ±í (Cascading Style Sheets)
Ñùʽ¶¨ÒåÈçºÎÏÔʾ HTML ÔªËØ
Ñùʽͨ³£´æ´¢ÔÚÑùʽ±íÖÐ
°ÑÑùʽÌí¼Óµ½ HTML 4.0 ÖУ¬ÊÇΪÁ˽â¾öÄÚÈÝÓë±íÏÖ·ÖÀëµÄÎÊÌâ
ÍⲿÑùʽ±í¿ÉÒÔ¼«´óÌá¸ß¹¤×÷ЧÂÊ
ÍⲿÑùʽ±íͨ³£´æ´¢ÔÚ CSS ÎļþÖÐ
¶à¸öÑùʽ¶¨Òå¿É²ãµþΪһ
Ñùʽ½â¾öÁËÒ»¸öÆÕ±éµÄÎÊÌâ
HTML ±êǩԱ¾±»Éè¼ÆÎªÓÃÓÚ¶¨ÒåÎĵµÄÚÈÝ¡£Í¨¹ýʹÓà <h1>, <p>, <table> ÕâÑùµÄ±êÇ©£¬HTML µ±³õ±»Ö¸ÍûÓÃÀ´±í´ï“ÕâÊDZêÌ┡¢“ÕâÊǶÎÂ䔡¢“ÕâÊDZí¸ñ”Ö®ÀàµÄÐÅÏ¢¡£¶øÎĵµµÄ²¼¾Ö±»ÆÚÍûÓÉä¯ÀÀÆ÷À´Íê³É£¬¶ø²»Ê¹ÓÃÈκεĸñʽ»¯±êÇ©¡£
ÓÉÓÚÁ½ÖÖÖ÷ÒªµÄä¯ÀÀÆ÷£¨Netscape ºÍ Internet Explorer£©²»¶ÏµØ½«Ð嵀 HTML ±êÇ©ºÍÊôÐÔ£¨±ÈÈç×ÖÌå±êÇ©ºÍÑÕÉ«ÊôÐÔ£©Ìí¼Óµ½ HTML ¹æ·¶Ö®ÖУ¬Òò´Ë´´½¨ÎĵµÄÚÈÝÇåÎúµØ¶ÀÁ¢ÓÚÎĵµ±íÏÖ²ãµÄÕ¾µã±äµÃÔ½À´Ô½À§ÄÑ¡£
ΪÁ˽â¾öÕâ¸öÎÊÌ⣬ÍòÎ¬ÍøÁªÃË£¨W3C£©£¬Õâ¸ö·ÇÓªÀûµÄ±ê×¼»¯ÁªÃË£¬¼ç¸ºÆðÁË HTML ±ê×¼»¯µÄʹÃü£¬²¢ÔÚ HTML 4.0 Ö®Íâ´´Ôì³ö STYLES£¨Ñùʽ£©¡£
ËùÓеÄÖ÷Á÷ä¯ÀÀÆ÷¾ùÖ§³Ö²ãµþÑùʽ±í¡£
Ñùʽ±í¼«´óµØÌá¸ßÁ˹¤×÷ЧÂÊ
Ñùʽ±í¶¨ÒåÈçºÎÏÔʾ HTML ÔªËØ£¬ÖîÈç HTML 3.2 µÄÑùʽÖеÄ×ÖÌå±êÇ©ºÍÑÕÉ«ÊôÐÔͨ³£±»±£´æÔÚÍⲿµÄ .css ÎļþÖС£Í¨¹ý½ö½ö±à¼Ò»¸ö¼òµ¥µÄ CSS Îĵµ£¬ÍⲿÑùʽ±íʹÄãÓÐÄÜÁ¦Í¬Ê±¸Ä±äÕ¾µãÖÐËùÓÐÒ³Ãæ²¼¾ÖµÄÍâ¹Û¡£
ÓÉÓÚÔÊÐíͬʱ¿ØÖƶàÖØÒ³ÃæµÄÑùʽºÍ²¼¾Ö£¬CSS ¿ÉÒԳƵÃÉÏ WEB Éè¼ÆÁìÓòµÄÒ»¸öÍ»ÆÆ¡£×÷ÎªÍøÕ¾¿ª·¢Õߣ¬Äã¿ÉÒÔΪÿ¸ö HTML ÔªËØ¶¨ÒåÑùʽ£¬²¢½«Ö®Ó¦ÓÃÓÚÄãÏ£ÍûµÄÈÎÒâ¶àµÄÒ³ÃæÖС£ÈçÐè½øÐÐÈ«¾Ö±ä»»£¬Ö»Ðè¼òµ¥µØ¸Ä±äÑùʽ£¬È»ºóÍøÕ¾ÖеÄËùÓÐÔªËØ¾ù»á±»×Ô¶¯µØ¸üС£
¶àÖØÑùʽ½«²ãµþΪһ¸ö
Ñùʽ±íÔÊÐíÒÔ¶àÖÖ·½Ê½¹æ¶¨ÑùʽÐÅÏ¢¡£Ñùʽ¿ÉÒÔ±»¹æ¶¨ÓÚµ¥¸öµÄ HTML ÔªËØÖУ¬ÔÚ HTML Ò³µÄÍ·ÔªËØÖУ¬»òÔÚÒ»¸öÍⲿµÄ CSS ÎļþÖС£ÉõÖÁ¿ÉÒÔÔÚÒ»¸öµ¥Ò»µÄ HTML ÎĵµÄÚ²¿ÒýÓöà¸öÍⲿÑùʽ±í¡£
²ãµþ´ÎÐò
µ±Í¬Ò»¸öHTMLÔªËØ±»²»Ö¹Ò»¸öÑùʽËù¶¨Òåʱ£¬»áʹÓÃÄĸöÑùÊ½ÄØ£¿
Ò»°ã¶øÑÔ£¬ËùÓеÄÑùʽ»á¸ù¾ÝÏÂÃæµÄ¹æÔò²ãµþÓÚÒ»¸öеÄÐéÄâÑùʽ±íÖУ¬ÆäÖÐÊý×Ö 4 ÓµÓÐ×î¸ßµÄÓÅÏÈȨ¡£
ä¯ÀÀÆ÷ȱʡÉèÖÃ
ÍⲿÑùʽ±í
ÄÚ²¿Ñùʽ±í£¨Î»ÓÚ <head> ±êÇ©ÄÚ²¿£©
ÄÚÁªÑùʽ£¨ÔÚ HTML ÔªËØÄÚ²¿£©
Òò´Ë£¬ÄÚÁªÑùʽ£¨ÔÚ HTML ÔªËØÄÚ²¿£©ÓµÓÐ×î¸ßµÄÓÅÏÈȨ£¬ÕâÒâζ×ÅËü½«ÓÅÏÈÓÚÒÔϵÄÑùʽÉùÃ÷£º<head> ±êÇ©ÖеÄÑùʽÉùÃ÷£¬ÍⲿÑùʽ±íÖеÄÑùʽÉùÃ÷£¬»òÕßä¯ÀÀÆ÷ÖеÄÑùʽÉùÃ÷£¨
Ïà¹ØÎĵµ£º
ÍøÒ³Éè¼ÆDIV+CSSÔªËØ½âÎö£¬<head>²¿·Öǰ£º
£¨Ò»£© DOCTYPE ºÍDTD
ÓÃDWн¨ÍøÒ³Ê±£¬×Ü»áÉú³ÉÒ»¾ä
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Õâ¾äÊÇDOCTYPEÉùÃ÷£¬DOCTY ......
ǰÑÔ£ºCSS²¼¾ÖÓ봫ͳ±í¸ñ(table)²¼¾Ö×î´óµÄÇø±ðÔÚÓÚ£ºÔÀ´µÄ¶¨Î»¶¼ÊDzÉÓñí¸ñ£¬Í¨¹ý±í¸ñµÄ¼ä¾à»òÕßÓÃÎÞɫ͸Ã÷µÄGIFͼƬÀ´¿ØÖÆÎIJ¼¾Ö°æ¿éµÄ¼ä¾à£»¶øÏÖÔÚÔò²ÉÓòã(div)À´¶¨Î»£¬Í¨¹ý²ãµÄmargin,padding,borderµÈÊôÐÔÀ´¿ØÖưæ¿éµÄ¼ä¾à¡£
(Ò») CSS2ºÐÄ£ÐÍ
ºÐÄ£ÐÍÖ÷Òª¶¨ÒåËĸöÇøÓò£ºÄÚÈÝ(content)¡¢±ß¿ò¾à(paddin ......
ÔÚDIV+CSSµÄʱ´úÀӵÓÐÒ»¸öÌùÐĵÄCSSÊÖ²á»á¼«´óµÄÔö¼ÓÍøÒ³Éè¼ÆµÄЧÂÊ¡£Ä¿Ç°ÊÐÃæÉÏ´ó¼ÒÓõÄ×î¶àµÄ¾ÍÊÇËÕÉòСÓêÖÆ×÷µÄ¡¶CSS 2.0ÖÐÎÄÊֲᡷ£¬ÎÒÒ²Ò»Ö±ÓÃÁËÓÐËÄÎåÄêÁË¡£ÊÖ²áʹÓÃCHM¸ñʽ£¬ÄÚÈݷdz£µÄ·á¸»£¬¼¸ºõ°üÀ¨ÁËCSS2µÄËùÓÐÄÚÈÝ¡£
ÏÂÔØµØÖ·
http://www.javatang.com/_download/css2handbook.rar ......
ÏÖÔÚÍøÕ¾»»Æ¤·ôÊDZȽϳ£¼ûµÄ¹¦ÄÜ£¬´ó¶àÊýÂÛ̳¶¼Óеģ¬ÒªÏëʵÏÖÕâÑùЧ¹û¿ÉÒÔ¿´ÈçÏ´úÂ룺Html´úÂ벿·Ö:
1.ÒªÓÐÒ»¸ö´øidµÄÑùʽ±íÁ´½Ó,ÎÒÃÇҪͨ¹ý²Ù×÷Õâ¸öÁ´½ÓÀ´µ÷Óò»Í¬µÄhref.
<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />
2.Ƥ·ôÑ¡Ôñ°´Å¥(ºǫ́Ϊÿ¸öliÌí¼Óonclickʼþ,´¥·¢»»· ......