css
关注
分享
扫一扫
文章平均质量分 90
Dontla
Life is short, I use AI.
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Tailwind CSS类名速记表（Tailwind类名、Tailwind标签、Tailwind对照表）Tailwind游乐场、Tailwind文档、Tailwind样式
Tailwind CSS 就像一套“前端速记语言”：它不需要死记硬背，只要理解逻辑、看几次例子，就能自然上手。当你能说出：“我想要一个自适应三列卡片布局，白底圆角，带阴影，悬停放大。AI、同事、甚至设计师，都会立刻懂你在说什么。原创 2025-10-06 20:56:02 · 1738 阅读 · 0 评论 -
PostCSS介绍（一个用JavaScript工具和插件生态系统来转换CSS代码的工具）CSS后处理器，用于支持Tailwind CSS
执行完（Tailwind的配置文件）（PostCSS的配置文件，由-p选项生成）原创 2025-10-04 21:09:18 · 1009 阅读 · 0 评论 -
Tailwind CSS介绍（现代CSS框架，与传统CSS框架Bootstrap对比）Tailwind介绍
Tailwind CSS是由Adam Wathan和Jonathan Reinink于2017年创建，2018年正式发布的开源CSS框架。它采用实用优先（Utility-First）的设计理念，通过预定义的大量细粒度实用类（utility classes）直接应用于HTML元素，实现高效、灵活的样式设计。与传统CSS框架如Bootstrap不同，Tailwind不提供预定义的UI组件，而是专注于提供基础的原子类，让开发者自由组合构建独特的界面。原创 2025-10-04 14:20:45 · 1114 阅读 · 0 评论 -
Tailwind响应式前缀（Responsive Prefixes）（断点前缀Breakpoint Prefixes）介绍（tailwind.config.js）响应式布局
Tailwind CSS的响应式设计基于"断点前缀"（Breakpoint Prefixes）机制。通过在类名前添加特定的断点前缀，我们可以为不同屏幕尺寸定义不同的样式。这些前缀本质上是响应式断点的别名，让开发者能够以极简的方式实现响应式设计。Tailwind的响应式系统非常灵活，我们可以通过修改theme: {screens: {// 自定义断点自定义后，就可以使用新的断点前缀：-- 在平板设备上字体变大，在桌面设备上更大 --> </ div >原创 2025-10-03 22:27:43 · 869 阅读 · 0 评论 -
Tailwind预定义样式类（框架内置）（文本样式类、布局与间距类（弹性布局、网格布局）、颜色类、响应式设计类）任意值（Arbitrary Values）功能
Tailwind的预定义样式类是框架内置的、可直接使用的CSS类。每个类对应一个具体的CSS属性和值，例如对应对应。这些类遵循特定的命名规则，使开发者能够快速理解其作用。-- 文本对齐 --> < p class = " text-left " > 左对齐 </ p > < p class = " text-center " > 居中对齐 </ p > < p class = " text-right " > 右对齐 </ p > <!原创 2025-10-01 23:08:18 · 997 阅读 · 0 评论 -
Tailwind响应式设计核心原理（前缀自动适配，通过识别带断点前缀的类自动生成媒体查询）构建时CSS生成、JIT编译器（Just-In-Time）、Tailwind媒体查询、Tailwind断点
Tailwind CSS通过构建时的JIT编译，将HTML中带断点前缀的类名转换为对应的媒体查询CSS规则。这种机制让开发者能够直接在HTML中描述响应式行为，而无需编写复杂的媒体查询，使响应式设计变得简单直观。这就是为什么只需在类名前加个这样的前缀，Tailwind就能自动实现不同屏幕尺寸的适配——因为编译器在构建时已经为这些断点生成了对应的CSS规则。原创 2025-10-01 21:59:06 · 991 阅读 · 0 评论 -
CSS断点（Breakpoints）介绍（响应式设计中用于定义不同屏幕尺寸下应用不同样式的特定点）Tailwind断点
断点是响应式设计中用于定义不同屏幕尺寸下应用不同样式的特定点。当屏幕尺寸达到某个预设值时，浏览器会应用对应的CSS规则，使页面布局能够自适应不同设备。断点是构建响应式网页的基石，正确设置断点能让我们的设计在各种设备上都能提供出色的用户体验。记住，断点不是为了适应特定设备，而是为了适应内容的呈现需求。通过遵循移动优先策略、关注内容可读性、合理设置断点数量，我们可以创建出真正响应式、用户友好的网站。在实际项目中，建议先确定核心断点，然后根据设计需求逐步细化，避免过度设计。原创 2025-10-01 21:14:48 · 1311 阅读 · 0 评论 -
CSS媒体查询（Media Queries）介绍（允许根据设备特性（屏幕宽度、高度、方向、分辨率等）动态应用不同的CSS样式）CSS响应式设计、@media、媒体类型、媒体特性、CSS断点
媒体查询是CSS3中的一项重要功能，允许我们根据设备特性（如屏幕宽度、高度、方向、分辨率等）动态应用不同的CSS样式。通过媒体查询，我们可以实现响应式设计，确保网站在不同设备上都能提供最佳的用户体验。CSS媒体查询是现代网页设计的核心技术，它让我们的网站能够智能地适应各种设备和屏幕尺寸。通过合理使用媒体查询，我们可以创建出既美观又高性能的响应式网站，为用户提供一致且优质的浏览体验。原创 2025-09-30 22:33:10 · 1188 阅读 · 0 评论 -
.less代码介绍（css代码的超集）（最终需要编译成标准CSS文件，浏览器才能解析执行）lessc、Gulp
它扩展了 CSS 的功能，使其具备变量、混合（mixin）、嵌套、运算、函数等特性，从而让 CSS 更易维护、扩展和组织。Less 本质上是 CSS 的“超集”，最终需要编译成标准的 CSS 文件，浏览器才能解析执行。定义变量，存储常用值（如颜色、字体大小），方便全局复用和统一修改。将一组样式定义为“混合”，并在其他选择器中调用，实现代码复用。Less 代码需要通过编译器转换为标准 CSS。提供内置函数（如颜色调整、数学计算等），动态生成样式值。支持将子选择器嵌套在父选择器中，避免重复书写层级结构。原创 2025-05-12 22:56:31 · 677 阅读 · 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 · 1087 阅读 · 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 · 1811 阅读 · 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 · 2670 阅读 · 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 · 1494 阅读 · 0 评论 -
css样式优先级规则（css优先级）（特异性值specificity、避免!important声明、过度特异性、特异性战争、BEM命名约定、原子化CSS框架、chrome调试优先级问题）
掌握CSS优先级规则是前端开发的基础技能。遵循适当的命名约定、保持特异性较低、避免过度嵌套和不必要的!important，能够构建出更易维护和扩展的样式系统。现代CSS架构如BEM、CSS Modules和原子化CSS框架都能有效减轻优先级冲突问题。原创 2025-05-07 22:30:57 · 1060 阅读 · 0 评论 -
Sass介绍（CSS预处理器，为CSS提供了编程能力，是目前最流行的CSS扩展语言之一）（Syntactically Awesome Style Sheets）SaaS
创建可重用的函数进行值计算。原创 2025-03-20 14:45:56 · 1279 阅读 · 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 · 820 阅读 · 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 · 618 阅读 · 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 · 3735 阅读 · 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 · 641 阅读 · 0 评论 -
【css教程】web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录什么是定位？定位组成（定位模式+边偏移）定位模式static relative absolute fixed边偏移定位模式——静态定位static（平时用不到）就是标准流定位模式——相对定位relative（重要）定位模式——绝对定位absolute绝对定位（父级无定位）绝对定位（父级或父级的父级有定位【相对定位、绝对定位、固定定位】）绝对定位脱离标准流，不再占有之前位置子绝父相（子元素用绝对定位，父元素用相对定位）定位模式——固定定位fixed（不随页面滚动移动）固定定位（以版心位置定位）定位模式原创 2021-03-27 19:01:34 · 1181 阅读 · 0 评论 -
margin和padding分别适合什么场景使用？
margin是元素边框外部的空白区域，它可以影响元素周围的元素。padding是元素边框内部的空白区域，它可以影响元素内部的内容。转载 2021-03-21 23:07:14 · 1157 阅读 · 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 · 1495 阅读 · 0 评论 -
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图：因为把当前的标签页缩放显示了，所以浏览器会渲染出非整数的盒子尺寸。原创 2021-03-18 17:19:53 · 2681 阅读 · 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 · 1484 阅读 · 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 · 863 阅读 · 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 · 2236 阅读 · 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 · 612 阅读 · 0 评论 -
【css教程】web前端入门学习 css（1）（类选择器、id选择器、css引入方式：行内式、嵌入式、链接式）
黑马程序员Web前端入门教程，零基础前端视频教程pink老师_html5+css3文章目录原创 2021-03-09 17:32:46 · 459 阅读 · 0 评论