首页 前端知识 HTML、CSS常用的vscode插件 Css reset 和Normalize.css

HTML、CSS常用的vscode插件 Css reset 和Normalize.css

2024-04-21 10:04:15 前端知识 前端哥 418 257 我要收藏

个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • ✍HTML、CSS常用的vscode插件
    • 🍎1 HTML 标签同步重命名 – Auto Rename Tag
    • 🍎2 图片导入预览 – Image preview
    • 🍎3 好看的文件图标 – vscode-icons
  • ✍Css reset 和Normalize.css
    • 🍎1 Css reset
    • 🍎2 Normalize.css
    • 🍎3 区别
    • 🍎4 个人结论

✍HTML、CSS常用的vscode插件

完成前端基础学习,就可以开启代码补全提示。

下面来分享一些在实际工作可以增加效率的插件。

🍎1 HTML 标签同步重命名 – Auto Rename Tag

在这里插入图片描述

假如打标签的时候打错标签了,这时还需要修改开始标签和结束标签,通常 HTML 代码是非常多的,非常的不银杏,虽然有 Ctrl + D 快捷键。但是经常删除和自己同名的子级标签。

装了这个插件之后,会为当前匹配的标签产生一个黄色的下划线。当修改开始、结束标签时,另一侧的标签会自动重命名。
在这里插入图片描述

🍎2 图片导入预览 – Image preview

在这里插入图片描述

可以像 idea 一样导入图片之后可以在左侧进行图片的预览。看图:

在这里插入图片描述

🍎3 好看的文件图标 – vscode-icons

在这里插入图片描述
vscode-icons中有各式各样的文件图标可供选择,uu们可以根据自己的喜欢进行搭配,增添学习过程中的趣味性。


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • ✍HTML、CSS常用的vscode插件
    • 🍎1 HTML 标签同步重命名 – Auto Rename Tag
    • 🍎2 图片导入预览 – Image preview
    • 🍎3 好看的文件图标 – vscode-icons
  • ✍Css reset 和Normalize.css
    • 🍎1 Css reset
    • 🍎2 Normalize.css
    • 🍎3 区别
    • 🍎4 个人结论

✍Css reset 和Normalize.css

🍎1 Css reset

又叫做 CSS 重写或者 CSS 重置,用于改写HTML标签的默认样式。

有些HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,li 标签有列表标识符号等。这些默认样式在不同浏览器之间也会有差别,例如ul默认带有缩进的样式,在正下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。这必然会带来浏览器兼容问题。

因此,

在 CSS 代码中,可以使用 CSS 代码去掉这些默认样式,即重新定义标签样式,从而覆盖浏览器的CSS默认属性,即 CSS reset。

需要注意的是,在进行样式重写时,不建议使用 * 选择器进行重写,这样会降低效率,影响性能。

官网:https://meyerweb.com/eric/tools/css/reset/

🍎2 Normalize.css

只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性,相比于传统的css reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。

Css reset 是暴力的,Normalize.css是温和的

官网:http://necolas.github.io/normalize.css/

🍎3 区别

1:Normalize.css保护了有价值的默认值(更符合现代标准)

2:Normalize.css修复了浏览器的bug

3:Normalize.css不会放调试工具变得杂乱

4:Normalize.css是模块化的

5:Normalize.css有详细的文档

区别:https://jerryzou.com/posts/aboutNormalizeCss/

🍎4 个人结论

如果你开发网站是定制性比较强、页面效果复杂的情况下使用 reset.css,比如电商、后台管理等等

那么,如果你开发网站是文本内容(新闻、博客等等)为主,定制性不强,页面也不复杂则使用 Normalize.css

国内目前还是更多是采用定制性强的网站,所以个人认为在国内 reset.css 这种“暴力”思想用得更多一些的

说白了:

  • reset.css 的思想适合开发企业项目或者个人项目
  • Normalize.css 的思想适合创建 css 框架,比如bootstrp框架都是以它作为基底
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5524.html
标签
vscode
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!