- 浏览: 192890 次
- 性别:
- 来自: 北京
最新评论
-
hncdcsm1:
非常给力,找了很久了,谢谢分享
99款高质量免费(X)HTML/CSS模板(转自blog.bingo929.com不错) -
yuying:
谢谢诶!
非常不错的CSS表单显示效果
Css Reset也就Reset Css ,就是重置一些标签样式,或者说默认的样式。前端开发工作中有一款好的、统一的Css Reset将提高开发效率,提高样式代码的重用,减少重复代码,减少维护成本。 现
发表于:2009-03-21 17:18 分类:首页 > 网站重构 > CSS+XHTML > , 标签: CSS
Css Reset也就Reset Css ,就是重置一些标签样式,或者说默认的样式。前端开发工作中有一款好的、统一的Css Reset将提高开发效率,提高样式代码的重用,减少重复代码,减少维护成本。
现在分享一些老外的Css Reset,供大家参考;
1.Ateneu Popular CSS Reset
- html, body, div, span, applet, object, iframe, h1, h2, h3,
- h4, h5, h6, p, blockquote, pre , a, abbr, acronym,
- address, big, cite, code , del, dfn, em, font , img, ins,
- kbd, q, s, samp, small , strike, strong, sub , sup, tt,
- var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
- table, caption , tbody, tfoot, thead, tr, th, td {
- margin : 0;
- padding : 0;
- border : 0;
- outline : 0;
- font-weight : inherit;
- font-style : inherit;
- font-size : 100%;
- font-family : inherit;
- vertical-align : baseline baseline ;
- }
- :focus { outline : 0;}
- a, a:link, a:visited, a:hover, a:active{ text-decoration : none }
- table { border-collapse : separate ; border-spacing : 0;}
- th, td { text-align : left ; font-weight : normal ;}
- img, iframe { border : none ; text-decoration : none ;}
- ol, ul { list-style : none ;}
- input, textarea, select, button { font-size : 100%; font-family : inherit;}
- select { margin : inherit;}
- hr { margin : 0; padding : 0; border : 0; color : #000 ; background-color : #000 ; height : 1px }
2.Chris Poteet’s Reset CSS
- * {
- vertical-align : baseline baseline ;
- font-family : inherit;
- font-style : inherit;
- font-size : 100%;
- border : none ;
- padding : 0;
- margin : 0;
- }
- body {
- padding : 5px ;
- }
- h1, h2, h3, h4, h5, h6, p, pre , blockquote, form, ul, ol, dl {
- margin : 20px 0;
- }
- li, dd, blockquote {
- margin-left : 40px ;
- }
- table {
- border-collapse : collapse ;
- border-spacing : 0;
- }
3.Yahoo’s(YUI) CSS Reset
查看: Yahoo (YUI)
- 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;
- }
4.Eric Meyer Reset CSS
查看:Eric Meyer
- html, body, div, span, applet, object, iframe, table, caption ,
- tbody, tfoot, thead, tr, th, td, del, dfn, em, font , img, ins,
- kbd, q, s, samp, small , strike, strong, sub , sup, tt, var,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre , a, abbr,
- acronym, address, big, cite, code , dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend {
- vertical-align : baseline baseline ;
- font-family : inherit;
- font-weight : inherit;
- font-style : inherit;
- font-size : 100%;
- outline : 0;
- padding : 0;
- margin : 0;
- border : 0;
- }
- :focus {
- outline : 0;
- }
- body {
- background : white ;
- line-height : 1;
- color : black ;
- }
- ol, ul {
- list-style : none ;
- }
- table {
- border-collapse : separate ;
- border-spacing : 0;
- }
- caption , th, td {
- font-weight : normal ;
- text-align : left ;
- }
- blockquote:before, blockquote:after, q:before, q:after {
- content : "" ;
- }
- blockquote, q {
- quotes : "" "" ;
- }
5.Tantek Celik Reset CSS
查看: Tantek Celik
- :link,:visited { text-decoration : none }
- ul,ol { list-style : none }
- h1,h2,h3,h4,h5,h6, pre , code { font-size :1em; }
- ul,ol,li,h1,h2,h3,h4,h5,h6, pre ,form,body,html,p,blockquote,fieldset,input
- { margin :0; padding :0 }
- a img,:link img,:visited img { border : none }
- address { font-style : normal }
6.Christian Montoya Reset CSS
- html, body, form, fieldset {
- margin : 0;
- padding : 0;
- font : 100%/120% Verdana , Arial , Helvetica , sans-serif ;
- }
- h1, h2, h3, h4, h5, h6, p, pre ,
- blockquote, ul, ol, dl, address {
- margin : 1em 0;
- padding : 0;
- }
- li, dd, blockquote {
- margin-left : 1em;
- }
- form label {
- cursor : pointer ;
- }
- fieldset {
- border : none ;
- }
- input, select, textarea {
- font-size : 100%;
- font-family : inherit;
- }
7.Rudeworks Reset CSS
查看:Rudeworks
- * {
- margin : 0;
- padding : 0;
- border : none ;
- }
- html {
- font : 62.5% "Lucida Grande" , Lucida, Verdana , sans-serif ;
- text-shadow : #000 0px 0px 0px ;
- }
- ul {
- list-style : none ;
- list-style-type : none ;
- }
- h1, h2, h3, h4, h5, h6, p, pre ,
- blockquote, ul, ol, dl, address {
- font-weight : normal ;
- margin : 0 0 1em 0;
- }
- cite, em, dfn {
- font-style : italic ;
- }
- sup {
- position : relative ;
- bottom bottom : 0.3em;
- vertical-align : baseline baseline ;
- }
- sub {
- position : relative ;
- bottom bottom : -0.2em;
- vertical-align : baseline baseline ;
- }
- li, dd, blockquote {
- margin-left : 1em;
- }
- code , kbd, samp, pre , tt, var, input[type=‘text’], textarea {
- font-size : 100%;
- font-family : monaco, "Lucida Console" , courier, mono-space;
- }
- del {
- text-decoration : line-through ;
- }
- ins, dfn {
- border-bottom : 1px solid #ccc ;
- }
- small , sup, sub {
- font-size : 85%;
- }
- abbr, acronym {
- text-transform : uppercase ;
- font-size : 85%;
- letter-spacing : .1em;
- border-bottom -style: dotted ;
- border-bottom - width : 1px ;
- }
- a abbr, a acronym {
- border : none ;
- }
- sup {
- vertical-align : super ;
- }
- sub {
- vertical-align : sub ;
- }
- h1 {
- font-size : 2em;
- }
- h2 {
- font-size : 1.8em;
- }
- h3 {
- font-size : 1.6em;
- }
- h4 {
- font-size : 1.4em;
- }
- h5 {
- font-size : 1.2em;
- }
- h6 {
- font-size : 1em;
- }
- a, a:link, a:visited, a:hover, a:active {
- outline : 0;
- text-decoration : none ;
- }
- a img {
- border : none ;
- text-decoration : none ;
- }
- img {
- border : none ;
- text-decoration : none ;
- }
- label, button {
- cursor : pointer ;
- }
- input:focus, select:focus, textarea:focus {
- background-color : #FFF ;
- }
- fieldset {
- border : none ;
- }
- . clear {
- clear : both ;
- }
- . float - left {
- float : left ;
- }
- . float - right right {
- float : right right ;
- }
- body {
- text-align : center ;
- }
- #wrappe r {
- margin : 0 auto ;
- text-align : left ;
- }
8.Anieto2K Reset CSS
查看: Andrés Nieto
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p,
- blockquote, pre , a, abbr, acronym, address, big,
- cite, code , del, dfn, em, font , img,
- ins, kbd, q, s, samp, small , strike,
- strong, sub , sup, tt, var, dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption , tbody, tfoot, thead, tr, th, td,
- center , u, b, i {
- margin : 0;
- padding : 0;
- border : 0;
- outline : 0;
- font-weight : normal ;
- font-style : normal ;
- font-size : 100%;
- font-family : inherit;
- vertical-align : baseline baseline
- }
- body {
- line-height : 1
- }
- :focus {
- outline : 0
- }
- ol, ul {
- list-style : none
- }
- table {
- border-collapse : collapse ;
- border-spacing : 0
- }
- blockquote:before, blockquote:after, q:before, q:after {
- content : ""
- }
- blockquote, q {
- quotes : "" ""
- }
- input, textarea {
- margin : 0;
- padding : 0
- }
- hr {
- margin : 0;
- padding : 0;
- border : 0;
- color : #000 ;
- background-color : #000 ;
- height : 1px
- }
9.CSSLab CSS Reset
查看:CSSLab
- html, body, div, span, applet, object, iframe, h1, h2, h3,
- h4, h5, h6, p, blockquote, pre , a, abbr, acronym, address,
- big, cite, code , del, dfn, em, font , img, ins, kbd, q, s, samp,
- small , strike, strong, sub , sup, tt, var, dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend, table, caption , tbody, tfoot,
- thead, tr, th, td {
- margin : 0;
- padding : 0;
- border : 0;
- outline : 0;
- font-weight : inherit;
- font-style : inherit;
- font-size : 100%;
- font-family : inherit;
- vertical-align : baseline baseline ;
- }
- :focus {
- outline : 0;
- }
- table {
- border-collapse : separate ;
- border-spacing : 0;
- }
- caption , th, td {
- text-align : left ;
- font-weight : normal ;
- }
- a img, iframe {
- border : none ;
- }
- ol, ul {
- list-style : none ;
- }
- input, textarea, select, button {
- font-size : 100%;
- font-family : inherit;
- }
- select {
- margin : inherit;
- }
- /* Fixes incorrect placement of numbers in ol's in IE6/7 */
- ol { margin-left :2em; }
- /* == clearfix == */
- .clearfix:after {
- content : "." ;
- display : block ;
- height : 0;
- clear : both ;
- visibility : hidden ;
- }
- .clearfix { display : inline - block ;}
- * html .clearfix { height : 1%;}
- .clearfix { display : block ;}
10.Condensed Meyer 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;
- }
- fieldset, img {
- border : 0;
- }
- table {
- border-collapse : collapse ;
- border-spacing : 0;
- }
- ol, ul {
- list-style : none ;
- }
- address, caption , cite, code , dfn, em, strong, th, var {
- font-weight : normal ;
- font-style : normal ;
- }
- 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;
- }
css-tricks站的调查Eric Meyer Reset CSS(也就是上面的第4个)使用人数最多,点击查看http://css-tricks.com/poll-results-what-css-reset-do-you-use/ 。
再来看看国内一个前端开发工程师自己整理的 CSS Reset:
- /*reset 全局定义 注释可去掉*/
- 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
- { margin :0; padding :0;}
- fieldset,img{ border :0;}
- ul li{ list-style : none ;}
- input,textarea,select{ font-family :inherit; font-size :inherit; font-weight :inherit;}
- input,textarea,select{* font-size :100%;}
- /* body标记样式定义全局的字体颜色、背景色和文本对齐设置 */
- body{ color : #000 ; background : #fff ; text-align : left ; font-size :75.00%; font-family : 'lucida grande' ,taho, verdana , 'trebuchet ms' , sans-serif ;}
- /* hx系列 */
- h1, h2, h3, h4, h5, h6{ font-weight : bold ; }
- h1{ font-size : 200%; }
- h2{ font-size : 166.67%; }
- h3{ font-size : 150%; }
- h4{ font-size : 133.33%; }
- h5{ font-size : 116.67%; }
- h6{ font-size : 116.67%; font-style : italic ;}
- /* 着重标记 */
- cite, blackquote, em, i{ font-style : italic ; }
- strong, b{ font-weight : bold ; }
- /* 预格式标记 */
- pre , code { font-family : monospace ; font-size : 1.1em;}
- /* 缩写标记 */
- acronym, abbr{ border-bottom : 0.1em dashed #c00 ; cursor : help ; letter-spacing : .07em;}
- /* 定义默认的链接样式 */
- a:link, a:visited{ color : #0065FF ; text-decoration : none ;}
- a:hover{ text-decoration : underline ;}
- /* 清除溢出,浮动 */
- .clearing, .HackBox{ border-top : 1px solid transparent ! important ; clear : both ; visibility : hidden ;}
- /* 不需要额外增加元素的清理浮动的类使用:after伪类来实现浮动清理 */
- .wrapfix:after{ content : "." ; display : block ; height : 0; clear : both ; visibility : hidden ;}
- /* IE7 hack */
- .wrapfix { display : inline - block ;}
- /* IE-mac, IE5, IE6 */
- * html .wrapfix { height : 1%;}
- .wrapfix { display : block ;}
- /*隐藏元素*/
- .invisible{ visibility : hidden ;}
- /* 从页面布局上隐藏元素*/
- . hidden { display : none ;}
- /* 通用容器 */
- .wrapper{ clear : both ; overflow : hidden ;}
- /*--框架--*/
- #main { width : 950px ; margin :0 auto ; overflow : hidden ;}
个人认为Css Reset的整理还是要从自身网站出发,合适自己的才是做好的。
相关推荐
python爬虫案例
2023年下半年计算机等级一级考试Photoshop考点梳理 2023年下半年计算机等级一级考试WPS office考点汇总 2023年下半年计算机二级考试公共基础知识科目考点汇总 根据实际考试情况进行的总结。
Introduction to Data Science Data Analysis and Prediction Algorithms with R 英文原版,完整带目录,非常好的数据分析资料,有基于R的完整数据分析过程
数电实验三:74LS151逻辑功能测试、74LS153逻辑功能测试、74LS153全加器、三输入多数表决电路
农业机械维修记录(表式).doc
go语言优质学习资源和工具与案列应用场景.txt
网络攻防课程seed-labs实验-Spectre_Attack.zip
GameAssistant_300200000_0_ 2.exe
电商小程序前端模板下载。
MySQL开发案列优质学习资料资源工具与案列应用场景开发文档教程资料.txt
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
2024海外营销日历.zip
最新版点微同城源码34.7+全套插件+小程序前后端附图片 模板挺好看的 带全套插件 自己耐心点配置一下插件 可以H5可以小程序
最新二开微信表情包小程序+前后端 【去授权版】,带简单文本教程,已经去除授权加二开 内含二开版本和表情包-黄色版本
python爬虫案例
端午节相关庆祝代码的示例
开源光谱分析仪项目的代码,作出了一些改进: 1.添加了详细的中文注释; 2.把图片中的英文图例说明改成了中文图例,图例字体设置为宋体;
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
随着网络的逐渐普及,Email在人们生活中应用日益广范,除了专业的邮件服务系统之外,一般大型网站与单位都提供了email服务。因此,本次设计是通过对SMTP、pop3协议的熟悉和理解、以及对JSP编程和网页设计技能的掌握,开发出一个简单的B/S结构下的邮件服务系统。能完成邮件的发送、接收、以及附件处理功能等。主要运用的软件有Eclipse, SQL Server,在JAVA环境下,利用JSP编程来实现邮件系统的各种功能。该系统主要支持用户的身份验证,用户只有通过正确注册后才能进入该系统。在系统中可以查看自己的邮件也可以发送邮件到任意的邮箱,发邮件的时候可以进行附件的发送。通过本次课题的学习和研究掌握了基本的web编程技能,更实践了自我的动手能力。同时认识到在信息化高速发展的今天,高效、快速、方便的邮件收发系统将得到越来越多的人关注和使用,它将给人们带来更方便快捷的生活。
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。