Ò׽ؽØͼÈí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö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;}
ÔÚÒ³Ãæ´úÂëÖУ¬ÎÒÃÇ¿


Ïà¹ØÎĵµ£º

CSS Hack¸÷ä¯ÀÀÆ÷

CSS Hack ÊÇÔÚ±ê×¼ CSS û°ì·¨¼æÈݸ÷ä¯ÀÀÆ÷ÏÔʾЧ¹ûʱ²Å»áÓÃÉϵIJ¹¾È·½·¨,ÔÚ¸÷ä¯ÀÀÆ÷³§É̽âÎö CSS ûÓдï³ÉÒ»ÖÂÇ°,ÎÒÃÇÖ»ÄÜÓÃÕâÑùµÄ·½·¨À´Íê³ÉÕâÑùµÄÈÎÎñ¡£ÍøÉÏÄã¿ÉÄÜÄÜËÑË÷µ½Ò»´ó¶ÑµÄ CSS Hack£¬µ«ÊÇÎÒ½ñÌì·¢²¼µÄÄã¿ÉÄܲ¢²»¶¼ºÜÁ˽⣬ÒòΪÕâЩ¶¼ÊÇÖ»Õë¶Ôµ¥¶ÀÒ»¸öä¯ÀÀÆ÷µÄ CSS Hack¡£
ΪÁËÏòÄãչʾÕâЩ CSS Hack ÊÇ·ñÕý³£Ô ......

CSS½â¾öδ֪¸ß¶È´¹Ö±¾ÓÖÐ

Ô­ÎÄÁ´½Ó ×÷Õߣºâø·É
¾¡¹ÜÓÐ CSS µÄ vertical-align ÌØÐÔ£¬µ«ÊDz¢²»ÄÜÓÐЧ½â¾öδ֪¸ß¶ÈµÄ´¹Ö±¾ÓÖÐÎÊÌ⣨ÔÚÒ»¸ö DIV ±êÇ©ÀïÓÐδ֪¸ß¶ÈµÄÎı¾»òͼƬµÄÇé¿öÏ£©¡£
±ê ×¼ä¯ÀÀÆ÷Èç Mozilla, Opera, Safari µÈ.£¬¿É½«¸¸¼¶ÔªËØÏÔʾ·½Ê½É趨Ϊ TABLE(display: table;) £¬ÄÚ²¿×ÓÔªËض¨Îª table-cell (display: table-cell)£¬Í¨¹ý ......

»¬¶¯Í¼Æ¬Õ¹Ê¾Ð§¹û£¨js+css£©

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.zishu.cn< ......

css³£ÓÃС½á

ÊäÈë¿òÖ»Óе׿ò£º
.box
{
  border-style:none none solid none;
 border-bottom-width:1px;
 border-bottom-color:#999999;
}
±í¸ñ
<table>
<tbody>
<tr><td></td></tr>
</tbody>
</table> ......

JavaScript¶¯Ì¬¼ÓÔØCSSµÄÈýÖÖ·½·¨

  JavaScript¶¯Ì¬¼ÓÔØCSSµÄÈýÖÖ·½·¨ ÊÕ²Ø
Èç¹ûÄãÓкܶà¹ØÁªµÄCSSÎļþÒªÒ»Æð¼ÓÔØ£¬»òÕßÏ붯̬µÄ¼ÓÔز»Í¬µÄCSSÎļþ£¬ÄÇôÏÂÃæµÄ·½·¨ÄãÒ»¶¨¶ÔÄãÓаïÖú¡£
µÚÒ»ÖÖ£ºÒ»°ãÓÃÔÚÍⲿCSSÎļþÖмÓÔرØÐëµÄÎļþ
 ³ÌÐò´úÂë
@import url(style.css);
/*Ö»ÄÜÓÃÔÚCSSÎļþÖлòÕßstyle±êÇ©ÖÐ*/
µÚ¶þÖÖ£º¼òµ¥µÄÔÚÒ³ÃæÖмÓÔØÒ» ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ