css
关注
分享
扫一扫
文章平均质量分 89
Dontla
这个作者很懒，什么都没留下…
展开
-
.less代码介绍（css代码的超集）（最终需要编译成标准CSS文件，浏览器才能解析执行）lessc、Gulp
它扩展了 CSS 的功能，使其具备变量、混合（mixin）、嵌套、运算、函数等特性，从而让 CSS 更易维护、扩展和组织。Less 本质上是 CSS 的“超集”，最终需要编译成标准的 CSS 文件，浏览器才能解析执行。定义变量，存储常用值（如颜色、字体大小），方便全局复用和统一修改。将一组样式定义为“混合”，并在其他选择器中调用，实现代码复用。Less 代码需要通过编译器转换为标准 CSS。提供内置函数（如颜色调整、数学计算等），动态生成样式值。支持将子选择器嵌套在父选择器中，避免重复书写层级结构。原创 2025-05-12 22:56:31 · 510 阅读 · 0 评论 -
为什么在Webpack 5 中，直接添加new CssMinimizerPlugin()到optimization.minimizer数组而不取消注释...语法，会导致JavaScript压缩失效？
通过正确配置，你可以充分利用 Webpack 的优化能力，提升应用性能。，最终输出的 JS 文件体积会比预期大，影响性能。注意：从 Webpack 5.70.0 开始，来压缩 JavaScript 代码。是 Webpack 内置的优化器，在 Webpack 5 中，如果你。，导致 JavaScript 代码。Webpack 5 默认使用。Webpack 会保留默认的。，则需要显式保留它。原创 2025-05-12 20:42:32 · 821 阅读 · 0 评论 -
MiniCssExtractPlugin插件介绍（提取css）（将CSS提取出来，单独打包成文件，能将样式与脚本分离，优化页面加载性能）（旧版：extract-text-webpack-plugin）
MiniCssExtractPlugin是webpack生态系统中的一个重要插件，专门用于将CSS提取到单独的文件中，而不是将其打包在JavaScript文件中。该插件基于webpack v5构建，能够为每个包含CSS的JS文件创建对应的CSS文件，并支持CSS的按需加载和SourceMap。支持异步加载CSS无重复编译，性能更优更易于使用和配置专为CSS设计的功能// 插入到指定元素后})// 自定义插入函数// 将链接标签插入到指定元素之前})})原创 2025-05-10 16:04:40 · 964 阅读 · 0 评论 -
CSS Modules介绍（CSS模块、样式模块）（通过自动创建唯一类名，确保样式在组件级别上被封装，解决了全局样式冲突问题）（将CSS文件视为模块，可以被导入和使用）.module.css
CSS Modules 是一种用于模块化和局部化 CSS 的系统。它通过自动创建唯一的类名，确保样式在组件级别上被封装，从而解决了全局样式冲突的问题。CSS Modules 将 CSS 文件视为模块，使得样式可以像 JavaScript 一样被导入和使用。CSS Modules 提供了一种平衡性能与开发体验的 CSS 模块化解决方案。它保留了传统 CSS 的熟悉语法，同时解决了全局命名冲突问题。对于中大型项目和组件库开发，CSS Modules 是一个值得考虑的技术选择。原创 2025-05-09 23:18:34 · 916 阅读 · 0 评论 -
何时需要import css文件？怎么知道需要导入哪些css文件？为什么webpack不提示CSS导入？（导入css导入规则、css导入规范）
这种模块化的CSS导入方式可能一开始不习惯，但它使CSS的管理更加清晰，也是现代前端开发的主流方式。可是即使我不导入它也没有提示，也没有报错信息，但是我确实是需要导入的，因为我需要打包，但是它不提示我要把哪些css文件导入到哪些css，这不是很奇怪吗？在前端工程中使用webpack打包CSS时，确实需要在JavaScript文件中导入CSS文件，这可能会让人感到困惑。你提出了一个很好的问题！直接导入 CSS 文件。在 JavaScript 中，是否需要导入 CSS 文件取决于具体的使用场景和项目需求。原创 2025-05-09 22:32:38 · 1085 阅读 · 0 评论 -
css样式优先级规则（css优先级）（特异性值specificity、避免!important声明、过度特异性、特异性战争、BEM命名约定、原子化CSS框架、chrome调试优先级问题）
掌握CSS优先级规则是前端开发的基础技能。遵循适当的命名约定、保持特异性较低、避免过度嵌套和不必要的!important，能够构建出更易维护和扩展的样式系统。现代CSS架构如BEM、CSS Modules和原子化CSS框架都能有效减轻优先级冲突问题。原创 2025-05-07 22:30:57 · 653 阅读 · 0 评论 -
Sass介绍（CSS预处理器，为CSS提供了编程能力，是目前最流行的CSS扩展语言之一）（Syntactically Awesome Style Sheets）SaaS
创建可重用的函数进行值计算。原创 2025-03-20 14:45:56 · 870 阅读 · 0 评论 -
【css教程】web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）
https://www.bilibili.com/video/BV14J4114768?p=390代码：https://gitee.com/xiaoqiang001/html_css_material浏览器现状手机屏幕现状常见移动端屏幕尺寸移动端调试方法视口 viewport（布局视口 layout viewport 视觉视口 visual viewport 理想视口 ideal viewport）meta 视口标签<!DOCTYPE html><原创 2021-04-27 16:57:50 · 577 阅读 · 2 评论 -
【css教程】web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快捷导航shortcut制作header制作logo制作搜索模块制作导航制作footer 底部制作main主体模块制作推荐模块制作楼层区floor制作tab栏切换布局需求列表页制作列表页header和nav修改列表页主题sk-container注册页面的制作注册页类名命名注册页布局web服务器本地服务器远程服务器将自己网站上传到远程服务器原创 2021-04-02 10:46:35 · 427 阅读 · 0 评论 -
hover如何改变子元素或其他同级元素？（用不了怎么回事？）
背景鼠标移到A，使B、C、D出现动画，纯用css。此时此刻，需要使用hoverhover的一般用法hover的最原始用法是：a:hover{ background-color:yellow;}鼠标移动到 a标签上，改变a的背景颜色。初学的时候都是这么学习的，导致很多人以为只有a标签才有hover。错了，hover是针对所有元素的。hover的进阶用法鼠标指在A元素上，使A元素的子元素B改变了样式。代码如下：<div class="face"> <!-- 嘴巴转载 2021-04-01 11:27:21 · 3502 阅读 · 0 评论 -
【css教程】web前端入门学习 css（7）精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化
文章目录精灵图为什么需要精灵图？精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加css三角（用边框border制作）案例：京东三角css用户界面样式更改用户鼠标样式cursor取消表单轮廓线input{outline:none;} textarea{outline:none;}取消文本框拖拽textarea{resize:none;}vertical-align垂直对齐属性（垂直居中：vertical-align:middle;）解决图片底部默认空白缝隙问.原创 2021-03-29 10:13:38 · 404 阅读 · 0 评论 -
【css教程】web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录什么是定位？定位组成（定位模式+边偏移）定位模式static relative absolute fixed边偏移定位模式——静态定位static（平时用不到）就是标准流定位模式——相对定位relative（重要）定位模式——绝对定位absolute绝对定位（父级无定位）绝对定位（父级或父级的父级有定位【相对定位、绝对定位、固定定位】）绝对定位脱离标准流，不再占有之前位置子绝父相（子元素用绝对定位，父元素用相对定位）定位模式——固定定位fixed（不随页面滚动移动）固定定位（以版心位置定位）定位模式原创 2021-03-27 19:01:34 · 888 阅读 · 0 评论 -
margin和padding分别适合什么场景使用？
margin是元素边框外部的空白区域，它可以影响元素周围的元素。padding是元素边框内部的空白区域，它可以影响元素内部的内容。转载 2021-03-21 23:07:14 · 909 阅读 · 0 评论 -
【css教程】web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流（普通流、文档流）浮动（为什么需要浮动？）传统网页布局的三种方式标准流（普通流、文档流）浮动（为什么需要浮动？）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-03-19 15:58:33 · 1205 阅读 · 0 评论 -
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图：因为把当前的标签页缩放显示了，所以浏览器会渲染出非整数的盒子尺寸。原创 2021-03-18 17:19:53 · 2237 阅读 · 0 评论 -
【css教程】web前端入门学习 css（4）（盒子模型）
文章目录盒子模型（box model）盒子模型的组成边框 border边框的简写，边框的分开写法（分别写上下左右边框）利用边框的层叠性简化书写代码给表格table和单元格td和表头th加边框https://www.bilibili.com/video/BV1pE411q7FU?p=135&spm_id_from=pageDriver盒子模型（box model）盒子模型的组成边框 border<!DOCTYPE html><html lang="en"&g原创 2021-03-16 14:40:14 · 1281 阅读 · 0 评论 -
【css教程】web前端入门学习 css（8）新增语义化标签、video/audio、input类型、表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276视频video标签（支持格式、语法、常见属性）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view原创 2021-03-16 14:38:10 · 627 阅读 · 0 评论 -
【css教程】web前端入门学习 css（3）（背景相关）
文章目录css背景颜色（backgroud-color、transparent）css背景图片 background-image背景平铺 background-repeat背景图片位置 background-positioncss背景颜色（backgroud-color、transparent）例：css背景图片 background-image例：<!doctype html><html lang="en"><head> <meta原创 2021-03-15 17:19:35 · 2022 阅读 · 0 评论 -
【css教程】web前端入门学习 css（2）
https://www.bilibili.com/video/BV1pE411q7FU?p=85&spm_id_from=pageDriver文章目录css引入方式总结综合案例：新闻页面chrome调试工具的使用Emmet语法（快速生成class、id等）Emmet语法（快速生成css样式）vscode快速格式化文档（alt+shift+f）如何设置保存时自动格式化代码？复合选择器（更方便选择元素进行修改）后代选择器（重要）（后级包含的全选）子选择器（亲儿子选择器）（只选择后一级）（重要）并集选择原创 2021-03-14 17:51:27 · 330 阅读 · 0 评论 -
【css教程】web前端入门学习 css（1）（类选择器、id选择器、css引入方式：行内式、嵌入式、链接式）
黑马程序员Web前端入门教程，零基础前端视频教程pink老师_html5+css3文章目录原创 2021-03-09 17:32:46 · 278 阅读 · 0 评论