Ò׽ؽØͼÈí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

ÀúÊýCSSËõдµÄһЩºÃ´¦


Ô­ÎÄÁ´½Ó£ºhttp://www.fendou163.cn/article/20090115/24807.html
¡¡¡¡WebÍøÕ¾¿ÉÓÃÐԵĹؼüÖ¸±êÊÇËٶȣ¬¸üÈ·ÇеØ˵£¬ÊÇÒ³ÃæÄÜÒÔ¶à¿ìµÄËٶȳöÏÖÔÚ·ÃÎÊÕßµÄä¯ÀÀÆ÷´°¿ÚÀï¡£Ó°ÏìËٶȵÄÒòËØÓкܶàÖÖ£¬°üÀ¨Web·þÎñÆ÷µÄËٶȡ¢·ÃÎÊÕßµÄInternetÁ¬½ÓÇé¿ö£¬ÒÔ¼°ä¯ÀÀÆ÷±ØÐëÏÂÔصÄÎļþ´óС¡£¾¡¹ÜÄãÎÞ·¨¿ØÖÆ·þÎñÆ÷ºÍÁ¬½ÓµÄËٶȣ¬µ«ÊÇÄã¿ÉÒÔ¿ØÖƹ¹³ÉÍøÕ¾WebÒ³ÃæµÄÎļþ´óС¡£
¡¡¡¡ÎªÁËÈÃÍøÕ¾Äܹ»¸ü¿ì£¬WebµÄ½¨ÉèÕ߶¼»á°´³£¹æµØѹËõºÍÓÅ»¯ÍøÕ¾ÉϵÄÿһ¸öͼÏñÎļþ£¬Õâ³£³£Ê¹µÃΪÁ˽«ÎļþµÄ´óС¼õÉÙ¼¸¸ö°Ù·Öµã¶øÎþÉüÁËͼÏñµÄÖÊÁ¿¡£ÓÉÓÚCSSÑùʽ±íÊÇ´¿Îı¾Îļþ£¬ºÍͼÏñÏà±ÈÏà¶Ô½ÏС£¬ËùÒÔWeb½¨ÉèÕߺÜÉÙ¿¼ÂDzÉÈ¡´ëÊ©¼õÉÙÆäCSSÑùʽ±íÎļþµÄ´óС¡£µ«ÊÇ£¬Í¨¹ýʹÓÃCSSËõдÒÔ¼°ÆäËûµÄһЩ¼òµ¥¼¼ÇÉ£¬Äã¿ÉÒÔÔںܴó³Ì¶ÈÉϼõÉÙÑùʽ±íµÄ´óС¡£ÔÚÎÒ¶Ô×Ô¼ºÑùʽ±íµÄÒ»´Î·ÇÕýʽµÄÌرð²âÊÔÖУ¬ÎÒ°ÑÎļþµÄ´óС½µµÍÁË´óÔ¼25-50%¡£
¡¡¡¡Ê¹ÓÃCSSµÄËõдÐÔÖÊ
¡¡¡¡CSSµÄËõдÐÔÖÊ(shorthand property)ÊÇһЩרÓõÄÐÔÖÊÃû£¬ÓÃÀ´´úÌæ¶à¸öÏà¹ØÐÔÖʵļ¯ºÏ¡£ÀýÈ磬¼ä϶ÐÔÖÊ(padding property)ÊǶ¥²¿¼ä϶(padding-top)¡¢ÓÒ²à¼ä϶(padding-right)¡¢µ×²¿¼ä϶(padding-bottom)ºÍ×ó²à¼ä϶(padding-left)µÄËõд¡£
¡¡¡¡Ê¹ÓÃËÙдÐÔÖÊÈÃÄãÄܹ»°Ñ¶à¸öÐÔÖÊ/ÊôÐÔ¶Ô(property/attribute pair)ѹËõ½øCSSÑùʽ±íµÄÒ»ÐдúÂëÀï¡£ÀýÈ磬ÏëÒ»ÏëÏÂÃæµÄ´úÂ룺
¡¡¡¡.sample1 {
¡¡¡¡margin-top: 15px;
¡¡¡¡margin-right: 20px;
¡¡¡¡margin-bottom: 12px;
¡¡¡¡margin-left: 24px;
¡¡¡¡padding-top: 5px;
¡¡¡¡padding-right: 10px;
¡¡¡¡padding-bottom: 4px;
¡¡¡¡padding-left: 8px;
¡¡¡¡border-top-width: thin;
¡¡¡¡border-top-style: solid;
¡¡¡¡border-top-color: #000000;
¡¡¡¡}
¡¡¡¡½«ËüÓÃһЩËõдÐÔÖÊÀ´Ìæ´ú¾ÍÄܹ»°Ñ´úÂë¼õÉÙΪÏÂÃæÕâÑù£¬Á½ÕßµÄʵ¼ÊЧ¹ûÊÇÍêÈ«Ò»ÑùµÄ£º
¡¡¡¡.sample1 {
¡¡¡¡margin: 15px 20px 12px 24px;
¡¡¡¡padding: 5px 10px 4px 8px;
¡¡¡¡border-top: thin solid #000000;
¡¡¡¡}
¡¡¡¡Òª×¢Ò⣬ËõдÐÔÖÊ»¹Óжà¸öÊôÐÔ£¬Ã¿Ò»¸ö(ÊôÐÔ)¶¼¶ÔÓ¦Ò»¸ö±»×éºÏ½øÈëËõдÐÔÖʵij£¹æÐÔÖÊ¡£ÊôÐÔÓɿհ׸ô¿ª¡£
¡¡¡¡µ±ÊôÐÔÊÇÀàËƵÄÖµµÄʱºò£¬ÀýÈçÓÃÓڱ߿ò¿Õ°×ÐÔÖÊ(margin property)µÄÏßÐÔ²âÁ¿µÄʱºò£¬½ÓÔÚËõдÐÔÖÊÖ®ºóµÄÊôÐÔµÄ˳ÐòºÜÖØÒª¡£ÊôÐԵĴÎÐòÊÇ´Ó¶¥²¿(¶¥²¿µÄ±ß¿ò¿Õ°×)¿ªÊ¼£¬È»ºóΧÈƸñ×Ó(box)°´Ë³Ê±Õë´ÎÐò¼ÌÐø¡£
¡¡¡¡Èç¹ûËõдÐÔÖʵÄËùÓÐÊôÐÔ¶¼ÊÇÏàͬµÄ£¬ÄÇôÄã¿ÉÒÔ¼òµ¥µØÁгöµ¥¸öÊôÐÔ£¬È


Ïà¹ØÎĵµ£º

cssÂ˾µ

filter£ºfiltername(parameters)
filterÊÇÂ˾µÊôÐÔÑ¡Ôñ·û;filternameÊÇÂ˾µÊôÐÔÃû
alpha͸Ã÷¶È: opacity finishopacity style startX startY finishX finishY
blurÄ£ºý:add direction strength
chromaÖ¸¶¨ÑÕɫ͸Ã÷:color
dropshadowͶÉäÒõÓ°:color offx offy positive
fliphˮƽ·­×ª
flipv´¹Ö±·­×ª
glow¶ÔÏóµÄÍâ±ß ......

IEºÍFireFoxl¶ÔCSSµÄ²»Í¬½âÎö

dz̸IEÓëFirefox¶ÔCSSµÄ²»Í¬½âÎö——°²»ÕÓ­¿ÍËÉ
Æäʵ£¬ÒÔÇ°´ÓÀ´Ã»ÓнӴ¥¹ýCSSÏà¹ØµÄÄÚÈÝ£¬¶¼ÊÇÔÚ×öÒµÎñµÄ±à³Ì£¬´ÓÀ´Ã»Ïë¹ýǰ̨ҳÃæµÄÉè¼ÆÒ²ÄÜÈç´Ë¸´ÔÓ¡£Õâ´ÎÏîÄ¿µÄ¿ª¹ý¹ý³ÌÖУ¬×÷ΪCSS²ËÄñµÄÎÒÒ²½Ó´¥µ½CSSµÄÏà¹ØÉè¼Æ¡£Ëù³öÏֵĵͼ¶ÎÊÌâºÍÀ˷Ѻܶàʱ¼äµÄ×´¿öÒ²²ã³ö²»ÇËùÒÔͨ¹ý¸÷·½ËÑË÷ºÍ×Ô¼ºµÄʵ¼ÊѧϰÖÐ×ܽ᳠......

»ù±¾CSSÑ¡ÔñÆ÷,¸´ºÏÑ¡ÔñÆ÷,ºó´úÑ¡ÔñÆ÷

»ù±¾CSSÑ¡ÔñÆ÷Óбê¼ÇÑ¡ÔñÆ÷¡¢Àà±ðÑ¡ÔñÆ÷¡¢IDÑ¡ÔñÆ÷3ÖÖ
1¡£±ê¼ÇÑ¡ÔñÆ÷
    Ã¿Ò»ÖÖHTML±ê¼ÇµÄÃû³Æ¶¼¿ÉÒÔ×÷ΪÏàÓ¦µÄ±ê¼ÇÑ¡ÔñÆ÷µÄÃû³Æ£¬Èçh1,p,µÈµÈ
2¡£Àà±ðÑ¡ÔñÆ÷
    Àà±ðÑ¡ÔñÆ÷µÄÃû³Æ¿ÉÒÔÓÉÓû§×Ô¶¨Òå
   ¸ñʽÈçÏ£º.class{color:green;font-size:20px;}
3¡£IDÑ¡Ôñ ......

cssÖÐheight:100%²»Æð×÷ÓõĽâ¾ö·½·¨

ÔÚÍøÒ³Éè¼ÆÖУ¬tableÓÃheight:100%ÊÇ¿ÉÒÔÕûÆÁµÄ£¬µ«ÐèÒªÔÚÍøҳͷ²¿Ôö¼Ó:
<!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">
ºó¾ÍºÍû ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ