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

CSSÑùʽ±íÉè¼ÆµÄÊ®Ìõ¼¼ÇÉ


1.css ×ÖÌå¼òд¹æÔò
¡¡¡¡µ±Ê¹ÓÃcss¶¨Òå×ÖÌåʱÄã¿ÉÄÜ»áÕâÑù×ö:
¡¡¡¡font-size: 1em;
¡¡¡¡line-height: 1.5em;
¡¡¡¡font-weight: bold;
¡¡¡¡font-style: italic;
¡¡¡¡font-variant: small-caps;
¡¡¡¡font-family: verdana,serif;
¡¡¡¡
ÊÂʵÉÏÄã¿ÉÒÔ¼òдÕâЩÊôÐÔ:
¡¡¡¡font: 1em/1.5em bold italic small-caps verdana,serif
¡¡¡¡ÏÖÔںöàÁ˰ɣ¬²»¹ýÓÐÒ»µãҪעÒâ:ʹÓÃÕâÒ»¼òд·½Ê½ÄãÖÁÉÙÒªÖ¸¶¨font-sizeºÍfont-familyÊôÐÔ£¬ÆäËûµÄÊôÐÔ(Èçfont-weight, font-style,font-varient)Èçδָ¶¨½«×Ô¶¯Ê¹ÓÃĬÈÏÖµ¡£
¡¡¡¡2.ͬʱʹÓÃÁ½¸öclass
¡¡¡¡Í¨³£ÎÒÃÇֻΪÊôÐÔÖ¸¶¨Ò»¸öclass,µ«Õâ²¢²»µÈÓÚÄãÖ»ÄÜÖ¸¶¨Ò»¸ö£¬Êµ¼ÊÉÏ£¬ÄãÏëÖ¸¶¨¶àÉپͿÉÒÔÖ¸¶¨¶àÉÙ£¬ÀýÈç:
¡¡¡¡<p class="text side">...</p>ͨ¹ýͬʱʹÓÃÁ½¸öclass(ʹÓÿոñ¶ø²»ÊǶººÅ·Ö¸î),Õâ¸ö¶ÎÂ佫ͬʱӦÓÃÁ½¸öclassÖÐÖÆ¶¨µÄ¹æÔò¡£Èç¹ûÁ½ÕßÖÐÓÐÈκιæÔòÖØµþ£¬ÄÇôºóÒ»¸ö½«»ñµÃʵ¼ÊµÄÓÅÏÈÓ¦Óá£
¡¡¡¡3.cssÖб߿ò(border)µÄĬÈÏÖµ
¡¡¡¡µ±±àдһÌõ±ß¿òµÄ¹æÔòʱ£¬Äãͨ³£»áÖ¸¶¨ÑÕÉ«¡¢¿í¶ÈÒÔ¼°Ñùʽ(ÈκÎ˳Ðò¾ù¿É)¡£ÀýÈç:border: 3px solid #000(3ÏñËØ¿íµÄºÚɫʵÏ߱߿ò)£¬ÆäʵÕâ¸öÀý×ÓÖÐΨһÐèÒªÖ¸¶¨µÄÖµÖ»ÊÇÑùʽ¡£¼ÙÈçÄãÖ¸¶¨ÑùʽΪʵÏß(solid),ÄÇôÆäÓàµÄÖµ½«Ê¹ÓÃĬÈÏÖµ:ĬÈϵĿí¶ÈΪÖеÈ(Ï൱ÓÚ3µ½4ÏñËØ);ĬÈϵÄÑÕɫΪ±ß¿òÀïµÄÎÄ×ÖÑÕÉ«¡£Èç¹ûÕâÕýÊÇÄãÏëÒªµÄЧ¹û£¬ÄãÍêÈ«¿ÉÒÔ²»ÔÚcssÀïÖ¸¶¨¡£
¡¡¡¡4.!important»á±»IEºöÂÔ
¡¡¡¡ÔÚcssÖУ¬Í¨³£×îºóÖ¸¶¨µÄ¹æÔò»á»ñµÃÓÅÏÈȨ¡£È»¶ø¶Ô³ýÁËIEÒÔÍâµÄä¯ÀÀÆ÷À´Ëµ£¬ÈκκóÃæ±êÓÐ!importantµÄÓï¾ä½«»ñµÃ¾ø¶ÔµÄÓÅÏÈȨ£¬ÀýÈç:margin-top: 3.5em !important; margin-top: 2em ³ýIEÒÔÍâËùÓÐä¯ÀÀÆ÷ÖеĶ¥²¿±ß½ç¶¼ÊÇ3.5em£¬¶øIEΪ2em£¬ÓÐʱºòÕâÒ»µãºÜÓÐÓã¬ÓÈÆäÔÚʹÓÃÏà¶Ô±ß½çֵʱ(¾ÍÏñÕâ¸öÀý×Ó)£¬¿ÉÒÔÏÔʾ³öIEÓëÆäËûä¯ÀÀÆ÷µÄϸ΢²î±ð¡£(ºÜ¶àÈË¿ÉÄÜ»¹×¢Òâµ½ÁËcssµÄ×ÓÑ¡ÔñÆ÷Ò²ÊǻᱻIEºöÂÔµÄ)
¡¡¡¡5.Í¼Æ¬Ìæ»»µÄ¼¼ÇÉ
¡¡¡¡Ê¹Óñê×¼µÄhtml¶ø²»ÊÇͼƬÀ´ÏÔʾÎÄ×Öͨ³£¸üΪÃ÷ÖÇ£¬³ýÁ˼ӿìÏÂÔØ»¹¿ÉÒÔ»ñµÃ¸üºÃµÄ¿ÉÓÃÐÔ¡£µ«ÊÇÈç¹ûÄã¾öÐÄʹÓ÷ÃÎÊÕߵĻúÆ÷ÖпÉÄÜûÓеÄ×ÖÌåʱ£¬ÄãÖ»ÄÜÑ¡ÔñͼƬ¡£
¡¡¡¡¾ÙÀýÀ´Ëµ£¬ÄãÏëÔÚÿһҳµÄ¶¥²¿Ê¹ÓÓBuy widgets”µÄ±êÌ⣬µ«ÄãͬʱÓÖÏ£ÍûÕâÊÇÄܱ»ËÑË÷ÒýÇæ·¢Ïֵģ¬ÎªÁËÃÀ¹ÛÄãʹÓÃÁËÉÙ¼ûµÄ×ÖÌåÄÇôÄã¾ÍµÃÓÃͼƬÀ´ÏÔʾÁË:
¡¡¡¡<h1><img src="/widget-image.gif" alt="Buy widgets" /></h1>
¡¡¡¡ÕâÑùµ


Ïà¹ØÎĵµ£º

»ñÈ¡¶ÔÏóCSSÊôÐÔ

//»ñȡһ¸öÌØ¶¨ÔªËصÄÑùʽÊôÐÔ
function getStyle(elem,name){
//Èç¹û¸ÃÊôÐÔ´æÔÚÓÚstyleÖÐ ÔòËû×î½ü±»ÉèÖùý
if(elem.style[name]){
return elem.style[name];
}
//·ñÔò³¢ÊÔIE·½·¨
else if(elem.currentStyle){
return elem.currentStyle[name];
//W3C·½·¨
}else if(document.defaultview && document ......

ÍøÕ¾±ä³É»ÒºÚÉ« css ´úÂë

 
µØÕð ÍøÕ¾±ä³É»ÒºÚÉ« css ´úÂë
5.19-5.21Ϊȫ¹ú°§µ¿ÈÕ£¬ °Ù¶È¡¢ÍøÒס¢ÐÂÀ˵ȸ÷´óÍøÕ¾¾ù±ä³ÉÁ˻ҺÚÉ«ÍøÒ³¡£ÔõÑùÊ¹ÍøÒ³±ä³É»ÒºÚɫĨ£¿
¹úÎñÔº¾ö¶¨5ÔÂ19ÈÕÖÁ21ÈÕΪȫ¹ú°§µ¿ÈÕΪ·½±ãÕ¾µã°§µ¿£¬ÌØÌṩcssÂ˾µ´úÂ룬ÒÔ±í°§µ¿¡£ÒÔÏÂΪȫվCSS´úÂë¡£
html {...}{ filter:progid:DXImageTransform.Microsoft.BasicImage(g ......

Ò»¸ö²»´íµÄinputÊäÈë¿òµÄCSSÉè¼Æ

.inputbox {
        padding-left: 2px;
        border-top: 1px solid #9AA587;
        border-right: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
        border-left: 1px solid #9A ......

CSS FireFox and IE¡¡»»ÐÐÎÊÌâ½â¾ö·½°¸

/* ½ûÖ¹»»ÐÐ */
.nowrap{word-break:keep-all;white-space:nowrap;}
/* Ç¿ÖÆ»»ÐÐ */
.break{word-break:break-all;}
cssÇ¿ÖÆ²»»»ÐÐ
div{white-space:nowrap;}
css×Ô¶¯»»ÐÐ
div{ word-wrap: break-word; word-break: normal; }
cssÇ¿ÖÆÓ¢Îĵ¥´Ê¶ÏÐÐ
div{word-break:break-all;}
´ó¼Ò¶¼ÖªµÀÁ¬ÐøµÄÓ¢ÎÄ»òÊý×Ö»á°ÑDIV ......

CSS¼æÈÝIE Firefox´óÈ«

IEµÄÎÊÌ⣺
Ò».Ë«±ß¾àÎÊÌâ
¸¡¶¯ÔªËصÄÍâ±ß¾à»á¼Ó±¶£¬µ«ÓëµÚÒ»¸ö¸¡¶¯ÔªËØÏàÁ򵀮äËû¸¡¶¯ÔªËØÍâ±ß¾à²»»á¼Ó±¶¡£
½â¾ö·½·¨£ºÔڴ˸¡¶¯ÔªËØÔö¼ÓÑùʽ  display:inline;
¶þ.ͼƬ²úÉúµÄ¼ä϶
¸¸ÔªËØÖ±½Ó°üº¬<img>£¬Õâ¸öͼƬÏ·½»áºÍ¸¸ÔªËرßÔµ²úÉú¼ä϶¡£
½â¾ø·½·¨£º1.ÔÚÔ´´úÂëÖÐÈÃ</div>ºÍ<img>ÔÚÍ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ