»ñÈ¡¶ÔÏóCSSÊôÐÔ
//»ñȡһ¸öÌØ¶¨ÔªËصÄÑùʽÊôÐÔ
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.defaultView.getComputedStyle){
name=name.repalce("/([A-Z])/g","-$1");
name=name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}else{
return null;
}
}
Ïà¹ØÎĵµ£º
Ò³ÃæÉϵÄcssÁ´½Ó ÈçÏÂ
<link href="../style/style.css" rel="stylesheet" type="text/css" />
µ±a.actionͨ¹ýÖØ¶¨Ïòredirect µ½ÁíÒ»¸öb.actionºó£¬½øÈëÏÂÒ»¸öjspÒ³Ãæ£¬´ËʱcssºÍÒ³ÃæµÄͼƬ¶¼Ê§Ð§¡£
ºóÀ´°ÑjspÀïÃæµÄcss·¾¶¡¢Í¼Æ¬Â·¾¶¸ÄΪ¾ø¶Ô·¾¶£¬¾Í°ÑÎÊÌâ½á¾ÖÁË¡£
<link href="/BookShop/style/style.css" ......
¼ÙÈçÎÒÃÇÏëͨ¹ýǰ̨×ÔÖ÷Ñ¡ÔñCSSÑùʽÀ´´ïµ½¸Ä±äÑÕÉ«¡¢·ç¸ñµÈÄ¿µÄµÄ»°£¬ÓÃJSµ÷ÓÃCSSÎļþ¾ÍOK¡£
ÏÈ×öÁ½¸ö£¨»ò¶à¸ö£©CSSÎļþ¡£
style_1.css¡¡´úÂ룺
body{background-color: #ccff66;}
......
style_2.css¡¡´úÂ룺
body{background-color: #ff0000;}
......
JS´úÂëÈçÏ£º
<link rel="stylesheet" rev="stylesheet" ......
ºÐÄ£ÐÍ£¬ÊÇXHTML
+CSS
²¼¾Ö
Ò³ÃæÖеÄ
ºËÐÄ£¡ÊǹØÏµµ½Éè¼ÆÖÐÅŰ涨λµÄ¹Ø¼ü£¬¶¼×ñѺÐÄ£Ð͹淶£¬ÀýÈç<div>¡¢<p>¡¢<a>……ºÐÄ£ÐͰüº¬
(Íâ
±ß¾à)margin£¬(Äڱ߾à)padding £¬(ÄÚÈÝ)content£¬(±ß¿ò)border¡£
ÏÂͼÊÇCSSºÐÄ£Ð͵ÄʾÒâͼ
ÕâЩÊôÐÔÎÒÃÇ¿ÉÒÔ°ÑËü×ªÒÆµ½ÎÒÃÇÈÕ³£Éú» ......
ÍøÒ³ÖÆ×÷ÖУ¬ÎªÁË·½±ãÈÕºóÐ޸ĻòÐ×÷¿ª·¢£¬³£³£Òª¶ÔÒ³Ãæ½øÐÐÏàÓ¦µÄ×¢ÊÍ£¬ÄãÍøÒ³½á¹¹ÇåÎú£¬¿É¶ÁÐÔÔöÇ¿¡£ÒÔϽéÉܼ¸ÖÖ³£ÓõÄ×¢ÊÍ·½·¨£º
Ò»¡¢HTMLµÄ×¢ÊÍ·½·¨
<!-- html×¢ÊÍ:START -->
ÄÚÈÝ
<!-- html×¢ÊÍ:END -->
¶þ¡¢CSSµÄ×¢ÊÍ·½·¨
<style type="text/css">
/* css×¢ÊÍ*/
</style>
ÔÚµ¥¶À ......
YUI Compressor ÊÇÒ»¸öÓÃÀ´Ñ¹Ëõ JS ºÍ CSS ÎļþµÄ¹¤¾ß£¬²ÉÓÃJava¿ª·¢¡£
ʹÓ÷½·¨£º
//ѹËõJS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//ѹËõCSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css ......