ÕûÀí¼°ÓÅ»¯CSS´úÂëµÄ7¸öÔÔò
¡¡¡¡×÷ÎªÍøÒ³Éè¼ÆÊ¦(ǰ¶Ë¹¤³Ìʦ)£¬Äã¿ÉÄÜ»¹¼ÇµÃÔø¾µÄÄǸöÍøÒ³´óС½¨Òé:Ò»¸öÍøÒ³£¨°üÀ¨HTML¡¢CSS¡¢Javacript¡¢FlashºÍͼ
Ƭ£©¾¡Á¿²»Òª³¬¹ý30KBµÄ´óС£¬Ëæ×Å»¥ÁªÍøµÄÈÕÒæÅÓ´ó£¬ÍøÂç´ø¿íÒ²ÔÚ·ÉËÙ·¢Õ¹£¬ºÜ¶àÉè¼ÆÊ¦ÒѾ²»ÔÙ¿¼ÂÇÕâÌõ30KBµÄÀíÏë×¼Ôò¡£Ëæ×ÅÔ½À´Ô½ÊÜ»¶ÓµÄ
CSS²¼¾ÖºÍJavascript¶ÔÍøÕ¾Óû§ÌåÑéµÄÇ¿»¯£¬Ê¹µÃÕâÖÖÏÖÏóÔ½À´Ô½ÆÕ±é£¬ÓÈÆäÊǶÔÓÚ´óÐÍÍøÕ¾À´Ëµ£¬½ö½öÒ»¸öCSSÎļþ¾ÍÒѾ³¬¹ýÁË30KBµÄÉÏ
ÏÞ¡£
¡¡¡¡µ«ÊǼ´±ãÈç´Ë£¬ÏÖÔÚÒ²Óкܶà×¼ÔòÀ´°ïÖúÄãÔÚÍê³ÉCSS²¼¾Öºó½øÐÐCSS´úÂëµÄѹËõºÍÓÅ»¯¡£CSS´úÂëÓÅ»¯µÄÄ¿µÄ²¢²»½ö½öÊǼõÉÙCSSÎļþµÄ´ó
С£¬Ëü»¹ÄÜÈÃÄãµÄCSS´úÂë¸üÓÐÌõÀí¡¢¸ü¸ßЧ¡£ÔÚ±òGo£¬Ä㽫»áѧµ½¸ü¶à¹ØÓÚCSS´úÂëÓÅ»¯µÄ֪ʶ£¬ÕâÄܰïÄã¸üÊìϤCSS´úÂëµÄ¹æ·¶ÐÔ¡£ÊìϤÕâЩ¸ÅÄÄÜ
ÈÃÄã³ÉΪ¸üÈ«ÃæµÄÍøÒ³Éè¼ÆÊ¦£¬´Ó¶øÐ´³ö¸üÓÅ»¯µÄCSS´úÂë¡£
¡¡¡¡Äú»¹¿ÉÒÔ²ÎÔÄ¡¶10¸öCSS¼òд¼¼ÇÉÈÃÄãÓÀÔ¶ÊÜÓÃ
¡·¡£
1.ʹÓüòд
¡¡¡¡Èç¹ûÄãÏÖÔÚ»¹¶Ô¼òдһµã¶¼²»Á˽⣬ÄÇÄã¾ÍÓÖдÂäÎéÁË£¬²»¹ýÐҺã¬Ñ§ÆðÀ´²¢²»ÊǺÜÄÑ¡£Ê¹ÓüòдÊÇÒ»ÖÖÈôúÂë¼õÉÙµÄ×î¼òµ¥·½·¨¡£Ã»ÓбÈÏÖÔÚ¸üÊʺÏʵ¼ù´úÂë¼òдµÄʱºòÁË£¬»¹µÈʲô£¬Ò»ÆðÀ´¿´¿´°É¡£
¡¡¡¡Margin¡¢border¡¢padding¡¢background¡¢font¡¢list-styleºÍoutline ¶¼ÊÇ¿ÉÒÔ½øÐмòдµÄÊôÐÔ¡£CSS¼òд¾ÍÊDz»ÔÙʹÓò»Í¬µÄÏàÀàËÆÊôÐÔµÄÉùÃ÷…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
Äã¿ÉÒÔ°ÑËüÃǼòд³ÉÕâÑù:
p { margin: 10px 20px 30px 40px; }
ä¯ÀÀÆ÷¿ÉÒÔͨ¹ý²»Í¬ÊýÁ¿µÄÊôÐÔÖµÀ´½âÊÍÄ㶨ÒåµÄCSS´úÂ룬Ç뿴ͼ½â:
ÉÏÃæµÄ¼òдͼ½â˵Ã÷µÄÊÇÒÀ¾Ý²»Í¬µÄÊôÐÔÖµ¿ÉÒÔ½øÐв»Í¬µÄËõд£¬ÕâÖÖ·½·¨Í¬ÑùÊÊÓÃÓÚpaddingºÍBorder-widthÊôÐÔ¡£
FontµÄ¼òд¶ÔÓÚËõС´úÂëÁ¿ºÜÓаïÖú£¬¶øÇÒÄÜÈÃÄãÉÙ´òºÜ¶à×Öĸ; )
Font¼òдµÄÀý×Ó¡£×¢:Èç¹ûûÓж¨Òåij¸öÊôÐÔÖµµÄ»°£¬½«¼Ì³Ð¸±¼¶ÔªËص͍Òå»òʹÓÃĬÈÏÖµ¡£
Èç¹ûÄã¶ÔÒÔÉϼòд·½·¨ÒѾÁËÈçÖ¸ÕÆ£¬Ä㻹¿ÉÒÔ¿´¿´ÒÔÏÂÁ½¸ö¼òд½Ì³Ì(Ó¢ÎÄ)£¬Ò²Ðí»á¶ÔÄãÓÐËù°ïÖú:
1.CSS Shorthand Guide
(CSS¼òдָµ¼)
2.Efficient CSS with shorthand properties
(¸ßЧCSSÊôÐԵļòд)
2.±ÜÃâʹÓÃHack
Jon HickµÄ²©¿Í
hicksdesign.co.uk/journal
ʹÓÃä¯ÀÀÆ÷Ìõ¼þÐÔ×¢ÊÍ
¡¡¡¡HackÊÇÒ»¸öÔã¸âµÄ¶«Î÷£¬Ëü»áΪ²»Í¬ä¯ÀÀÆ÷¶¨ÒåÒ»ÑùµÄ´úÂ룬ʹµÃCSS·±Èß¡£ÏÖÔÚÎÒÃÇÖªµÀʹÓÃÌõ¼þ
Ïà¹ØÎĵµ£º
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄÄλ¸ßÈ˰ÑCSS BUG±à³ÉÁË˳¿ÚÁïÁË£¡¿´¿´ºÃ²»ºÃ¼ÇסĨ£¿ Ò»¡¢IE±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£» ¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄ ......
CSSÓï·¨ (²»Çø·Ö´óСд) ¡¡¡¡JavaScriptÓï·¨ (Çø·Ö´óСд)
border ¡¡¡¡border
border-bottom ¡¡¡¡borderBottom
border-bottom-color ¡¡¡¡borderBottomColor
border-bottom-style¡¡¡¡ borderBottomStyle
border-bottom-width ¡¡¡¡borderBottomWidth
border-color ¡¡¡¡borderColor
border-left ¡¡¡¡borderLeft ......
¹ö¶¯ÌõÑùʽÖ÷񻃾¼°µ½ÈçÏÂCSSÊôÐÔ:
overflowÊôÐÔ: ¼ìË÷»òÉèÖõ±¶ÔÏóµÄÄÚÈݳ¬¹ýÆäÖ¸¶¨¸ß¶È¼°¿í¶ÈʱÈçºÎÏÔʾÄÚÈÝ
overflow: auto; ÔÚÐèҪʱÄÚÈÝ»á×Ô¶¯Ìí¼Ó¹ö¶¯Ìõ
overflow: scroll; ×ÜÊÇÏÔʾ¹ö¶¯Ìõ
overflow-x: hidden; ½ûÖ¹ºáÏòµÄ¹ö¶¯Ìõ
overflow-y: scroll; ×ÜÊÇÏÔʾ×ÝÏò¹ö¶¯Ìõ
width: 568px; width: 98%; ÉèÖÃÇøÓòµÄ ......
CSS¶Ôä¯ÀÀÆ÷µÄ¼æÈÝÐÔÓÐʱÈÃÈ˺ÜÍ·ÌÛ,»òÐíµ±ÄãÁ˽⵱Öеļ¼ÇɸúÔÀí,¾Í»á¾õµÃÒ²²»ÊÇÄÑÊÂ,´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû.
CSS¼¼ÇÉ
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ vertical-align:middle; ......
»¹Ëã²»´íµÄÎÄÕ£¬ËäÈ»ÌõÀíÐÔ²»ÊǷdz£Çå³þ£¬Ò²×ªÌùÊÕÁ˰ɣ¬·½±ã²é×ÊÁÏ¡£
CSS¶Ôä¯ÀÀÆ÷Æ÷µÄ¼æÈÝÐÔ¾ßÓкܸߵļÛÖµ£¬Í¨³£Çé¿öÏÂIEºÍFirefox´æÔںܴóµÄ½âÎö²îÒ죬ÕâÀï½éÉÜһϼæÈÝÒªµã¡£
¡¡¡¡³£¼û¼æÈÝÎÊÌ⣺
¡¡¡¡1.DOCTYPE Ó°Ïì CSS
´¦Àí
¡¡¡¡2.FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ ......