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ØÐë×ñÊØÕâЩ ......
margin-bottom:8px;ÉèÖöÔÏóϱ߾àµÄ¸ß¶È
ÄÚÁª¶ÔÏóҪʹÓøÃÊôÐÔ£¬±ØÐëÏÈÉ趨¶ÔÏóµÄheight»òwidthÊôÐÔ£¬»òÕßÉ趨positionÊôÐÔΪabsolute¡£
padding-top:10px;ÓëÉÏÒ»¸ö±êÇ©µÄ¾àÀë
padding-left:10px;Óë×ó±ßµÄ¼ä¾à
¼ìË÷»òÉèÖöÔÏ󶥱ߵIJ¹¶¡±ß¾à¡£
ÄÚÁª¶ÔÏóҪʹÓøÃÊôÐÔ£¬±ØÐëÏÈÉ趨¶ÔÏóµÄheight»òwidthÊôÐÔ£¬»òÕßÉ趨pos ......
<!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" />
<title>www.zishu.cn</t ......
»ùÓÚIEÓëcssµÄ±í¸ñÐÐÍ·Óë¶à²ãÁÐÍ·Ëø¶¨·½·¨
£¨×ó±ßͼËø¶¨ÁËÐÐÍ·ÓëÁÐÍ·£¬ÓÒ±ßͼ½öËø¶¨ÁÐÍ·£©
ÓÐÐí¶àµÄËø¶¨»ò¹Ì¶¨html±í¸ñ±íÍ·µÄ·½·¨ºÍ¼¼Êõ£¬±¾ÎĽéÉܵÄÊÇÒ»¸ö»ùÓÚIEºÍcssµÄ¼òÒ×ʵÏÖ·½·¨£¬»ù±¾Ë¼Â·Îª£ºÊ¹ÓÃdivÐм¶ÔªËØÈ·¶¨Ò»¸ö°üº¬±í¸ñµÄÇøÓò£¬ÔÚÇøÓò¹ö¶¯Òƶ¯Ê±¶¨Î»·Ç¹Ì¶¨µ¥Ôª¸ñµÄλÖã¨top/left£© ......
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¡¡¿é¶ ......