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
Ïà¹ØÎĵµ£º
Æð³õµÄHTMLµÄÉè¼ÆÖ»ÊǶ¨ÒåÎĵµÄÚÈÝÓ㬶ø¶ÔÓÚÎĵµ²¼¾ÖÔòÓÉä¯ÀÀÆ÷À´Íê³É¡£ºóÀ´ÓÉÓÚä¯ÀÀÆ÷·þÎñÉ̲»¶ÏµØ½«ÐµĹ淶ÖУ¬Ê¹µÃ´´½¨ÎĵµÄÚHTML±êÇ©Ìí¼Óµ½HTMLÈÝÇåжÀÁ¢ÓÚ±íÏÖ²ãµÄÕ¾µãÔ½À´Ô½¸´ÔÓ¡£ÎªÁ˽â¾öÕâ¸öÎÊÌ⣬ÍòάÍøÁªÃË£¨W3C£©£¬¼ç¸ºÆðÁË HTML ±ê×¼»¯µÄʹÃü£¬²¢ÔÚ HTML 4.0 Ö®Íâ´´Ôì ......
CSS ±³¾°ÊôÐÔ£¨Background£©
ÊôÐÔ
ÃèÊö
CSS
background
ÔÚÒ»¸öÉùÃ÷ÖÐÉèÖÃËùÓеı³¾°ÊôÐÔ¡£
1
background-attachment
ÉèÖñ³¾°Í¼ÏñÊÇ·ñ¹Ì¶¨»òÕßËæ×ÅÒ³ÃæµÄÆäÓಿ·Ö¹ö¶¯¡£
1
background-color
ÉèÖÃÔªËصı³¾°ÑÕÉ«¡£
1
background-image
ÉèÖÃÔªËصı³¾°Í¼Ïñ¡£
1
background-position
ÉèÖñ³¾°Í¼ÏñµÄ¿ª ......
<!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=utf-8" />
<title>CSS Hack: Çø·Ö I ......
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¡¡¿é¶ ......