CSS变量-CFANZ编程社区

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>

0 条评论