CSS变量

元素背景需要统一,一个个设置修改起来很麻烦,也没有全局变量?

CSS中的变量_css变量-CSDN博客

-- 前缀定义变量,var(--) 使用变量,:root 表示根元素。

css 复制代码
:root { --bg:#222; --fg:#bbb; }
body { background:var(--bg); }
h1, h2, h3, h4 { text-align:center; color:var(--fg); }
p { text-indent:2em; font-size:1.5em;}
img { display:block; margin:0 auto; max-width:100%;}
a { text-decoration:none; color:var(--fg); }
textarea { width:100%; height:4em; background:var(--bg); color:var(--fg); border-radius:5px; }
#content { width:1000px; margin:2em auto; padding:2em; background:var(--bg); border-radius:10px; }
.item { margin:10px; white-space:nowrap; }
.id { display:inline-block; width:20px; height:20px; color:darkgreen; vertical-align:middle; }
.time { width:100px; background:var(--bg); color:var(--fg); border:1px solid gray; text-align:center; }
.footer { color:var(--fg); text-align:center; }
相关推荐
不会敲代码12 小时前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
Sailing6 小时前
🚀 别再乱写 16px 了!CSS 单位体系已经进入“计算时代”,真正的响应式布局
前端·css·面试
球球pick小樱花1 天前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
AAA阿giao2 天前
从零构建一个现代登录页:深入解析 Tailwind CSS + Vite + Lucide React 的完整技术栈
前端·css·react.js
掘金安东尼2 天前
用 CSS 打造完美的饼图
前端·css
掘金安东尼3 天前
纯 CSS 实现弹性文字效果
前端·css
前端Hardy3 天前
HTML&CSS&JS:打造丝滑的3D彩纸飘落特效
前端·javascript·css
前端Hardy3 天前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
parade岁月4 天前
Tailwind CSS v4 — 当框架猜不透你的心思
前端·css
前端Hardy4 天前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html