ÍøÂçѧԺ w3popÉçÇø ÍøÂç×ÊÔ´ ITÐÂÎÅ

w3pop.com :: ÍøÂçѧԺ :: WEBÉè¼Æ×ÛºÏ :: XhtmlµÚ7Ì죺cssÈëÃÅ֪ʶ

»áÔ±µÇ½

ÕʺÅ

ÃÜÂë

»Ø´ð

¼ÇסÃÜÂë

Íü¼ÇÃÜÂë? ×¢²á

WEBÉè¼Æ×ÛºÏ
ÏÔʾ¸öÐÔ»¯µÄÊó±ê..
¶à×˶à²ÊµÄÍøÒ³Á´..
XhtmlµÚ12Ì죺УÑ..
XhtmlµÚ11Ìì:ÈçºÎ..
XhtmlµÚ10Ìì:div×..
XhtmlµÚ9Ìì:µÚÒ»¸..
XhtmlµÚ8Ì죺CSS²..
XhtmlµÚ7Ì죺cssÈ..
XHTMLµÚ6Ìì:XHTML..
XHTMLµÚ5Ìì:headÇ..
XHTMLµÚ4Ìì:µ÷ÓÃÑ..
XHTMLµÚ3Ìì:¶¨ÒåÓ..
XHTMLµÚ2Ìì:ʲôÊ..
XHTMLµÚ1Ìì:Ñ¡ÔñÊ..
XSLÖÐʵÏÖÑ­»·
Ó¢ÎÄ×Ö·û×Ô¶¯»»ÐÐ..
½Ý×ãÏȵÇѧÓÃCSS
CSS hackä¯ÀÀÆ÷¼æ..
CSS»¬¶¯ÃŽ̳Ì
Ϊ²»Í¬µÄä¯ÀÀÆ÷ÔØ..

XhtmlµÚ7Ì죺cssÈëÃÅ֪ʶ


×÷Õß:chinahtml.com ·­Òë/ÕûÀí:w3pop.com ·¢²¼:2007-06-08 ä¯ÀÀ:5367 :: ::

cssÊÇcascading style sheets(²ãµþÑùʽ±í)µÄËõд¡£ÊÇÒ»ÖÖ¶ÔwebÎĵµÌí¼ÓÑùʽµÄ¼òµ¥»úÖÆ£¬ÊôÓÚ±íÏÖ²ãµÄ²¼¾ÖÓïÑÔ¡£

1.»ù±¾Óï·¨¹æ·¶

·ÖÎöÒ»¸öµäÐÍcssµÄÓï¾ä£º

p {color:#ff0000;background:#ffffff}

  • ÆäÖÐ"p"ÎÒÃdzÆÎª"Ñ¡ÔñÆ÷"(selectors)£¬Ö¸Ã÷ÎÒÃÇÒª¸ø"p"¶¨ÒåÑùʽ£»
  • ÑùʽÉùÃ÷дÔÚÒ»¶Ô´óÀ¨ºÅ"{}"ÖУ»
  • colorºÍbackground³ÆÎª"ÊôÐÔ"(property)£¬²»Í¬ÊôÐÔÖ®¼äÓ÷ֺÅ";"·Ö¸ô£»
  • "#ff0000"ºÍ"#ffffff"ÊÇÊôÐÔµÄÖµ(value)¡£

2.ÑÕɫֵ

ÑÕɫֵ¿ÉÒÔÓÃrgbֵд£¬ÀýÈ磺color : rgb(255,0,0)£¬Ò²¿ÉÒÔÓÃÊ®Áù½øÖÆÐ´£¬¾ÍÏóÉÏÃæÀý×Ócolor:#ff0000¡£Èç¹ûÊ®Áù½øÖÆÖµÊdzɶÔÖØ¸´µÄ¿ÉÒÔ¼òд£¬Ð§¹ûÒ»Ñù¡£ÀýÈç:#ff0000¿ÉÒÔд³É#f00¡£µ«Èç¹û²»Öظ´¾Í²»¿ÉÒÔ¼òд£¬ÀýÈç#fc1a1b±ØÐëдÂúÁùλ¡£

3.¶¨Òå×ÖÌå

web±ê×¼ÍÆ¼öÈçÏÂ×ÖÌ嶨Òå·½·¨£º

body { font-family : "lucida grande", verdana, lucida, arial, helvetica, ËÎÌå,sans-serif; }

  • ×ÖÌå°´ÕÕËùÁгöµÄ˳ÐòÑ¡Óá£Èç¹ûÓû§µÄ¼ÆËã»úº¬ÓÐlucida grande×ÖÌ壬Îĵµ½«±»Ö¸¶¨Îªlucida grande¡£Ã»Óеϰ£¬¾Í±»Ö¸¶¨Îªverdana×ÖÌ壬Èç¹ûҲûÓÐverdana£¬¾ÍÖ¸¶¨Îªlucida×ÖÌ壬ÒÀ´ËÀàÍÆ£¬£»
  • lucida grande×ÖÌåÊʺÏmac os x£»
  • verdana×ÖÌåÊʺÏËùÓеÄwindowsϵͳ£»
  • lucidaÊʺÏunixÓû§
  • "ËÎÌå"ÊʺÏÖÐÎļòÌåÓû§;
  • Èç¹ûËùÁгöµÄ×ÖÌå¶¼²»ÄÜÓã¬ÔòĬÈϵÄsans-serif×ÖÌåÄܱ£Ö¤µ÷ÓÃ;

4.ȺѡÔñÆ÷

µ±¼¸¸öÔªËØÑùʽÊôÐÔÒ»Ñùʱ£¬¿ÉÒÔ¹²Í¬µ÷ÓÃÒ»¸öÉùÃ÷£¬ÔªËØÖ®¼äÓöººÅ·Ö¸ô£¬td, li { font-size : 12px ; }

5.ÅÉÉúÑ¡ÔñÆ÷

¿ÉÒÔʹÓÃÅÉÉúÑ¡ÔñÆ÷¸øÒ»¸öÔªËØÀïµÄ×ÓÔªËØ¶¨ÒåÑùʽ£¬ÀýÈçÕâÑù£º

li strong { font-style : italic; font-weight : normal£»}

¾ÍÊǸøliÏÂÃæµÄ×ÓÔªËØstrong¶¨ÒåÒ»¸öбÌå²»¼Ó´ÖµÄÑùʽ¡£

6.idÑ¡ÔñÆ÷

ÓÃcss²¼¾ÖÖ÷ÒªÓòã"div"À´ÊµÏÖ£¬¶ødivµÄÑùʽͨ¹ý"idÑ¡ÔñÆ÷"À´¶¨Òå¡£ÀýÈçÎÒÃÇÊ×Ïȶ¨ÒåÒ»¸ö²ã

<div id="menubar"></div>

È»ºóÔÚÑùʽ±íÀïÕâÑù¶¨Ò壺

#menubar {margin: 0px;background: #fefefe;color: #666;}

ÆäÖÐ"menubar"ÊÇÄã×Ô¼º¶¨ÒåµÄidÃû³Æ¡£×¢ÒâÔÚÇ°Ãæ¼Ó"#"ºÅ¡£

Õâ¸ö·½·¨Ö÷ÒªÓÃÀ´¶¨Òå²ãºÍÄÇЩ±È½Ï¸´ÔÓ£¬Óжà¸öÅÉÉúµÄÔªËØ¡£

7.Àà±ðÑ¡ÔñÆ÷

ÔÚcssÀïÓÃÒ»¸öµã¿ªÍ·±íʾÀà±ðÑ¡ÔñÆ÷¶¨Ò壬ÀýÈ磺

.14px {color : #f60 ;font-size:14px ;}

ÔÚÒ³ÃæÖУ¬ÓÃclass="Àà±ðÃû"µÄ·½·¨µ÷Óãº

<span class="14px">14px´óСµÄ×ÖÌå</span>

Õâ¸ö·½·¨±È½Ï¼òµ¥Áé»î£¬¿ÉÒÔËæÊ±¸ù¾ÝÒ³ÃæÐèҪн¨ºÍɾ³ý¡£

8.¶¨ÒåÁ´½ÓµÄÑùʽ

cssÖÐÓÃËĸöαÀàÀ´¶¨ÒåÁ´½ÓµÄÑùʽ£¬·Ö±ðÊÇ£ºa:link¡¢a:visited¡¢a:hoverºÍa : active£¬ÀýÈ磺

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #f90 ;}

ÒÔÉÏÓï¾ä·Ö±ð¶¨ÒåÁË"Á´½Ó¡¢ÒÑ·ÃÎʹýµÄÁ´½Ó¡¢Êó±êÍ£ÔÚÉÏ·½Ê±¡¢µãÏÂÊó±êʱ"µÄÑùʽ¡£×¢Ò⣬±ØÐë°´ÒÔÉÏ˳Ðòд£¬·ñÔòÏÔʾ¿ÉÄܺÍÄãÔ¤ÏëµÄ²»Ò»Ñù¡£¼ÇסËüÃǵÄ˳ÐòÊÇ“lvha”¡£

ºÇºÇ£¬¿´ÁËÕâô¶à£¬ÓеãÍ·Ôΰɣ¬Êµ¼ÊÉÏcssµÄÓï·¨¹æ·¶»¹Óкܶ࣬ÕâÀïÁеÄÖ»ÊÇһЩ³£Óõģ¬±Ï¾¹ÎÒÃÇÊÇÑ­Ðò½¥½ø£¬²»¿ÉÄÜÒ»¿Ú³Ô³ÉÅÖ×Ó:)

ÆÀÂÛ (0) All