Welcome, Old Sport!

实用CSS总结(2012)

by ilikecss ON 2013/01/09 4189

实用CSS总结(2012)2012里面分享了许多CSS方面的小贴士,这一切都是为了使您的网站具有广泛的浏览器兼容性,网站浏览的更顺利。当然如果你想更有效的制作网页那还是需要不断练习,熟能生巧。我把这一年里一些CSS小贴士做了总结在这里回顾一下。

Reset CSS

我开始制作时最重视这一步骤,好的Reset能帮你优化CSS和节省不少时间。

html,body,h1,h2,h3,h4,h5,h6,pre,div,ul,ol,li,dl,dt,dd,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

浏览器选择条件

不同浏览器调用指定的CSS文件。

<!--[if IE]>
  	<link href="explorer.css" rel="stylesheet" type="text/css" />
<![endif]-->

你也可以指定浏览器版本(if IE6)

一些针对浏览器兼容的hacks

.hack{
color:#000000; /* All browsers */
*color:#FFFFFF; /* IE */
_color:#DDDDDD; /* IE6 */
.color:#EEEEEE; /* IE7 */
}
@media all and (min-width: 0px){
.name {XXXXXX} /*Opera*/
}
html:lang(en)>body .name {XXXXXX} /*Safari*/
body:nth-of-type(1) div {
   width: 500px;
} /*Google Chrome*/

强制清除浮动

.clear {
display: block;
clear: both;
height: 0;
line-height: 0px;
font-size: 1px;
}
/*clearfix*/
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-table;
min-height: 1%;
}
/*Hides from MacIE \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/*Hides from MacIE */

消失了但为什么还在?隐藏一些HTML可能你会使用display:none;但它会导致元素消失/不起作用,使用下面这个参数可以使元素被隐藏但实际位置还保留着。

.hide {visibility: hidden;}

如果IE6让你非常头疼,那告诉你一段代码可以让它消停。插入后你再用IE6打开试试?

<style>*{position:relative}</style><table><input></table>
2条评论
  1. #1

    sywin说道:

    great

  2. #2

    ifonder说道:

    很实用的 wordpress code snippets~~ :evil:




TOP