css_前端博客-专业IT技术发表平台

推荐付费专栏 VIP文章

【Web前端开发】CSS基础 CSS基础

阅读 1.1k

60赞

Sass (Scss) 与 Less 的区别与选择在前端开发中，CSS预处理器如Sass（Syntactically Awesome Stylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使CSS的开发过程更加高效和灵活。Sass最初是使用缩进语法（Indented Syntax），也被称为Sass语法，但随后Sass团队引入了SCSS（Sassy CSS），它使用类似于CSS的语法，但增加了Sass的特性。相比之下，Less的语法更接近CSS，学习曲线较Sass的缩进语法更为平缓。

阅读 781

81赞

CSS 动画效果（5种） - 附完整示例 CSS动画（CSS Animations）可以使网页元素呈现平滑的动态效果。通过使用@keyframes规则和CSS的animation属性，你可以定义复杂的动画效果。

阅读 4.6k

7赞

为什么现代CSS应该选择OKLCH：从颜色科学到设计系统革新在数字界面中，颜色不仅是美学的载体，更是信息传递的重要工具。CSS Color Level 4 标准引入了 OKLCH 颜色空间, 提供感知均匀性（颜色差异与实际视觉感受一致），解决传统HSL/HSV在调整颜色时的不自然问题。文本帮助你快速掌握OKLCH的核心概念和应用逻辑。重点是理解其感知均匀性和与HSL的对比优势，这能帮助你在设计或代码中更科学地使用颜色。

阅读 1.2k

12赞

一个天蝎座白勺程序猿

Python爬虫（4）CSS核心机制：全面解析选择器分类、用法与实战应用 CSS（层叠样式表）是网页设计的核心语言，负责将HTML元素转化为视觉友好的界面。而‌选择器（Selector）‌ 是CSS的基石，决定了样式规则的应用范围与优先级。无论是调整字体颜色、布局响应式页面，还是实现复杂动画，都需要精准定位目标元素。然而，许多开发者对选择器的分类、优先级及性能优化缺乏系统认知，导致代码冗余、样式冲突等问题。本文从基础语法到高阶技巧，深入剖析选择器的核心机制，并通过实战案例助你构建高效、可维护的CSS代码体系。

阅读 2.4k

46赞

CSS：换行与不换行 CSS：换行与不换行

阅读 1.6k

10赞

【CSS】：盒模型【CSS】：盒模型的介绍

阅读 1.9k

99赞

珠峰下的沙砾

Vue3 里 CSS 深度作用选择器 :deep() 语法意思:deep()让你在 scoped 样式中穿透作用域，选到子组件或内部元素。

阅读 890

4赞

程序猿代码之路

HTML和CSS网页制作成品 HTML（超文本标记语言）是用于创建网页内容的标准标记语言。它使用一系列标签来定义网页的结构，如标题、段落、链接等。CSS（层叠样式表）是一种样式表语言，用于描述HTML文档的呈现方式。它可以控制网页的布局、颜色、字体等外观属性。JavaScript是一种客户端脚本语言，用于增加网页的交互性。它可以响应用户的操作，如点击按钮或提交表单。本文介绍了使用HTML和CSS制作网页的基本知识和技巧，包括HTML的结构、CSS的样式设置、网页布局和美化方法，以及如何增强网页的交互性。

阅读 6.1k

30赞

白菜不太菜

CSS 中的 ::before 和 ::after 伪元素本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；

阅读 1.3w

30赞

飞翔的袋鼠弟

美化和定制滚动条：CSS滚动条样式全攻略本文还有配套的精品资源，点击获取简介：文章介绍了在网页设计中如何通过CSS定制和美化默认的浏览器滚动条，以提升网站视觉效果和用户体验。通过使用CSS的滚动条属性、伪元素选择器以及考虑响应式设计，开发者可以创建符合网页风格的滚动条样式。文章还提供了示例代码，适用于基于WebKit的浏览器，而对其他浏览器的兼容性则可能需要额外的工具或前缀。 1. CSS滚动条属性使...

阅读 4.9k

32赞

智能编程，一触即发：使用AIGC优化CSS——提升前端开发效率与质量利用关键帧创建动画使用网格和Flexbox等布局技巧对表单元素进行样式化，包括单选按钮嵌入字体以及与排版相关的样式利用伪元素和媒体查询进行条件样式化Martine Dowden是一位作家、演讲者和能力卓越的首席技术官。Michael Gearon是一位用户体验设计师和前端开发者，曾与许多知名品牌合作过。本书通过12个项目逐步引导设计师和开发者学习CSS。

阅读 1.6w

99赞

图灵的六月

HTML&CSS&JS html, 前端, CSS, JvaScript

阅读 3.4k

132赞

深入理解CSS：为网页添加样式的艺术本文系统介绍了CSS的核心概念与应用方法。首先解析CSS规则结构，包括选择器和声明块的基本组成。重点讲解三种主要选择器类型：元素选择器、ID选择器和最常用的类选择器，分析各自特点和适用场景。详细介绍CSS代码的三种书写位置：内部样式表、内联样式和推荐的外部样式表，对比其优缺点。最后提出最佳实践建议，强调类选择器的优先使用、外部样式表的重要性以及代码组织规范。全文旨在帮助开发者掌握CSS基础，建立高效、可维护的样式编写方法。

阅读 955

29赞

前端高频面试题——CSS 如若设置为百分比，则代表的是以父元素宽度为基准，根据这个原理，可设置长宽比。css变量减少样式重复定义，比如同一个颜色值要在多个地方重复使用，以前通过less和sass预处理做到，现在css变量也可以做到，方便维护，提高可读性。会对当前组件(scope)下所有元素生成唯一的属性或类名，对所有 CSS 规则将携带唯一属性实现作用域的命名保护。BEM 有一个缺点，就是有些太长，可适当简化，只包裹该页面组件的根类名，但有可能增加样式冲突的风险。题目：css如何实现左侧固定300px，右侧自适应的布局？

阅读 1.1k

37赞

来福的常威呀

15 个惊艳的 CSS 动画案例速查表，助你提升前端技能！在CSS中，animation 属性是实现动画效果的核心，它允许你通过单个属性值来定义动画的所有方面。: 动画速度曲线 (例如：linear, ease, ease-in, ease-out, ease-in-out, 或 cubic-bezier 函数)。: 动画播放方向 (例如：normal, reverse, alternate, alternate-reverse)。: 动画延迟时间 (例如：1s 或 1000ms)，动画开始前的等待时间。: 动画持续时间 (例如：2s 或 2000ms)。

阅读 2.1k

44赞

在逃小屁王

能用CSS就不考虑JS系列之——选中效果的实现本文章带领大家用CSS代替JS实现选中效果，使用这种技巧能实现的效果能远超你的想象，快来一起学习！

阅读 1.3k

18赞

一颗不甘坠落的流星

【CSS】设置滚动条样式 :-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll;的元素的滚动条样式，如果没有设置 overflow:scroll;，元素的滚动条将不会显示。在CSS中，可以使用 ::-webkit-scrollbar 和相关伪元素来为滚动条设置样式，但请注意这些伪元素是非标准的，主要用于WebKit内核浏览器（如Chrome、Safari）。对于Firefox等其他浏览器，可以使用标准的CSS滚动条样式属性。

阅读 1.3k

10赞

椒盐大肥猫

uniapp使用scss mixin抽离css常用的公共样式【代码】uniapp使用scss mixin抽离css常用的公共样式。

阅读 928

3赞

内容占位符：Kinetic Loader HTML+CSS 使用CSS制作三角形原理使用css制作三角形原理、::before ::after 介绍、@keyframes 的使用、animation属性

阅读 1.2k

35赞

作者推荐

web_Hsir: 前端开发攻城狮

关注

艾恩小灰灰: 前端攻城狮，喜欢技术，喜欢学习，喜欢分享，喜欢听取不同意见，很高兴结识各位！

关注

Web - Nancy: 前端程序媛

关注

萧寂173: 个人知识博客：https://xiaojiblog.netlify.app/

关注

白骑士所长: 没技术没头发但爱折腾的菜鸟入门极客，想把我会的东西都好好写成教学记录下来，做一个引路人

关注

特创数字科技: 专注前后端开发

关注

辛-夷: 思考是大脑的源代码，未经编译，却已运行一生。——调试自己，迭代世界。

关注

这是个栗子: 合理安排时间，拒绝内卷。

关注

green_pine_: 极尽人事，静待东风

关注

互联网-小阿宇: CSDN 运维领域优质创作者、阿里云专家博主。目前从事 Kubernetes 运维相关工作，擅长Linux系统运维、开源监控软件维护、Kubernetes容器技术、CI/CD持续集成、自动化运维、开源软件部署维护等领域。

关注