网站首页HTML/CSS

CSS定义变量和变量应用

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS定义变量</title>
  <style type="text/css">
    :root {
      --color-my-red:#fa5151;
      --color-my-green:#07c160;
      --color-my-blue:#10aeff;
      --size-500px:500px;
    }
    .demo {
      clear: both;
      width: var(--size-500px);
      height: var(--size-500px);
      border: 25px solid var(--color-my-red);
      background: var(--color-my-green);
      color: var(--color-my-blue);
      text-align: center;
      font-weight: bolder;
      font-size: 32px;
      line-height: 15.63;
    }
    .demo, .explain {
      margin: 50px 0 0 50px;
      line-height: 2;
    }
  </style>
</head>
<body>
<div class="demo">红边框＋绿背景＋蓝文字</div>
<div class="explain">
  <div>声明语法：【--变量名:变量值;】，示例：【--color-my-red:#fa5151;】，必须以两个中横线开头，相当于PHP变量的$符号。</div>
  <div>调用语法：【var(--变量名)】，示例：【border: 25px solid var(--color-my-red);】。</div>
  <div>变量值可以是十六进制颜色码，也可以是尺寸单位（px、%、rem等等）或其它样式数值，在开发时使用变量来代替样式数值可以保持整站色调和细节的统一，也可以实现快速切换色调。</div>
  <div>既然是变量就可以改变其值，如在:root{--color-my-red:#fa5151;}定义了--color-my-red变量，可以在html[data-theme="theme-1"]{--color-my-red:#dd5044;}改变值，利用这种特性可以通过改变data-theme属性实现无刷新即时切换网站主色调。</div>
</div>
</body>
</html>



 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS变量应用</title>
    <style type="text/css">
        :root {
            --font-color:#00f;
        }
        html[data-theme=theme-demo] {
            --font-color:red;
        }
        span {
            color: var(--font-color);
            font-weight: 700;
            font-size: 36px;
        }
    </style>
</head>
<body>
<span>俺是测试文本！</span><br>
<br>
<button type="button" onClick="changeColor();">点俺试试</button>
<script type="text/javascript">
    function changeColor() {
        var html = document.getElementsByTagName('html')[0];
        if (html.getAttribute('data-theme')) {
            html.removeAttribute('data-theme');
        } else {
            html.setAttribute('data-theme', 'theme-demo');
        }
    }
</script>
</body>
</html>

Copyright © 2024 码农人生. All Rights Reserved