使用css变量存储(自定义属性 L01)-优快云博客

本文深入探讨了如何使用CSS变量实现全局和局部颜色、尺寸的统一管理, 并通过实例展示了Grid布局在页面排版中的高效应用。利用变量简化样式维护, Grid布局提升响应式设计灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用css变量存储(自定义属性)

可以通过变量来给css做全局变量，在每个标签都可以使用。

/* 设置全局变量 */
:root{
  --main-bg-color:#f4f4f4;
  --main-txt-color:#333;
  --header-bg-color:#6767cc;
  --header-txt-color:#fff;
  --container-width:90%;
}

body{
  margin: 0;
  padding: 0;
  line-height: 1.5;
  background-color:var(--main-bg-color);
  color: var(--main-txt-color);
}

复制代码

/* 设置局部变量 */
.box{
  --box-bg-color:#ddd;
  --box-border-color:#06c;
  --box-padding: 5px 10px;
  --box-shadow-h-offset:10px;
  --box-shadow-v-offset:5px;
  --box-shadow-blur:5px;
}

.box{
  background-color: var(--box-bg-color);
  border: 1px solid var(--box-border-color);
  padding: var(--box-padding);
  box-shadow: 
  var(--box-shadow-h-offset) 
  var(--box-shadow-v-offset) 
  var(--box-shadow-blur) 
  var(--box-border-color);
}

.grid{
  --gap:20;
}

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: calc(var(--gap) * 1px);
  align-items: center;
}

.box p{
  /* --box-border-color:#555;
  color: var(--box-border-color); */
  color: var(--box-p-color,#555);
}



复制代码

// #06c .box
const box = document.querySelector(".box");
const boxStyles = getComputedStyle(box);
// console.log(boxStyles);
const boxBorderColor = boxStyles.getPropertyValue("--box-border-color");
// console.log(boxBorderColor);

const header = document.querySelector("#main-header");
header.style.setProperty("--header-bg-color","green");
复制代码