ѧϰcssÖеÄժ¼
Á´½Ó·½·¨£º
ÍⲿÁ´½ÓÑù±í£º<head><link rel="stylesheet" type="text/css" href="*.css"></head>
ÄÚ²¿µÄ£º1:<head><style type="text/css"> example css </style></head>
2:<p style="color: sienna; margin-left: 20px">
ʹÓ÷½·¨£º
ÀàÑ¡ÔñÆ÷£º.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
idÑ¡ÔñÆ÷£º#center {text-align: center}
<h1 id="center">
This heading will be center-aligned
</h1>
ÅÉÉú£º
»ùÓÚ´óÀàµÄʹÓã¬Ö»Òª¸ü´óµÄÔªËØÄÚ²¿µÄ±í¸ñµ¥Ôª£º .fancy td
ÀàÃûΪ fancy µÄ±í¸ñµ¥Ôª£º td.fancy <td class="fancy">
background-position µÄĬÈÏÖµÊÇ 0% 0%£¬ÔÚ¹¦ÄÜÉÏÏ൱ÓÚ top left¡£
background-attachment:fixed£ºÍ¼Ïñ¹Ì¶¨²»¶¯
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
background
¼òдÊôÐÔ£¬×÷ÓÃÊǽ«±³¾°ÊôÐÔÉèÖÃÔÚÒ»¸öÉùÃ÷ÖС£
background-attachment
±³¾°Í¼ÏñÊÇ·ñ¹Ì¶¨»òÕßËæ×ÅÒ³ÃæµÄÆäÓಿ·Ö¹ö¶¯¡£
background-c
Ïà¹ØÎĵµ£º
Ò»¡¢CSSÎļþ¼°ÑùʽÃüÃû
1¡¢CSSÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºglobal.css£»
¿ò¼Ü²¼¾Ö£ºlayout.css£»
×ÖÌåÑùʽ£ºfont.css£»
Á´½ÓÑùʽ£ºlink.css£»
´òÓ¡Ñùʽ£ºprint.css£»
2¡¢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À´¿ØÖÆ·ÖҳЧ¹û
. ......
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¡¡¿é¶ ......
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ
vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px; È»
ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐÐ
2. margin¼Ó±¶µÄÎÊÌâ
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£½â¾ö·½
°¸ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline;
ÀýÈ磺
<#div ......