CSS»ù´¡½Ì³ÌÕûÀí
ÕâÀïÖ»°ÑһЩÎÒ×Ô¼º»¹ÐèÒª¸Ä½øµÄµØ·½·¢ÉÏÀ´¡£
————————————————————————
1.ÍøÒ³²»ÊǾ²Ì¬µÄ¡¢¾ø¶ÔµÄýÌå¡£ÕâÒâζ×ÅÄÚÄÜÉìËõ±äÐΣ¬Óû§Ó¦¸Ã±»ÔÊÐíµ÷Õû×Ô¼ºÏ²»¶µÄ·½Ê½£¬°üÀ¨×ÖÌå´óСºÍÆÁÄ»´óС¡£
¡¡¡¡ÒòΪÕâÑù£¬½¨Òéʹ
ÓÃ"em"ºÍ"%"ÔÚfont-sizeÉÏ£¨¿í¶ÈºÍ¸ß¶È£©£¬Ïà±ÈÏÂpx²»Äܹ»Ôڴ󲿷Öä¯ÀÀÆ÷¸Ä±ä´óС£¬ËùÒÔÒªÉÙÓ㬿ÉÒÔÓÃÔڱ߿òµÄ´óСÉÏ¡£
2.css¿ÉÒÔ´¦Àí16,777,216ÑÕÉ«£¬¿ÉÒÔʹÓÃÃû×Ö¡¢rgbÖµ»òÊ®Áù½øÖÆ´úÂë¡£
¡¡¡¡ÓÐ17¸öÔ¤ÏÈÈ·¶¨µÄÑÕÉ«£¬ËüÃÇÊÇ£º
¡¡¡¡
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
¡¡¡¡
olive, orange, purple, red, silver, teal, white, and yellow.
¡¡¡¡
transparent Ò²ÊÇÒ»¸öÕýÈ·µÄÖµ¡£
3.font-family
¡¡¡¡ÎÄ×ÖʹÓõÄ×ÖÌ壬±ÈÈçËÎÌ壬Times New Roman£¬Arial
µÈµÈ
¡¡¡¡Õâ¸öÊôÐÔ±ØÐëÏêϸÖƶ¨£¬²»ÄÜʹÓÃƫƧµÄ×ÖÌ壬ҪʹÓð²È«×ÖÌ壨±ÈÈçarial£¬verdanaºÍtimes new romanºÍËÎ
Ì壩£¬¿ÉÒÔͬʱָ¶¨Ðí¶à×ÖÌ壬ֻҪʹÓöººÅ·Ö¿ª¼´¿É¡£ÕâÑùµÄÓÃÒâÊÇ£¬Èç¹ûÓû§µçÄÔÀïûÓеÚÒ»¸ö×ÖÌåä¯ÀÀÆ÷¿ÉÒÔʹÓúóÃæÖ¸¶¨µÄ×ÖÌå¡£Õâ·Ç³£ÓÐÓã¬ÒòΪ²»Í¬µÄ
µçÄÔÓµÓв»Í¬µÄ×ÖÌå¡£Àý×Ófont-size: arial,helvetica£¬pcÓû§¿ÉÒÔʹÓÃarial¶øÆ»¹ûmacÓû§¿ÉÒÔʹÓÃ
helvetica¡£
¡¡¡¡×¢Ò⣺Èç¹û×ÖÌåµÄÃû³ÆÓÐÐí¶àµ¥´Ê×é³É£¬Ê¹ÓÃË«ÒýºÅ×éºÏ£¬±ÈÈ磬font-
family: "Times New Romes"¡£
4.×óÓÒMargin¼Ó±¶µÄÎÊÌâ
¡¡¡¡µ±boxΪfloatʱ£¬IE6ÖÐbox×óÓÒµÄmargin»á¼Ó±¶¡£
5.Íâ²ãbox×Ô¶¯¼ÆËã¸ß¶ÈµÄÎÊÌâ
¡¡¡¡¸ù¾ÝW3C¶¨Ò壬ûÓÐfloatÊôÐÔµÄÍâ²ãbox²»»á×Ô¶¯¼ÆËã¸ß¶È£¬Òª¼ÆËã
¸ß¶È£¬±ØÐëÔÚÄÚ²ã×îºóÒ»¸öbox¼ÓÈëclear:both¡£
¡¡¡¡Opera¡¢netscape¡¢mozillaµÈ²»»á¼ÆËãÍâ²ãbox¸ß¶È£¬µ«ÊÇ΢
Èíie6»á×Ô¶¯¼ÆËãÍâ²ã¸ß¶È¡£±ÈÈ磺
<!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>
Ïà¹ØÎĵµ£º
ÔÚÇ°¶Ë¿ª·¢ÖУ¬ÎÒÃǾ³£Óöµ½ÕâÑùµÄÇé¿ö£º·þÎñÆ÷´«µ½Ç°¶ËµÄͼƬÐèÒªËõСÒÔÏÔʾ£¨ÈçÏ£©£¬ÔÚ½«ÆäËõ·ÅÖ®ºó£¬IEÖÐͼƬЧ¹û²»ÈÝÀÖ¹Û¡£
<img class="thumb" src=http://www.webyi.com/wschool/wdesign/CSS/20090905/"pic.jpg" alt="This image is really 500x500 big" width="50" height="50" />
IE7Ö§³Ö×Ô¶¨ÒåË«Èý´Î&ldq ......
CSS HACK:ä¯ÀÀÆ÷¼æÈݵÄһЩд·¨
ÈËÒ»µ©Ï°¹ßÁËijЩ¶«Î÷¾ÍºÜÄÑÈ¥¸Ä£¬ÒÔ¼°¸÷ÖÖ¸÷ÑùµÄÔÒò£¬ÐµÄä¯ÀÀÆ÷Ô½À´Ô½¶à£¬¶øÀϵÄ×ÜÌÔ̲»ÁË¡£Ôö³¤×ÜÊÇ¿ìÓÚÏûÍöµ¼ÖÂÁËä¯ÀÀÆ÷¼æÈÝÊdzÉÁË̸²»ÍêµÄ»°Ì⡣˵µ½ä¯ÀÀÆ÷¼æÈÝ£¬CSS HACK×ÔÈ»¶øÈ»µØ±»ÎÒÃÇÏëÆð¡£½ñÌ죬ÎÒÃÇͨ³£¶¼ÓÐÒ»¸öÍŶӻòÕß½«ÓÐÒ»¸öÍŶӵÄÈËÔÚÒ»¸ö¹«Ë¾ÀïÃæ×öÏàͬµÄÊ£¬ÐèÒªÎÒÃÇÓ ......
Ϊµ¥¸ö±êÇ©¶¨Ò壺
br{
text-align: center;
color: #000000;
font-family:ËÎÌå;
}
Ϊbr±êÇ©Ö¸¶¨ÁË3¸öÑùʽÊôÐÔ£¬°üº¬¶ÔÆ䷽ʽ¡¢ÎÄ×ÖÑÕÉ«¼°×ÖÌå¡£
ÔÚÍøÒ³ÖÐÒ»¸öÿ¸öIDÖ»ÄÜʹÓÃÒ»´Î£¬È磺
<div id="main"></div>
ÔÚCSSÑùʽ±íÖУ¬IDÑ ......
¶¯»»ÐÐÎÊÌâ,Õý³£×Ö·ûµÄ»»ÐÐÊDZȽϺÏÀíµÄ,¶øÁ¬ÐøµÄÊý×ÖºÍÓ¢ÎÄ×Ö·û³£³£½«ÈÝÆ÷³Å´ó,ͦÈÃÈËÍ·ÌÛ,ÏÂÃæ½éÉܵÄÊÇCSSÈçºÎʵÏÖ»»Ðеķ½·¨
¶ÔÓÚdiv,pµÈ¿é¼¶ÔªËØ
Õý³£ÎÄ×ֵĻ»ÐÐ(ÑÇÖÞÎÄ×ֺͷÇÑÇÖÞÎÄ×Ö)ÔªËØÓµÓÐĬÈϵÄwhite-space:normal,µ±¶¨ÒåµÄ¿í¶ÈÖ®ºó×Ô¶¯»»ÐÐ
html
<
id="wrap">Õý³£ÎÄ×ֵĻ»ÐÐ(ÑÇÖÞÎÄ×ֺͷÇÑÇÖÞÎÄ×Ö) ......
Block element ¿é¼¶ÔªËØ
¹ËÃû˼Òå¾ÍÊÇÒÔ¿éÏÔʾµÄÔªËØ£¬¸ß¶È¿í¶È¶¼ÊÇ¿ÉÒÔÉèÖõġ£±ÈÈçÎÒÃdz£ÓõÄ<div>¡¢<p>¡¢<ul>ĬÈÏ״̬϶¼ÊÇÊôÓڿ鼶ԪËØ¡£¿é¼¶ÔªËرȽϰԵÀ£¬Ä¬ÈÏ״̬ÏÂÿ´Î¶¼Õ¼¾ÝÒ»Õû¸öÐУ¬ºóÃæµÄÄÚÈÝÒ²±ØÐëÔÙÐÂÆðÒ»ÐÐÏÔʾ¡£µ±È»·Ç¿é¼¶ÔªËØÒ²¿ÉÒÔͨ¹ýcssµÄdisplay:block;½«Æä¸ü¸Ä³É¿é¼¶ÔªËØ¡£´ËÍâ» ......