cssѧϰ×ܽá
Ò» ¹ØÓÚcssµÄidÑ¡Ôñ·û
ÿ¸öhtmlµÄÔªËض¼°üº¬Ò»¸öidÊôÐÔ£¬¸ÃÊôÐÔÊÇΨһµÄ£¬¿ÉÒÔΨһ±êʾһ¸öÔªËØ£¬ÎÒÃǾͿÉÒÔÑ¡Ôñ¸ü¾ßÌåµÄÔªËØ¡£isÊôÐÔÓɾ®ºÅ¼Óid×é³É¡£
p#bulletinContent
{
color:Yellow ;
background-color:Maroon ;
}
html½çÃæÈçÏ£º
<p id = "bulletinContent" >ÎÒµÄblog</p>
¶þ classÑ¡Ôñ·û
htmlÖаüº¬classÊôÐÔ£¬ÓëidÊôÐÔ²»Í¬£¬classÊôÐÔ²»ÒªÇóΨһÐÔ£¬¶à¸öÔªËØ¿ÉÒÔÓµÓÐÏàͬµÄcalssÊôÐÔ¡£
h2.titleLevel2
{
color:Gray ;
}
html Ò³Ãæ´úÂë:
<h2 class="titleLevel2">²âÊÔclassµÄÊôÐÔ</h2>
Èý ¶àÖØclass
ÓÉÉϽڵÄÄÚÈÝ¿ÉÖª£¬classÊôÐÔºÍidÊôÐԵIJ»Í¬Ö®´¦£¬idÊôÐÔÊÇΨһµÄ£¬¶øͬһ¸öÊôÐÔ¿ÉÒÔ¸³¸ø¶à¸öÔªËØ¡£
Ò»¸öhtmlÔªËØ¿ÉÒÔÊôÓÚ¶à¸öclass¡£
<h2 class="class1 class2">²âÊÔclassµÄÊôÐÔ</h2>
cssÎļþÈçÏÂ:
a.class1
{
font-size:12px;
}
a.class2
{
color:red;
}
ËÄ Ç¶Ì×div±êÇ©
div.box
{
border:1px solid #E2DFD0 ;
margin-bottom:1em;
}
div.box div.title
{
padding:0.3em ;
padding-left:0.6em;
background:#F2F0DD;
font-size:0.9em ;
font-weight:bold;
}
div.box div.content
{
margin:0.3em;
}
div.box div.content *
{
margin:0;
}
div.box h3
{
font-weight: bold;
font-size:0.9em;
padding:0.5em;
color:#0033CC;
}
div.box p
{
font-size:0.9em;
padding:0.5em;
}
div.content + div.content
{
border-top:1px dotted #E2DFD0 ;
}
¶ÔÓ¦µÄhtml´úÂë
<div class="box">
<div class="title">²úÆ·Áбí</div>
&nbs
Ïà¹ØÎĵµ£º
ÕâÊDZ¾ÈËѧϰCSSµÃһЩÐĵ㬾õµÃºÜÓÐÓã¬Ï£Íû¶Ô´ó¼ÒÒ²ÓÐËù°ïÖú¡£
1. ÈçºÎдCSSÓѺõÄHTML.
´ó¼ÒÖªµÀÒªÊÇ×Ô¼ºµÄÒ³Ãæ¼æÈݲ»Í¬³§ÉÌ£¬²»Í¬°æ±¾µÄä¯ÀÀÆ÷¼òÖ±¾ÍÊÇÒ»³¡Ø¬ÃΡ£Ò»·½ÃæÊÇÒòΪ²»Í¬ä¯ÀÀÆ÷µÄ²îÒìÐÔ£¬»¹ÓиüÖØÒªµÄÊÇÎÒÃÇ×Ô¼ºÐ´
µÄHTML²»¹æ·¶¡£ÎÒ¾õµÃÿ¸öHTMl±êÇ©¶¼ÓÐËüµÄÌض¨µÄÓÃ;£¬ÓÐËüµÄÊéд¹æ·¶£¬ÎÒÃDZØÐë×ñÊØÕâЩ ......
Æð³õµÄHTMLµÄÉè¼ÆÖ»ÊǶ¨ÒåÎĵµÄÚÈÝÓ㬶ø¶ÔÓÚÎĵµ²¼¾ÖÔòÓÉä¯ÀÀÆ÷À´Íê³É¡£ºóÀ´ÓÉÓÚä¯ÀÀÆ÷·þÎñÉ̲»¶ÏµØ½«ÐµĹ淶ÖУ¬Ê¹µÃ´´½¨ÎĵµÄÚHTML±êÇ©Ìí¼Óµ½HTMLÈÝÇåжÀÁ¢ÓÚ±íÏÖ²ãµÄÕ¾µãÔ½À´Ô½¸´ÔÓ¡£ÎªÁ˽â¾öÕâ¸öÎÊÌ⣬ÍòάÍøÁªÃË£¨W3C£©£¬¼ç¸ºÆðÁË HTML ±ê×¼»¯µÄʹÃü£¬²¢ÔÚ HTML 4.0 Ö®Íâ´´Ôì ......
<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 ......
1.ÔÚÒ³ÃæHEADÖÐÒýÈëÒ»¸öÌØÊâµÄCSS
<link rel="stylesheet" type="text/css" href="${contextPath}/styles/print.css" media="print" />
2.ÔÚprint.cssÖÐͨ¹ý½«Ò³ÃæÖÐÏÔʾµÄÇøÓòDISPLAYÉèÖÃΪNONE,´òÓ¡ÇøÓòÉ趨DISPLAYΪBLOCK
ÁíÍâ¿ÉÒÔ¼ÓÈëÒ»¸öÌØÊâµÄCSSÀ´¿ØÖÆ·ÖҳЧ¹û
. ......
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¡¡¿é¶ ......