left: 0; right: 0; top: 0; height: 2px; } 最近在看一篇文章，网站中有一个图标，鼠标划上去会出现一个彩色的小边...效果如下： www.w3h5.com 查看代码发现标签上有一个:hover，鼠标划入时添加一个:after伪类，给这个伪类设置背景渐变、绝对定位和高度，实现了这种“炫酷”的效果。...html部分代码： www.w3h5.com 样式部分代码： code{ display: inline-block; ...声明：本文由w3h5原创，转载请注明出处：《利用css中的伪类 给元素设置特殊样式效果》 https://www.w3h5.com/post/51.html
本文从解析伪类与伪元素的含义出发，区分这两者的区别，并且列出大部分伪类与伪元素的具体用法，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。...直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 伪元素用于创建一些不在文档树中的元素，并为其添加样式。... CSS: .first { font-size: 5em; } 如果不创建一个元素，我们可以通过设置的:first-letter伪元素来为其添加样式。...这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。
浮动是 Html CSS 布局的关键知识点，不识浮动不算懂 CSS，真正了解了浮动，其它概念迎刃而解。 先看一个问题，在 Html 元素的渲染解析中，如何实现图片在文章中靠左显示？...但如果仅是实现左对齐布局，有另外一个 CSS 样式同样可以达到：display:inline-block。inline-block 的意义是子元素以块元素方式，从左向右依次排列。...除了可以打包 JS 文件，webpack 还可以打包 css 文件、压缩 Html/JS/CSS 文件内容等。这些功能也是通过在配置文件中添加描述信息实现的。...使用 webpack，可以将多张图片自动合并成精灵集，并输出一份匹配的 sass 样式文件。webpack 减去了设计师手动合图、排图、编写相应 CSS 样式的麻烦。...除了 404 页面，与此同类需要注意的优化，是 img 标签的 src 属性为空，这也会造成浏览器发送空请求至服务器。也可以使用同样的检测工具，检测页面中哪些 src 属性没有值。
「配置样式加载器」：在Webpack配置文件中，我们可以配置不同类型的样式加载器，例如处理CSS、Sass、Less等。...「配置样式」：Vite 使用默认的样式预处理器，例如 CSS、Sass、Less，无需额外的配置。 「在应用中引入样式」：在我们的应用代码中，我们可以直接引入样式文件，Vite 会自动处理。...文件中实际使用的类名，从构建后的CSS中删除未使用的样式。...它可以检测哪些CSS类名在项目的JavaScript文件中被实际使用，以及哪些未被使用。 「Tree Shaking」：这是一种用于剔除不使用的代码的优化技术，它会在打包过程中移除不会被执行的代码。...在CSS中，这意味着Webpack 5会识别哪些CSS样式类在JavaScript代码中没有被引用，然后将这些未使用的样式从构建后的CSS中删除。
（本篇中的参数配置及使用方式均基于webpack4.0版本） ? 一....新的解决方案：预编译语言 + 构建工具 + BEM + ACSS全局样式+CSSModule组件样式+ POSTCSS 预编译语言的使用基本不变，但现代化开发中已经不再需要通过预定义函数来解决单位转换或是兼容性的问题...使用CSS-Modules 项目地址：CSS Modules开源地址 CSS Module在CSS中使用类选择器，其基本原理是将CSS代码中的样式名替换为哈希值，并建立一个json对照表，在js文件中对于属性名选择器的使用均被替换为哈希字符串...在webpack中使用CSS Modules功能非常简单，只需要在css-loader的配置参数中设置:{modules:true}即可激活模块化功能。...图解Css-Process-Chain 从上述配置中可以看出，使用预编译器编写的样式文件需要经过一系列loader和plugin才能得到最终的目标文件，它之所以很抽象是因为中间的处理环节对开发者来说是黑箱操作
然后打包输出不同的样式，即： CSS预处理直接生成多套主题样式 利用Less，stylus 或 sass 的变量代替颜色值 配置多个主题颜色配置 利用grunt/gulp/webpack等工具输出多套主题样式...页面加载后，根据用户需求加载不同的样式列表 推荐阅读《webpack 换肤功能多主题/配色样式打包解决方案》，配置文件： https://github.com/hiyangguo/webpack-mutiple-theme-bundle-css-demo...中每个文件或模块都是有效的 JS 模块，因此我们还需要 css-loader 将CSS样式文件转换为变成 JS 模块。...监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。...所以我们需要针对不兼容的浏览器做一些兜底处理，这里我们可以在 webpack 等构建工具中借助 post-css 的 postcss-css-variables (https://www.npmjs.com
css in js时，往往是将样式加入到元素的style属性中，会大量增加元素的内联样式，并且可能会有大量重复，不易阅读最终的页面代码 「css module」 非常有趣和好用的css模块化方案，编写简单...等）搭建工程 构建工具允许将css样式切分为更加精细的模块 同JS的变量一样，每个css模块文件中难以出现冲突的类名，冲突的类名往往发生在不同的css模块文件中 只需要保证构建工具在合并样式代码后不会出现类名冲突即可...如何应用样式: css module带来了一个新的问题：源代码的类名和最终生成的类名是不一样的，而开发者只知道自己写的源代码中的类名，并不知道最终的类名是什么，那如何应用类名到元素上呢？...js代码是经过我简化后的，不代表真实的css-loader的转换后代码，css-loader转换后的代码会有些复杂，同时会导出更多的信息，但核心思想不变。...style-loader使用的方式是用一段js代码，将样式加入到style元素中。
首先我们编写less样式文件，当然，对于该文件我们不赘述实现。.../index.module.less'; 针对每个元素配置其less样式，采用styles.xxx方式使用 return ( // 包裹 - +...modules: true + } + }, 'less-loader' 对于该处的配置，详细可以查看关于css-loader的文档webpack-contrib.../src/external.d.ts" ] } 其中，"noEmit": true表明由ts进行类型检查，但是不编译文件。include中的....svgr/webpack（Webpack - SVGR (react-svgr.com)） 只需要三个步骤的配置： 引入@svgr/webpack yarn add -D @svgr/webpack 配置
splitChunk 的相关配置参数 建议将公共使用的第三方类库显式地配置为公共的部分，而不是 webpack 自己去判断处理 chunks: 表示显示块的范围，有三个可选值：initial(初始块)...的配置 vendors 缓存组的配置可以检测第三方模块是否在 node_modules 中，如果存在则该 splitChunks 生效，将会分离到 vendors~......这样的文件中 配置 filename 则会打包成 [filename] 命名的文件中 runtimeChunk 的作用 这个 runtimeChunk 实际上就是链接业务逻辑和第三方类库之间的关系的 manifest...发生了改变） // v4版本的 webpack 不用配置，但最好也提取出来 optimization: { runtimeChunk: { name: 'runtime' } } reuseExistingChunk...多个组件共用一部分样式，如果分离开来，第二个页面就有了 CSS 文件的缓存，访问速度自然会加快 MiniCssExtractPlugin 新版本的 webpack 使用这个插件 注意，在引入样式文件 import
什么是unocss unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 当然，原子样式也有很多选择，最著名的就是 Tailwind。...但由于Tailwind 会生成大量样式定义，会导致全量的 CSS 文件往往体积会多至数 MB，从而有性能上有一些不足 ❝扩展：什么是原子化 原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能...它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。 它可以让你的CSS更灵活，因为它支持自定义工具类，变体，指令和图标。 它可以让你的CSS更易于维护，因为它避免了样式冲突和重复代码。...export default defineConfig({ plugins: [ UnoCSS(), ], }) webpack5中配置 // webpack.config.js const...: { realContentHash: true, }, } webopack4中配置 // webpack.config.js const UnoCSS = require('@unocss
至于页面跳转时的过渡动画，有些UI库给出了一些过渡样式，比如touchstone。但该库已不再维护，文档不佳，且与新版本的react-router配合使用有不兼容情况。...目前解决方案中应用最广泛的是css-modules，即在webpack配置中开启module选项，使用styles对象来写样式。 解决的原理是将css类名在打包后编译成哈希字符串，保持其唯一性。...但当想要使用全局样式时要再配置，稍显繁杂，且它类名编写的方式为对象的方式，需要整体修改，另外在使用它时，发现不支持-横线的类命名方式，支持下划线方式，推荐驼峰式，而我们之前html中的样式类名大多是横线命名...，这意味着原html和css中的类名都要对应修改，考虑到样式类名非常多，这一方式舍弃。...Webpack css-loader 有个属性 :local 加上之后类会变成局部作用域，即webpack会对该类型的类进行自动哈希转码处理，但显然类名一个个加:local 是有些呆板的工作，于是想到可以利用
举个具体的例子： 如下是一个简单的CSS文件。其中，.base类名不需要是工程中唯一的，因为它将不会是真正被解析的类名。它可以看成是在JavaScript模块中使用的类在样式表中的别名。...但是类名并不要求一定要长的好看对不对？只要可以将样式正确的应用于元素就可以了嘛。而CSS模块化方法完成的非常好，所以我觉得，这不是一个问题。...但这是因为模块将CSS样式和组件相绑定，从而不会发生全局样式的冲突。这其实是一件好事，我相信你也会同意的对不对。 另一方面，要定义全局样式也是可以的，只要使用:global()就好了。...在webpack.config.js中，加上如下配置，使得webpack将CSS文件作为CSS模块来看待： { test: /\.css$/, loader: 'style-loader!...css-loader?modules' } 这时，它将把样式注入到页面中的``元素中。
PostCSS 本身只是将 CSS 解析成 AST，需要依赖其强大的插件系统才能实现丰富的功能，配置写法有三种： 项目的根目录下的配置文件 postcss.config.js webpack 配置文件中对应...PreCSS 可以写类 sass 和 cssnext 语法的 CSS。 cssnano 根据 CSS 语法解析结果智能压缩代码，比如合并一些类写法、缩短颜色值等一些常见的值。...} } 注意： 不管作为独立的 module.rule 配置，还是放到 babel 的 rule 中，都要保证先通过 eslint-loader 检测代码风格 TypeScript 需要用 tslint-loader...file-loader：根据配置项复制使用到的资源（不局限于图片）到构建后的文件夹，并更改对应的链接 url-loader：包含 file-loader 全部功能，并能根据配置转换为 Base64 方式引入.../src/index.html' }) ] }; 5.2 多入口页面配置 对于多入口的 html 页面可以通过插件的多次实例化来实现，但仅配置插件，引入的入口 js 文件还是同样的 main.js
标签属性 class属性：用于定义元素的类名 id属性：用于指定元素的唯一id，该属性的值在整个html文档中具有唯一性 style属性：用于指定元素的行内样式，使用该属性后将会覆盖任何全局的样式设定...css代码通常存放在标签内 css 样式由选择符和声明组成，而声明又由属性和值组成 选择符{属性:值} 选择符：又称选择器，指明网页中要应用样式规则的元素 CSS 放置位置...行内样式，不建议使用 内联式样式表 外联样式表 CSS的继承 CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。...，一级子元素原则器只选择第一级子元素，不会再向下查找元素 id选择器：通过id查找页面中唯一的标签 class选择器:通过特定的class（类）来查找页面中对应的标签，以 .class名称 伪类选择器...css样式，为了界面美观，很多元素自带margin、padding等样式，但这些样式在不同浏览器解析的值都不一样，需要将css样式重置，保证在不同浏览器显示一致。
对于css命名的规范，尽量使用class选择器进行样式的定义，类命名时取父元素的class名作为前缀，使用-符号进行连接。类名与样式之间以空格进行分割。...优化前端效果，可以删除多余容器元素，让代码层次少，避免使用table进行页面的布局，换成用div+css的样式布局。 css代码优化，在各个浏览器中，相同元素解析的结果不同，就需要手动重置一些样式。...css样式选择器的优先级 对于css样式选择器，优先级高的会覆盖优先级低的。 第一，id选择器的权重为100，第二，类选择器的权重为10，第三，标签选择器的权重为1。...打包工具，现在流行的很多前端打包工具都有支持css sprite的集成，如 webpack中只要安装webpack-spritesmith依赖，然后在配置文件中引用依赖var SpritesmithPlugin...方法说明 clear从Map中移除所有元素 delete从Map中移除指定的元素 forEach对Map中的每个元素执行指定操作 get返回Map中的指定元素 has如果Map包含指定元素，则返回 true
的渲染规则可以参看这篇文章探究 CSS 解析原理 会带来代码的冗余 由于CSS不能使用类似于js的模块化的功能，可能你在一个css文件中写了一个公共的样式类，而你在另外一个css也需要这样一个样式，这时候...CSS Modules 解决了什么问题 全局命名冲突，因为CSS Modules只关心组件本身，只要保证组件本身命名不冲突，就不会有这样的问题，一个组件被编译之后的类名可能是这样的： /* App.css...作为webpack配置文件。...，因此确保了类名的唯一性，我们再看看浏览器中inspector中的样式应用，如下： ?...就可以发现.container类没有被转换 定义哈希类名 CSS Modules默认是以[hash:base64]来进行类名转换的，可辨识度不高，因此我们需要自定义 开启自定义，可以使用一个配置参数localIdentName
在 webpack 的生产配置文件中的 plugins 字段中添加一个插件，使用内置的方法类 ContextReplacementPlugin 过滤掉 Moment.js 中那些用不到的语言包： 解决方案采自...后来改配置文件的时候发现这个是 webpack 的配置选项之一：路径别名。 ...ヾ(ﾟ∀ﾟゞ) CSS 作用域与模块 组件内样式 通常，组件中 标签里的样式是全局的，在使用第三方 UI 库（如：Element）时，全局样式很可能影响 UI 库的样式...复用程度较高的样式不建议这样使用。 另，在组件内样式中应避免使用元素选择器，原因在于元素选择器与属性选择器组合时，性能会大大降低。...这是由于 vue-cli 默认配置的 webpack 是以站点根目录引用的文件，然而有时候我们可能需要把项目部署到子目录中。
成本 更好的实现快速迭代 便于代码维护 CSS 模块化的解决方案有很多，但主要有两类。...另一类是依旧使用 CSS，但使用 JS 来管理样式依赖，代表是 CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力，API 简洁到几乎零学习成本。...结合 Webpack 的 css-loader 后，就可以在 CSS 中定义样式，在 JS 中导入。 启用 CSS Modules // webpack.config.js css?...如何与全局样式共存 前端项目不可避免会引入 normalize.css 或其它一类全局 css 文件。使用 Webpack 可以让全局样式和 CSS Modules 的局部样式和谐共存。...下面是我们项目中使用的 webpack 部分配置代码： module: { loaders: [{ test: /\.jsx?
因为 webpack 配置繁琐, 阻止一批想用 vue 但是不会 webpack 的开发人员,所以作者直接将所有 vue 项目中用到的配置全部帮你写好了,这样,就不需要开发人员再去配置基础 webpack...template (模板结构) script 组件的代码逻辑 style 样式 注意点 : 单文件组件,无法直接在浏览器中使用,必须经过 webpack 这种打包工具,处理后,才能在浏览器中使用...推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因为国情问题经常装不上 IV. 语法检测选择 选择EsLint + Prettier V....什么时候进行检测 保存时进行检测（推荐） - 提交时检测（我翻译的意思，不知道准不准确） VI....;注意：这里的样式以及views和components组件的样式都是全局样式 //如果不通过单独添加样式名设置样式，则会作用到所有相应的标签上 //可以通过添加scoped声明此样式只此文件用 <style
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
