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

CSS¾­µäʵÓü¼ÇÉ10ÕÐ


Ò».ʹÓÃcssËõд
ʹÓÃËõд¿ÉÒÔ°ïÖú¼õÉÙÄãCSSÎļþµÄ´óС£¬¸ü¼ÓÈÝÒ×ÔĶÁ¡£cssËõдµÄÖ÷Òª¹æÔòÇë²Î¿´¡¶³£ÓÃcssËõдÓï·¨×ܽᡷ£¬ÕâÀï¾Í²»Õ¹¿ªÃèÊö¡£
¶þ.Ã÷È·¶¨Ò嵥룬³ý·ÇֵΪ0
Íü¼Ç¶¨Òå³ß´çµÄµ¥Î»ÊÇCSSÐÂÊÖÆÕ±éµÄ´íÎó¡£ÔÚHTMLÖÐÄã¿ÉÒÔֻдwidth="100"£¬µ«ÊÇÔÚCSSÖУ¬Äã±ØÐë¸øÒ»¸ö׼ȷµÄµ¥Î»£¬±ÈÈç:width: 100px width:100em¡£Ö»ÓÐÁ½¸öÀýÍâÇé¿ö¿ÉÒÔ²»¶¨Ò嵥λ:ÐиߺÍ0Öµ¡£³ý´ËÒÔÍ⣬ÆäËûÖµ¶¼±ØÐë½ô¸úµ¥Î»£¬×¢Ò⣬²»ÒªÔÚÊýÖµºÍµ¥Î»Ö®¼ä¼Ó¿Õ¸ñ¡£
Èý.Çø·Ö´óСд
µ±ÔÚXHTMLÖÐʹÓÃCSS£¬CSSÀﶨÒåµÄÔªËØÃû³ÆÊÇÇø·Ö´óСдµÄ¡£ÎªÁ˱ÜÃâÕâÖÖ´íÎó£¬ÎÒ½¨ÒéËùÓеĶ¨ÒåÃû³Æ¶¼²ÉÓÃСд¡£
classºÍidµÄÖµÔÚHTMLºÍXHTMLÖÐÒ²ÊÇÇø·Ö´óСдµÄ£¬Èç¹ûÄãÒ»¶¨Òª´óСд»ìºÏд£¬Çë×ÐϸȷÈÏÄãÔÚCSSµÄ¶¨ÒåºÍXHTMLÀïµÄ±êÇ©ÊÇÒ»Öµġ£
ËÄ.È¡ÏûclassºÍidÇ°µÄÔªËØÏÞ¶¨
µ±Äãд¸øÒ»¸öÔªËض¨Òåclass»òÕßid£¬Äã¿ÉÒÔÊ¡ÂÔÇ°ÃæµÄÔªËØÏÞ¶¨£¬ÒòΪIDÔÚÒ»¸öÒ³ÃæÀïÊÇΨһµÄ£¬¶øclas s¿ÉÒÔÔÚÒ³ÃæÖжà´ÎʹÓá£ÄãÏÞ¶¨Ä³¸öÔªËغÁÎÞÒâÒå¡£ÀýÈç:
div#content { }
fieldset.details { }
¿ÉÒÔд³É
#content { }
.details { }
ÕâÑù¿ÉÒÔ½ÚʡһЩ×Ö½Ú¡£
Îå.ĬÈÏÖµ
ͨ³£paddingµÄĬÈÏֵΪ0£¬background-colorµÄĬÈÏÖµÊÇtransparent¡£µ«ÊÇÔÚ²»Í¬µÄä¯ÀÀÆ÷ĬÈÏÖµ¿ÉÄܲ»Í¬¡£Èç¹ûÅÂÓгåÍ»£¬¿ÉÒÔÔÚÑùʽ±íÒ»¿ªÊ¼¾ÍÏȶ¨ÒåËùÓÐÔªËصÄmarginºÍpaddingÖµ¶¼Îª0£¬ÏóÕâÑù:
* {
margin:0;
padding:0;
}
Áù.²»ÐèÒªÖظ´¶¨Òå¿É¼Ì³ÐµÄÖµ
CSSÖУ¬×ÓÔªËØ×Ô¶¯¼Ì³Ð¸¸ÔªËصÄÊôÐÔÖµ£¬ÏóÑÕÉ«¡¢×ÖÌåµÈ£¬ÒѾ­ÔÚ¸¸ÔªËØÖж¨Òå¹ýµÄ£¬ÔÚ×ÓÔªËØÖпÉÒÔÖ±½Ó¼Ì³Ð£¬²»ÐèÒªÖظ´¶¨Òå¡£µ«ÊÇҪעÒ⣬ä¯ÀÀÆ÷¿ÉÄÜÓÃһЩĬÈÏÖµ¸²¸ÇÄãµÄ¶¨Òå¡£
Æß.×î½üÓÅÏÈÔ­Ôò
Èç¹û¶Ôͬһ¸öÔªËصĶ¨ÒåÓжàÖÖ£¬ÒÔ×î½Ó½ü(×îСһ¼¶)µÄ¶¨ÒåΪ×îÓÅÏÈ£¬ÀýÈçÓÐÕâôһ¶Î´úÂë
Update: Lorem ipsum dolor set
ÔÚCSSÎļþÖУ¬ÄãÒѾ­¶¨ÒåÁËÔªËØp£¬ÓÖ¶¨ÒåÁËÒ»¸öclass"update"
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
ÕâÁ½¸ö¶¨ÒåÖУ¬class="update"½«±»Ê¹Óã¬ÒòΪclass±Èp¸ü½ü¡£Äã¿ÉÒÔ²éÔÄW3CµÄ¡¶ Calculating a selector’s specificity¡· Á˽â¸ü¶à¡£
°Ë.¶àÖØclass¶¨Òå
Ò»¸ö±êÇ©¿ÉÒÔͬʱ¶¨Òå¶à¸öclass¡£ÀýÈç:ÎÒÃÇÏȶ¨ÒåÁ½¸öÑùʽ£¬µÚÒ»¸öÑùʽ±³¾°Îª#666;µÚ¶þ¸öÑùʽÓÐ10 pxµÄ±ß¿ò¡£
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
ÔÚÒ³Ãæ´úÂëÖУ¬ÎÒÃÇ¿ÉÒÔÕâÑùµ÷ÓÃ
ÕâÑù×


Ïà¹ØÎĵµ£º

Div+CSSÔÚÍøÕ¾Éè¼ÆµÄÓÅÊÆ

    1.´ó´óËõ¼õÒ³Ãæ´úÂ룬Ìá¸ßÒ³Ãæä¯ÀÀËÙ¶È,Ëõ¼õ´ø¿í³É±¾; 
    2.½á¹¹ÇåÎú£¬ÈÝÒ×±»ËÑË÷ÒýÇæËÑË÷µ½£¬ÌìÉúÓÅ»¯ÁËseo 
    3.Ëõ¶Ì¸Ä°æʱ¼ä¡£Ö»Òª¼òµ¥µÄÐ޸ļ¸¸öCSSÎļþ¾Í¿ÉÒÔÖØÐÂÉè¼ÆÒ»¸öÓгɰÙÉÏǧҳÃæµÄÕ¾µã¡£ 
    4.Ç¿´óµ ......

25±¾¾­µäCSSµç×ÓÊé


The CSS Anthology 101 Essential Tips Tricks Hacks 3rd Edition

The Ultimate CSS Reference

Teach Yourself Visually Html And CSS

Everything You Know About CSS is Wrong

The CSS Anthology 101 Essential T ......

5¸öCSSÊéд¼¼ÇÉ

1. CSS Reset/ÖØÖÃ
ÄãÒ²ÐíÐèÒªÏÈÁ˽âʲôÊÇcssÖØÖá£È»ºóÔõôÑùдcssÖØÖÃÄØ¡£
Äã¿ÉÒÔcopy Eric Meyer Reset, YUI Reset»òÆäËücss reset, µ«Äã½ÓÏÂÀ´Ó¦¸Ã¸ù¾ÝÄãµÄÏîÄ¿¸Ä³ÉÄã×Ô¼ºµÄreset.
²»ÒªÊ¹ÓÃ* { margin: 0; padding: 0; } ¡£ÎÒ¸öÈ˺ܰ®Óã¬Ô­×÷ÕßÌᵽʹÓÃÕâ¾ä²¢²»ÊÊÓÃһЩԪËرÈÈ絥ѡ°´Å¥¡£²»¹ý°³²©¿ÍÀïÃæҲûÓе¥ ......

CSSÖг£ÓõÄʵÀý

¼¸¸öcssÔªËصļòµ¥½âÊÍ div ul dl dt oldiv£¬Õâ¸öºÜ³£¼û£¬¿é¼¶ÔªËØ£¬div¾¡Á¿ÉÙÓ㬺ÍtableÒ»Ñù£¬Ç¶Ì×Ô½ÉÙÔ½ºÃ
ol ÓÐÐòÁÐ±í¡£
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
±íÏÖΪ£º
1……
2…& ......

CSS sprites¼¼Êõ¼Ó¿ìÄúµÄÍøÕ¾(¼õÉÙÍøÕ¾HTTPÇëÇó)

       ¼õÉÙÍøÕ¾HTTPÇëÇóÕâÊǼӿìÍøÕ¾·ÃÎÊËٶȵĹؼü£¬¶øCSS sprites¼¼ÊõÊǰѶàÕÅͼÏñ×éºÏ³ÉÒ»ÕÅͼÏñ£¬ÕâÑùÓû§ÔÚ·ÃÎÊÍøվʱһ´ÎÐ԰ѶàÕÅͼƬ¼ÓÔØÍ꣬¶ø²»ÐèÒªÒ»ÕÅÕÅͼƬµÄ¼ÓÔØ£¬ÕâÑù¼õÉÙÁË×é¼þµÄÒ³Â룬½¨Á¢¸ü·á¸»µÄÄÚÈݵÄÍøÕ¾£¬Í¬Ê±Ò²È¡µÃÁË¿ìËٵķ´Ó¦
ʱ¼ä¡£
    &n ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ