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
Ïà¹ØÎĵµ£º
¹ØÓÚCSS¶Ô¸÷¸öä¯ÀÀÆ÷¼æÈÝÒѾÊÇÀÏÉú³£Ì¸µÄÎÊÌâÁË, ÍøÂçÉÏµÄ½Ì³Ì±éµØ¶¼ÊÇ.ÒÔÏÂÄÚÈÝûÓÐÌ«¶àÐÂÓ±, ´¿Êô¸öÈË×ܽá, Ï£ÍûÄܶԳõѧÕßÓÐÒ»¶¨µÄ°ïÖú.
Ò»¡¢CSS HACK
ÒÔÏÂÁ½ÖÖ·½·¨¼¸ºõÄܽâ¾öÏÖ½ñËùÓÐHACK.
1, !important
Ëæ×ÅIE7¶Ô!importantµÄÖ§³Ö, !important ·½·¨ÏÖÔÚÖ»Õë¶ÔIE6µÄHACK.(×¢Òâд·¨.¼ÇµÃ¸ÃÉùÃ÷λÖÃÐèÒªÌáǰ.)
< ......
div+cssä¯ÀÀÆ÷¼æÈÝÎÊÌâ½â¾ö·½·¨
´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû.
CSS¼¼ÇÉ
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß
line- ......
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LeftMenu.ascx.cs" Inherits="LeftMenu" %>
<mce:style type="text/css"><!--
body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}
h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}
p {
font: 11px Arial, ......
±ÈÈçÒª·Ö±æIE6ºÍfirefoxÁ½ÖÖä¯ÀÀÆ÷£¬¿ÉÒÔÕâÑùд£º
¡¡¡¡<style>
¡¡¡¡div{
¡¡¡¡background:green; /* for firefox */
¡¡¡¡*background:red; /* for IE6 */
¡¡¡¡}
¡¡¡¡</style>
¡¡¡¡ÎÒÔÚIE6Öп´µ½ÊǺìÉ«µÄ£¬ÔÚfirefoxÖп´µ½ÊÇÂÌÉ«µÄ¡£
¡¡¡¡½âÊÍһϣº
¡¡¡¡ÉÏÃæµÄcssÔÚfirefoxÖУ¬ËüÊÇÈÏʶ²»Á˺óÃæµÄÄǸö´ ......
2007-11-18 12:41
ÔÚÍøÒ³ÖÆ×÷ÖУ¬ÓÐÐí¶àµÄÊõÓÀýÈ磺CSS¡¢HTML¡¢DHTML¡¢XHTMLµÈµÈ¡£ÔÚÏÂÃæµÄÎÄÕÂÖÐÎÒÃǽ«»áÓõ½Ò»Ð©ÓйØÓÚHTMLµÄ»ù±¾ÖªÊ¶£¬¶øÔÚÄãѧϰÕâÆªÈëÃŽ̳Ì֮ǰ£¬ÇëÈ·¶¨ÄãÒѾ¾ßÓÐÁËÒ»¶¨µÄHTML»ù´¡¡£ÏÂÃæÎÒÃǾͿªÊ¼Ò»²½Ò»²½Ê¹ÓÃDIV+CSS½øÐÐÍøÒ³²¼¾ÖÉè¼Æ°É¡£
ËùÓеÄÉè¼ÆµÚÒ»²½¾ÍÊǹ¹Ë¼£¬¹¹Ë¼ºÃÁË£¬Ò»°ãÀ´Ëµ»¹Ðè ......