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

CSS ѧϰ±Ê¼Ç

µ±Í¬Ò»¸ö HTML ÔªËØ±»²»Ö¹Ò»¸öÑùʽ¶¨Òåʱ£¬»áʹÓÃÄĸöÑùÊ½ÄØ£¿
Ò»°ã¶øÑÔ£¬ËùÓеÄÑùʽ»á¸ù¾ÝÏÂÃæµÄ¹æÔò²ãµþÓÚÒ»¸öеÄÐéÄâÑùʽ±íÖУ¬ÆäÖÐÊý×Ö 4 ÓµÓÐ×î¸ßµÄÓÅÏÈȨ¡£
1.    
ä¯ÀÀÆ÷ȱʡÉèÖÃ
2.    
ÍⲿÑùʽ±í
3.    
ÄÚ²¿Ñùʽ±í£¨Î»ÓÚ <head> ±êÇ©ÄÚ²¿£©
4.    
ÄÚÁªÑùʽ£¨ÔÚ HTML ÔªËØÄÚ²¿£©
Òò´Ë£¬ÄÚÁªÑùʽ£¨ÔÚ HTML ÔªËØÄÚ²¿£©ÓµÓÐ×î¸ßµÄÓÅÏÈȨ£¬ÕâÒâζ×ÅËü½«ÓÅÏÈÓÚÒÔϵÄÑùʽÉùÃ÷£º<head> ±êÇ©ÖеÄÑùʽÉùÃ÷£¬ÍⲿÑùʽ±íÖеÄÑùʽÉùÃ÷£¬»òÕßä¯ÀÀÆ÷ÖеÄÑùʽÉùÃ÷£¨È±Ê¡Öµ£©¡£
 
CSS Óï·¨
CSS Óï·¨ÓÉÈý²¿·Ö¹¹³É£ºÑ¡ÔñÆ÷¡¢ÊôÐÔºÍÖµ£º
selector {property: value}
Ñ¡ÔñÆ÷ (selector) ͨ³£ÊÇÄãÏ£Íû¶¨ÒåµÄ HTML ÔªËØ»ò±êÇ©£¬ÊôÐÔ (property) ÊÇÄãÏ£Íû¸Ä±äµÄÊôÐÔ£¬²¢ÇÒÿ¸öÊôÐÔ¶¼ÓÐÒ»¸öÖµ¡£ÊôÐÔºÍÖµ±»Ã°ºÅ·Ö¿ª£¬²¢ÓÉ»¨À¨ºÅ°üΧ£¬ÕâÑù¾Í×é³ÉÁËÒ»¸öÍêÕûµÄÑùʽÉùÃ÷£¨declaration£©£º
body {color: blue}
ÉÏÃæÕâÐдúÂëµÄ×÷ÓÃÊǽ« body ÔªËØÄÚµÄÎÄ×ÖÑÕÉ«¶¨ÒåΪÀ¶É«¡£ÔÚÉÏÊöÀý×ÓÖУ¬body ÊÇÑ¡ÔñÆ÷£¬¶ø°üÀ¨ÔÚ»¨À¨ºÅÄڵĵIJ¿·ÖÊÇÉùÃ÷¡£ÉùÃ÷ÒÀ´ÎÓÉÁ½²¿·Ö¹¹³É£ºÊôÐÔºÍÖµ£¬color ΪÊôÐÔ£¬blue Ϊֵ
 
 
ÔÚ CSS ÖУ¬ÀàÑ¡ÔñÆ÷ÒÔÒ»¸öµãºÅÏÔʾ£º
.center {text-align: center}
ÔÚÉÏÃæµÄÀý×ÓÖУ¬ËùÓÐÓµÓÐ center ÀàµÄ HTML ÔªËØ¾ùΪ¾ÓÖС£
 
 
CSS position ÊôÐÔ
ͨ¹ýʹÓàposition
ÊôÐÔ£¬ÎÒÃÇ¿ÉÒÔÑ¡Ôñ 4 Öв»Í¬ÀàÐ͵Ķ¨Î»£¬Õâ»áÓ°ÏìÔªËØ¿òÉú³ÉµÄ·½Ê½¡£
position ÊôÐÔÖµµÄº¬Ò壺
static
ÔªËØ¿òÕý³£Éú³É¡£¿é¼¶ÔªËØÉú³ÉÒ»¸ö¾ØÐοò£¬×÷ΪÎĵµÁ÷µÄÒ»²¿·Ö£¬ÐÐÄÚÔªËØÔò»á´´½¨Ò»¸ö»ò¶à¸öÐпò£¬ÖÃÓÚÆä¸¸ÔªËØÖС£
relative
ÔªËØ¿òÆ«ÒÆÄ³¸ö¾àÀë¡£ÔªËØÈÔ±£³ÖÆäδ¶¨Î»Ç°µÄÐÎ×´£¬ËüÔ­±¾ËùÕ¼µÄ¿Õ¼äÈÔ±£Áô¡£
absolute
ÔªËØ¿ò´ÓÎĵµÁ÷Íêȫɾ³ý£¬²¢Ïà¶ÔÓÚÆä°üº¬¿é¶¨Î»¡£°üº¬¿é¿ÉÄÜÊÇÎĵµÖеÄÁíÒ»¸öÔªËØ»òÕßÊdzõʼ°üº¬¿é¡£ÔªËØÔ­ÏÈÔÚÕý³£ÎĵµÁ÷ÖÐËùÕ¼µÄ¿Õ¼ä»á¹Ø±Õ£¬¾ÍºÃÏñÔªËØÔ­À´²»´æÔÚÒ»Ñù¡£ÔªËض¨Î»ºóÉú³ÉÒ»¸ö¿é¼¶¿ò£¬¶ø²»ÂÛÔ­À´ËüÔÚÕý³£Á÷ÖÐÉú³ÉºÎÖÖÀàÐ͵Ŀò¡£
fixed
ÔªËØ¿òµÄ±íÏÖÀàËÆÓÚ½« position ÉèÖÃΪ absolute£¬²»¹ýÆä°üº¬¿éÊÇÊÓ´°±¾Éí¡£
Ìáʾ£ºÏà¶Ô¶¨Î»Êµ¼ÊÉϱ»¿´×÷ÆÕͨÁ÷¶¨Î»Ä£Ð͵ÄÒ»²¿·Ö£¬ÒòÎªÔªËØµÄλÖÃÏà¶ÔÓÚËüÔÚÆÕͨÁ÷ÖеÄλÖá£
 
CSSʵÀý£º
http://www.w3school.com.cn/example/csse_examples.asp


Ïà¹ØÎĵµ£º

Div+CSS²¼¾ÖÈëÃŽ̳ÌÖ®Ò»

Ò»¡¢Ò³Ãæ²¼¾ÖÓë¹æ»®
ÔÚÍøÒ³ÖÆ×÷ÖУ¬ÓÐÐí¶àµÄÊõÓÀýÈ磺CSS¡¢HTML¡¢DHTML¡¢XHTMLµÈµÈ¡£ÔÚÏÂÃæµÄÎÄÕÂÖÐÎÒÃǽ«»áÓõ½Ò»Ð©ÓйØÓÚHTMLµÄ»ù±¾ÖªÊ¶£¬¶øÔÚÄãѧϰÕâÆªÈëÃŽ̳Ì֮ǰ£¬ÇëÈ·¶¨ÄãÒѾ­¾ßÓÐÁËÒ»¶¨µÄHTML»ù´¡¡£ÏÂÃæÎÒÃǾͿªÊ¼Ò»²½Ò»²½Ê¹ÓÃDIV+CSS½øÐÐÍøÒ³²¼¾ÖÉè¼Æ°É¡£ËùÓеÄÉè¼ÆµÚÒ»²½¾ÍÊǹ¹Ë¼£¬¹¹Ë¼ºÃÁË£¬Ò»°ãÀ´Ëµ»¹ÐèÒª ......

css¼æÈÝIE8


<meta http-equiv="x-ua-compatible" content="ie=7" />
IE6¡¢IE7¡¢FirefoxµÈä¯ÀÀÆ÷µÄ¼æÈÝÐÔÎÊÌâÈÃÍøÒ³Éè¼ÆÊ¦ÃÇ´óÉËÄԽ±¾À´ÍøÒ³Éè¼ÆÊǼþºÜÓÐȤµÄÊÂÇ飬µ«ÊÇÈ´±»Õâ¶àÓà¼æÈݹ¤×÷ÉËÄÔ½î£¬ÌØ±ðÊÇÈÃÈËÍÙÆúµÄIE6£¬¶àÉÙÈËÏëÈÃËüÏûʧ£¬¿ÉÊÇËü¾ÍÊÇÏûʧ²»ÁË£¬Î¢Èí»¹Ëµ²»»áÍ£Ö¹¶ÔIE6£¬Õæ¹»ÓôÃÆµÄ¡£
   &n ......

Css Hack

IE¶¼ÄÜʶ±ð*;±ê×¼ä¯ÀÀÆ÷(ÈçFirefox,Opera,Netscape)²»ÄÜʶ±ð*£»
IE6ÄÜʶ±ð*£¬µ«²»ÄÜʶ±ð !important,
IE7ÄÜʶ±ð*£¬Ò²ÄÜʶ±ð!important;
FF²»ÄÜʶ±ð*£¬µ«ÄÜʶ±ð!important;
дÁ½¾ä´úÂëÀ´¿ØÖÆÒ»¸öÊôÐÔ£¬Çø±ðFirefoxÓëIE6£º
background:orange;*background:blue; //
ÕâÒ»¾ä´úÂëд³öÀ´Ê±£¬ÄãÓÃfirefox»òÆäËü·ÇIEä¯ÀÀʱ ......

css¶¨¿í,js»»±³¾°£¬È¥Á´½ÓºóµÄ½¹µãÐéÏß¿ò£¬

1.span  µÄ overflow :hidden  width:70px  ; display:block(Ò»µãÒª¼ÓÉÏdivµÄ»°²»Óüӣ©
2.js¶¯Ì¬»»±³¾°,»»±³¾° style.backgroundImage = "url('images/bg1.jpg')";
3.ÓÃonFocus="this.blur()"À´Ïû³ýÁ´½ÓºóµÄ½¹µãÐéÏß¿ò
4. onMouseOver  onMouseOut onClick  Èý¸öʱ¼äÔÚÒ» ......

CSSËټǿھ÷

Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄÄλ¸ßÈ˰ÑCSS BUG±à³ÉÁË˳¿ÚÁïÁË£¡¿´¿´ºÃ²»ºÃ¼ÇסĨ£¿ Ò»¡¢IE±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£» ¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ