CSS±Ê¼ÇÖ®¼òд
2009-10-20 13:30:21
¼òдCSSÒ»Ö±±»ÎÒÍü¼Ç£¬Ã»°ì·¨¾ÍËÑÁ˵ã×ÊÁÏ£¬¼Ç¼ÈçÏ£º
font
¼òд£º
font:italic small-caps bold 12px/1.5em arial,verdana;
µÈЧÓÚ£º
font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;
˳Ðò£ºfont-style | font-variant | font-weight | font-size | line-height | font-family
£¨×¢£º¼òдʱ£¬font-sizeºÍline-heightÖ»ÄÜͨ¹ýб¸Ü/×é³ÉÒ»¸öÖµ£¬²»ÄÜ·Ö¿ªÐ´¡££©
background
¼òд£º
background:#fff url(bg.gif) no-repeat fixed left top;
µÈЧÓÚ£º
background-color:#fff;background-image:url(bg.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:left top;
˳Ðò£ºbackground-color | background-image | background-repeat | background-attachment | background-position
margin & padding
¼òд£º
margin:1px 0 2em -20px;
µÈЧÓÚ£º
margin-top:1px;margin-right:0;margin-bottom:2em;margin-left:-20px;
˳Ðò£ºmargin-top | margin-right | margin-bottom | margin-left
paddingµÄ¼òдºÍmarginÍêȫһÑù¡£
border
¼òд£º
border:1px solid #000;
µÈЧÓÚ£º
border-width:1px;border-style:solid;border-color:#000;
˳Ðò£ºborder-width | border-style | border-color
ÕâÈý¾äÒ²ÊǼòд£¬µÈÓÚÊǰÑËıߵÄÑùʽºÏ¶øÎªÒ»ÁË¡££¨¹ØÓÚËıߵÄÎÊÌ⣬ÏÂÎÄÓÐÏêϸ˵Ã÷£©
border-top / border-right / border-bottom / border-left
¼òд£º
border-top:1px solid #000;
µÈЧÓÚ£º
border-top-width:1px;border-top-style:solid;border-top-color:#000;
£¨ºÍborderÒ»Ñù£©
list-style
¼òд£º
list-style:square outside url(bullet.gif);
µÈЧÓÚ£º
list-style-type:square;list-style-position:outside;list-style-image:url(bullet.gif);
˳Ðò£ºlist-style-type | list-style-position | list-style-image
¹ØÓÚËıß
ÓкܶàÑùʽ¶¼Éæ¼°µ½ÁËËıߵÄÎÊÌ⣬ÕâÀïͳһ˵Ã÷¡£
Ëıߵļòдһ°ãÈçÏ£º
padding:1px 2px 3px 4px;
µÈЧÓÚ£º
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
˳Ðò£ºtop | right | bottom | left
²»ÂÛÊDZ߿ò¿í¶È£¬»¹ÊDZ߿òÑÕÉ«¡¢±ß¾àµÈ£¬Ö»ÒªcssÑùÊ½Éæ¼°Ëıߣ¬Ë³Ðòͨͨ¶¼ÊÇ“ÉÏÓÒÏÂ×󔣨˳ʱÕë·½Ïò£©¡£
Èç¹ûËıߵÄֵʡÂÔÒ
Ïà¹ØÎĵµ£º
div¾ÓÖеÄÉèÖøÃÈçºÎ±àдcss£¿
ÎÒÃÇÔÚ´«Í³µÄ±í¸ñ²¼¾ÖÖУ¬Ö»ÒªÉèÖñí¸ñµÄ¾ÓÖÐÊôÐÔ¾ÍʵÏÖÁ˾ÓÖеĿéÔªËØ¡£Ó¦ÓÃdiv cssÍøÕ¾²¼¾Ö£¬divµÄ¾ÓÖиÃÈçºÎ±àдcssÀ´¿ØÖÆËüÄØ£¿
¡¡¡¡Ö÷ÒªµÄÑùʽ¶¨ÒåÈçÏ£º
¡¡¡¡body {text-align: center;}
¡¡¡¡#center { margin-right: auto; margin-left: auto; }
¡¡¡¡Ê×ÏÈÔÚ¸¸¼¶ÔªËض¨Òåtext-a ......
ý½éÀàÐÍ(Media Types)ÔÊÐíÄ㶨ÒåÒÔºÎÖÖý½éÀ´Ìá½»Îĵµ£¬Îĵµ¿ÉÒÔ±»ÏÔʾÔÚÏÔʾÆ÷¡¢´òÓ¡»ú»òÕßÌý¾õä¯ÀÀÆ÷µÈµÈ¡£
ʵÀý
ÏÂÃæÕâ¸öÀý×ÓÖеÄÑùʽ¸æÖªä¯ÀÀÆ÷ÔÚÏÔʾÆ÷ÉÏÏÔʾ 14 ÏñËØµÄ Verdana ×ÖÌå¡£µ«ÊǼÙÈçÒ³ÃæÐèÒª±»´òÓ¡£¬½«Ê¹Óà 10 ¸öÏñËØµÄ Times ×ÖÌå¡£×¢Ò⣺font-weight ±»ÉèÖÃΪ´ÖÌ壬²»ÂÛÏÔʾÆ÷»¹ÊÇֽý½é£º
<%@ pa ......
ºÜ¶àµÄWeb
designerÔÚ¸Õ½Ó´¥W3C±ê×¼µÄʱºò£¬¶¼Óöµ½¹ý¸ß¶È×ÔÊÊÓ¦µÄÎÊÌâ¡£ÒòΪdivµÈ¶ÔÏóµÄheight:100%;²¢²»Äܹ»Ö±½Ó²úÉúʵ¼ÊЧ¹û£¬ÓÚÊÇ¿ªÊ¼
»³ÒÉä¯ÀÀÆ÷ÊÇ·ñÖ§³Öheight:100%;µÄ±àд·½·¨£¿µ±È»²»ÊÇ£¬×îÃ÷ÏÔµÄÀý×Ó¾ÍÊÇtable
height="100"ÊÇûÓÐÈκÎÎÊÌâµÄ¡£ÕâÊǺÜÁîÈË·³ÄÕµÄÎÊÌâ¡£ÎÒä¯ÀÀÁ˺ܶàÍøÕ¾£¬°üÀ¨www.w3cn.o ......
ul ol li dl dt dd¶¼ÊÇDIV+CSS×öÍøÒ³³¤ÓõĶ«Î÷,Ï൱ÓÚÒ»¿ÃÊ÷µÄÊ÷¼¼,ÏÂÃæ¾ÍÁ˽âÒ»ÏÂÕâЩ¶«Î÷µÄÈ«ÌåÓ÷¨,±¾ÈËÓÃdd,dt,dlÓõúÜÉÙ,¶®µÃ½áºÏʹÓöÔ×ö¼Ü¹¹ÊǺÜÓкô¦µÄŶ!
DIV
CSSÍøÒ³²¼¾ÖÖг£ÓõÄÁбíÔªËØul ol li dl dt ddÊÍÒ壬¿é¼¶ÔªËØdiv¾¡Á¿ÉÙÓ㬺ÍtableÒ»Ñù£¬Ç¶Ì×Ô½ÉÙÔ½ºÃ
ol
ÓÐÐòÁÐ±í¡£
<ol>
<li> ......