css变量

　定义的语法：--变量名: 变量值;

　　使用的时候用 --属性: var(变量名);的方式使用。变量都是公用样式所以一般都放在 :foot 里面。

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css variables</title>
  <style>
    :root {
      --primary-color: #333;
      --secondary-color: #ccc;
      --light-color: #f4f4f4;
      --max-width: 1100px;
      --box-1-width: 1;
      --box-2-width: 2;
    }

    * {
      padding: 0;
      margin: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.4;
      background: var(--bg-color);
    }

    header {
      background-color: var(--primary-color);
      color: #fff;
      border-bottom: 5px var(--secondary-color) solid;
      text-align: center;
    }

    .container {
      display: flex;
      margin: 0 auto;
      width: var(--max-width);
    }

    .box {
      background-color: var(--primary-color);
      border-bottom: 5px var(--secondary-color) solid;
      color: #fff;
      padding: 1rem;
      margin: 1rem;
    }

    .box-1 {
      flex: var(--box-1-width);
    }

    .box-2 {
      flex: var(--box-2-width);
    }
  </style>
</head>

<body>
  <header>
    <h1>欢迎来到欧青辣少</h1>
  </header>
  <div class="container">
    <div class="box box-1">
      <h3>标题</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quam fugiat quae, saepe consequatur ipsum.</p>
    </div>
    <div class="box box-2">
      <h3>标题</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quam fugiat quae, saepe consequatur ipsum.</p>
    </div>
  </div>
</body>

</html>
复制代码

 

posted @   守鹤  阅读(299)  评论(0)  编辑  收藏  举报
相关博文：
·  js第一天
·  选择器和伪元素
·  CSS变量
·  css中如何定义及使用变量？
·  Css var 简述
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 提示词工程——AI应用必不可少的技术
· 地球OL攻略 —— 某应届生求职总结
· 字符编码：从基础到乱码解决
· SpringCloud带你走进微服务的世界
点击右上角即可分享
微信分享提示
AI IDE Trae