完美重置:高效管理您的CSS重置文件夹

更新:11-17 名人轶事 我要投稿 纠错 投诉

HTML 标签在浏览器中具有默认样式。例如,p 标签具有顶部和底部边距,strong 标签具有粗体字体样式,em 标签具有斜体字体样式。不同浏览器的默认样式也存在差异。例如,ul 默认具有缩进样式。在IE下,它的缩进是通过margin来实现的,而在Firefox下,它的缩进是通过padding来实现的。在切换页面时,浏览器的默认样式常常会给我们带来麻烦,影响开发效率。所以解决办法就是从一开始就去掉所有浏览器的默认样式,或者更准确地说,是通过重新定义标签样式。 “覆盖”浏览器的CSS 默认属性。最简单的方法就是覆盖浏览器提供的默认样式!这是CSS 重置。

为什么要重置呢?

因为浏览器的类型有很多,所以每个浏览器的默认样式也不同。例如,IE、Firefox和Safari中的标签样式是不同的。因此,通过重新设置按钮标签属性的CSS,然后统一定义就可以产生相同的显示效果。

CSS重置是关于什么的?

/*表示CSS文件的字符编码格式定义为"utf-8";*/

@charset"utf-8";

/*为html元素定义以下样式:字体颜色为黑色,背景颜色为白色,字体类型为“微软雅黑、无衬线、Arial”; */

html{color:#000;background:#FFF;font-family:"微软雅黑",sans-serif,Arial;}

/*设置body、div等一系列元素的字体类型为“微软雅黑、sans-serif、Arial”*/

正文,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,代码,表单,字段集,图例,输入,按钮,文本区域,p,块引用,th, td,strong{padding:0;margin:0;font-family:"微软雅黑",sans-serif,Arial;}

/*为表格标签设置:合并单元格之间的边框,边框间距为0*/

表{边框-collapse:collapse;边框-spacing:0;}

/*为img标签设置0像素边框(当img标签在a标签中时,默认会有蓝色边框)*/

图像{边框:0;}

/*设置a标签的初始样式,无下划线,字体颜色为#000(黑色),a标签点击时没有外层高亮线(轮廓)*/

a{text-decoration:none;颜色:#000;大纲:无;}

/*设置a标签悬停状态的样式,出现下划线*/

a:hover{text-decoration:underline;}

/*将var、em和strong元素的字体样式设置为“正常”*/

var,em,strong{font-style:normal;}

/*设置em、strong、th、var元素的字体样式为“继承”,字体粗细为“继承”(第8行和第9行的设置相当于先把所有的var、em、strong标签都改掉在网页中去掉字体样式,然后设置样式继承父样式,这样可以保证其他标签中的var、em、strong标签的样式与其父元素相同)*/

em,强,th,var{font-style:inherit;font-weight:inherit;}

/*去掉li列表项的小标志*/

li{list-style:none;}

/*设置标题和标题左对齐*/

标题,th{text-align:left;}

/*设置h1~h6标签的字体大小,都是父元素的字体大小,并且不加粗(默认不同的title元素大小不同,并且都有加粗效果)*/

h1,h2,h3,h4,h5,h6{字体大小:100%;字体粗细:正常;}

/*为输入、按钮、文本区域和其他元素设置字体类样式。各种字体样式继承父样式*/

输入,按钮,文本区域,选择,optgroup,选项{font-family:inherit;font-size:inherit;font-style:继承;font-weight:inherit;}

/*设置输入、按钮、文本区域和选择的hacks。 IE6~7下,字体为父级的100%*/

输入,按钮,文本区域,选择{*font-size:100%;}

/*伪元素清除float后兼容IE*/

.clearfix {*zoom:1}

/*After语句清除浮动伪元素*/

用户评论

巴黎盛开的樱花

终于不用再手动设置各种浏览器样式差异了!

    有20位网友表示赞同!

久爱不厌

这应该是我前端开发中必备的一套工具~

    有5位网友表示赞同!

熏染

方便极了,一下子就把布局规范化了。

    有20位网友表示赞同!

孤败

对初学者来说简直太友好,从零开始写网页也不怕 estilos混乱

    有7位网友表示赞同!

别伤我i

重置文件夹里样式文件可以提高代码复用率!

    有6位网友表示赞同!

为爱放弃

学习下这个重置CSS,以后项目开发效率应该会大大提升

    有19位网友表示赞同!

枫无痕

这套reset.css真的超有用,让我再也不用担心不同浏览器之间的差异了!

    有15位网友表示赞同!

歇火

以前自己写样式的时候总是觉得有点麻烦,有了这个就轻松多了!

    有11位网友表示赞同!

_心抽搐到严重畸形っ°

推荐给所有前端开发人员使用,省时省力又好用。

    有18位网友表示赞同!

情深至命

简洁高效的 CSS 规范,可以减少不必要的设计和调试时间

    有9位网友表示赞同!

疲倦了

下载下来试试看,感觉还是挺不错的!

    有7位网友表示赞同!

执念,爱

对Web项目的布局很有帮助呀!

    有10位网友表示赞同!

眉黛如画

学习下这个重置CSS,以后网页设计会更加方便了

    有15位网友表示赞同!

早不爱了

这套工具可以帮助我们快速搭建基本的页面结构,省时又省力。

    有7位网友表示赞同!

关于道别

项目中经常用到这种风格重置!好用又简单

    有18位网友表示赞同!

黑夜漫长

对提高前端开发效率很有帮助!

    有5位网友表示赞同!

古巷青灯

学习一下 CSS 重置,以后自己写代码更容易上手!

    有5位网友表示赞同!

栀蓝

这个工具可以让我专注于自己的设计和逻辑,而不是花时间纠结浏览器兼容问题。

    有5位网友表示赞同!

沐晴つ

希望有更多优秀的CSS重置库可以参考使用。

    有19位网友表示赞同!

【完美重置:高效管理您的CSS重置文件夹】相关文章:

1.蛤蟆讨媳妇【哈尼族民间故事】

2.米颠拜石

3.王羲之临池学书

4.清代敢于创新的“浓墨宰相”——刘墉

5.“巧取豪夺”的由来--米芾逸事

6.荒唐洁癖 惜砚如身(米芾逸事)

7.拜石为兄--米芾逸事

8.郑板桥轶事十则

9.王献之被公主抢亲后的悲惨人生

10.史上真实张三丰:在棺材中竟神奇复活

上一篇:使用Python自动化报表邮件发送,高效减轻工作负担 下一篇:2023年回顾:年度精彩瞬间与感悟