微信登录

书闪笔记

书闪文章

CSS教程

全局变量 - root{} - --xx - var(--xx)

+

在此添加单个AI新笔记

css - css网站

🌟基础入门

📚网站构建

🎨样式设计

导入 - CSS文件导入HTML

🔗文件链接

🖥️HTML基础

💡入门必备

导入 - CSS文件导入CSS文件 - @import

📂文件管理

🔄导入规则

✨高效技巧

选择器 - id、class、<标签>

🎯精准定位

🏷️元素选择

📝语法基础

单位 - 单位 - px、%、em、rem、vw、vh、 vmin、vmax

📏尺寸单位

📐响应式

🔢数值计算

单位 - 单位计算 - calc()

🧮动态计算

🔄灵活布局

⚙️函数应用

通用属性 - display:; - 框的类型

📦盒模型

📊布局基础

✨显示控制

通用属性 - position:; - 定位

📍定位方式

📐精确布局

🛠️高级技巧

通用属性 - float:left; - 浮动-俄罗斯方块

💦浮动效果

🧩元素排列

🎮布局游戏

通用属性 - width:100%;width:auto;

📏宽度控制

🔄自适应

🌊流体布局

通用属性 - margin: 0 auto; - 外边框-居中

📏 居中显示技巧

🔄 自动外边距

✨ 基础布局必备

通用属性 - border:2px solid #000; - 边框样式

🖌️ 边框绘制指南

🎨 实线样式教学

🔳 元素轮廓基础

通用属性 - border-radius:20px; - 圆角

🟢 圆角美化技术

🎈 柔和边缘设计

💫 现代UI必备

通用属性 - padding:; - 内边框

📦 内边距详解

🔍 内容间距控制

📐 盒模型核心

通用属性 - color:#000000; - 文字颜色

🎨 文字色彩基础

🖋️ 颜色代码教学

🌈 字体着色入门

通用属性 - font-size: 12px; - 文字大小

🔤 字号设置秘籍

📏 字体尺寸指南

👀 可读性优化

通用属性 - -webkit-text-stroke:1px #00ffff; - 文字描边

🖍️ 文字描边特效

🌌 霓虹文字效果

✨ 高级文字样式

通用属性 - opacity:0.5; - 透明度

👻 透明度控制

💧 元素淡入淡出

🎭 叠加层次技巧

通用属性 - box-shadow: 1px 1px 1px #色号; - 盒子阴影

🌑 盒子阴影教程

🕶️ 深度效果制作

💡 立体感设计

通用属性 - text-shadow:1px 1px 1px #色号; - 文字阴影

✏️ 文字阴影基础

🌟 文字立体效果

🔥 标题特效技巧

通用属性 - background-image:#色号50; - 背景+渐变色

🎨 背景渐变

📚 基础属性

💡 视觉设计

通用属性 - background-color:#色号50; - 背景色+透明度

🌈 背景色

⚙️ 透明度

📚 基础属性

通用属性 - z-index:; - 远近

📊 堆叠

📍 层级控制

📚 基础属性

通用属性 - transform: rotate(18deg); - 旋转

🔄 旋转

🎚️ 变形

📚 基础属性

a标签 - text-decoration: none; - 去掉下划线

🔗 链接样式

✂️ 无下划线

📚 基础属性

li标签 - list-style-type:none - 去掉点

📜 列表样式

❌ 移除标记

📚 基础属性

li标签 - display:inline横向

⇉ 横向排列

📜 列表布局

📚 基础属性

li标签 - background:url() - 加自定义图片

🖼️ 自定义图

📜 列表背景

📚 基础属性

li标签 - .bg:hover{} - 鼠标滑过变css

🖱️ 悬停效果

🎚️ 交互设计

📚 基础属性

特殊效果 - 高度height等于width

📏 等宽高比

✨ 特殊效果

📚 基础属性

其他属性 - cursor:pointer - 靠近鼠标加上小手

👆 交互体验优化

💡 基础属性

🐭 鼠标效果

其他属性 - keyframes - 动画

🎬 动画关键帧

✨ 动态效果

⏱️ 时间控制

其他属性 - overflow:scroll; - 内容溢出设置

📜 内容溢出处理

🛝 滚动功能

📦 容器控制

其他属性 - ::-webkit-scrollbar - 滚动条

🎚️ 滚动条定制

🔧 浏览器特定

🎨 样式美化

全局变量 - root{} - --xx - var(--xx)

📊 全局变量

🔄 复用值

🎯 动态样式

全局变量 - root{} - 主题一键切换

🌓 主题切换

🖥️ 界面适配

💫 一键换肤

其他属性 - @media (){} - 窗口适应

📱 响应式设计

🖼️ 媒体查询

🔄 自适应布局

bootstrap - 模板

🚀 快速开发

📐 框架模板

✨ 组件库

全局变量 - root{} - --xx - var(--xx)

:root{
  --xx:xxx;
}
#div {
    color: var(--xx)
}

:root - 全局变量
var(—xx) - 使用

粤ICP备19057273号-3

全局变量 - root{} - --xx - var(--xx)-书闪专业知识库