5ÖÖcssд·¨±È½Ï£¬±¾ÎÄÁгö5ÖÖ·½·¨µÄÓÅȱµã
Ò»¡¢Ê¹ÓÃSTYLEÊôÐÔ
½«STYLEÊôÐÔÖ±½Ó¼ÓÔÚ¸ö±ðµÄÔª¼þ±êÇ©À<Ôª¼þ(±êÇ©) STYLE="ÐÔÖÊ(ÊôÐÔ)1: É趨ֵ1; ÐÔÖÊ(ÊôÐÔ)2: É趨ֵ2;
...}
<td style="color:#c00; font-size:15px; line-height:18px;>
¡¡¡¡°ËÊ®Äê´ú
</td>
ÕâÖÖ·½·¨Óŵ㣺¿ÉÁéÇÉÓ¦ÓÃÑùʽ춸÷±êÇ©ÖС£·½±ãÓÚ±àд´úÂëʱµÄʹÓá£
ÕâÖÖ·½·¨È±µã£ºÃ»ÓÐÕûƪÎļþµÄ“ͳһÐÔ”£¬ÔÚÐèÒªÐÞ¸ÄijÑùʽµÄʱºòÒ²±äµÄ±È½ÏÀ§ÄÑ¡£
¶þ¡¢Ê¹ÓÃSTYLE±êÇ©
¡¡¡¡½«Ñùʽ¹æÔòдÔÚ<STYLE>...</STYLE>±êǩ֮ÖС£
<STYLE TYPE="text/CSS">
<!--
Ñùʽ¹æÔò±í
-->
</STYLE>
ÀýÈ磺
<STYLE TYPE="text/css">
<!--
body {
¡¡¡¡color: #666;
¡¡¡¡background: #f0f0f0;
¡¡¡¡font-size: 12px;
}
td,p {
¡¡¡¡color:#c00;
¡¡¡¡font-size: 12px;
}
-->
</STYLE>
ͨ³£Êǽ«Õû¸öµÄ <STYLE>...</STYLE>½á¹¹Ð´ÔÚÍøÒ³µÄ<HEAD>
</HEAD>²¿·ÝÖ®ÖС£
ÕâÖÖ·½·¨µÄÓŵ㣺ÕûƪÎÄÕÂÓÐÁËͳһÐÔ£¬Ö»ÒªÊÇÓÐÉùÃ÷µÄµÄÔª¼þ¼´»áÌ×ÓøÃÑùʽ¹æÔò¡£
ÕâÖÖ·½·¨µÄȱµã£º¸ö±ðÔª¼þµÄÁé»î¶È²»×㣬ÕûÕ¾µÄ¹¦ÄÜÐÔ½ÏÈõ¡£
Èý¡¢Ê¹Óà LINK±êÇ©
½«Ñùʽ¹æÔòдÔÚ.cssµÄÑùʽÎļþÖУ¬ÔÙÒÔ<link>±êÇ©ÒýÈë¡£
¼ÙÉèÎÒÃǰÑÑùʽ¹æÔò´æ³ÉÒ»¸öexample.cssµÄµµ°¸£¬ÎÒÃÇÖ»ÒªÔÚÍøÒ³ÖмÓÈ룺
<link rel="stylesheet" type="text/css" href="example.css" mce_href="example.css">
ÕâÑùÒýÈë¸ÃcssÑùʽ±íÎļþÒԺ󣬾ͿÉÒÔÖ±½ÓÌ×ÓøÃÑùʽµµ°¸ÖÐËùÖÆ¶¨µÄÑùʽÁË¡£
ͨ³£Êǽ«link±êǩдÔÚÍøÒ³µÄ<head></head>²¿·ÝÖ®ÖС£
ÕâÖÖ·½·¨µÄÓŵ㣺¿ÉÒÔ°ÑÒªÌ×ÓÃÏàͬÑùʽ¹æÔòµÄÊýƪÎļþ¶¼Ö¸¶¨µ½Í¬Ò»¸öÑùʽÎļþÖУ¬¿ÉÒÔ½øÐÐͳһµÄÐ޸ģ¬Ò²±ãÓÚÕûÕ¾µÄÉèÖÃÓÐͳһµÄ·ç¸ñ¡£Ò»°ãcssÍøÒ³
²¼¾Ö¶¼Ê¹ÓôËÖÖ·½·¨¡£
¡¡¡¡ÕâÖÖ·½·¨µÄȱµã£ºÔÚ¸ö±ðÎļþ»òÔªËØµÄÁé»î¶È²»×ã¡£
ËÄ¡¢Ê¹ÓÃ@importÒýÈë
¡¡¡¡¸úlink·½·¨ºÜÏñ£¬µ«±ØÐë·ÅÔÚ<STYLE>...</STYLE> ÖУº
&
Ïà¹ØÎĵµ£º
Steve SoudersÔÚËûµÄ¡¶High Performance Web Sites¡·Ò»ÊéÖÐÌá³öÌá¸ßÍøÒ³Ð§ÂʵÄ14Ìõ×¼Ôò£¬ÕâЩ¿ÉÒÔʹÓÃYahoo! YSlowÀ´½øÐÐÒ»¸ö±È½ÏÐÎÏóµÄ¼ì²â¡£
ÕâÀïÖ÷ÒªÀ´ËµÒ»ÏµÚÒ»Ìõ×¼Ôò£ºMake Fewer HTTP Requests£¬Òâ˼¾ÍÊǾ¡¿ÉÄܵļõÉÙHTTPÇëÇó¡£µ±Ê±Òª´ïµ½Õâ¸öÄ¿µÄÓкܶàÖÖ·½·¨£¬ÆäÖÐ×îÖØÒªµÄÒ»µã¾ÍÊǽ«CSSÎļþºÍJavascriptÎļþ·Ö±ð ......
//»ñȡһ¸öÌØ¶¨ÔªËصÄÑùʽÊôÐÔ
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 ......
IE6ÏÂÁ´½ÓαÀࣨ:hover£©CSS±³¾°Í¼Æ¬ÓÐÉÁ¶¯BUG£¬Ö÷ÒªÔÒòie»áÔÙÒ»´ÎÇëÇóÕâÕÅͼƬ£¬»òÕß˵ͼƬû±»»º´æ¡£
ÀýÈ磺
CSS´úÂë
a:hover{background:url(imagepath)}
³£ÓõĽâ¾ö·½°¸£º
ÔÚÒ³Ãæµ×²¿Ìí¼ÓÒÔÏÂIE6רÓôúÂ룬ÈÃIE6»º´æCSS±³¾°Í¼Æ¬ÖÁ±¾µØ£¬ÕâÑùa:hoverʱIE6¾Í²»»áÔÙÖØÐÂÏò·þÎñÆ÷ÇëÇó¼ÓÔØ±³¾°Í¼Æ¬ÁË¡£
......
IEºÍFF¶ÔºÐÄ£Ð͵ĽâÊÍÇø±ð
IEºÍFF¶ÔºÐÄ£Ð͵ĽâÊÍÒ²²»Ò»Ñù£¬´úÂë˵Ã÷£º#test { width: 650px !important;width: 648px;padding-left:2px;background:#fff; }
test ÏÔʾµÄ¿í´øÊÇ 650px
IE BoxµÄ×Ü¿í¶ÈÊÇ£º width+padding+border+margin¿í¶È×ܺÍ
FF BoxµÄ×Ü¿í¶È¾ÍÊÇ widthµÄ¿í¶È£¬padding+border+marginµÄ¿í¶ÈÔÚº¬ÔÚwidthÄ ......