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

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

回顾与反思

第一份 reset css 是 Tantek 的 undohtml.css, 很简单的代码,Tantek 根据自己的需要,对浏览器的默认样式进行了一些重置。

Eric 的也是如此。

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

很长一段时间,* { margin: 0; padding: 0; }和 YUI cssreset 模糊了我对 reset 的理解,让我认为 reset 就应该清除掉所有样式,将一切归零。

后来阅读 Eric 的博客,发现 Eric 并不期望大家下载他的 reset.css 后直接拿去用。而是期待能根据具体需求,适量裁剪和修改后再使用。

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

更戏剧化的是,由于 YUI 的 cssfonts 和 cssbase 只考虑了西欧文字,对汉字的考虑不多。这导致国内用户大部分只会用 cssreset. 比喻成武林秘籍的话,我们一直在用残卷。

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

这两步并不是截然分开的。reset 的初始意图,是想减少各种浏览器下默认样式的差异。对于没有差异的默认样式,则可以根据情况,选择性重置或不重置。比如 strong, 默认都是粗体,这符合预期,就可以不重置。又比如 a, 现在的主流浏览器下默认样式无差别,但为了某些因素,比如可读性,也会考虑将下划线重置为无。

以上,是回顾,是反思,是接下来技术实现的指导思想。

技术实现

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

但从 2004 年到现在,已经一晃眼 5 年了。曾经的一些考虑,比如针对 ie 5.5 的代码,目前已经可以大胆舍弃了。抄的过程中,努力去做到求实求证,努力求一份自己的理解,很难很难。但只要孜孜不倦,终究会有所获,有所得,有所悟。

这是我和好友正淳一起整理的一份 reset.css:

/*
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, "5b8b4f53", 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;
}/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

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

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

下面解释一些和 YUI cssreset 的差异点:

  1. 清除内外边距的元素,去掉了 div, code(在测试浏览器中,没发现有边距), 增加了 button(感觉是 YUI 遗漏了).
  2. 去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中,没有发现差异。(要设的话,推荐background: transparent
  3. 对于 address, caption, …, em, strong 等文本格式元素,做了调整。保留了 strong 和 th 的粗体。
  4. 对 abbr 和 acronym 做了调整,使得在非 ie6 下可视性更好。
  5. 去掉了 sup 和 sub 的样式,直接用浏览器默认的即可。
  6. 对于 input, select, textarea 表单元素,去掉了针对 ie 的 inherit, 只保留了 font-size 的 inherit hack. 因为其它 hack 经测试已失效。
  7. 增加了一些元素的默认样式。

此外,对整体代码的组织形式做了调整,按照元素的类别将代码进行了分组。

如何使用

请记住:永远不存在万能解决方案,永远没有银弹。

转载于:https://www.cnblogs.com/ymj0906/archive/2013/04/02/2994591.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/376763.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python深浅拷贝

在python中,对象赋值实际上是对象的引用。当创建一个对象,然后把它赋给另一个变量的时候,python并没有拷贝这个对象,而只是拷贝了这个对象的引用。 所以一个结构类型被赋给另外一个对象的时候,尽可能不使用 &#xff…

Flash中的SLC/MLC/MLC--基础

参考 1.http://www.upantool.com/jiaocheng/qita/2012/slc_mlc_tlc.html 2.http://www.2ic.cn/html/10/t-432410.html 3.http://kms.lenovots.com/kb/article.php?id15382 4.http://www.albertknight.com/222.html 5.http://ssd.zol.com.cn/371/3716632.html 6.这个图比较多 h…

python定义对象的比较方法

有时候我们需要比较两个对象。比如哪个对象大,哪个对象小。如果我们不告诉python如何比较,那么Python是不知道如何进行比较的。 下面提供实例 #__eq__(self,other): #在使用比较运算符比较两个对象是否相等的时候会调用这个方法。 #如果是相等,那么应该返…

关于Oracle Insert 语句的子查询 和 with check option的用法

今日睇ocp教程 发现 insert语句还可以子查询例如:INSERT INTO (SELECT employee_id, last_name, email, hire_date, job_id, salary, department_id FROM employees where department_id 50 )VALUES (9999…

apple mac 下使用机械键盘的办法,键盘映射工具软件,apple mac Mechanical keyboard

apple mac 下使用机械键盘的办法,键盘映射工具软件,apple mac Mechanical keyboard 想在苹果电脑 mac 系统下使用 机械键盘,大部分机械键盘不是为mac设计的,所以需要用软件做一下键盘映射。 推荐使用这个:https://pqrs…

Python中键映射多个值的方法:defaultdict

Python中键映射多个值的方法有两种: 想保持元素的插入顺序就应该使用列表; 想去掉重复元素就使用集合并且不关心元素的顺序问题的话应该使用set from collections import defaultdictmapping defaultdict(list)mapping [key].append(value)mapping d…

该不该让Google收录WordPress的目录页和标签页?

只要有一点SEO知识的 站长都会注意利用相关文件和元标签来控制Google对网站的收录,对于WordPress网站来说,除了我们主动添加的内容页面,Google还会收录目录归档页,标签归档页,时间归档页,以及作者归档页。这…

【原创】MapReduce编程系列之表连接

问题描述需要连接的表如下:其中左边是child,右边是parent,我们要做的是找出grandchild和grandparent的对应关系,为此需要进行表的连接。 Tom Lucy Tom Jim Lucy David Lucy Lili Jim Lilei Jim SuSan Lily Green Lily Bians Green…

python logging模块简单使用

logging 是线程安全的,也就是说,在一个进程内的多个线程同时往同一个文件写日志是安全的。 但是多个进程往同一个文件写日志不是安全的。 import loggingLOG_FORMAT "%(asctime)s - %(levelname)s - %(message)s" DATE_FORMAT "%m/%d/…

OpenACC 中parallel 和kernels的区别

Kernels构件 Kernels构件源于PGI Accelerator模型的region构件。嵌套kernels构件里的循环可能会被编译器转换成能在GPU上高效并行的部分。在这个过程中有三步。 1:判断并行中遇到的循环。 2:把抽象的并行转换成硬件上的并行。对于NVIDIA CUDA GPU&#…

ORACLE基本SQL语句-查询篇

一、普通查询 /*查询表数据*/select * from STU /*取出前3行数据*/select * from stu where ROWNUM<3 /*模糊查询*/select * from stu where stu_id like stu001% 说明&#xff1a;通配符“%”代表一个或者多个字符&#xff0c;通配符“_”代表一个字符。 /*别名*/select S…

三次握手建立失败的几种情况以及三次握手的理解

上面的图是阻塞式socket进行通信的过程&#xff0c;阻塞的时候是操作系统内核网络协议栈在工作 调用 connect 函数将激发 TCP 的三次握手过程&#xff0c;而且仅在连接建立成功或出错时才返回。其中出错返回可能有以下几种情况&#xff1a; 1、三次握手无法建立&#xff0c;客…

db_name,instance_name,service_names,db_domain,dbid,oracle_sid等区别与联系

最近整理了一篇文章&#xff1a;oracle listener 有网友对数据库是否显式设置了instance_name和service_names提出疑问。 由此引发出db_name,instance_name,oracle_sid等等这些常见的参数都代表什么意思&#xff0c;怎么取值的&#xff0c;有什么区别&#xff1f; SQL> sele…

检测版本更新

如果我们要检测app版本的更新&#xff0c;那么我们必须获取当前运行app版本的版本信息和appstore 上发布的最新版本的信息。 当前运行版本信息可以通过info.plist文件中的bundle version中获取&#xff1a; [cpp] view plaincopy NSDictionary *infoDic [[NSBundle mainBundle…

linux 启动/关闭多个py脚本

后台运行脚本 需求&#xff1a;很多时候我们会在 linux 服务器上执行 python 脚本&#xff0c;然而脚本程序执行的时间可能比较长&#xff0c;当耗时过长的情况下&#xff0c;我们使用 ssh 远程登录到 linux 服务器上容易造成超时自动断开连接&#xff0c;当用户注销时&#x…

在熟练使用2B铅笔前,请不要打开Axure

在互联网产品领域&#xff0c;Axure已成为产品经理、产品设计师以及交互设计师的必备工具&#xff0c;从某种程度讲&#xff0c;Axure帮助我们建立低保真模型&#xff0c;便于与用户的需求验证&#xff0c;也帮助我们构思交互细节&#xff0c;使前端和开发人员更容易理解我们的…

启用isqlplus

iSQL*Plus是sqlplus基于web方式发布的&#xff0c;要使用它只要在服务器上开启即可&#xff1a; [oraclelocalhost ~]$ isqlplusctl start perl: warning: Setting locale failed. perl: warning: Please check that your locale settings: LANGUAGE (unset), LC_ALL (unset)…

YUI 的模块信息配置优先级关系梳理

背景 YUI的配置参数较多&#xff0c; 可以在好几个地方配置一个module的相关信息&#xff0c; 如&#xff1a; //在全局配置&#xff0c; 所以YUI实例共享 YUI_config {modules: {w-autcomplete: {requires: [module1],path: test1.js,}},groups: {modules: {w-autocomplete: …

echarts 怎么知道鼠标点击的哪根柱子

有个需求&#xff0c;点击柱子&#xff0c;然后得到该柱子的信息&#xff0c;然后展示这个机房的时序图。 第一步卡住了&#xff0c;就是不知道如何获取柱子的序号。后参考&#xff1a;https://blog.csdn.net/zt_fucker/article/details/72461572?utm_sourceblogxgwz1 得到思路…

Oracle经典sql语句总结@sql-plus重点函数串讲与sql语句案例@中文排序详讲).doc

1.经典的select sql语句 //注意&#xff1a;包含空值的数学表达式求出的结果为空值 SQL> select salcomm from emp; //连接员工编号与员工姓名这两个字段 SQL> select empno||ename as "员工编号和员工姓名" from emp; //查询去掉重复行的员工部门编号 SQL>…