当前位置: 网站建设 > 网页设计 > 建站经验 >

推荐一份不错的清除默认样式的CSS样式

时间:2013-03-02 04:04来源:未知 作者:admin 点击:

标签:推荐一份不错的清除默认样式的CSS样式 清除(13)样式(83)CSS(655)下面(16)一份(3)错的(2)说明(9)一些(40)推荐(3)默认(15)
下面说明一些和 YUI cssreset 的差别点: 请记住:永远不存在万能解决方案, 推荐5个团购网站内容管理系统 ,永远没有银弹。 天下一大抄,抄来抄去,种种 reset 代码,长得都差不离。这没什么不好,不光解决了问题,还增进了技术传布。 YUI 除了 cssreset, 还配套有 cssfonts 跟 cssbase. cssreset 肃清默认样式,cssfonts 和 cssbase 则将一些元素的默认款式重设回来。 这是我和挚友正淳一起收拾的一份 reset.css: 先阐明下测试过的浏览器
推荐一份不错的清除默认样式的CSS样式》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023423H013.htm

下面说明一些和 YUI cssreset 的差别点:

请记住:永远不存在万能解决方案,推荐5个团购网站内容管理系统,永远没有银弹。

天下一大抄,抄来抄去,种种 reset 代码,长得都差不离。这没什么不好,不光解决了问题,还增进了技术传布。

YUI 除了 cssreset, 还配套有 cssfonts 跟 cssbase. cssreset 肃清默认样式,cssfonts 和 cssbase 则将一些元素的默认款式重设回来。

这是我和挚友正淳一起收拾的一份 reset.css:

先阐明下测试过的浏览器:IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+

后来浏览 Eric 的博客,发明 Eric 并不冀望大家下载他的 reset.css 后直接拿去用。而是等待能根据详细需要,适量裁剪和修正后再应用。

--> [网站建设之]推荐一份不错的清除默认样式的CSS样式

很长一段时光,* { margin: 0; padding: 0; }和 YUI cssreset 含混了我对 reset 的懂得,让我以为 reset 就应当消除掉所有样式,将所有归零。

清除内外边距的元素,去掉了 div, code(在测试浏览器中,没发现有边距), 增添了 button(感到是 YUI 漏掉了). 去掉了 YUI 里对 html 色彩和背风景的设置。在测试浏览器中,没有发现差异。(要设的话,推举background: transparent) 对于 address, caption, …, em, strong 等文本格局元素,做了调整。保存了 strong 和 th 的粗体。 对 abbr 和 acronym 做了调剂,使得在非 ie6 下可视性更好。 去掉了 sup 和 sub 的样式,直接用浏览器默认的即可。 对于 input,控制网页文件大小通过精简CSS实现, select, textarea 表单元素,去掉了针对 ie 的 inherit, 只保留了 font-size 的 inherit hack. 由于其它 hack 经测试已生效。 增长了一些元素的默认样式。

这两步并不是截然离开的。reset 的初始用意,是想减少各种浏览器下默认样式的差异。对不差异的默认样式,则能够根据情形,抉择性重置或不重置。比如 strong, 默认都是粗体,这合乎预期,就可以不重置。又比方 a, 当初的主流浏览器下默认样式无差异,但为了某些因素,好比可读性,也会斟酌将下划线重置为无。

时间过得真快,离 Reset CSS 研讨(八卦篇) 已经 3 个多月了。空话少说,赶快将技术篇写完吧。

Tag:清除默认样式   清除默认样式  

世间的事总会有些戏剧化,Eric 的期待没有如意。大家都想得到通用解决计划,期待银弹。在这种渴求下,YUI cssreset 很彻底很清洁,广为传播。

技术实现

更戏剧化的是,因为 YUI 的 cssfonts 和 cssbase 只考虑了西欧文字,对汉字的考虑未几。这导致海内用户大局部只会用 cssreset. 比方成武林秘籍的话,咱们始终在用残卷。

但从 2004 年到现在,已经一晃眼 5 年了。曾经的一些考虑,比如针对 ie 5.5 的代码,目前已经可以勇敢舍弃了。抄的进程中,努力去做到求实求证,探讨百度权重与流量的价值,尽力求一份自己的理解,很难很难。但只有不知疲倦,毕竟会有所获,有所得,有所悟。

/* KISSY CSS Reset 理念:清除和重置是严密不可分的 特点:1.适应中文 2.基于最新主流浏览器 */ /* 清除内外边距 */ 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,探讨Register域名被删除的6个原因; /* 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,掌握盒模型轻松DIV CSS网页布局; height: 1px; } /* 让非ie浏览器默认也显示垂直滚动条,避免因转动条引起的闪耀 */ html { overflow-y: scroll; }

用处在解释里都表明了,就不多解释。测试页面在这里:CSS Reset Test. 这份测试页面花了我们很大血汗,假如转载,请注明下出处,呵呵。

此外,对整体代码的组织情势做了调整,依照元素的种别将代码进行了分组。

Eric 的也是如斯。

如何使用 回想与反思

第一份 reset css 是 Tantek 的 undohtml.css, 很简略的代码,Tantek 依据本人的须要,对浏览器的默认样式进行了一些重置。

调节显示器,有一个“重置为出厂设置”的选项。这有两重含意:一是去掉当前的设置,二是还原为出厂时的设置。CSS Reset 也一样,第一步是扫除阅读器的默认样式,第二步是重设浏览器的默认样式。很显明,* { margin: 0; padding: 0; }和 YUI cssreset 倾向于第一步。

因而我的倡议和 Eric 是一样的:请根据详细需求,适量裁剪和修改后再使用。

以上,是回顾,是反思,是接下来技巧实现的领导思维。


(责任编辑:网站建设)
推荐一份不错的清除默认样式的CSS样式相关文章
上一篇:推荐5个团购网站内容管理系统 下一篇:推荐的 CSS 规范书写顺序
回到顶部