CSS常用和实用的技巧.docVIP

下面是CSS最常用和实用的技巧。 1.重置浏览器的字体大小 重置浏览器的默认值 ，代码如下： Java代码 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, ?? blockquote,th,td?{margin:0;?padding:0;?} ?? table?{?border-collapse:collapse;?border-spacing:0;?} ?? fieldset,img?{?border:0;?} ?? address,caption,cite,code,dfn,em,strong,th,var?{?font-style:normal;?font-weight:normal;?} ?? ol,ul?{?list-style:none;?} ?? caption,th?{?text-align:left;?} ?? h1,h2,h3,h4,h5,h6?{?font-size:100%;?font-weight:normal;?} ?? q:before,q:after?{?content:”;?} ?? abbr,acronym?{?border:0;?}?? body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:”; } abbr,acronym { border:0; } 其次，我们重设浏览器字体的大小为10像素，使用如下： Java代码 html?{font-size:?62.5%;}?? html {font-size: 62.5%;} 这个大小基本合适，然后您可以根据自己的需要调整大小，如 标题1为120像素: Java代码 h1?{font-size:?2em;}?? h1 {font-size: 2em;} 2.设置水平居中 大多数的网站目前都是固定宽度的。CSS代码如下： Java代码 div#container?{margin:?0?auto;}?? div#container {margin: 0 auto;} 3.控制位置：绝对位置，相对位置 假如有两个div Java代码 div?id=parent ?? div?id=son/div ?? /div?? div id=parent div id=son/div /div div有left和top属性,是用来定位的. 如果内层的div的position属性是absolute.那他就是相对于文档的左上角的位置.. 如果内层的div(id为son的那个)position属性为relative,那它的left和top值就是相对于外层的div的左上角的距离. 4.将重要元素放置在屏幕中央 如果你希望将您想要的东西放在最中央，可以使用以下CSS： Java代码 div.popup?{?height:400px;?width:500px;?position:?absolute;?top:?50%;?left:?50%;} ?? div.popup?{?margin-top:?-200px;?margin-left:?-250px;}?? div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;} div.popup { margin-top: -200px; margin-left: -250px;} 您必须明确的指定宽度和高度，再把top和left属性设为他们的一半，这样就可以是这个部分回到屏幕的中心。 5.可以重复利用的规则 Java代码 .left?{flo