css
-
编写 CSS 的最佳实践——干净、可扩展和可维护的代码
编写 css 的最佳实践 – 干净、可扩展且可维护的代码 在本课程的最后一讲中,我们将重点关注编写高效、可扩展且可维护的 css 的最佳实践。这些原则将帮助您为样式表开发一种干净且专业的方法,使它们随着项目的发展而更易于管理。 1.使用有意义的类名 类名应该具有描述性并表明其用途。避免使用模糊的名称…
-
查看过渡主题动画
使用 css 和视图转换从浅色模式转换为深色模式时添加炫酷效果 复制自 twitter 上的@jhey[!注意]这假设您已经设置了暗光模式,并具有某种功能来更新您的主题 添加css /* angled */ [data-style=’angled’]::view-transition-old(roo…
-
我进入网络编程世界的第一步:HTML 和 CSS
大家好! 几天前,我决定迈出一步,开始学习编程。和许多人一样,我从基础知识开始:html 和 css。开始一个简短的 40 分钟课程(来自 deivchoi 的从头开始的基础 html5 和 css3 课程),虽然一开始一切看起来都很简单,但当我到达 css 和样式部分时,我对本地和全局的概念有点迷…
-
使用 SCSS Mixins 和函数让你的 CSS 更好
scss 是 css 的扩展,使您的代码更易于管理。借助 scss,您可以使用 mixins 和函数来帮助您避免一次又一次编写相同的代码。在本文中,我将向您展示一些有用的 scss mixin 和函数,它们可以节省您的时间并使您的代码更清晰。 为什么使用 mixins 和函数? 编写 css 时…
-
CSS BEM 命名约定:它是什么、为什么重要以及如何使用它?
编写干净且有组织的 css 很重要,尤其是对于大型项目。构建 css 的最佳方法之一是使用 bem 命名约定。在本文中,我们将解释 bem 是什么、为什么它很重要、它的优点和缺点,并通过两个示例向您展示如何使用它。 什么是边界元法? bem 代表 块、元素 和 修饰符。它是一个用于编写 css 类名…
-
CSS 中的盒模型:制作精确布局的终极指南
Web设计概念中,盒子模型是CSS中非常关注布局设计的基础知识领域。盒子模型解释了页面上元素的放置和定位方式,这会影响水平度和总体连贯性。 除了概述盒子模型的背景和边框之外,本指南还指导您完成填充、边距和盒子大小调整,以便您可以完全控制布局。要开始专业水平的 Web 项目设计,无论您的编程水平如何,…
-
CSS 选择器备忘单
这是一个全面的 css 选择器备忘单,涵盖了您可能需要的所有基本和高级选择器: 1. 基本选择器 通用选择器 (*):针对所有元素。 * { margin: 0; } 类型选择器(元素选择器):针对给定类型的元素。 p { color: blue; } 类选择器(.classname):针对具有特定…
-
CSS 中的盒模型:制作精确布局的终极指南(第 2 部分)
什么是盒子模型? 盒子模型描述了每个 html 元素如何在网页上表示。每个元素都被视为包含多个层的矩形框:内容、填充、边框和边距。该结构还会影响网页上元素的布局和间距。 盒子模型在网页设计中的用途 CSS 盒模型确保每个元素相对于其他元素都有明确定义的边界和间距。这些边界是安排干净且结构化的页面布局…
-
CSS Padding – 管理元素内部的空间
第 11 讲:css 填充 – 管理元素内的空间 在本次讲座中,我们将讨论css 填充,它控制元素内部元素内容与其边框之间的空间。填充在确定元素的间距和大小、提供干净且可读的布局方面起着至关重要的作用。 1.什么是填充? padding 定义元素内容与其边框之间的空间。与边距(在元素外部…
-
太阳系的表示
这是前端挑战 v24.09.04,CSS 艺术:空间的提交。 灵感 仅使用 CSS 来直观地展示太阳系。 演示 https://github.com/ShitanshuRoy/solar 要运行,只需在任何浏览器中打开index.html 文件即可。 旅行 深入研究 CSS 动画,能够创建有趣的移动…