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

CSS ͸Ã÷¶È´ó»ã×Ü


¡¡¡¡½üÄêÀ´£¬CSS²»Í¸Ã÷ËãµÃÉÏÊÇÒ»ÖÖÏ൱Á÷Ðеļ¼Êõ£¬µ«ÔÚ¿çä¯ÀÀÆ÷Ö§³ÖÉÏ£¬¶ÔÓÚ¿ª·¢ÕßÀ´Ëµ£¬¿ÉÒÔ˵ÊÇÒ»¼þÁîÈËÍ·ÌÛµÄÊÂÇ顣Ŀǰ»¹Ã»ÓÐÒ»¸öͨÓ÷½·¨£¬ÒÔÈ·±£Í¸Ã÷¶ÈÉèÖÿÉÒÔÔÚĿǰʹÓõÄËùÓÐä¯ÀÀÆ÷ÉÏÓÐЧ¡£
¡¡¡¡Õâƪ»ã×ÜÖ÷ÒªÊÇÌṩһЩCSS²»Í¸Ã÷µÄÏêϸ½éÉÜ£¬´úÂëʾÀýºÍ½âÊÍ£¬ÒÔʵÏÖÕâÏîÓÐÓõÄCSS¼¼ÊõÔÚÄúµÄÏîÄ¿ÖмæÈÝËùÓÐä¯ÀÀÆ÷¡£
¡¡¡¡¹ØÓÚCSS ͸Ã÷¶È£¬ÓÐÒ»µãÐèҪעÒâµÄÊÇ£¬ËüËäȻʹÓÃÁ˺ܶàÄ꣬µ«ËüÒ»Ö±ÒÔÀ´¶¼²»ÊÇÒ»¸ö±ê×¼ÊôÐÔ¡£ËüÊÇÒ»ÖַDZê×¼¼¼Êõ£¬Ó¦¸ÃÊÇCSS3¹æ·¶µÄÒ»²¿·Ö¡£
1. ¾ÉµÄOpacityÉèÖÃ
¡¡¡¡ÒÔÏ´úÂëÊÇFirefoxºÍSafari¾É°æ±¾ËùÐèµÄ͸Ã÷¶ÈÉèÖÃ:
#myElement {
-khtml-opacity: .5;
-moz-opacity: 0.5;
}
¡¡¡¡-khtml-opacityÉèÖÃÊÇÕë¶Ô¾É°æ±¾µÄWebkitäÖȾÒýÇ棬ÕâÖÖרÓÃÊôÐÔÏÖÔÚÒѾ­¹ýʱÁË£¬³ý·ÇÄ㻹ÓÐÐèÒª¼æÈÝSafari 1.x.µÄÓû§¡£
µÚ¶þÐÐʹÓÃרÓÃÊôÐÔ -moz-opacityÊǠΪÁ˼æÈÝMozillaäÖȾÒýÇæµÄÔçÆÚ°æ±¾£¬ÒÔ¼°×·Ëݵ½Netscape Navigator¡£Firefox 0.9ÒÔºó¾Í²»ÒªÇóʹÓÃ-moz-opacityÊôÐÔ£¬Firefox 3.5£¨ÏÖÔÚʹÓÃGeckoÒýÇ棩ÒѾ­²»ÔÚÖ§³ÖÕâ¸öÊôÐÔ¡£
2. ÔÚFirefox, Safari, ChromeºÍOperaϵÄCSS͸Ã÷¶È
¡¡¡¡ÒÔÏ´úÂëÊdzýÁËIEÍâµÄËùÓе±Ç°ä¯ÀÀÆ÷µÄ×î¼òµ¥£¬×î×îеIJ»Í¸Ã÷¶ÈÉèÖõÄCSSÓï·¨£º
#myElement {
opacity: .7;
}
¡¡¡¡ÉÏÊöÓï·¨½«ÉèÖÃÒ»¸öÔªËØΪ70£¥²»Í¸Ã÷£¨»ò30%͸Ã÷£©¡£ÉèÖÃopacity:1½«Ê¹ÔªËز»Í¸Ã÷£¬¶øÉèÖÃopacity:0½«Ê¹µÃÔªËØÍêÈ«²»¿É¼û¡£Äã
Ö»Òª¼Çס“opacity”µÈͬÓÚ“²»Í¸Ã÷”¾ÍºÜÈÝÒ×¼ÇסÁË£¬opacityֵԽС¾ÍÔ½½Ó½ü͸Ã÷¡£
¡¡¡¡opacityÊôÐÔ¿ÉÒÔ¾«È·µØСÊýµãºóÁ½Î»£¬ËùÒÔֵȡ“.01”ºÍ“.02”ʵ¼ÊÉÏÊDz»Í¬µÄ£¬ËäÈ»¿É¼û¶ÈºÜÄѱ»·¢¾õ¡£Ò»°ãÇé¿öÏ£¬¾«È·µ½Ò»Î»¾Í¿ÉÒÔÁË£¬È¡ÖµÈç“.3”»ò“.7”¡£
3. IEϵÄCSS͸Ã÷¶È
¡¡¡¡IEÏÂÕÕ¾ÉÓбðÓÚÆäËûä¯ÀÀÆ÷£¬²¢ÇÒÄ¿Ç°Ò²ÓÐÈý¸ö²»Í¬°æ±¾µÄIEÔڹ㷺ʹÓã¬Í¸Ã÷¶ÈÉèÖÃÊDz»Í¬µÄ£¬ÓÐʱÐèÒª¶îÍâµÄCSSÀ´¿ØÖÆ£º
#myElement {
filter: alpha(opacity=40);
}
¡¡¡¡ÉÏÃæµÄCSSʹÓÃרÓõÄfilterÊôÐÔÀ´ÉèÖÃIE6-8͸Ã÷¶È¡£¶ÔÓÚIE6ºÍIE7ÐèҪעÒ⣺ΪÁËʹµÃ͸Ã÷ÉèÖÃÉúЧ£¬ÔªËرØÐëÊÇ“Óв¼¾Ö”¡£Ò»¸öÔªËØ¿ÉÒÔͨ¹ýʹÓÃһЩCSSÊôÐÔÀ´Ê¹Æä±»²¼¾Ö£¬ÓÐÈçwidth ºÍ position¡£¹ØÓÚ΢ÈíרÓеÄhasLayoutÊôÐÔÏêÇ飬ÒÔ¼°ÈçºÎ´¥·¢Ëü£¬²Î¿¼ÕâÀï¡£
¡¡¡¡ÁíÍâÒ»¸öÉèÖÃIE8µÄCSS͸Ã


Ïà¹ØÎĵµ£º

CSS Reset(CSS¸´Î»)

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
     padding: 0;
     margin: 0;
}
fieldset, img {
     border: 0;
}
table {
     border-co ......

ÓÃDIV+CSS²¼¾ÖÖÐ,ÈçºÎÉèÖÃͼƬÓëÎÄ×ÖÔÚͬһ¸ß¶È?


Èç¹û°ÑÎÄ×ÖºÍͼƬ·ÅÔÚͬһ¸öͼ²ãµÄ£¬ÎÄ×Ö¿ÉÒÔ×öµ½¾ÓÖУ¬µ«ÊÇͼƬ¾Í²»ÄÜ£¬ÒòΪͼƬĬÈÏÊÇ×óÉ϶ÔÆëµÄ£¡Õâ¾ÍÊÇΪʲôÔÚÖÆ×÷µÄʱºò¿´µ½Í¼Æ¬
»á¿¿ÉϵÄÔ­Òò¡£Èç¹ûÄãÁͼƬ¾ÓÖÐÁË£¬ÎÄ×־ͻáÏà¶ÔÓÚͼƬÓÒ϶ÔÆëÁË£¡Èç¹ûÄãÏë2¸ö¶¼¾ÓÖеĻ°£¬¾Í²»ÄÜ°ÑËûÃÇ·ÅÔÚͬһ¸ödiv,»òÕßÄãÊÔÏÂ
°ÑËûÃÇ·ÅÔÚ2¸ödivÖУ¬»òÕßÒ»¸öͼƬ·ÅdivÖУ¬ÎÄ ......

CSS³£Óü¼ÇɽéÉÜ

1. CSS×ÖÌ嶨Òå¼òд¹æÔò
Ò»°ãµÄд·¨»áÊÇÕâÑù£º
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
¶øʵ¼ÊÉÏÄã¿ÉÒÔÓøü¼ò½àµÄд·¨£º
font: bold italic small-caps 1em/1.5em verdana,sans-serif
ÊDz»ÊǸüÊ¡Ê£¿²»¹ýʹÓÃÕâ ......

5¸ö¼òµ¥£¬µ«ºÜʵÓÃµÄ cssÊôÐÔ

Õâ5¸öÓÐÓõÄcssÊôÐÔ¿ÉÄÜÄãÊDZȽÏÊìϤµÄ£¬µ«ÊǺÜÉÙʹÓõ½ËüÃÇ¡£ÎÒÕâÀïÌÖÂ۵IJ»ÊÇcss3µÄÐÂÊôÐÔ
¡£ÎÒÌáµ½µÄ¶¼ÊDZ»ËùÓÐä¯ÀÀÆ÷Ö§³ÖµÄcss2ÊôÐÔ±ÈÈ磺clip¡¢min-height¡¢white-space¡¢cursorºÍdisplay¡£Ç§Íò±ð´í
¹ýÕâƪÎÄÕ£¬ÒòΪÄã»á¾ªÑȵķ¢ÏÖËûÃÇÊǺÜÓÐÓõġ£
Ò»¡¢css clip£¨²ÃÇУ©
clip²ÃÇÐÕâ¸öÊôÐÔÓеãÏñÊÇÕÚÕÖ¡£ËüÔÊÐíÄã ......

CSSÖеÄcursorÓ÷¨

CSSÖеĹâ±êÀàÐÍ
Óï·¨£º
¡¡¡¡cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )
¡¡¡¡È¡Öµ£º
auto
:¡¡
ĬÈÏÖµ¡£ä¯ÀÀÆ÷¸ù¾Ýµ±Ç°Çé¿ö×Ô¶¯È·¶¨Êó±ê¹â±êÀàÐÍ¡£
......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ