我的CSS框架——base.css

今天发下我自己的css框架——base.css，作用是重设浏览器默认样式，当然也有人叫做reset.css

复制代码
  1 @charset "utf-8";
  2 /* 
  3     @名称: base
  4     @功能: 重设浏览器默认样式
  5 */
  6 /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
  7 html {
  8     color:black;
  9     background:white;
 10 }
 11 /* 内外边距通常让各个浏览器样式的表现位置不同 */
 12 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
 13     margin:0;
 14     padding:0;
 15 }
 16 /* 要注意表单元素并不继承父级 font 的问题 */
 17 body,button,input,select,textarea {
 18     font:12px/120% SimSun,arial,sans-serif;
 19 }
 20 input,select,textarea {
 21     font-size:100%;
 22 }
 23 /* 去掉各Table  cell 的边距并让其边重合 */
 24 table {
 25     border-collapse:collapse;
 26     border-spacing:0;
 27 }
 28 /* IE bug fixed: th 不继承 text-align*/
 29 th {
 30     text-align:inherit;
 31 }
 32 /* 去除默认边框 */
 33 fieldset,img {
 34     border:0;
 35 }
 36 /* ie6 7 8(q) bug 显示为行内表现 */
 37 iframe {
 38     display:block;
 39 }
 40 /* 去掉 firefox 下此元素的边框 */
 41 abbr,acronym {
 42     border:0;
 43     font-variant:normal;
 44 }
 45 /* 一致的 del 样式 */
 46 del {
 47     text-decoration:line-through;
 48 }
 49 address,caption,cite,code,dfn,em,th,var {
 50     font-style:normal;
 51     font-weight:500;
 52 }
 53 /* 去掉列表前的标识, li 会继承 */
 54 ol,ul {
 55     list-style:none;
 56 }
 57 /* 对齐是排版最重要的因素, 别让什么都居中 */
 58 caption,th {
 59     text-align:left;
 60 }
 61 /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
 62 h1,h2,h3,h4,h5,h6 {
 63     font-size:100%;
 64     font-weight:500;
 65 }
 66 q:before,q:after {
 67     content:'';
 68 }
 69 /* 统一上标和下标 */
 70 sub, sup {
 71     font-size:75%;
 72     line-height:0;
 73     position:relative;
 74     vertical-align:baseline;
 75 }
 76 sup {
 77     top:-0.5em;
 78 }
 79 sub {
 80     bottom:-0.25em;
 81 }
 82 /* 让链接在 hover 状态下显示下划线 */
 83 a:hover {
 84     text-decoration:underline;
 85 }
 86 /* 默认不显示下划线，保持页面简洁 */
 87 ins,a {
 88     text-decoration:none;
 89 }
 90 /* 清除浮动 */
 91 .clearfix:before,.clearfix:after {
 92     content:"";
 93     display:table;
 94 }
 95 .clearfix:after {
 96     clear:both;
 97     overflow:hidden;
 98 }
 99 .clearfix {
100     zoom:1; /* for IE6 IE7 */
101 }
102 .clear{
103     clear:both;
104     display:block;
105     overflow:hidden;
106     height:0;
107     line-height:0;
108     font-size:0;
109 }
110 /* 设置显示和隐藏, 通常用来与 JS 配合 */
111 .hide {
112     display:none !important;
113     visibility:hidden;
114 }
115 .block {
116     display:block !important;
117 }
118 /* 设置内联, 减少浮动带来的bug */
119 .fl {
120     float:left;
121     display:inline;
122 }
123 .fr {
124     float:right;
125     display:inline;
126 }
posted @ 2012-11-06 13:13  hphong  阅读(284)  评论(0)    收藏  举报