ÉÆÓÃcssËõд¹æÔò
Ò»¡¢ ÉÆÓÃcssËõд¹æÔò
/*×¢ÒâÉÏ¡¢ÓÒ¡¢Ï¡¢×óµÄÊéд˳Ðò*/
1. ¹ØÓڱ߾ࣨ4±ß£©£º
1px 2px 3px 4px (ÉÏ¡¢ÓÒ¡¢Ï¡¢×ó)
1px 2px 3px £¨Ê¡ÂÔµÄ×óµÈÓÚÓÒ£©
1px 2px (Ê¡ÂÔµÄÉϵÈÓÚÏÂ)
1px £¨Ëı߶¼Ïàͬ£©
2. ¼ò»¯ËùÓУº
*/ body{margin:0}------------±íÊ¾ÍøÒ³ÄÚËùÓÐÔªËØµÄmarginΪ0
#menu{ margin:0}------------±íʾmenuºÐ×ÓϵÄËùÓÐÔªËØµÄmarginΪ0
3. Ëõд£¨border£©Ìض¨Ñùʽ£º
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4. ¹ØÓÚÎÄ×ÖµÄËõд¹æÔò£º
Font-style:italic; бÌåÐÎʽ
Font-variant:small-caps/normal; ±äÌåÑùʽ£ºÐ¡ÐÍ´óд×Öĸ/Õý³£
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
Ëõд³É£º
Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
×¢Ò⣺Font-sizeºÍLine-heightÓÃб¸Ü×éºÏÔÚÒ»Æð²»ÄÜ·Ö¿ªÐ´¡£
5. ¹ØÓÚ±³¾°Í¼Æ¬µÄ£º
Background:#FFF url(log.gif) no-repeat fixed top left;
6. ¹ØÓÚÁÐ±í£º
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
Ëõд³É£º
List-style:none inside url(filename.gif)
¶þ¡¢ ÔËÓÃ4ÖÖ·½·¨À´ÒýÈëCSSÑùʽ
1.link
<link rel=¡±stylesheet¡± type=¡±text/css¡± href=¡±a.css¡±>
rel ¹ØÏµ
type Êý¾ÝÀàÐÍ,ÓжàÖÖ
href ·¾¶
²¿·Öä¯ÀÀÆ÷Ö§³ÖºòÑ¡Ñùʽ,¹Ø¼ü×Ö:alternate:
<link rel=¡±stylesheet¡± type=¡±text/css¡± href=¡±a.css¡±>
<link rel=¡±alternate stylesheet¡± type=¡±text/css¡± href=¡±b.css¡±>
<link rel=¡±alternate stylesheet¡± type=¡±text/css¡± href=¡±c.css¡±>
2.ÄÚ²¿Ñùʽ¿é
<style>
<!–
h1{color:red;}
Ïà¹ØÎĵµ£º
µ±DIV+CSSƽµØÆð¾ªÀ×ͻȻ³öÏÖÔÚÍøÒ³Éè¼ÆÐÐÒµµÄʱºò£¬¹Ù·½¡¢Ãñ¼äÎÞ²»ÍƳ籸ÖÁ£¬·Â·ðTableÉè¼ÆµÄʱ´ú¾Í
ÒªÖսᣬÂíÉϾÍÒª²½ÈëDIV+CSSµÄʱ´ú£¬²»¶®µÃDIV+CSSÄã¶¼²»ºÃÒâ˼˵Äã»áÍøÒ³Éè¼Æ£¬²»ÖªDIV+CSSÄã¶¼²»
ºÃÒâ˼˵ÄãÊÇÕ¾³¤£¬ÄãÒª»¹ÊÇÓÃTABLEÀ´Éè¼ÆÕ¾µã£¬ÎÞÊý±ÉÒÄÖ®¹â¾ÍͶÉä¶øÀ´¡£
¡¡¡¡È»¶øDIV+CSSÕæµÄÓÐÕâôÉñÂð?¸ÃÔõà ......
CSS HACK:ä¯ÀÀÆ÷¼æÈݵÄһЩд·¨
ÈËÒ»µ©Ï°¹ßÁËijЩ¶«Î÷¾ÍºÜÄÑÈ¥¸Ä£¬ÒÔ¼°¸÷ÖÖ¸÷ÑùµÄÔÒò£¬ÐµÄä¯ÀÀÆ÷Ô½À´Ô½¶à£¬¶øÀϵÄ×ÜÌÔ̲»ÁË¡£Ôö³¤×ÜÊÇ¿ìÓÚÏûÍöµ¼ÖÂÁËä¯ÀÀÆ÷¼æÈÝÊdzÉÁË̸²»ÍêµÄ»°Ì⡣˵µ½ä¯ÀÀÆ÷¼æÈÝ£¬CSS HACK×ÔÈ»¶øÈ»µØ±»ÎÒÃÇÏëÆð¡£½ñÌ죬ÎÒÃÇͨ³£¶¼ÓÐÒ»¸öÍŶӻòÕß½«ÓÐÒ»¸öÍŶӵÄÈËÔÚÒ»¸ö¹«Ë¾ÀïÃæ×öÏàͬµÄÊ£¬ÐèÒªÎÒÃÇÓ ......
CSS important
.dialog{margin:4px !important;margin:1px;} /* IEÒÔ×îºó³öÏÖµÄΪ׼, Firefox|Opera|SafariÒÔ!importantΪ׼ */
CSS DIV°ë͸Ã÷
filter: alpha(opacity=50); /*IEÖ§³Ö(·¶Î§0-100)*/
opacity: 0.50; /*·ÇIEÖ§³Ö(·¶Î§0-1)*/
......
¶¯»»ÐÐÎÊÌâ,Õý³£×Ö·ûµÄ»»ÐÐÊDZȽϺÏÀíµÄ,¶øÁ¬ÐøµÄÊý×ÖºÍÓ¢ÎÄ×Ö·û³£³£½«ÈÝÆ÷³Å´ó,ͦÈÃÈËÍ·ÌÛ,ÏÂÃæ½éÉܵÄÊÇCSSÈçºÎʵÏÖ»»Ðеķ½·¨
¶ÔÓÚdiv,pµÈ¿é¼¶ÔªËØ
Õý³£ÎÄ×ֵĻ»ÐÐ(ÑÇÖÞÎÄ×ֺͷÇÑÇÖÞÎÄ×Ö)ÔªËØÓµÓÐĬÈϵÄwhite-space:normal,µ±¶¨ÒåµÄ¿í¶ÈÖ®ºó×Ô¶¯»»ÐÐ
html
<
id="wrap">Õý³£ÎÄ×ֵĻ»ÐÐ(ÑÇÖÞÎÄ×ֺͷÇÑÇÖÞÎÄ×Ö) ......
Block element ¿é¼¶ÔªËØ
¹ËÃû˼Òå¾ÍÊÇÒÔ¿éÏÔʾµÄÔªËØ£¬¸ß¶È¿í¶È¶¼ÊÇ¿ÉÒÔÉèÖõġ£±ÈÈçÎÒÃdz£ÓõÄ<div>¡¢<p>¡¢<ul>ĬÈÏ״̬϶¼ÊÇÊôÓÚ¿é¼¶ÔªËØ¡£¿é¼¶ÔªËرȽϰԵÀ£¬Ä¬ÈÏ״̬ÏÂÿ´Î¶¼Õ¼¾ÝÒ»Õû¸öÐУ¬ºóÃæµÄÄÚÈÝÒ²±ØÐëÔÙÐÂÆðÒ»ÐÐÏÔʾ¡£µ±È»·Ç¿é¼¶ÔªËØÒ²¿ÉÒÔͨ¹ýcssµÄdisplay:block;½«Æä¸ü¸Ä³É¿é¼¶ÔªËØ¡£´ËÍâ» ......