Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö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


Ïà¹ØÎĵµ£º

CSSÊ®ÌõËټǿھ÷

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

IE6.0¡¢IE7.0 ÓëFireFox CSS¼æÈݵĽâ¾ö·½·¨


IE6.0¡¢IE7.0 ÓëFireFox CSS¼æÈݵĽâ¾ö·½·¨
2009-04-29 14:51
1.DOCTYPE Ó°Ïì CSS ´¦Àí
2.FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ­¾ÓÖÐ, IE ²»ÐÐ
3.FF: body ÉèÖà text-align ʱ, div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ margin-left,margin-right) ·½¿É¾ÓÖÐ
4.FF: ÉèÖà padding ºó, div »áÔö¼Ó height ºÍ ......

CSSÃüÃû¹æ·¶


Ò»£®ÎļþÃüÃû¹æ·¶
[b]ÑùʽÎļþÃüÃû[/b]
[quote]Ö÷ÒªµÄ master.css
²¼¾Ö£¬°æÃæ layout.css
רÀ¸ columns.css
ÎÄ×Ö font.css
´òÓ¡Ñùʽ print.css
Ö÷Ìâ themes.css [/quote]
[b]CSS ID µÄÃüÃû[/b]
[quote]ҳͷ£ºheader
µÇ¼Ìõ£ºloginbar
±êÖ¾£ºlogo
²àÀ¸£ºsidebar
¹ã¸æ£ºbanner
µ¼º½£ºnav
×Óµ¼º½£ºsubnav
²Ë ......

CSSËټǿھ÷

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

¡¾×ª¡¿CSS ÃüÃû

  ³£ÓõÄÍøÕ¾ÃüÃû ÊÕ²Ø
1.CSS ID µÄÃüÃû
ҳͷ£ºheader
µÇ¼Ìõ£ºloginbar
±êÖ¾£ºlogo
²àÀ¸£ºsidebar
¹ã¸æ£ºbanner
µ¼º½£ºnav
×Óµ¼º½£ºsubnav
²Ëµ¥£ºmenu
×Ӳ˵¥£ºsubmenu
ËÑË÷£ºsearch
¹ö¶¯£ºscroll
Ò³ÃæÖ÷Ì壺main
ÄÚÈÝ£ºcontent
±êǩҳ£ºtab
ÎÄÕÂÁÐ±í£ºlist
ÌáʾÐÅÏ¢£ºmsg
С¼¼ÇÉ£ºtips
À¸Ä¿±êÌâ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ