Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

css±³¾°Í¼Æ¬Ïà¹Ø

                              CSS±³¾°ÊôÐÔ
±³¾°ÑÕÉ«ÊôÐÔ(background-color)
Õâ¸öÊôÐÔΪHTMLÔªËØÉ趨±³¾°ÑÕÉ«£¬Ï൱ÓÚHTMLÖÐbgcolorÊôÐÔ¡£
body {background-color:#99FF00;}
ÉÏÃæµÄ´úÂë±íʾBodyÕâ¸öHTMLÔªËØµÄ±³¾°ÑÕÉ«ÊÇ´äÂÌÉ«µÄ¡£
±³¾°Í¼Æ¬ÊôÐÔ(background-image)
Õâ¸öÊôÐÔΪHTMLÔªËØÉ趨±³¾°Í¼Æ¬£¬Ï൱ÓÚHTMLÖÐbackgroundÊôÐÔ¡£
<body style="background-image:url(../images/css_tutorials/background.jpg)">
ÉÏÃæµÄ´úÂëΪBodyÕâ¸öHTMLÔªËØÉ趨ÁËÒ»¸ö±³¾°Í¼Æ¬¡£
±³¾°Öظ´ÊôÐÔ(background-repeat)
Õâ¸öÊôÐÔºÍbackground-imageÊôÐÔÁ¬ÔÚÒ»ÆðʹÓ㬾ö¶¨±³¾°Í¼Æ¬ÊÇ·ñÖØ¸´¡£Èç¹ûÖ»ÉèÖÃbackground-imageÊôÐÔ£¬Ã»ÉèÖÃbackground-repeatÊôÐÔ£¬ÔÚȱʡ״̬Ï£¬Í¼Æ¬¼ÈºáÏòÖØ¸´£¬ÓÖÊúÏòÖØ¸´¡£
• repeat-x ±³¾°Í¼Æ¬ºáÏòÖØ¸´
• repeat-y ±³¾°Í¼Æ¬ÊúÏòÖØ¸´
• no-repeat ±³¾°Í¼Æ¬²»Öظ´
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
ÉÏÃæµÄ´úÂë±íʾͼƬÊúÏòÖØ¸´¡£
±³¾°¸½×ÅÊôÐÔ(background-attachment)
Õâ¸öÊôÐÔºÍbackground-imageÊôÐÔÁ¬ÔÚÒ»ÆðʹÓ㬾ö¶¨Í¼Æ¬ÊǸúËæÄÚÈݹö¶¯£¬»¹Êǹ̶¨²»¶¯¡£Õâ¸öÊôÐÔÓÐÁ½¸öÖµ£¬Ò»¸öÊÇscroll£¬Ò»¸öÊÇfixed¡£È±Ê¡ÖµÊÇscroll¡£
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
ÉÏÃæµÄ´úÂë±íʾͼƬ¹Ì¶¨²»¶¯£¬²»ËæÄÚÈݹö¶¯¶ø¶¯¡£
±³¾°Î»ÖÃÊôÐÔ(background-position)
Õâ¸öÊôÐÔºÍbackground-imageÊôÐÔÁ¬ÔÚÒ»ÆðʹÓ㬾ö¶¨Á˱³¾°Í¼Æ¬µÄ×î³õλÖá£
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
ÉÏÃæµÄ´úÂë±íʾ±³¾°Í¼Æ¬µÄ³õʼλÖþàÀëÍøÒ³×î×óÃæ20px£¬¾àÀëÍøÒ³×îÉÏÃæ60px¡£
±³¾°ÊôÐÔ(background)
Õâ¸öÊôÐÔÊÇÉèÖñ³¾°Ïà¹ØÊôÐÔµÄÒ»ÖÖ¿ì½ÝµÄ×ÛºÏд·¨£¬ °üÀ¨background-color, background-image, background-repeat, backgroundattachment, background-position¡£
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
ÉÏÃæµÄ´úÂë±íÊ


Ïà¹ØÎĵµ£º

CSS¹«ÓÃÎļþ

ÓÉÓÚ¸÷ä¯ÀÀÆ÷µÄĬÈÏCSSÑùʽ²»Ò»Ñù£¬ÎÒÃDZØÐëдһ¸öCSS ResetͳһÆðÀ´¡£
ͨ³£ÎÒµÄ×ö·¨ÊÇÔÚcommon.cssÀïдȫ¾Ö¿ØÖÆ£¬ÕâÀïÃæÒ²°üÀ¨headerºÍfooter£¬ÆäËüCSSÎļþ¾Íͨ¹ý@import url(”common.css”);ÒýÓá£
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-family:Ari ......

³ÎÇåDIV+CSSÉè¼ÆµÄÎóÇø


µ±DIV+CSSƽµØÆð¾ªÀ×ͻȻ³öÏÖÔÚÍøÒ³Éè¼ÆÐÐÒµµÄʱºò£¬¹Ù·½¡¢Ãñ¼äÎÞ²»ÍƳ籸ÖÁ£¬·Â·ðTableÉè¼ÆµÄʱ´ú¾Í
ÒªÖսᣬÂíÉϾÍÒª²½ÈëDIV+CSSµÄʱ´ú£¬²»¶®µÃDIV+CSSÄã¶¼²»ºÃÒâ˼˵Äã»áÍøÒ³Éè¼Æ£¬²»ÖªDIV+CSSÄã¶¼²»
ºÃÒâ˼˵ÄãÊÇÕ¾³¤£¬ÄãÒª»¹ÊÇÓÃTABLEÀ´Éè¼ÆÕ¾µã£¬ÎÞÊý±ÉÒÄÖ®¹â¾ÍͶÉä¶øÀ´¡£
¡¡¡¡È»¶øDIV+CSSÕæµÄÓÐÕâôÉñÂð?¸ÃÔõà ......

IE7ÖÐÉú³É¸ßÖÊÁ¿CSSËõÂÔͼ¼¼ÇÉ

ÔÚǰ¶Ë¿ª·¢ÖУ¬ÎÒÃǾ­³£Óöµ½ÕâÑùµÄÇé¿ö£º·þÎñÆ÷´«µ½Ç°¶ËµÄͼƬÐèÒªËõСÒÔÏÔʾ£¨ÈçÏ£©£¬ÔÚ½«ÆäËõ·ÅÖ®ºó£¬IEÖÐͼƬЧ¹û²»ÈÝÀÖ¹Û¡£
<img class="thumb" src=http://www.webyi.com/wschool/wdesign/CSS/20090905/"pic.jpg" alt="This image is really 500x500 big" width="50" height="50" />
IE7Ö§³Ö×Ô¶¨ÒåË«Èý´Î&ldq ......

CSS³£ÓÃÊôÐÔ

Css³£ÓÃÊôÐÔ£º
1. color, background-color£º±íʾÑÕÉ«µÄ¹Ø¼ü×Ö£¬16½øÖÆÊý£¨http://www.clagnut.com/blog/260ÖÐÌṩµÄcolor
scheme¹¤¾ß£©
2. font-family£º¸ÃÊôÐÔµÄÖµ¿ÉÒÔÊÇÒ»×é×ÖÌ壬°´Ï²»¶³Ì¶ÈÅÅÐòµÄ×ÖÌåÁÐ±í¡£Ò»Ð©ÖÐÎÄ×ÖÌåµÄÁÐ±í£º
WindowsµÄһЩ£º
·        
ÐÂ&# ......

XMLÓëCSSÀàÑ¡Ôñ·ûµÄʹÓÃ

Class.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="class.css"?>
<bookdetail>
<book class="A">
<author>²ÜÑ©ÇÛ</author>
<title>ºìÂ¥ÃÎ</title>
<price>60.00</price>
</book>
<book class="A"& ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ