Web¿ª·¢ µÚ¶þ²¿·Ö CSS»ù´¡£¨¶þ£© CSSÊéд¹æ·¶
1¡¢ÈýÖÖ²»Í¬µÄÑùʽ±í
Ñùʽ±í¸ù¾ÝÆäÊéдλÖò»Í¬£¬¹²·ÖΪÈýÖÖ£º
ÄÚÁªÑùʽ±í£¨inline£©£º¸ÃÑùʽ±íдÔÚ±êÇ©µÄstyleÊôÐÔÀ¸ºÔðÉèÖõ±Ç°±êÇ©µÄÑùʽ£»
ÄÚ²¿Ñùʽ±í£¨inner£©£º¸ÃÑùʽ±íÒ»°ãдÔÚhead±êÇ©µÄstyle±êÇ©Àͨ¹ýÑ¡ÔñÆ÷À´Ö¸¶¨Ä³¸öÑùʽËùÓ°ÏìµÄ±êÇ©£»
ÍⲿÑùʽ±í£¨external£©£º¸ÃÑùʽ±íÒ»°ãдÔÚ¶ÀÁ¢µÄ*.cssÎļþÀͨ¹ýÑ¡ÔñÆ÷À´Ö¸¶¨Ä³¸öÑùʽËùÓ°ÏìµÄ±êÇ©£¬ÔÚhead±êǩͨ¹ýlink±êÇ©ÒýÈëÍⲿÑùʽÎļþ£»
¿´Ò»¸öÀý×Ó£¬¹²Á½¸öÎļþ£¬ÔÚͬһ¸öĿ¼ÖУº
index.html
<!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=gb2312" />
<!-- ÕâÀïÒýÈëÁËÒ»¸öÍⲿÑùʽ±í -->
<link type="text/css" rel="stylesheet" href="style.css" mce_href="style.css" />
<!-- ÕâÊÇÒ»¸öÄÚ²¿Ñùʽ±í -->
<mce:style type="text/css" ><!--
b { /* ÕâÊÇÒ»¸ö±êǩѡÔñÆ÷ */
background-color:#B0D1E6;
color:blue;
text-indent:2em;
text-align:left;
}
.title { /* ÕâÊÇÒ»¸öÀàÑ¡ÔñÆ÷ */
color:#209DA4;
text-decoration:underline;
text-align:left;
}
#id1 { /* ÕâÊÇÒ»¸öIDÑ¡ÔñÆ÷ */
background-color:#5E5E5E;
color:#FFFFFF;
font-weight:bold;
height:100px;
width: 300px;
border: 2px dotted #C7784E;
word-break:break-all;
overflow-y:auto;
overflow-x:hidden;
text-indent:2em;
margin:0 auto;
}
--></mce:style><mce:style type="text/css" mce_bogus="1"><!--
b { /* ÕâÊÇÒ»¸ö±êǩѡÔñÆ÷ */
background-color:#B0D1E6;
color:blue;
text-indent:2em;
text-align:left;
}
.title { /* ÕâÊÇÒ»¸öÀàÑ¡ÔñÆ÷ */
color:#209DA4;
text-decoration:underline;
text-align:left;
}
#id1 { /* ÕâÊÇÒ»¸öIDÑ¡ÔñÆ÷ */
background-color:#5E5E5E;
color:#FFFFFF;
font-weight:bold;
height:100px;
width: 300px;
border: 2px dotted #C7784E;
word-break:break-all;
overfl
Ïà¹ØÎĵµ£º
ÕâÀïÌṩcssÂ˾µ´úÂ룬
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
ʹÓ÷½·¨£ºÕâ¶Î´úÂë¿ÉÒÔ±äÍøÒ³ÎªºÚ°×£¬½«´úÂë¼Óµ½ÍøÕ¾Ò³ÃæCSS×î¶¥¶Ë¾Í¿ÉÒÔʵÏÖËØ×°¡£
Èç¹ûÍøÕ¾Ã»ÓÐʹÓÃCSS£¬¿ÉÒÔÔÚÍøÒ³/Ä£°åµÄHTML´úÂë<head>ºÍ</head> Ö®¼ä²åÈ룺
<style>
html{filter:progid: ......
Ò»¡¢Ê¹ÓÃSTYLEÊôÐÔ
½«STYLEÊôÐÔÖ±½Ó¼ÓÔÚ¸ö±ðµÄÔª¼þ±êÇ©À<Ôª¼þ(±êÇ©) STYLE="ÐÔÖÊ(ÊôÐÔ)1: É趨ֵ1; ÐÔÖÊ(ÊôÐÔ)2: É趨ֵ2;
...}
<td style="color:#c00; font-size:15px; line-height:18px;>
¡¡¡¡°ËÊ®Äê´ú
</td>
ÕâÖÖ·½·¨Óŵ㣺¿ÉÁ ......
ÔÚʹÓÓfloat”ʱ£¬ÒòΪ“float”ÊÇjavascriptµÄÒ»¸ö±£Áô×Ö£¬ËùÒԾͲ»ÄÜʹÓÃstyle.float£¬¶ø¸Ä³ÉÁËstyle.cssFloat(IEʹÓõÄÊÇstyle.styleFloat)£»
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
this.listDiv01.style.styleFloat = "left";
this.listDiv02.style.styleFl ......
ʲôÇé¿öÏ»á³öÏÖ»»ÐУº
µ±ÔªËØÉèÖÃÁ˹̶¨¸ß¶È£¬²¢ÇÒÎı¾³¤¶È´óÓÚ±êÇ©ÔªËØµÄ¿í¶Èʱ£¬Îı¾»á×Ô¶¯»»ÐС£
cssÇ¿ÖÆ»»ÐÐʹÓÃÑùʽ£ºwhite-space:nowrap;¸ÃÑùʽ´ÓЧ¹ûÉÏÊÇûÓÐä¯ÀÀÆ÷²îÒ죬ʹÓøÃÑùʽºóËùÓÐÎÄ×ÖÔÚieºÍfirefox϶¼ÔÚÒ»ÐÐÄÚÏÔʾ¡£µ«ÊÇÔÚIEÏÂʹÓøÃÊôÐÔÖµºó±êÇ©ÔªËØ¿í¶È»á±»³Å´ó£¬´Ó¶ø¿ÉÄܵ¼ÖÂÔÀ´Ò³Ãæ²¼¾Ö±»ÆÆ»µ¡£
......
ÔÚtable ÖпØÖƵ¥Ôª¸ñÖ®¼äµÄ¼ä¾àÒªÓõ½cellspacing¡¢cellpadding£¬Ä¬ÈÏÇé¿öcellspacing¡¢cellpadding¾ù²»Îª0£¬µ«¾³£µÄ×´¿öΪÁ˲»ÈÃtableµ¥Ôª¸ñÖ®¼äµÄ¼ä¾àÓ°Ïìµ½ÃÀ¹Û£¬ÎÒÃǾ³£»á°Ñcellspacing¡¢cellpaddingÉèÖÃΪ0£¬Òò´Ë¾³£¿´µ½“< table cellspacing=0 cellpadding=0>”ÕâÑùµÄ´úÂë¡£ÕâÑù×öÎÞÐÎÖÐÔö¼ÓÁË´ ......