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¡£
×æÔªËØ£ºÈÎÒâ°üº¬¸ÃÔªËØµÄÔªËØ¡£ ¸¸ÔªËØ£ºÖ±½Ó°üº¬¸ÃÔªËØµÄ×æÔªËØ¡£ ͬ±²ÔªËØ£ºÓµÓй²Í¬µÄ¸¸ÔªËصÄÔªËØ¡£
×¢£ºÕâЩ¸Å
ÄîΪ×÷Õß ......
Èç¹ûÄã²»×ÜÊÇÓà Windows
É쵀 Internet
Explorer
À´ÉÏÍøµÄ»°£¬Äã¿ÉÄÜ»á×¢Òâµ½£¬Ðí¶àÍøÕ¾ÉϵÄÊÓÆµµã²¥Ö®ÀàµÄ¶àýÌåÄÚÈÝ£¬ÄãÎÞ·¨Ö±½ÓÔÚ Internet Explorer
ÒÔÍâµÄÆäËüä¯ÀÀÆ÷Öйۿ´£¬±ÈÈçÃ÷Ã÷ÒѾ°²×°
Á˲å¼þÈ´ÌáʾȱÉÙ²å¼þ£¬»òÕßʲô¶¼²»Ìáʾ³öÏֿյĿò¿ò£¬»òÕßÏÔ
ʾÁ˲¥·ÅÆ÷²å¼þȴʼÖÕÁ¬²»ÉÏ´ò²»¿ªÖ®ÀàµÄÎÊÌ⣠......
<html>
<body style="margin:0;">
<div>
<table style="width:100%;height:100%" cellpadding='0' cellspacing='0'>
<tr>
<td style="width:120px;background-color:Red">
  ......
1.Çø±ðIEºÍ·ÇIEä¯ÀÀÆ÷
#tip {
background:blue; /*·ÇIE ±³¾°藍É«*/
background:red \9; /*IE6¡¢IE7¡¢IE8±³¾°紅É«*/
}
2.Çø±ðIE6,IE7,IE8,FF
¡¾Çø±ð·ûºÅ¡¿£º¡¸\9¡¹¡¢¡¸*¡¹¡¢¡¸_¡¹
¡¾Ê¾Àý¡¿£º
#tip {
background:blue; /*Firefox ±³¾°±äÀ¶É«*/
background:r ......
±ÈÈçÒª·Ö±æIE6ºÍfirefoxÁ½ÖÖä¯ÀÀÆ÷£¬¿ÉÒÔÕâÑùд£º
¡¡¡¡<style>
¡¡¡¡div{
¡¡¡¡background:green; /* for firefox */
¡¡¡¡*background:red; /* for IE6 */
¡¡¡¡}
¡¡¡¡</style>
¡¡¡¡ÎÒÔÚIE6Öп´µ½ÊǺìÉ«µÄ£¬ÔÚfirefoxÖп´µ½ÊÇÂÌÉ«µÄ¡£
¡¡¡¡½âÊÍһϣº
¡¡¡¡ÉÏÃæµÄcssÔÚfirefoxÖУ¬ËüÊÇÈÏʶ²»Á˺óÃæµÄÄǸö´ ......