CSS复位-CSS Reset代码举例
2013-12-10 09:52
155 查看
做为wefb前端设计人员,你用过CSS Rese(css样式重置)t吗?在实际工作中,你可能经常用到这行代码:
* { padding: 0; margin: 0; border: 0; }
这也是一款CSS Rese(css样式重置)t的方法,让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法,也是最简单,最安全的方法,不过,也是最占用浏览器渲染的电脑资源。
对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,则需要有选择地进行CSS重设,以减少资源浪费。
下面是Yahoo的CSS重设代码,也是受最多人喜爱的CSS Reset方法,可以被开发者复制重复利用代码:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym { border: 0;
}文章来源:http://write.blog.csdn.net/postedit
* { padding: 0; margin: 0; border: 0; }
这也是一款CSS Rese(css样式重置)t的方法,让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法,也是最简单,最安全的方法,不过,也是最占用浏览器渲染的电脑资源。
对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,则需要有选择地进行CSS重设,以减少资源浪费。
下面是Yahoo的CSS重设代码,也是受最多人喜爱的CSS Reset方法,可以被开发者复制重复利用代码:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym { border: 0;
}文章来源:http://write.blog.csdn.net/postedit
相关文章推荐
- CSS代码分享:浏览器CSS Reset方法十例
- CSS Reset(CSS复位)
- CSS reset,去掉默认格式的css代码
- 经典的css reset代码 (reset.css)
- 精选WPHTML+CSS代码举例
- 10个程序员最喜欢的 HTML和CSS 等在线代码编辑器
- div 显示滚动条与div显示隐藏的CSS代码
- 利用浏览器CSS渲染原理写出高性能的CSS代码
- 使用CSS代码的空格实现中文对齐的方法
- 举例详解CSS中的cursor属性
- 编写跨浏览器兼容的 CSS 代码
- CSS代码中px与pt的区别
- CSS代码中的“clear:both;”失效了
- CSS选项卡效果代码
- 用CSS代码写出的各种形状图形的方法
- css学习任务二:切图写代码
- 8 个帮助你编写可维护、精简化前端代码的 CSS 策略
- 纯CSS按钮代码 不用任何图片做漂亮按钮
- html、css和jquery相结合实现简单的进度条效果实例代码
- Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--交集:s|Button#btn