1.css ×ÖÌå¼òд¹æÔò
¡¡¡¡µ±Ê¹ÓÃcss¶¨Òå×ÖÌåʱÄã¿ÉÄÜ»áÕâÑù×ö:
¡¡¡¡font-size: 1em;
¡¡¡¡line-height: 1.5em;
¡¡¡¡font-weight: bold;
¡¡¡¡font-style: italic;
¡¡¡¡font-variant: small-caps;
¡¡¡¡font-family: verdana,serif;
¡¡¡¡
ÊÂʵÉÏÄã¿ÉÒÔ¼òдÕâЩÊôÐÔ:
¡¡¡¡font: 1em/1.5em bold italic small-caps verdana,serif
¡¡¡¡ÏÖÔںöàÁË°É£¬²»¹ýÓÐÒ»µãҪעÒâ:ʹÓÃÕâÒ»¼òд·½Ê½ÄãÖÁÉÙÒªÖ¸¶¨font-sizeºÍfont-familyÊôÐÔ£¬ÆäËûµÄÊôÐÔ(Èçfont-weight, font-style,font-varient)Èçδָ¶¨½«×Ô¶¯Ê¹ÓÃĬÈÏÖµ¡£
¡¡¡¡2.ͬʱʹÓÃÁ½¸öclass
¡¡¡¡Í¨³£ÎÒÃÇֻΪÊôÐÔÖ¸¶¨Ò»¸öclass,µ«Õâ²¢²»µÈÓÚÄãÖ»ÄÜÖ¸¶¨Ò»¸ö£¬Êµ¼ÊÉÏ£¬ÄãÏëÖ¸¶¨¶àÉپͿÉÒÔÖ¸¶¨¶àÉÙ£¬ÀýÈç:
¡¡¡¡<p class="text side">...</p>ͨ¹ýͬʱʹÓÃÁ½¸öclass(ʹÓÿոñ¶ø²»ÊǶººÅ·Ö¸î),Õâ¸ö¶ÎÂ佫ͬʱӦÓÃÁ½¸öclassÖÐÖƶ¨µÄ¹æÔò¡£Èç¹ûÁ½ÕßÖÐÓÐÈκιæÔòÖصþ£¬ÄÇôºóÒ»¸ö½«»ñµÃʵ¼ÊµÄÓÅÏÈÓ¦Óá£
¡¡¡¡3.cssÖб߿ò(border)µÄĬÈÏÖµ
¡¡¡¡µ±±àдһÌõ±ß¿òµÄ¹æÔòʱ£¬Äãͨ³£»áÖ¸¶¨ÑÕÉ«¡¢¿í¶ÈÒÔ¼°Ñùʽ(ÈκÎ˳Ðò¾ù¿É)¡£ÀýÈç:border: 3px solid #000(3ÏñËØ¿íµÄºÚɫʵÏ߱߿ò)£¬ÆäʵÕâ¸öÀý×ÓÖÐΨһÐèÒªÖ¸¶¨µÄÖµÖ»ÊÇÑùʽ ......
ʲôÇé¿öÏ»á³öÏÖ»»ÐУº
µ±ÔªËØÉèÖÃÁ˹̶¨¸ß¶È£¬²¢ÇÒÎı¾³¤¶È´óÓÚ±êÇ©ÔªËصĿí¶Èʱ£¬Îı¾»á×Ô¶¯»»ÐС£
cssÇ¿ÖÆ»»ÐÐʹÓÃÑùʽ£ºwhite-space:nowrap;¸ÃÑùʽ´ÓЧ¹ûÉÏÊÇûÓÐä¯ÀÀÆ÷²îÒ죬ʹÓøÃÑùʽºóËùÓÐÎÄ×ÖÔÚieºÍfirefox϶¼ÔÚÒ»ÐÐÄÚÏÔʾ¡£µ«ÊÇÔÚIEÏÂʹÓøÃÊôÐÔÖµºó±êÇ©ÔªËØ¿í¶È»á±»³Å´ó£¬´Ó¶ø¿ÉÄܵ¼ÖÂÔÀ´Ò³Ãæ²¼¾Ö±»ÆÆ»µ¡£
½â¾ö°ì·¨£º
white-space:nowrap;overflow:hidden; ......
×¢ÒâÊÂÏ
ÁËʵÏÖµ¼º½ÖеÄ×Óµ¼º½ÓëÖ÷µ¼º½ÔÚʵÏÖÊó±ê½»»¥µÄͬʱ£¬±£³ÖÆäÏà¶ÔλÖÃÒ»Ö£¬ÎÒÃÇʹÓÃÁ˶Ôul li{}ʹÓÃÁËposition:relative;ʹÆ䶨λ·½Ê½×ªÎªÏà¶Ô¶¨Î»¡£¶ø¶Ôli ul{}¼´×Óµ¼º½²ÉÓÃÁËposition:absolute;Ïà¶ÔÓÚµ¼º½µÄ¾ø¶Ô¶¨Î»·½Ê½£¬ÁËÆäÊó±ê½»»¥ºóµÄλÖÃÒ»Ö¡£
×ÝÏòµ¼º½²Ëµ¥
ÎÒÃÇÏÈ¿´Ò»Ï´úÂë½á¹¹£º
<div id="nav">
<h1>CSS</h1>
<h2><a href="#">cssÈëÃÅ</a></h2>
<h2><a href="#">css½ø½×</a></h2>
<h2><a href="#">css¸ß¼¶</a></h2>
<h1>webUI</h1>
<h2><a href="#">ÀíÂÛ֪ʶ</a> ......
cssÊÇʲô£¿ÕâÊdzõѧÍøÒ³Éè¼ÆµÄͬѧÃÇÓöµ½µÄµÚÒ»¸öÎÊÌ⣬ÔÚѧϰÍøÒ³ÖÆ×÷֮ǰ£¬ÄãÒ»¶¨ÒªÁ˽âÍøÒ³ÖÆ×÷µÄ´ó¾Ö£¬ÓÐÁËÈ«¾ÖµÄÁ˽⣬²ÅÖªµÀÔõôȥѧϰ¡£
ÍøÒ³Éè¼Æ·ÖΪ£ºÇ°Ì¨Ò³ÃæÉè¼Æ£¬ºǫ́³ÌÐòÉè¼Æ¡£
ǰ̨ҳÃæÉè¼Æ·ÖΪ£ºhtml,css,javasript,ps,flash£¨Õ⼸¸ö¶¼ÒªÁ˽âŶ£¬ÊìÁ·ÕÆÎÕcss£©
ºǫ́³ÌÐòÉè¼Æ·ÖΪ£ºasp,php,asp.net£¨Ö»ÒªÑ§»áÒ»Ö־ͿÉÒÔÁË£¬Ò»ÖÖѧ»á£¬ÆäËûµÄ¾ÍOK£¬±à³Ì˼ÏëÊDz¶àµÄ£©
CSSÊÇǰ̨Éè¼ÆÖзdz£ÖØÒªµÄÒ»²¿·Ö£¬Äã±ØÐëÕÆÎÕhtml´úÂë²ÅÄÜѧ£¬²»È»»áÓеãÄѶȵġ£
CSSÊÇCascading Style Sheets£¨²ãµþÑùʽ±íµ¥£©µÄ¼ò³Æ¡£¸ü¶àµÄÈË°ÑËü³Æ×÷Ñùʽ±í¡£¹ËÃû˼Ò壬ËüÊÇÒ»ÖÖÉè¼ÆÍøÒ³ÑùʽµÄ¹¤¾ß¡£
ÔÚÍøÒ³ÖÐÓúܼòµ¥µÄCSSÓï¾ä¾Í¿ÉÒÔʵÏÖÐí¶àÐèҪרҵÈí¼þ²Å¿ÉÒÔ´ïµ½µÄЧ¹û¡£ÀûÓÃÊôÐÔ¿ÉÒÔÉèÖÃ×ÖÌå¡¢ÑÕÉ«¡¢±³¾°µÈÒ³Ãæ¸ñʽ£»ÀûÓö¨Î»¿ÉÒÔʹҳÃæ²¼¾Ö¸ü¼Ó¹æ·¶¡¢ºÃ¿´£»ÀûÓÃÂ˾µ¿ÉÒÔʹҳÃæ²úÉú¶àýÌåЧ¹û¡£
CSS¾ÍÊÇÒ»ÖÖ½Ð×öÑùʽ±í£¨stylesheet£©µÄ¼¼Êõ¡£Ò²ÓеÄÈ˳Æ֮Ϊ²ãµþÑùʽ±í£¨Cascading Stylesheet£©¡£
ÔÚÖ÷Ò³ÖÆ×÷ʱ²ÉÓÃCSS¼¼Êõ£¬¿ÉÒÔÓÐЧµØ¶ÔÒ³ÃæµÄ²¼¾Ö¡¢×ÖÌå¡¢ÑÕÉ«¡¢±³¾°ºÍÆäËüЧ¹ûʵÏÖ¸ü¼Ó¾«È·µÄ¿ØÖÆ¡£
Ö»Òª¶ÔÏàÓ¦µÄ´úÂë×öһЩ¼òµ¥µÄÐ޸ģ¬¾Í¿ÉÒԸıäͬһҳÃæµÄ²»Í¬²¿·Ö£¬» ......
CSS·ÖÀ¸²¼¾ÖµÄ·½·¨:¾ø¶Ô¶¨Î»ºÍ¸¡¶¯
³ö´¦£ºÍøÒ³½ÌѧÍø
×÷ÕߣºØýÃû
ÈÕÆÚ£º2009-03-09
¡¡
¡¡ÔÚCSSÖУ¬ÊµÏÖ·ÖÀ¸²¼¾ÖÓÐÁ½ÖÖ·½·¨¡£µÚÒ»ÖÖ·½·¨ÊÇʹÓÃËÄÖÖCSS¶¨Î»Ñ¡Ïabsolute
¡¢static¡¢relativeºÍfixed£©Öеľø¶Ô¶¨Î»£¨absolute
positioning£©£¬Ëü¿ÉÒÔ½«ÎĵµÖеÄij¸öÔªËØ´ÓÆäÔ±¾Î»ÖÃÉÏÒƳý£¬²¢ÖØж¨Î»ÔÚÆÚÍûµÄÈκεصãÖ®ÉÏ¡£µÚ¶þÖÖÔòÊÇʹÓÃCSSÖеĸ¡¶¯£¨float£©
¸ÅÄî¡£
¡¡¡¡¾ø¶Ô¶¨Î»»ò¸¡¶¯¶¼Äܹ»ÓÃÀ´ÊµÏÖ·ÖÀ¸Ð§¹û¡£¶þÕß¿ÉÒÔ¶ÀÁ¢Ê¹Óã¬Ò²¿ÉÒÔ½áºÏÔÚÒ»Æð£¬ÏศÏà³É¡£
¡¡¡¡1¡¢¾ø¶Ô¶¨Î»
¡¡¡¡¾ø¶Ô¶¨Î»µÄÓÅÊÆÔÚÓÚ£¬ÎÒÃÇ¿ÉÒÔË¿ºÁ²»²îµØ¾«È·¿ØÖÆÈκÎÔªËصÄλÖ×ÕâÀïÃæûÓÐʲôÐèÒª²Â²â»òÕßÔËÆøµÄ³É·Ö¡£ÓÉÓÚÓ¦ÓÃÁ˾ø¶Ô¶¨Î»µÄÔªËر»²»ÁôºÛ¼£µØ´Ó³£¹æÎĵµÁ÷ÖÐÍêÈ«ÒƳý£¬ËùÒÔËüÒ²²»»áΪÆäËûÔªËØ´øÀ´ÈκεÄÓ°Ïì¡£
¡¡¡¡ÄÇôÈÃÎÒÃÇÊÔÒ»ÊÔÓþø¶Ô¶¨Î»ÈçºÎʵÏÖÏÂÃæµÄ²¼¾Ö¡£
¡¡¡¡
¡¡¡¡ÕâÊÇÒ»¸öÈýÀ¸µÄ²¼¾Ö£¬²¢ÇÒÊǾÓÖÐÏÔʾµÄ¡£ÆäÖУ¬AÀ¸ÊÇÖ÷ÌåÄÚÈÝÀ¸£¬BÀ¸ºÍCÀ¸¶¼ÊDzà±ßÀ¸¡£Ê×ÏÈ£¬ÎÒÃDz»¿ÉÄÜÖ±½ÓÓþø¶Ô¶¨Î»½«A¡¢B¡¢CÈýÀ¸¶¨Î»µ½¾ÓÖÐ
µÄλÖã¬ÒòΪÿ¸öÈËÏÔʾÆ÷µÄ·Ö±æÂÊÊDz»Í¬µÄ£¬ÔÚ1024X768·Ö±æÂʵÄÏÔʾÆ÷É϶¨Î»µÄ¾ÓÖÐЧ¹û£¬ÔÚ±ðµÄ·Ö±æÂʵÄÏÔʾÆ÷ÉÏ¿´µ½µÄ ......
ÈËÒ»µ©Ï°¹ßÁËijЩ¶«Î÷¾ÍºÜÄÑÈ¥¸Ä£¬ÒÔ¼°¸÷ÖÖ¸÷ÑùµÄÔÒò£¬ÐµÄä¯ÀÀÆ÷Ô½À´Ô½¶à£¬¶øÀϵÄ×ÜÌÔ̲»ÁË¡£Ôö³¤×ÜÊÇ¿ìÓÚÏûÍöµ¼ÖÂÁËä¯ÀÀÆ÷¼æÈÝÊdzÉÁË̸²»ÍêµÄ»°Ì⡣˵µ½ä¯ÀÀÆ÷¼æÈÝ£¬CSS HACK×ÔÈ»¶øÈ»µØ±»ÎÒÃÇÏëÆð¡£½ñÌ죬ÎÒÃÇͨ³£¶¼ÓÐÒ»¸öÍŶӻòÕß½«ÓÐÒ»¸öÍŶӵÄÈËÔÚÒ»¸ö¹«Ë¾ÀïÃæ×öÏàͬµÄÊ£¬ÐèÒªÎÒÃÇÓÐͳһµÄ¹æ·¶À´½øÐÐCoding£¬ÒÔ·½±ãά»¤¡£¶ø½â¾ö¼æÈݵķ½·¨¾ÍÊÇ£¨±ØÐëÊÇ£¬ÒòΪÕâ²Å×îÈÝÒ×ÓÐÎÊÌâµÄ£©ÆäÖÐÒ»¸ö×îÖØÒªµÄ¡¢Òª½â¾öµÄ¹æ·¶Ö®Ò»¡£
ÔÚ½â¾ö¼æÈÝ·½·¨ÉÏ£¬Ï붨³öÒ»¸öͳһµÄ¹æ·¶£¬¸öÈËÈÏΪӦ¸ÃÒÔÏÂÃæ3µãΪ»ù±¾ÔÔò£º
Ȩºâ³É±¾£ºÔÚä¯ÀÀÆ÷±»ÌÔ̺ó£¬ÈçºÎ¿ìËÙÇåÀíµôÎÞÓôúÂë
¿Éά»¤£ºÔÚ×ÊÔ´³É±¾ºÍÍêÃÀ¼äƽºâµÄÏòºó¼æÈÝ
¿É¶Á£ºÊ¡Á¦¡¢Ò×¼Ç
ÕâÀï°Ñ³É±¾·ÅÔÚÁ˵Úһ룬²¢²»ÊÇ˵ÎÒÃDz»Ô¸Òâ×·ÇóÍêÃÀ£¬¶øÖ»ÊÇ£¬Ì«¿ÌÒâ×·ÇóÍêÃÀÓÐʱºò¿ÉÄÜ»á×è°ÎÒÃÇÇ°½ø£»Ôڳɱ¾ºó£¬Ó¦¸ÃÊÇ¿Éά»¤ºÍ¿É¶Á£¬Õâµã¶ÔÓÚÍŶӵĺÏ×÷À´ËµÖÁ¹ØÖØÒª£¬¶ø×îÖÕ½á¹ûÒ²ÊÇΪÁ˼õÉٳɱ¾¡£
ÏÈ°ÑÕâÈý¸öÔÔò´æÆðÀ´£¬À´¿´¿´ÎÒÃÇƽʱ½â¾ö¼æÈݵÄд·¨£¨ºóÃæ»á¸½ÏêϸµÄHack·½·¨ÁÐ±í£©£º
Ò»¡¢CSS Ñ¡ÔñÆ÷ Hack
1
2
3
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device ......