¡¾DIV+CSSÈëÃŽ̡̳¿Îå¡¢CSSÑ¡ÔñÆ÷
ÉϽڿÎÎÒÃǽ²ÁËÒ»ÏÂCssͨ¹ýʲô·½Ê½È¥¿ØÖÆÒ³Ãæ
£¬Èç¹û²»¼ÇµÃ£¬ÎÒÀ´°ï´ó¼Ò»ØÒäһϣ¬×ܹ²ÓÐËÄÖÖ·½Ê½ÐÐÄÚ·½Ê½¡¢ÄÚ
Ƕ·½Ê½¡¢Á´½Ó·½Ê½¡¢µ¼È뷽ʽ£¬´ó¼Òͨ¹ýÕâËÄÖÖ·½Ê½¾Í¿ÉÒÔʵÏÖCSS
¶ÔHTML
Ò³ÃæÑùʽµÄ¿ØÖÆ£¬Èç¹ûÒªÈÃÕâЩÑùʽ¶ÔHTMLÒ³ÃæÖеÄÔªËØʵÏÖÒ»¶ÔÒ»£¬Ò»¶Ô¶à»òÕ߶à¶ÔÒ»µÄ¿ØÖÆ£¬Õâ¾ÍÐè
ÒªÓõ½CSSÑ¡ÔñÆ÷£¬HTMLÒ³ÃæÖеÄÔªËؾÍÊÇͨ¹ýCSSÑ¡ÔñÆ÷½øÐпØÖƵġ£
CSSÑ¡ÔñÆ÷¹²ÓÐÈýÖÖ£º±êÇ©Ñ¡ÔñÆ÷
¡¢ID
Ñ¡ÔñÆ÷
¡¢ÀàÑ¡ÔñÆ÷
¡£
ΪÁ˺óÃæµÄ¶ÔÑ¡ÔñÆ÷µÄ½âÊ͸üÈÝÒ×Àí½â£¬ÔÚÕâÀïÏÈ´ò¸ö±ÈÓ÷£¬Èç¹û°ÑÄãËù´¦µÄ»·¾³ÊÓΪHTMLÒ³ÃæµÄ»°£¬»·¾³ÀïµÄÿһ¸öÈËÔòÏ൱ÓÚHTMLÒ³ÃæÄÚ±êÇ©ÔªËØ£¬Ã¿
¸öÈ˶¼ÓÐÒ»¸öID(Éí·ÝÖ¤)£¬ÄÇôhtmlÖеÄÿһ¸ö±êÇ©Ò²¶¼ÓÐ×Ô¼ºµÄID£¬´ó¼Ò¶¼ÖªµÀIDÊÇΨһµÄ£¬²»¿ÉÄÜÖظ´¡£
¡¾±êÇ©Ñ¡ÔñÆ÷¡¿
Ò»¸öÍêÕûµÄHTMLÒ³ÃæÊÇÓÐ
ºÜ¶à²»Í¬µÄ±êÇ©×é³É£¬¶ø±êÇ©Ñ¡ÔñÆ÷£¬ÔòÊǾö¶¨ÄÄЩ±êÇ©²ÉÓÃÏàÓ¦µÄCSSÑùʽ£¬(ÔÚ´ó»·¾³ÖÐÄã¿ÉÄܳöÓÚ²»Í¬µÄλÖ㬵«ÊDz»¹ÜÔõôÑù£¬Äã×ÜÊÇ´©×ÅͬһÌ×Ò·þ£¬
Õâ¼þÒ·þ¾ÍÊÇÓɱêÇ©Ñ¡ÔñÆ÷ÊÂÏȸøÄãÏÞ¶¨ºÃµÄ£¬²»¹Ü×ßµ½ÄÄÀﶼÊÇÕâÉíÒ·þ)±ÈÈ磬ÔÚstyle.cssÎļþÖжÔp±êÇ©ÑùʽµÄÉùÃ÷ÈçÏ£º
p{
font-size:12px;
background:#900;
color:090;
}
ÔòÒ³ÃæÖÐËùÓÐp±êÇ©µÄ±³¾°¶¼ÊÇ#900(ºìÉ«)£¬ÎÄ×Ö´óС¾ùÊÇ12px£¬ÑÕɫΪ#090(ÂÌÉ«)£¬ÕâÔÚºóÆÚά»¤ÖУ¬Èç¹ûÏë¸Ä±äÕû¸öÍøÕ¾ÖÐp±êÇ©±³¾°µÄÑÕ
É«£¬Ö»ÐèÒªÐÞ¸ÄbackgroundÊôÐԾͿÉÒÔÁË£¬¾ÍÕâôÈÝÒ×£¡
¡¾IDÑ¡ÔñÆ÷¡¿
IDÑ¡ÔñÆ÷ÔÚijһ¸öHTML
Ò³ÃæÖÐÖ»ÄÜʹÓÃÒ»´Î(µ±È»Ò²¿ÉÒÔÓúü¸´Î£¬²»¹ý¾Í²»·ûºÏW3C±ê×¼ÁË£¬ÄÇÒ³ÃæÒ²¾Í²»ÊDZê×¼Ò³Ãæà¶~£¬ÔÛÃǵÄÄ¿µÄ²»¾ÍÊÇΪÁË×ö±ê×¼µÄÒ³Ãæô£¬ËùÒÔ½¨Òé´ó¼Ò²»
ÒªÔÚͬһ¸öhtmlÒ³ÃæÖжà¸ö±êÇ©ÓµÓй²Í¬µÄID)£¬¾ÍÏñÔÚÄãËù´¦µÄ»·¾³ÖУ¬ÄãÖ»ÓÐÒ»¸öID(Éí·ÝÖ¤)£¬²»¿ÉÄÜÖظ´£¡ÏàÐÅ´ó¼ÒÒ²ÄÜ¿´³öÀ´£¬IDÑ¡ÔñÆ÷¸ü¾ß
ÓÐÕë¶ÔÐÔ£¬È磺
Ïȸøij¸öHTMLÒ³ÃæÖеÄij¸öp±êÇ©Æð¸öID£¬´úÂëÈçÏ£º
<p id="one">´Ë´¦Îªp±êÇ©ÄÚµÄÎÄ×Ö</p>
ÔÚCSSÖж¨ÒåIDΪoneµÄp±êÇ©µÄÊôÐÔ£¬¾ÍÐèÒªÓõ½#£¬´úÂëÈçÏ£º
#one{
font-size:12px;
background:#900;
color:090;
}
ÕâÑùÒ³ÃæÖеÄij¸öp¾Í»áÊÇCSSÖж¨ÒåµÄÑùʽ¡£
¡¾ÀàÑ¡ÔñÆ÷¡¿
ÕâÖÖÑ¡ÔñÆ÷¸üÈÝÒ×Àí½âÁË£¬¾ÍÊÇ
ʹҳÃæÖеÄijЩ±êÇ©(¿ÉÒÔÊDz»Í¬µÄ±êÇ©)¾ßÓÐÏàͬµÄÑùʽ£¬¾ÍÏñ¹úÇìÖÐij¸ö·½ÕóÖУ¬¿Ï¶¨¶¼ÊDz»Í¬µÄÈË£¬È´¾ù´©ºìÉ«Ò·þ£¬ÊÖÖи߾ٻ¨»·£¬Ñùʽ¶¼ÊÇÒ»ÑùµÄ£¬Èç¹û
ÏëÈÃÕâÒ»ÀàÈ˶¼Óй²Í¬µÄÑùʽ£¬¸ÃÔõô×öÄØ~ºÇºÇ£¬ºÍIDÑ¡ÔñÆ÷µÄÓ
Ïà¹ØÎĵµ£º
CSSÒѾ³ÉΪÍøҳǰ¶ÎÉè¼ÆÒ»¸ö·Ç³£ÖØÒªµÄ²¿·Ö£¬ÓÉÓÚдCSSʱÐèÒª¿¼ÂǵÄÎÊÌâ·Ç³£¶à£¬ÀÏÊÖÃÇ´´½¨ÐÂÒ³ÃæÊÇͨ³£»áÑØÓÃÒÔÇ°µÄCSS¿ò¼Ü¡£µ«ÊÇÐÂÊÖûÓÐ×Ô¼ºµÄ¿ò¼Ü£¬ÕâƪÎÄÕ¿ÉÒÔ¸øÐÂÊÖÃÇһЩÆôʾ¡£
1.¼òµ¥µÄ´¿CSS Tooltip
ͨ¹ýÕâЩ´úÂ룬Äã¿ÉÒÔ×ö³ö¼òµ¥µÄTooltip¡£ÕâÊÇCSS
´úÂ룺
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
a:hover { background: ......
±ÈÈçÒª·Ö±æIE6ºÍfirefoxÁ½ÖÖä¯ÀÀÆ÷£¬¿ÉÒÔÕâÑùд£º
¡¡¡¡<style>
¡¡¡¡div{
¡¡¡¡background:green; /* for firefox */
¡¡¡¡*background:red; /* for IE6 */
¡¡¡¡}
¡¡¡¡</style>
¡¡¡¡ÎÒÔÚIE6Öп´µ½ÊǺìÉ«µÄ£¬ÔÚfirefoxÖп´µ½ÊÇÂÌÉ«µÄ¡£
¡¡¡¡½âÊÍһϣº
¡¡¡¡ÉÏÃæµÄcssÔÚfirefoxÖУ¬ËüÊÇÈÏʶ²»Á˺óÃæµÄÄǸö´ ......
Ëĸöcss¹¤¾ß£ºfonts,grids,reset,base
ʹԪËرê×¼»¯µÄreset.css
ÒÔÏÂÆÕͨ¶ø³£ÓõÄÔªËض¼½«marginºÍpaddingÖµ±ê×¼»¯µ½0
the document body
div and p
ËùÓÐlist ÔªËØ£ºdl,dt,dd,ul,ol,li
±êÌ⼶ԪËØ£ºh1,h2,h3,h4,h5,h6
preºÍblockquoteÔªËØ
ijЩ±íµ¥ÔªËØ£ºform,fieldset,input,textarea
tableÔªËØ£ºt ......
Eric Meyer’s CSS Reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, fo ......