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;}
ÔÚÒ³Ãæ´úÂëÖУ¬ÎÒÃÇ¿ÉÒÔÕâÑùµ÷ÓÃ
ÕâÑù×
Ïà¹ØÎĵµ£º
5ÖÖ·½·¨Á¢¿Ìд³ö¸üºÃµÄCSS´úÂë
Òý×Ô:http://bbs.seuuo.com/thread-2625-1-3.html
µ±È»£¬Ã¿¸öÈ˶¼¿ÉÒÔ±àдCSS´úÂ룬ÉõÖÁÄãÏÖÔÚÒѾÈÃËüΪÄãµÄÏîÄ¿¹¤×÷ÁË¡£µ«ÊÇCSS»¹¿ÉÒÔ¸üºÃÂ𣿿ªÊ¼ÓÃÕâ5¸öTips¸Ä½øÄãµÄCSS°É£¡
1.ÖØÖÃ
Ê×ÏÈ£¬ºÜÈÏÕæµÄ¸æËßÄ㣬×ÜÊÇÒªÖØÖÃijЩ·ÖÀà¡£ÎÞÂÛÄãÊÇʹÓà Eric Meyer Reset¡¢YUI Reset»òÕßÄã×Ô¼º±à ......
¼¸¸öcssÔªËØµÄ¼òµ¥½âÊÍ div ul dl dt oldiv£¬Õâ¸öºÜ³£¼û£¬¿é¼¶ÔªËØ£¬div¾¡Á¿ÉÙÓ㬺ÍtableÒ»Ñù£¬Ç¶Ì×Ô½ÉÙÔ½ºÃ
ol ÓÐÐòÁÐ±í¡£
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
±íÏÖΪ£º
1……
2…& ......
ÕâÊÇÎÒÔÚÒ»¸öÍøÕ¾ÉÏ¿´µ½µÄ,CSS¿ØÖÆÒ»¸ö²Ëµ¥,ºÜ¾µäʵÓÃ
CssÎļþÈçÏÂ:css.css
@charset "UTF-8";
/* navigation.css
$Revision: 1.0 $
(c) 2008 Fortinet, Inc. All rights reserved.
*/
/* Navigation Styles ------------------------------------------- */
#wrapper
{
width:1000px;margin:0 auto;
}
......
ÏÂÃæÕâ¸öCSSÑùʽµÄ±í¸ñ£¬¸öÈ˸оõÑÕÉ«Æðµ½Á˺ܴóµÄ×÷Óá£Èç¹û²»ÊÇÁ½ÖÖÑÕÉ«µÄ¶Ô±ÈЧ¹ûºÃ£¬¿ÉÄÜÒ²¾ÍÊÇÒ»°ãµÄ±í¸ñ£º
ÏÈÀ´¿´HTML£º
<table width="590" cellspacing="1">
<caption>
text
</caption>
<thead>
<tr>
<th class="line1" scope="col">text< ......
<!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>JS+CSSÏà²áչʾ&l ......