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

CSS³£Óü¼ÇɽéÉÜ

1. CSS×ÖÌ嶨Òå¼òд¹æÔò
Ò»°ãµÄд·¨»áÊÇÕâÑù£º
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
¶øÊµ¼ÊÉÏÄã¿ÉÒÔÓøü¼ò½àµÄд·¨£º
font: bold italic small-caps 1em/1.5em verdana,sans-serif
ÊDz»ÊǸüʡʣ¿²»¹ýʹÓÃÕâÖÖ¼òдÐèҪעÒ⼸µã£ºÒªÊ¹¼òд¶¨ÒåÓÐЧ±ØÐëÖÁÉÙÌṩ font-size ºÍ font-family ÕâÁ½¸öÊôÐÔ£»Í¬Ê±font-weight, font-style ÒÔ¼° font-varient Õ⼸¸öÊôÐÔÈç¹û²»×öÉ趨µÄ»°½«Ä¬ÈÏΪnormal¡£
»¹ÓÐbackground£¬borderµÈµÈ.
1.       ¹ØÓÚbackgroundµÄд·¨
DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}
1£©Äú¿ÉÒÔ¿´µ½backgroundµÄµÚÒ»¸ö¶¨ÒåÊÇÒ»¸öÑÕɫֵÕâ±íʾÔÚ±³¾°Í¼Æ¬Ê§Ð§µÄʱºòÑÕÉ«½«Æð×÷Óá£
2£©urlÀ¨ºÅÖеÄÒýºÅÊÇûÓбØÒªµÄ£¬ÎÒÃÇ¿ÉÒÔ²»Ð´ÒýºÅ
2.       ¹ØÓÚBorderµÄд·¨£¬Èç¹ûÄúÏ붨ÒådivµÄËĸö±ßµÄÑÕÉ«²»Í¬£¬¶ø´Ö¶ÈºÍÑùʽ¶¼Ò»Ñù£¬Äú¿ÉÒÔÕâÑùд£º
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}
ËÄÖÖÑÕɫһ´ÎÊÇÉÏ£¬ÓÒ£¬Ï£¬×óµÄÑÕÉ«
ÑÕÉ«Ïàͬ¾ÍºÏ²¢³É£º
DIV.special{border:1px solid color4}
2. ͬʱʹÓÃÁ½¸öClass¶¨Òå
Ò»°ãÎÒÃÇÖ»»á¸øÄÚÈÝ¿éÖ¸¶¨Ò»¸öClass£¬µ«Õâ²¢²»´ú±íÎÒÃÇÖ»ÄÜÖ¸¶¨Ò»¸ö¡£Êµ¼ÊÉÏÖ»ÒªÄãÔ¸Ò⣬¿ÉÒÔͬʱ°ÑÈÎÒâ¶à¸öClass¸³¸øÄ³¿éÄÚÈÝ¡£±ÈÈ磺
<p class="text side">...</p>
¶à¸öClassÖ®¼äÓÿոñ·Ö¸ô¼´¿É¡£µ±¶à¸öClassÖ®¼äµÄÊôÐÔ·¢ÉúÖØµþµÄʱºò£¬½«¸ù¾Ý¸÷¸öClassÔÚCSS¶¨ÒåÎļþÖб»¶¨ÒåµÄλÖ㬺ó¶¨ÒåµÄClassÊôÐÔ×Ô¶¯¸²¸Ç֮ǰ¶¨ÒåµÄClassÊôÐÔ£¨¶ø²»ÊǸù¾ÝÄãÔÚclass="text side"ÕâÀïÅÅÁеÄ˳ÐòÀ´½øÐи²¸Ç£©
3. CSS borderµÄȱʡֵ
ͨ³£ÎÒÃǶ¨ÒåborderÊôÐÔ¶¼»áÌṩcolor,width,styleÕâЩÊôÐÔ¡£±ÈÈç border: 3px solid #000 ¡£²»¹ýʵ¼ÊÉϱØÐëÒªÌṩµÄÊôÐÔÖ»ÓÐstyle¡£Èç¹ûÄãֻд border: solid µÄ»°£¬ÆäËûµÄÊôÐÔ×Ô¶¯Ê¹ÓÃȱʡֵ¡£borderµÄȱʡ¿í¶ÈÊÇmedium(´óÔ¼3px-4px)£¬È±Ê¡µÄÑÕÉ«ÊÇλÓÚborderÀïÃæµÄÄÚÈÝÎÄ×ÖµÄÑÕÉ«¡£Èç¹ûÕâЩȱʡֵ¿ÉÒÔÂú×ãÄãµÄÒªÇó£¬ÄãÍêÈ«¿ÉÒÔÊ¡ÂÔÕâÁ½ÏîÊôÐÔ¡£
4. רÃÅÓÃÓÚ´òÓ¡µÄCSSÎĵµ
ºÜ¶àwebÒ³Ãæ¶¼»áÌṩһ¸ö´òÓ¡Á´½Ó£¬·½±ãÓû§Ê¹ÓÃÁíÒ»ÖÖÊʺϴòÓ¡½çÃæµÄCSS¡£µ«Êµ¼ÊÉÏÄãÍêÈ«¿ÉÒÔΪÄãµÄÒ³ÃæÖ¸¶¨Á½¸öCSSÎĵµlink£¬ÕâÑùä¯ÀÀÆ÷»á×Ô¶¯µ÷ÓúÏÊʵÄCSS


Ïà¹ØÎĵµ£º

cssÖÐ idºÍclassÇø±ðÓëʹÓÃ

idºÍclassµ½µ×ÒªÓÃÄÄÒ»¸ö£¿
¡¡¡¡Ê×ÏÈÒªÃ÷°×idºÍclassµÄ¸÷×ÔµÄÓÅȱµã¡£ÕâÑù²ÅÄܸù¾ÝËûÃǵĸ÷×ÔµÄÌØµã½øÐÐʹÓá£
¡¡¡¡idµÄÓŵ㣨classµÄȱµã£©£ºidдÔÚcssÓÃ"#"Ñ¡ÔñÆ÷£¬classдÔÚcssÖÐÓÃ"."Ñ¡ÔñÆ÷¡£"#"Ñ¡ÔñÆ÷µÄÓÅÏȼ¶¸ßÓÚ"."Ñ¡ÔñÆ÷´óÔ¼10±¶£¬ËùÒÔµ±ÄãÐèÒªÌáÉýÓÅÏȼ¶µÄʱºò£¬id±êÇ©£¬»òÕßidÈÝÆ÷ÄڵıêÇ©½«ÊǺÜÈÝÒ׺ÍÓÐЧµÄ¡£ ......

css ͸Ã÷±³¾°

<body style="background-color:#000" mce_style="background-color:#000">
<div style="background-color:#fff; width:500px; height:200px; filter:alpha(opacity='50'); opacity:0.5">Õâ¸ö±³¾°ÊÇ͸Ã÷µÄ</div>
</body>
/*IE*/  
filter:alpha(opacity='50');
/*FF*/   ......

cssÑ¡ÔñÆ÷±Ê¼Ç

½ñÌìÅöµ½Ò»¸öÎÊÌ⣺ÔõÑù¸ù¾Ý±ê¼ÇµÃÊôÐÔ²»Í¬¶øÉèÖò»Í¬µÄÑùʽ£¿
Ê×ÏÈÏëµ½µÄ£º»ñÈ¡ËùÓбê¼Ç¡¢Æ¥ÅäÊôÐÔ¡¢¸Ä±äÑùʽ¡£¡£¡£
ºöÈ»ÓÖÏëÆðÁËJQueryÖеÄÑ¡ÔñÆ÷£¬ÓÚÊÇjs´úÂë±à³ÌÁËcss´úÂë
tag[attribute=value]{//.......}
css±¾ÉíµÄÑ¡ÔñÆ÷ȷʵ¿ÉÒÔ×öºÜ¶àÊÂÇéµÄ£¬¾ÍÓÖ´ÓÍøÉÏËÑÂÞÁËһЩ£¬±¸Íü¡£
CSSÑ¡ÔñÆ÷±Ê¼Ç
ÈîÒ»·å ÕûÀí
²Î¿¼Í ......

cssºÍjavascriptÔÚIEºÍFirefoxÖжþÊ®Èý¸ö²»Í¬µã

Ò»¡¢document.formName.item(“itemName”) ÎÊÌâ
ÎÊÌâ˵Ã÷£ºIEÏ£¬¿ÉÒÔʹÓà document.formName.item(“itemName”) »ò document.formName.elements ["elementName"]£»FirefoxÏ£¬Ö»ÄÜʹÓÃdocument.formName.elements["elementName"]¡£
½â¾ö·½·¨£ºÍ³Ò»Ê¹ÓÃdocument.formName.elements["elementName" ......

CSSÔÚMyEclipseÏÂÎÞ·¨ÔØÈëÎÊÌâ¡£

ÔÚJSPÒ³ÃæÉϼÓÈë
<%String path = request.getContextPath();%>
<link  href="<%=path%>/css/style.css" rel="stylesheet" type="text/css">
ÏÂÁз½Ê½Ã²ËƲ»ÐУº
<link  href="../css/style.css" rel="stylesheet" type="text/css">
<link  href="../../css/style.css" rel ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ