（最简单）使用 reset-css 初始化浏览器css样式

最新推荐文章于 2024-05-07 14:55:18 发布
最新推荐文章于 2024-05-07 14:55:18 发布
阅读量561 收藏 1
点赞数 1
分类专栏： 前端学习笔记 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59747594/article/details/130642147
版权

目录

背景

实现

步骤一

步骤二

背景

在我们的项目初始化搭建过程中会遇到这种情况，需要我们自己清除css默认样式，但是我们不可能一周都有那个清除默认css样式的文件

实现

步骤一

在终端使用 npm 引用 reset-css

npm i reset-css

步骤二

引入！！！！

最后在入口文件（main.js) 中引用（不同项目的入口文件不同可能，只要引入就行了）

import 'reset-css'
_揽
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vant+vue移动端项目初始化，针对移动端的样式重置 reset.css
05-05
vant+vue移动端项目初始化，针对移动端的样式重置 reset.css
清除浏览器默认样式之reset css文件
https://ligo100.cn 小何博客欢迎访问。
01-05 596
html,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,...
cssreset-min.css
03-14
做过前端的朋友都知道，目前众多的浏览器，对于HTML的解析并不是完全一样。比如 li ，这个元素默认的样式在IE和Firefox中就不一样。Css Reset 就是为了消除这种不同元素在各个浏览器下的不同而设计的。这样，我们在 Build 我们的页面的时候，就是建立在一个完全一致的基础上，能够非常方便的让我们按照自己的想法去进行排版布局。通过这个​ ​例子​​我们可以看到，使用了 Css Reset之后的样式会是什么样的。 或者 引入在线的css <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
移动端初始化css
01-23
常用移动端公共css
reset.css:正版Eric Meyer的Reset CSS捆绑为npm包
05-08
reset.css 正版捆绑为npm软件包。 安装 npm install reset.css --save 例子 当与使用时： @import 'reset.css' ; html { box-sizing : border-box; } * , * : before , * : after { box-sizing : inherit; } 执照 无（公共领域）
node-reset-scss:用于将 Eric Meyer 的 CSS 重置包含为 SCSS 部分的节点模块
07-08
节点重置 SCSS 一个简单的节点模块，用于包含 Eric Meyer 的重置 css 作为 sass 部分 与 Gulp 一起使用： var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('path/to/input.scss') .pipe(sass({ includePaths: require('node-reset-scss').includePath })) .pipe(gulp.dest('path/to/output.css')); });
CSS重置样式表
雷爷的博客
09-03 2327
CSS重置样式表 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre...
reset.css
ZRHG888的博客
10-24 288
reset.css /** Eric Meyer’s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre...
vue清除css全局默认样式插件
m0_51354601的博客
04-13 3450
【代码】vue清除css全局默认样式插件。
通过安装插件： reset-css 初始化浏览器css样式
jolinoy的博客
09-18 1308
不同的浏览器标签的默认值是不同的，如果没对css初始化会出现浏览器之间页面显示的差异。通过安装插件： reset-css 初始化浏览器css样式。
html标签样式重置reset.css文件
12-08
html标签样式重置reset.css文件，取消标签原来特殊样式方便自定义，例如a标签下划线，span标签前面的小圆点，清除浮动解决塌陷的兼容样式
reset-css:很小的Reset CSS
04-29
重置CSS 一个简单的Reset CSS，具有以下功能： 保证金/填充 桌子 字体大小 装箱尺寸 媒体 安装 下载或版本 npm i @pyxeldev/reset-css CDN 您可以使用unpkg CDN： 执照 自2020年以来:copyright: 在
初始化CSS的方法
01-19
为什么要初始化CSS？ CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。CSS初始化示例代码 CSS Code复制内容到剪贴板 /* css reset www.admin10000.com */   body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h
CSS重设(reset)方法总结
51yunOA
04-12 1623
在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。 　　当今流行的浏览器(如:Fire...
vite项目中引入 reset.css 重置样式表方法
qq_39111074的博客
09-07 1340
vite项目中引入 reset.css 重置样式表方法
CSS Reset 全局样式初始化
TongJ_的博客
06-13 267
这个是我们在做项目时比较常用的一套css初始化样式，在这里就直接给出代码了。
react学习笔记-2：样式初始化及sass使用
snipercai的博客
03-06 401
react前端开发学习
目前比较全的CSS重设(reset)方法总结
CSS fly
09-23 579
目前比较全的CSS重设(reset)方法        　　在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视
css--控制滚动条的显示位置
最新发布
fupo
05-07 616
各种学习后的知识点整理归纳，非原创！
css黑魔法之计数器counter的使用技巧
07-13
### 回答1： CSS的counter计数器是一种非常有用的技巧，用于在网页中实现自动计数和编号的功能。通过使用计数器，我们可以方便地对网页元素进行编号，比如列表、章节标题等。 首先，我们需要定义一个计数器。可以使用counter-reset属性来定义计数器并初始化它的值。例如，如果我们想要创建一个从1开始的计数器，可以这样写： ``` body { counter-reset: counterName 1; } ``` 这里的counterName是我们给计数器起的名字，可以自定义。1表示计数器的初始值。 接下来，我们可以在需要计数的元素中使用counter-increment属性来递增计数器的值。例如，如果我们想要在每个列表项前显示它的编号，可以这样写： ``` ul li:before { counter-increment: counterName; content: counter(counterName) ". "; } ``` 这里的counter-increment用于递增计数器的值，content用于显示计数器的值。我们使用了counter()函数来获取计数器的值，并在后面加上了一些文字（比如点号和空格）来实现编号的显示效果。 我们还可以根据需要在不同的元素中使用不同的计数器。只需要给不同的计数器起不同的名字，并在对应的元素中使用相应的计数器名字即可。 总的来说，CSS的counter计数器是一种非常灵活和强大的技巧，可以用于各种需要进行自动计数和编号的场景。通过定义计数器、递增计数器和使用counter()函数来获取计数器的值，我们可以轻松地实现网页元素的编号效果。 ### 回答2： 计数器（counter）是CSS中的一个功能强大的特性，可以用于在HTML文档中创建计数器，然后在样式规则中使用这些计数器来生成序号或标记。以下是使用计数器(counter)的一些技巧： 1. 创建一个计数器： 使用 `counter-reset` 属性可以创建一个计数器，并可以为其设定一个初始值。例如，可以创建一个以1为初始值的计数器： ```css .container { counter-reset: my-counter 1; } ``` 2. 更新计数器的值： 使用 `counter-increment` 属性可以更新计数器的值。可以在选择器中的任何位置使用这个属性。例如，每当 `li` 元素出现时，可以将计数器的值增加1： ```css li { counter-increment: my-counter; } ``` 3. 在内容中引用计数器的值： 使用 `content` 属性可以在样式规则中引用计数器的值，并将其插入到生成的内容中。可以使用计数器的名称作为 `content` 的值。例如，将计数器的值作为新的内容插入到列表项前面： ```css li::before { content: counter(my-counter) ". "; } ``` 4. 在不同的元素中使用多个计数器： 可以在同一个文档中使用多个不同的计数器，并为它们设定不同的初始值。这样可以为不同的元素生成不同的序号或标记。例如，可以为不同的标题元素创建不同的计数器： ```css h1 { counter-reset: h1-counter 1; } h2 { counter-reset: h2-counter 1; } ``` 5. 控制计数器的显示方式： 使用 `counter()` 函数可以对计数器的显示方式进行自定义。可以指定计数器的名称，以及任何显示格式。例如，可以将计数器的值格式化为罗马数字： ```css .container::after { content: counter(my-counter, upper-roman); } ``` 总结而言，计数器(counter)是CSS中一项非常实用的黑魔法技巧。通过创建、更新和引用计数器的值，可以在样式规则中生成序号或标记，并且可以通过自定义显示格式来控制计数器的外观。 ### 回答3： CSS中的计数器（counter）是一种非常强大的工具，可以用来计数、标记和显示元素的编号或序号。它可以通过一些技巧来实现各种有趣的效果。 首先，使用counter-reset属性来定义计数器并将其重置为指定的起始值。例如，可以使用"counter-reset: section 0;"来将名为"section"的计数器重置为0。 然后，可以通过counter-increment属性来递增计数器的值。例如，使用"counter-increment: section;"来递增名为"section"的计数器的值。 接下来，在需要显示计数器的地方，可以使用content属性来显示计数器的值。例如，使用"content: counter(section);"来在伪元素的内容中显示名为"section"的计数器的值。 可以进一步利用计数器，实现复杂的效果。例如，可以使用:before伪元素和content属性来在每个元素前面显示计数器的值，从而实现自动标号的效果。例如，使用"content: counter(section) '. ';"来在每个元素前面显示名为"section"的计数器的值，并跟随一个点号。 此外，还可以使用counter()函数获取和修改计数器的当前值。例如，可以使用"counter(section)"来获取名为"section"的计数器的当前值，并将其用作其他属性的值。 总的来说，计数器是CSS中非常强大且灵活的工具，可以用来实现各种复杂的效果。熟练掌握计数器的使用技巧，可以让我们的CSS代码更加精细和有趣。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_揽

苦der程序员敲代码

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值