yuiѧϰ±Ê¼Ç£¨¶þ£© ʹÓÃcss¹¤¾ß±£³ÖÒ»ÖÂÐÔ
Ëĸöcss¹¤¾ß£ºfonts,grids,reset,base
Ê¹ÔªËØ±ê×¼»¯µÄreset.css
ÒÔÏÂÆÕͨ¶ø³£ÓõÄÔªËØ¶¼½«marginºÍpaddingÖµ±ê×¼»¯µ½0
the document body
div and p
ËùÓÐlist ÔªËØ£ºdl,dt,dd,ul,ol,li
±êÌâ¼¶ÔªËØ£ºh1,h2,h3,h4,h5,h6
preºÍblockquoteÔªËØ
ijЩ±íµ¥ÔªËØ£ºform,fieldset,input,textarea
tableÔªËØ£ºth£¬td
½ÓÏÂÀ´Òª±ê×¼»¯µÄÔªËØÊÇtableÔªËØ£¬½«ÆäborderÉèΪ0£¬Í¼ÏñÔªËØµÄborderÒ²ÉèΪ0.
·ÀÖ¹ÔÚijЩä¯ÀÀÆ÷ÖÐ×ÖÌå»á±äбÌå»ò´ÖÌ壬һÏÂÔªËØ½«font-styleºÍfont-weightÉèΪnormal:
address
caption
cite
code
dfn
em
strong
th
var
½ÓÏÂÀ´µÄ¹æÔòÊǶÔÓÐÐòºÍÎÞÐòµÄhtml listÔªËØ £¬ÉèÖÃlist-styleΪ none¡£½«captionºÍthÔªËØµÄ¶ÔÆë·½Ê½¶¼ÑϸñÉèΪ×ó¶ÔÆë
ËùÓеıêÌâ¼¶ÔªËØµÄfont-sizeÉèΪ100%£¬font-weight:normal£¬ÓÐЧµØ½«ËùÓбêÌâÀàÐÍÉèΪÏàͬµÄ³ß´çºÍ´Öϸ¡£
×îºóÌṩµÄÑùʽ¹æÔòÊÇÕë¶Ô:beforeºÍ:after£¬Ëû½«Î±ÔªËØÇ°ºó²åÈëµÄÄÚÈÝÉèΪ¿Õ¡£
¹ØÓÚ:beforeÎ±ÔªËØ£¬ÔÚÔªËØÄÚÈÝ֮ǰ²åÈëÄÚÈÝ¡£Õâ¸öÎ±ÔªËØÔÊÐí´´×÷ÈËÔ±ÔÚÔªËØÄÚÈÝ×îǰ²åÈëÉú³ÉÄÚÈÝ¡£Ä¬Èϵأ¬Õâ¸öÎ±ÔªËØÊÇÐÐÄÚÔªËØ£¬²»¹ý¿ÉÒÔʹÓÃdisplay¸Ä±äÕâÒ»µã¡£
<style>
div:after{content:'Hello';}
</style>
<div>World</div>
base.css
reset.cssͳһÁ˲»Í¬ä¯ÀÀÆ÷ÖеÄĬÈÏcssÑùʽ£¬base.cssÔÚ´Ë»ù´¡ÉÏÌṩÁ˶Գ£ÓÃÔªËØµÄ»ù±¾ÑùʽÉèÖá£
±êÌâ¼¶
lists
table
Çå³ýÎÄ×ÖÑùʽµÄfonts.css
bodyÉÏ£º
*font-size:smallÒÔ¼°*font:x-small ΪÁËÔÚieÖÐÉèÖÃfont-size£¬¾ÀÕýfont-sizeÔÚcss1±ê×¼ÖеÄÌØµã¡£
tableÉÏ£º
ie hack·½·¨£¬ieÖÐ×ÜÏÔµÃÓÐЩС£¬½«×ÖÌåÉèÖÃΪ108%£¬¶øÆäËûä¯ÀÀÆ÷Ϊ100%¡£¶ÔÓÚA¼¶ä¯ÀÀÆ÷¶¼¼æÈÝ¡£
ʹÓÃgrids.css½øÐв¼¾Ö
Ò»¸öÌØµãÊÇ×Ô¶¯¾ÓÖв¼¾ÖÖеÄÄÚÈÝ¡£ÁíÒ»¸öÌØµãÊǽŲ¿£¬Èç¹ûÄãÏëʹÓÃËü£¬Ëü»á×Ô¶¯Çå³ý²¢ÇÒ¾ÓÓÚÒ³Ãæµ×²¿£¬ÎÞÂÛÄãʹÓúÎÖÖ²¼¾ÖÄ£°å¡£
<!DOCTYPE HTML PUBLIC "-//W#C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Mark-up Example</title>
<link rel="stylesheet" type="text/css" href="../build/reset-fonts-grids/reset-fonts-grids.css" mce_href="build/reset-fonts-grids/reset-fonts-grids
Ïà¹ØÎĵµ£º
¾²Ì¬¶¨Î»£ºposition:static£¨ÎªpositionÊôÐÔµÄĬÈÏÖµ£©¡£
¶¯Ì¬¶¨Î»£ºposition:relative»òposition:absolute»òposition:fixed¡£
×æÔªËØ£ºÈÎÒâ°üº¬¸ÃÔªËØµÄÔªËØ¡£ ¸¸ÔªËØ£ºÖ±½Ó°üº¬¸ÃÔªËØµÄ×æÔªËØ¡£ ͬ±²ÔªËØ£ºÓµÓй²Í¬µÄ¸¸ÔªËصÄÔªËØ¡£
×¢£ºÕâЩ¸Å
ÄîΪ×÷Õß ......
¡ô ÍøÒ³Æ½Ãæ¶àýÌåÅàѵ¡¢ÈÏÖ¤¿¼ÊÔÃâ·Ñ×ÉѯÈÈÏß:400-700-5807 ½øÈëÍøÂç×Éѯƽ̨ ¡ô
ÓÃCSS¸Ä±ä±í¸ñ±ß¿òÑùʽ£¬ºÜʵÓõÄÒ»ÖÖ·½·¨¡£
ÖÆ×÷·½·¨£º
½«ÏÂÃæµÄ´úÂë¸´ÖÆµ½<body>~</body>À´ËΪÒþ²ØÏ±߿ò
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; bo ......
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>±í¸ñÍ·Ðй̶¨£ºÊ¹ÓÃCSSʵÏÖ</title>
<style type="text/css" >
div.DivContainer /* Div */{
overflow: scroll;
border: solid 1px gray; ......
ÓÃCSSÈÃÔªËØ¾ÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇé—ͬÑùµÄºÏ·¨CSS¾ÓÖÐÉèÖÃÔÚ²»Í¬ä¯ÀÀÆ÷ÖеıíÏÖÐÐΪȴ¸÷ÓÐǧÇï¡£ÈÃÎÒÃÇÏÈÀ´¿´Ò»ÏÂCSSÖг£¼ûµÄ¼¸ÖÖÈÃÔªËØË®Æ½¾ÓÖÐÏÔʾµÄ·½·¨¡£
¡¡¡¡1.ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
¡¡¡¡CSSÖÐÊ×Ñ¡µÄÈÃÔªËØË®Æ½¾ÓÖеķ½·¨¾ÍÊÇʹÓÃmarginÊôÐÔ—½«ÔªËصÄmargin-leftºÍmargin-rightÊôÐÔÉèÖÃΪ
aut ......
±ÈÈçÒª·Ö±æIE6ºÍfirefoxÁ½ÖÖä¯ÀÀÆ÷£¬¿ÉÒÔÕâÑùд£º
¡¡¡¡<style>
¡¡¡¡div{
¡¡¡¡background:green; /* for firefox */
¡¡¡¡*background:red; /* for IE6 */
¡¡¡¡}
¡¡¡¡</style>
¡¡¡¡ÎÒÔÚIE6Öп´µ½ÊǺìÉ«µÄ£¬ÔÚfirefoxÖп´µ½ÊÇÂÌÉ«µÄ¡£
¡¡¡¡½âÊÍһϣº
¡¡¡¡ÉÏÃæµÄcssÔÚfirefoxÖУ¬ËüÊÇÈÏʶ²»Á˺óÃæµÄÄǸö´ ......