搜索: 标题

背景:
阅读详情

初学CSS必读:CSS样式表初始化的方法和不可忽视的必要性

日期:2012年11月26日 10:58 来源:艾维网络科技中心 作者:佚名

 

昨天在群里面见到有人问这样一个问题,CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。

      最简单的初始化方法就是: * {padding: 0; margin: 0;} 。 我以前也经常这样写,当然,不止我一个,有很多人也是这样写的。这确实很简单,但有人就会感到疑问:* 号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。
 

      下面我贴出一段CSS初始化的代码,当然,这并不是最好的写法,大家可以根据自己的习惯和喜好自行删减或增加!也欢迎大家提出更好的建议。

@CHARSET "GBK";/* 字符编码设置 */

/* 清除内外边距 */

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */

dl, dt, dd, ul, ol, li, /* list elements 列表元素 */

pre, /* text formatting elements 文本格式元素 */

fieldset, lengend, button, input, textarea, /* form elements 表单元素 */

th, td { /* table elements 表格元素 */

    margin: 0;

    padding: 0;

}

 

/* 设置默认字体 */

body,

button, input, select, textarea { /* for ie */

    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/

    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */

}

 

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }

h2 { font-size: 16px; }

h3 { font-size: 14px; }

h4, h5, h6 { font-size: 100%; }

 

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */

code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */

small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */

 

/* 重置列表元素 */

ul, ol { list-style: none; }

 

/* 重置文本格式元素 */

a { text-decoration: none; }

a:hover { text-decoration: underline; }

 

abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */

      border-bottom: 1px dotted;

      cursor: help;

}

 

q:before, q:after { content: ''; }

 

/* 重置表单元素 */

legend { color: #000; } /* for ie6 */

fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */

/* 注:optgroup 无法扶正 */

button, input, select, textarea {

    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */

}

 

/* 重置表格元素 */

table {

      border-collapse: collapse;

      border-spacing: 0;

}

 

/* 重置 hr */

hr {

    border: none;

    height: 1px;

}

 

html { overflow-y: scroll; }

/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */

 

相关资料:发份完整的CSS初始化代码

body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;}
ol, ul ,li{list-style: none;}
img {border: 0;}
body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;}
.clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;}
.clear{clear:both;height:1px; margin-top:-1px; width:100%;}

.dis{display:block;}
.undis{display:none;}


 


本文地址:https://www.24fa8.com/n382c34.aspx,转载请注明24FA出处。
| zhushanji |
评论: 初学CSS必读:CSS样式表初始化的方法和不可忽视的必要性 - 网民评论 全部评论 0
姓名: 字数
点评:
评论声明:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规。
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任。

    • 本周热门
    • 今日热门

    首页 焦点(3455) 热点(2555) 新闻(12708) 国际(4969) 娱乐(4092) 视频(131) 综艺(1808) 影视(3371) 音乐(2082) 民生(3404) 行业(198) 财经(1443) 股票(343) 时装(9) 商机(19) 女性(411) 男士(75) 美容(43) 时尚(29) 珠宝(40) 饰品(25) 皮具(3) 品牌(12) 保健(58) 健康(269) 养生(104) 医学(326) 母婴(113) 亲子(56) 旅游(350) 购物(11) 美食(58) 创业(88) 社会(9551) 观点(992) 房产(1015) 汽车(229) 家居(21) 安防(40) 环保(57) 科技(603) 展会(4) 数码(201) 足球(217) 体育(963) 教育(1310) 高校(1553) 法制(1989) 军事(546) 游戏(235) 美女(17169) 欧美(32) 运营(18) 网络(399) 读书(294) 励志(177) 灵异(52) 奇闻(158) 趣闻(177) 历史(144) 人物(87) 星相(383) 艺术(46) 两性(75) 情感(151) 文学(300) 武林(261) 道教(61) 佛教(147) 广州(134) 地区(13)