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ÊôÐÔÉùÃ÷»¯³ÉÒ»ÐУ¬ÓÖ³ÆÎªCSS´úÂëÓÅ»¯¡£CSS¼òдµÄ×î´óºÃ´¦¾ÍÊÇÄܹ»ÏÔ׿õÉÙ
CSSÎļþµÄ´óС£¬Æäʵ»¹ÓкܶàÆäËûÒæ´¦¡£Ó·Ö×¶øÔÓÂÒµÄCSSÑùʽ±í»áʹÄãÓöµ½ÎÊÌâÊÇÄÑÒÔµ÷ÊÔ¡£ÓÈÆäÊǵ±Ò»
¸öÍŶÓÔÚ½øÐÐÉè¼ÆµÄʱºò£¬ÄãµÄÓ·Ö×µÄCSS´úÂë»áʹÄãµÄÍŶӯäËû³ÉÔ±µÄ¹¤×÷ЧÂÊϽµ¡£
¡¡¡¡½ñÌ죬ÕûÀíÁËһЩCSS¼òÐ ......
ÔÚÍøÕ¾Éè¼ÆµÄʱºò£¬Ó¦¸Ã×¢ÒâcssÑùʽ¼æÈݲ»Í¬ä¯ÀÀÆ÷ÎÊÌâ£¬ÌØ±ðÊǶÔÍêȫʹÓÃDIV CSSÉè¼ÆµÄÍø£¬¾ÍÓ¦¸Ã¸ü×¢ÒâIE6 IE7 FF¶ÔCSSÑùʽµÄ¼æÈÝ£¬²»È»£¬ÄãµÄÍøÂÒ¿ÉÄܳöÈ¥²»Ïë³öÏÖµÄЧ¹û£¡
ËùÓÐä¯ÀÀÆ÷ ͨÓÃ
height: 100px;
IE6 רÓÃ
_height: 100px;
IE6 רÓÃ
*height: 100px;
IE7 רÓÃ
*+height: 100px;
IE7¡¢FF ¹²ÓÃ
height ......
ÔÚǰ¶Ë¿ª·¢ÖУ¬ÎÒÃǾ³£Óöµ½ÕâÑùµÄÇé¿ö£º·þÎñÆ÷´«µ½Ç°¶ËµÄͼƬÐèÒªËõСÒÔÏÔʾ£¨ÈçÏ£©£¬ÔÚ½«ÆäËõ·ÅÖ®ºó£¬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 ......
Ϊµ¥¸ö±êÇ©¶¨Ò壺
br{
text-align: center;
color: #000000;
font-family:ËÎÌå;
}
Ϊbr±êǩָ¶¨ÁË3¸öÑùʽÊôÐÔ£¬°üº¬¶ÔÆä·½Ê½¡¢ÎÄ×ÖÑÕÉ«¼°×ÖÌå¡£
ÔÚÍøÒ³ÖÐÒ»¸öÿ¸öIDÖ»ÄÜʹÓÃÒ»´Î£¬È磺
<div id="main"></div>
ÔÚCSSÑùʽ±íÖУ¬IDÑ ......
¡¡¡¡Ïë³ÉΪһÃûCSSר¼Ò£¬½ö½öÊìÁ·Ê¹ÓÃCSSÑ¡Ôñ·û(selectors)ÊÇÔ¶Ô¶²»¹»µÄ¡£»¹ÔÚÓÚ¶Ô¹¤×÷µÄÕûÌ广»®£¬¹¤×÷Á÷³ÌµÄÕÆÎÕÒÔ¼°Ìá¸ßÑùʽ±íµÄ¿Éά»¤ÐÔºÍЧÂÊ¡£ÓÃCSS¿ÉÒÔ´´½¨³öÎÒÃÇÏëÒªµÄÃÀÃî¾øÂ×µÄÍøÕ¾£¬¶øÐ´CSS±¾Éí¾ÍÊÇÒ»ÖÖÏíÊÜ¡£ ÄÇôÎÒÃÇÓ¦¸ÃÈçºÎ´´½¨¸ü¾ßÎüÒýÁ¦µÄÑùʽ±í?ÄãµÄÑùʽ±íÓ¦¸Ã¾ßÓÐÄÄÐ©ÌØÐÔÄØ?ͨ¹ýѧϰ²¢½áºÏÎÒ×Ô¼ºµÄ¹¤ ......