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

CSSµÄÊ®°Ë°ã¼¼ÇÉ

·­Ò룺°¢½Ý
Ô­ÎÄ×÷ÕߣºRoger Johansson
×÷Õß¼ò½é£º×¡ÔÚÈðµä¸çµÂ±¤£¬1994Ä꿪ʼ½Ó´¥ºÍ²ÎÓëwebÉè¼Æ£¬456 Berea StreetÊÇËûµÄסַ£¬Òò´Ë²ÉÓÃÕâ¸öÃû×Ö×÷ΪËûµÄ¸öÈËÖ÷Ò³ÓòÃû Ô­Îijö´¦£ºwww.456bereastreet.com
°¢½Ý˵Ã÷£º´ËÎÄÔ­Ãû"CSS tips and tricks"£¬ÓÐ2ƪ£¬ÎÒ½«ËüÃǺϲ¢·­ÒëÔÚ±¾ÎÄÖС£
±¾ÎÄ×ܽáÁËÎÒ¿ªÊ¼Ê¹ÓÃCSS²¼¾Ö·½·¨ÒÔÀ´ËùÓеļ¼ÇɺͼæÈÝ·½°¸£¬ÎÒÔ¸Òâ°ÑÕâЩÓëÄã·ÖÏí£¬ÎÒ»áÖصã½âÊÍһЩÐÂÊÖÈÝÒ×·¸µÄ´íÎó(°üÀ¨ÎÒ×Ô¼ºÒ²·¸¹ýµÄ)£¬Èç¹ûÄãÒѾ­ÊÇCSS¸ßÊÖ£¬ÕâЩ¾­Ñé¼¼ÇÉ¿ÉÄÜÒѾ­¶¼ÖªµÀ£¬Èç¹ûÄãÓиü¶àµÄ£¬Ï£Íû¿ÉÒÔ°ïÎÒ²¹³ä¡£
Ò».ʹÓÃcssËõд
ʹÓÃËõд¿ÉÒÔ°ïÖú¼õÉÙÄãCSSÎļþµÄ´óС£¬¸ü¼ÓÈÝÒ×ÔĶÁ¡£cssËõдµÄÖ÷Òª¹æÔòÇë²Î¿´¡¶³£ÓÃcssËõдÓï·¨×ܽᡷ£¬ÕâÀï¾Í²»Õ¹¿ªÃèÊö¡£
¶þ.Ã÷È·¶¨Ò嵥룬³ý·ÇֵΪ0
Íü¼Ç¶¨Òå³ß´çµÄµ¥Î»ÊÇCSSÐÂÊÖÆÕ±éµÄ´íÎó¡£ÔÚHTMLÖÐÄã¿ÉÒÔֻдwidth="100"£¬µ«ÊÇÔÚCSSÖУ¬Äã±ØÐë¸øÒ»¸ö׼ȷµÄµ¥Î»£¬±ÈÈ磺width:100pxwidth:100em¡£Ö»ÓÐÁ½¸öÀýÍâÇé¿ö¿ÉÒÔ²»¶¨Ò嵥λ£ºÐиߺÍ0Öµ¡£³ý´ËÒÔÍ⣬ÆäËûÖµ¶¼±ØÐë½ô¸úµ¥Î»£¬×¢Ò⣬²»ÒªÔÚÊýÖµºÍµ¥Î»Ö®¼ä¼Ó¿Õ¸ñ¡£
Èý.Çø·Ö´óСд
µ±ÔÚXHTMLÖÐʹÓÃCSS£¬CSSÀﶨÒåµÄÔªËØÃû³ÆÊÇÇø·Ö´óСдµÄ¡£ÎªÁ˱ÜÃâÕâÖÖ´íÎó£¬ÎÒ½¨ÒéËùÓеĶ¨ÒåÃû³Æ¶¼²ÉÓÃСд¡£
classºÍidµÄÖµÔÚHTMLºÍXHTMLÖÐÒ²ÊÇÇø·Ö´óСдµÄ£¬Èç¹ûÄãÒ»¶¨Òª´óСд»ìºÏд£¬Çë×ÐϸȷÈÏÄãÔÚCSSµÄ¶¨ÒåºÍXHTMLÀïµÄ±êÇ©ÊÇÒ»Öµġ£
ËÄ.È¡ÏûclassºÍidÇ°µÄÔªËØÏÞ¶¨
µ±Äãд¸øÒ»¸öÔªËض¨Òåclass»òÕßid£¬Äã¿ÉÒÔÊ¡ÂÔÇ°ÃæµÄÔªËØÏÞ¶¨£¬ÒòΪIDÔÚÒ»¸öÒ³ÃæÀïÊÇΨһµÄ£¬¶øclas s¿ÉÒÔÔÚÒ³ÃæÖжà´ÎʹÓá£ÄãÏÞ¶¨Ä³¸öÔªËغÁÎÞÒâÒå¡£ÀýÈ磺 ¸´ÖÆPHPÄÚÈݵ½¼ôÌù°å
PHP´úÂë:
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
¿ÉÒÔд³É
#content { /* declarations */ }
.details { /* declarations */ }
ÕâÑù¿ÉÒÔ½ÚʡһЩ×Ö½Ú¡£
Îå.ĬÈÏÖµ
ͨ³£paddingµÄĬÈÏֵΪ0£¬background-colorµÄĬÈÏÖµÊÇtransparent¡£µ«ÊÇÔÚ²»Í¬µÄä¯ÀÀÆ÷ĬÈÏÖµ¿ÉÄܲ»Í¬¡£Èç¹ûÅÂÓгåÍ»£¬¿ÉÒÔÔÚÑùʽ±íÒ»¿ªÊ¼¾ÍÏȶ¨ÒåËùÓÐÔªËصÄmarginºÍpaddingÖµ¶¼Îª0£¬ÏóÕâÑù£º ¸´ÖÆPHPÄÚÈݵ½¼ôÌù°å
PHP´úÂë:
* {
margin:0;
padding:0;
}
Áù.²»ÐèÒªÖظ´¶¨Òå¿É¼Ì³ÐµÄÖµ
CSSÖУ¬×ÓÔªËØ×Ô¶¯¼Ì³Ð¸¸ÔªËصÄÊôÐÔÖµ£¬ÏóÑÕÉ«¡¢×ÖÌåµÈ£¬ÒѾ­ÔÚ¸¸ÔªËØÖж¨Òå¹ýµÄ£¬ÔÚ×ÓÔªËØÖпÉÒÔÖ±½Ó¼Ì³Ð£¬²»ÐèÒªÖظ´¶¨Òå¡£µ«ÊÇҪעÒ⣬ä¯ÀÀÆ÷¿ÉÄÜÓÃһЩĬÈÏÖµ¸²¸ÇÄãµÄ¶¨Òå¡£
Æß.×î½üÓÅÏÈÔ


Ïà¹ØÎĵµ£º

CSS¹ØÓÚIE8¼æÈÝÐԵĽâ¾ö°ì·¨

ʹÓÃIE8  ¿ÉÄܳöÏÖµÄÎÊÌ⣺ 
    * ÍøÒ³²¼¾Ö²»ÕûÆë
    * Îı¾»òͼÏñÖصþ
    * JavaScript ¹¦ÄÜÓÐÎÊÌâ»ò´íÎó
Ò»°ã½â¾ö
1.дCSS Hack¡£
   ¶øºǫ́ÈËÔ±²»Éó¤ÓÚдCSS¡£
2.Ç¿ÖÆIE8ÏñIE7ÄÇÑù³ÊÏÖÄÚÈÝ¡£
   ÔÚ<head></ ......

CSS¼æÈÝÐÔ£¨2£© text overflow

Ò»Ö±ÒÔÀ´ÎÒ¶¼ÒÔΪcssÊÇÎÞ·¨ÏÞÖÆ×Ö·û³¤¶ÈµÄ£¬×î½ü²Å·¢ÏÖÔ­À´¿ÉÒÔÕâÑù.×î¼òµ¥µÄ¼æÈÝ·½·¨£º
.textOverflow {
width:100px;
white-space:nowrap;/*ÏÞÖƵ¥ÐÐÊä³ö*/
text-overflow:ellipsis;/*Ö»Ö§³ÖIE6(+)*/
overflow: hidden;
-o-text-overflow: ellipsis;/*OperaרÓÃ*/
-moz-binding: url('ov.xml#ellipsis');/*firefox ......

CSSÑùʽ±í»ù´¡

<!--Ñùʽ±íÊǶԱêÇ©ÑùʽµÄÐÞ¸Ä-->
<!--µ±¶Ô±êÇ©µÄÑùʽÖظ´¶¨Òåʱ£¬Ê¹ÓþàÀë×î½üµÄÑùʽ¶¨Òå-->
<!--ÔÚhtmlÖе¼ÈëcssÑùʽ±í-->
<link REL=stylesheet href="Untitled-1.css" type="text/css">  <!--ÔÚhead±êÇ©ÖÐÌí¼ÓÕâÐÐ-->
<!--±êÇ©µÄÑ¡Ôñ-->
h1{font-size:20pt;color:r ......

Mozilla½¨ÒéµÄCSSÊéд˳Ðò

/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//ÏÔʾÊôÐÔ
* display
* list-style
* position
* float
* clear
//×ÔÉíÊôÐÔ
* width
* height
* margin
* padding
* border
* ba ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ