css定义变量，全局控制样式，便于修改主题颜色

  • 使用方式：css定义变量的方式是** 通过给一个属性加上-- **然后他就成为了一个css属性

 

 

<!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>Document</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
        .container{height:100%;text-align: center; display: flex; margin: 20px auto;}    
        .box{ flex: 1; padding: 20px 30px; line-height: 25px; border: red 1px solid;}
        html{
            --main-bg-color:rgb(166, 31, 207);
            --main-text-blue:rgb(20, 47, 247);
            --main-button-yellow:rgb(242, 130, 10);
        }
        .box1,.box3{
            background-color: var(--main-bg-color);
            color: var(--main-text-blue);
        }
        .box2,.box4{
            color: var(--main-text-blue);
        }
        .btn{
            border: none;
            background-color: var(--main-button-yellow);
        }
    </style> 
   
</head>
<body>
    <div class="container">
        <div class="box box1">文本1</div>
        <div class="box box2">文本2</div>
        <div class="box box3">文本3</div>
        <div class="box box4">文本4</div>
    </div> 
    <div class="container">
        <div class="box box1"><button class="btn">按钮</button></div>
        <div class="box box2">文本2</div>
        <div class="box box3">文本3</div>
        <div class="box box4"><button class="btn">按钮</button></div>
    </div> 
    
</body>
</html>

 

posted @ 2023-04-21 16:27  Shimily  阅读(193)  评论(0)    收藏  举报