CSS³£ÓòÙ×÷
×¢ÊÍÓÃ/**/¡£
²»ÒªÔÚÊôÐÔÖµÓ뵥λ֮¼äÁôÓпոñ¡£¼ÙÈçÄãʹÓà “margin-left:20 px” ¶ø²»ÊÇ “margin-left:20px” (20ºÍpxÖ®¼äÓпոñ)£¬Ëü½öÔÚ IE 6 ÖÐÓÐЧ£¬µ«ÊÇÔÚ Mozilla/Firefox »ò Netscape ÖÐÈ´ÎÞ·¨Õý³£¹¤×÷¡£
ÍⲿÑùʽ±íÒýÓ÷½Ê½£º<link rel="stylesheet" type="text/css" href="mystyle.css" mce_href="mystyle.css" />
ÄÚ²¿Ñùʽ±í£º
<head>
<mce:style type="text/css"><!--
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
h1,h2,h2,h3,h5,h6 {color: green;}
--></mce:style><style type="text/css" mce_bogus="1"> hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
h1,h2,h2,h3,h5,h6 {color: green;}</style>
</head>
ÄÚÁªÑùʽ£º<p style="color: sienna; margin-left: 20px" mce_style="color: sienna; margin-left: 20px">This is a paragraph</p>
---------------------------------------------
Ñùʽ¿ÉÒÔ±»¼Ì³Ð£º
ÀýÈ磬ÍⲿÑùʽ±íÓµÓÐÕë¶Ô h3 Ñ¡ÔñÆ÷µÄÈý¸öÊôÐÔ£º
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
¶øÄÚ²¿Ñùʽ±íÓµÓÐÕë¶Ô h3 Ñ¡ÔñÆ÷µÄÁ½¸öÊôÐÔ£º
h3 {
text-align: right;
font-size: 20pt;
}
¼ÙÈçÓµÓÐÄÚ²¿Ñùʽ±íµÄÕâ¸öÒ³ÃæͬʱÓëÍⲿÑùʽ±íÁ´½Ó£¬ÄÇô h3 µÃµ½µÄÑùʽÊÇ£º
color: red;
text-align: right;
font-size: 20pt;
---------------------------------------------
Ìáʾ£ºÈç¹ûֵΪÈô¸Éµ¥´Ê£¬ÔòÒª¸øÖµ¼ÓÒýºÅ£ºp {font-family: "sans serif";}¡£Ö»Óе±Ò»¸ö×ÖÌåÃûÖÐÓÐÒ»¸ö»ò¶à¸ö¿Õ¸ñ£¨±ÈÈç New York£©£¬»òÕßÈç¹û×ÖÌåÃû°üÀ¨ # »ò $ Ö®ÀàµÄ·ûºÅ£¬²ÅÐèÒªÔÚ font-family ÉùÃ÷ÖмÓÒýºÅ¡£
ÅÉÉúÑ¡ÔñÆ÷£º
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
---------------------------------------------
id Ñ¡ÔñÆ÷£º
id Ñ¡ÔñÆ÷¿ÉÒÔΪ±êÓÐÌض¨ id µÄ HTML ÔªËØÖ¸¶¨Ìض¨µÄÑùʽ¡£id Ñ¡ÔñÆ÷ÒÔ "#" À´¶¨Òå¡£
#red {color:red;}
#green {color:green;}
ÏÂÃæµÄ HTML ´úÂëÖУ¬id Êô
Ïà¹ØÎĵµ£º
<div style="FILTER:alpha(opacity=30 finishopacity=0 style=1) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); VERTICAL-ALIGN: middle; BORDER-LEFT: #f3f3f3 1px solid; WIDTH: 300px; PADDIN ......
ÔÚÐí¶àÍøÕ¾ÉÏÎÒÃÇ¿ÉÒÔ¿´µ½ºÜ¸öÐÔµÄÊó±êÖ¸Õë(cursor)£¬ÔÚÍøÒ³Éè¼ÆÖÐÓÃCSS¿ÉÒÔ·½±ãµÄʵÏÖÕâÑù¸öÐÔÊó±êÖ¸ÕëµÄЧ¹û,¸ÃCSSÊôÐÔ¾ÍÊÇ"cursor"ÊôÐÔ¡£
Ê×ÏÈÎÒÃǽéÉÜÒ»ÏÂϵͳ×Ô´øµÄ15¸öÊó±êЧ¹û£º
Ò»°ã¶øÑÔ£¬Êó±êÒÔбÏòÉϵļýÍ·ÏÔʾ£¬ÒƵ½Îı¾ÉÏʱ±äΪÓÐÍ·µÄÊúÏߣ¬ÒƵ½³¬¼¶Á´½ÓÉϱäΪÊÖÐÍ¡£µ«ÓÃcss¿É¿ØÖÆÊó±êµÄÏÔʾЧ¹û£¬Èç¿ÉʹÊó±ê ......
1.ÔÚÒ³ÃæHEADÖÐÒýÈëÒ»¸öÌØÊâµÄCSS
<link rel="stylesheet" type="text/css" href="${contextPath}/styles/print.css" media="print" />
2.ÔÚprint.cssÖÐͨ¹ý½«Ò³ÃæÖÐÏÔʾµÄÇøÓòDISPLAYÉèÖÃΪNONE,´òÓ¡ÇøÓòÉ趨DISPLAYΪBLOCK
ÁíÍâ¿ÉÒÔ¼ÓÈëÒ»¸öÌØÊâµÄCSSÀ´¿ØÖÆ·ÖҳЧ¹û
. ......
<!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=gbk" />
......
css display µÄ²ÎÊýÁбí
Óï·¨£º
display : block | none | inline | compact | marker |
inline-table | list-item | run-in | table |table-caption |
table-cell | table-column | table-column-group |
table-footer-group | table-header-group | table-row | table-row-group
²ÎÊý£º
block : ¡¡CSS1¡¡¿é¶ ......