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

CSSÈëÃÅ

       Æð³õµÄHTMLµÄÉè¼ÆÖ»ÊǶ¨ÒåÎĵµÄÚÈÝÓ㬶ø¶ÔÓÚÎĵµ²¼¾ÖÔòÓÉä¯ÀÀÆ÷À´Íê³É¡£ºóÀ´ÓÉÓÚä¯ÀÀÆ÷·þÎñÉ̲»¶ÏµØ½«ÐµĹ淶ÖУ¬Ê¹µÃ´´½¨ÎĵµÄÚHTML±êÇ©Ìí¼Óµ½HTMLÈÝÇåжÀÁ¢ÓÚ±íÏÖ²ãµÄÕ¾µãÔ½À´Ô½¸´ÔÓ¡£ÎªÁ˽â¾öÕâ¸öÎÊÌ⣬ÍòÎ¬ÍøÁªÃË£¨W3C£©£¬¼ç¸ºÆðÁË HTML ±ê×¼»¯µÄʹÃü£¬²¢ÔÚ HTML 4.0 Ö®Íâ´´Ôì³öÑùʽ£¨Style£©¡£Ö÷Á÷ä¯ÀÀÆ÷¶¼Ö§³Ö²ãµþÑùʽ±íCSS£¬ËüÄܹ»Ê¹ÎÒÃÇÓÐÄÜÁ¦¸Ä±äÕ¾µãÖÐËùÓÐÒ³ÃæµÄ²¼¾ÖºÍÍâ¹Û¡£
      ÉÏÃæËµÃ÷ÁËCSS²úÉúµÄÔ­Òò¡£¶ÔÓÚhtmlÓëCSSµÄ×÷ÓÃÎÒµÄÀí½âÊÇhtmlÖ÷ÒªÓÃÓÚ¸æËßä¯ÀÀÆ÷ÏÔʾÄÄЩÄÚÈÝ£¬¶øCSSÔòÖ÷Òª¸æËßä¯ÀÀÆ÷ÕâЩÄÚÈݵIJ¼¾ÖºÍÍâ¹ÛÊÇʲôÑù×ӵġ£CSSÓï·¨²Î¿¼
      CSSµÄºËÐÄÄÚÈÝÓ¦¸Ã¾ÍÊǺÐ×ÓÄ£ÐÍÁË£¨Æä±ß¿òÀàÐÍ£©¡£ÎҸоõhtmlÖеÄÔªËØ±íÏÖÔÚÍøÒ³ÖоÍÊÇÒ»¸ö¾ØÐΣ¬¶øÕâ¾ÍÓ¦¸ÃÊÇÄǸöºÐ×Ó¡£ÎÒÃÇ¿ÉÒÔͨ¹ýCSSÊôÐÔÀ´ÉèÖÃÕâЩºÐ×Ó¸÷¸ö·½Ãæ¡£ÕâЩÊôÐÔÖ÷Òª°üÀ¨ÒÔÏÂÄÚÈÝ£º
      ±³¾°ÊôÐÔ¡¢±ß¿òÊôÐÔ¡¢Îı¾ÊôÐÔ¡¢×ÖÌåÊôÐÔ¡¢Íâ±ß¿òÊôÐÔ£¨margin£©¡¢Äڱ߾àÊôÐÔ£¨padding£©¡¢¶¨Î»ÊôÐÔ£¨position£©¡¢Î±ÀàµÈ(ÕâЩÊôÐԵľßÌåÄÚÈݼ°ÏàÓ¦½éÉÜ£¬¼ûCSS²Î¿¼ÊÖ²á)
       ÍøÒ³µÄ²¼ÖúÍÍâ¹Û¾ÍÊÇͨ¹ýÕâЩÊôÐÔ¶ÔÄÇЩºÐ×ÓÄ£ÐÍ£¨HTMLÖеÄÔªËØ£©½øÐÐÉèÖõĵĽá¹û¡£ÎªÁË´ïµ½²¼ÖÃÍøÒ³µÄÁé»îÐÔ£¬»á¾­³£Áé»îµÄÔËÓÃHTMLµÄdivºÍspanÔªËØºÍClassºÍidÁ½¸öÊôÐÔ¡£
      divºÍspanÓкܴóµÄÏàËÆ´¦£¬¶¼ÊÇΪÁË×éÖ¯ºÍ½á¹¹»¯Îĵµ£¬µ«spanÖ»ÄÜÓÃÓÚ×éÖ¯ºÍ½á¹¹»¯Ò»¸öÔªËØ¿é£¬divÔò¿ÉÓÃÓÚ¶à¸öÔªËØ¿é¡£²¢ÇÒËüÃÇͨ³£ÊÇÒªÓõ½Class»òidÊôÐԵġ£
      ¼òµ¥µÄ˵£¬CSS¾ÍÊÇÔËÓôÓHTML³é³öÀ´µÄÊôÐÔ£¬¶ÔHTMLÎĵµÖеÄÔªËØ(¾ÍÊÇÄÇЩºÐ×Ó)½øÐв¼Öõļ¼Êõ¡£ÔÚCSSÎļþÖпÉÒÔ²»ÊÇÖ±½ÓʹÓÃÔªËØ£¬¿ÉÄÜ»áʹÓñê¼Ç£¨id£©»òÀà±ð£¨Class£©¡£ÀýÈçÎÒÃÇ¿ÉÄÜ»áÔÚCSSÎļþÖÐÖ±½Ó¶ÔbodyÔªËØ½øÐÐÉèÖã¨Óï·¨ body{background-color:red;}£©£¬Ò²¿ÉÄÜ¶ÔÆäÖеÄij¸ö´ÊʹÓÃ<span id="3">ÒªÉèÖõĴÊ</span>À´Ôö¼Ó±ê¼Ç£¬È»ºóÔÚCSSÖÐÀûÓÃ#3{дÃ÷ÒªÉèÖõÄÊôÐÔ¼°ÆäÖµ}¶Ô¸Ã´Ê½øÐÐÉèÖá£
     


Ïà¹ØÎĵµ£º

CSSºÍJS±êÇ©styleÊôÐÔ¶ÔÕÕ±í


ºÐ×Ó±êÇ©ºÍÊôÐÔ¶ÔÕÕ
CSSÓï·¨£¨²»Çø·Ö´óСд£©
JavaScriptÓï·¨£¨Çø·Ö´óСд£©
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......

@importµ÷ÓÃcssºÍlink hrefµ÷ÓÃÓÐÊ²Ã´Çø±ð£¿


2010-01-26
@importµ÷ÓÃcssºÍlink hrefµ÷ÓÃÓÐÊ²Ã´Çø±ð£¿
ÎÄÕ·ÖÀà:Webǰ¶Ë
´ó¼ÒÈ¥·ÖÎöһЩ´óÕ¾µÄcss´úÂëʱ£¬¶¼»á·¢ÏÖµ÷ÓÃcssÓÐÒÔÏÂÁ½ÖÖ·½·¨£º
·½·¨Ò»£º
<style type="text/css">
<!--
@import url("css/main.css");
@import url("css/font.css");
@import url("css/layout.css");
-->
</style ......

css ÒýÈ뷽ʽÓëÑ¡ÔñÆ÷

½ñÌìѧϰÁËcssµÄÒýÈ뷽ʽºÍcssµÄÑ¡ÔñÆ÷
CssÒýÈ뷽ʽ×ܹ²ËÄÖÖ·Ö±ðÊÇ£º
1.<link rel=”realstyle” type=”text/css” href=”css.css”>
rel    ±íÃ÷Á¬½ÓµÄÎļþÓëhtmlÎĵµÖ®¼äµÄ¹ØÏµ
type ÊDZíÃ÷ÎļþÀàÐÍ
href Ö¸ÏòÁ´½ÓµÄcssÎļþ
2.ÔÚhtmlÎĵµµÄhead²¿·ÖÖ±½ÓдÈëc ......

cssµÄdivǶÌ×ÎÊÌâ

ѧÁËcss¼¸Ì죬·¢ÏÖÓиöÎÊÌâ¡£
ÈçͼËùʾ,×îÍâ²ãÓиödiv£¨·ÛÉ«£©£¬ÄÚ²¿ÉÏÖÐÏÂÈý¸ödiv£¬ÖмädivÄÚÓÐÈý¸öˮƽÅÅÁеÄdiv£¨ÂÌÉ«£©¡£
“middle”divµÄ¸ß¶ÈÊǸù¾ÝÄÚ²¿Èý¸öÂÌÉ«div¸ß¶È±ä»¯µÄ¡£Õâ¸öÓа취ʵÏÖÂð£¿
ÎÒÊÔÁËÊÔ£¬Èç¹ûÈý¸öÂÌÉ«divˮƽÅÅÁеϰ£¬middleµÄ¸ß¶È¾Í²»ÄÜ×Ô¶¯ÊÊÓ¦£¬±ØÐëÖÆ¶¨¸ß¶È¡£ÎÒ°Ñ3¸öÂÌÉ«divÔÝÊ ......

³£ÓÃCSSÑùʽ¼Ç¼

margin-bottom:8px;ÉèÖöÔÏóϱ߾àµÄ¸ß¶È
ÄÚÁª¶ÔÏóҪʹÓøÃÊôÐÔ£¬±ØÐëÏÈÉ趨¶ÔÏóµÄheight»òwidthÊôÐÔ£¬»òÕßÉ趨positionÊôÐÔΪabsolute¡£
padding-top:10px;ÓëÉÏÒ»¸ö±êÇ©µÄ¾àÀë
padding-left:10px;Óë×ó±ßµÄ¼ä¾à
¼ìË÷»òÉèÖöÔÏ󶥱ߵIJ¹¶¡±ß¾à¡£
ÄÚÁª¶ÔÏóҪʹÓøÃÊôÐÔ£¬±ØÐëÏÈÉ趨¶ÔÏóµÄheight»òwidthÊôÐÔ£¬»òÕßÉ趨pos ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ