CSS如何使用变量?代码示例

2021年3月30日11:32:51 发表评论 741 次浏览

CSS变量就像任何编程语言的简单变量一样。这些变量用于存储值, 并具有可以使用这些变量的范围。通过在开头使用两个破折号(–), 然后使用区分大小写的名称来定义变量。变量的好处是它允许在多个位置重用相同的值, 并可以从一个位置更新/修改它们。而且, 与颜色的值相比, 变量名称更易于理解和使用。

语法如下:

var( --custom-name, value )

参数:变量var()接受下面列出的两个参数:

  • –自定义名称它是必需的参数, 它接受定制属性名称。
  • 值:它是一个可选参数。它接受当自定义属性无效时使用的后备值。

范例1:

<!DOCTYPE html>
< html >
     < head >
         < title >CSS Variables</ title >
          
          < style >
             :root {
                 --bg-color: green;
                 --txt-color: white;
             }
              
             /* var() function used here */
             body {
                 background-color: var(--bg-color);
             }
             h1 {
                 color: var(--txt-color);
             }
             div {
                 color: var(--txt-color);
             }
         </ style >
     </ head >
      
     < body >
         < h1 >lsbin</ h1 >
          
         < div >
             A computer science portal for geeks
         </ div >
     </ body >
</ html >

输出如下:

CSS变量

范例2:

<!DOCTYPE html>
< html >
     < head >
         < title >CSS Variables</ title >
          
          < style >
             :root {
                 --bg-color: green;
             }
              
             /* var() function used here */
             body {
                 background-color: var(--bg-color);
             }
             h1 {
                 color: var(--txt-color, white);
             }
             div {
                 color: var(--txt-color, white);
             }
         </ style >
     </ head >
      
     < body >
         < h1 >lsbin</ h1 >
          
         < div >
             A computer science portal for geeks
         </ div >
     </ body >
</ html >

输出如下:

CSS变量

支持的浏览器:支持的浏览器CSS变量下面列出:

  • 谷歌浏览器49.0
  • Internet Explorer 15.0
  • Firefox 31.0
  • Safari 9.1
  • Opera 36.0

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: