CSS 变量

var() 函数用于插入 CSS 变量的值。

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

var() 函数的语法

var() 函数用于插入 CSS 变量的值。

var() 函数的语法如下：

var(name, value)

注释：变量名称必须以两个破折号（–）开头，且区分大小写！

var() 如何工作

首先：CSS 变量可以有全局或局部作用域。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

下面的例子与上面的例子相同，但是在这里我们使用 var() 函数。

首先，我们声明两个全局变量（–blue 和 --white）。然后，我们使用 var() 函数稍后在样式表中插入变量的值：

实例

<!DOCTYPE html>
<html>
<head>
<style>
:root {--blue: #1e90ff;--white: #ffffff;
}body {background-color: var(--blue);
}h2 {border-bottom: 2px solid var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;
}button {background-color: var(--white);color: var(--blue);border: 1px solid var(--blue);padding: 5px;
}
</style>
</head>
<body><h1>使用 var() 函数</h1><div class="container"><h2>Welcome to Shanghai!</h2><p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p><p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p><p><button>Yes</button><button>No</button></p>
</div></body>
</html>

使用 var() 有如下优势：

使代码更易于阅读（更容易理解）
使修改颜色值更加容易

如需将蓝色和白色改为较柔和的蓝色和白色，您只需要修改两个变量值。

用局部变量覆盖全局变量

有时，我们希望变量仅在页面的特定部分中进行更改。

假设我们想要按钮元素使用不同的蓝色。那么，我们可以在 button 选择器内重新声明 --blue 变量。当我们在这个选择器中使用 var(–blue) 时，它将使用此处声明的局部 --blue 变量值。

我们看到局部的 --blue 变量会覆盖 button 元素的全局 --blue 变量
实例

:root {--blue: #1e90ff;--white: #ffffff;
}body {background-color: var(--blue);
}h2 {border-bottom: 2px solid var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;
}button {--blue: #0000ff;background-color: var(--white);color: var(--blue);border: 1px solid var(--blue);padding: 5px;
}

添加一个新的局部变量

如果只在一个地方使用一个变量，我们也可以声明一个新的局部变量，就像这样：

实例

:root {--blue: #1e90ff;--white: #ffffff;
}body {background-color: var(--blue);
}h2 {border-bottom: 2px solid var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;
}button {--button-blue: #0000ff;background-color: var(--white);color: var(--button-blue);border: 1px solid var(--button-blue);padding: 5px;
}

CSS 在媒体查询中使用变量

在媒体查询中使用变量

现在，我们希望在媒体查询中修改变量值。

提示：媒体查询旨在为不同的设备（显示器、平板电脑、手机等）定义不同的样式规则。

在这里，我们首先为 .containe 类声明一个名为 --fontsize 的新局部变量。我们将其值设置为 25 像素。然后我们在 .container 类中进一步使用它。然后，我们创建一个 @media 规则，内容为“当浏览器的宽度为 450px 或更宽时，将 .container 类的 --fontsize 变量值更改为 50px。”
实例

/* 变量声明 */
:root {--blue: #1e90ff;--white: #ffffff;
}.container {--fontsize: 25px;
}/* 样式 */
body {background-color: var(--blue);
}h2 {border-bottom: 2px solid var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;font-size: var(--fontsize);
}@media screen and (min-width: 450px) {.container {--fontsize: 50px;}
}

这是另一个例子，在其中我们还更改了 @media 规则中 --blue 变量的值：

实例

/* 变量声明 */
:root {--blue: #1e90ff;--white: #ffffff;
}.container {--fontsize: 25px;
}/* 样式 */
body {background-color: var(--blue);
}h2 {border-bottom: 2px solid var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;font-size: var(--fontsize);
}@media screen and (min-width: 450px) {.container {--fontsize: 50px;}:root {--blue: lightblue;}
}

CSS Box Sizing

CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。

假如不指定 CSS box-sizing 属性

默认情况下，元素的宽度和高度是这样计算的：

width + padding + border = 元素的实际宽度
height + padding + border = 元素的实际高度
这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

如果使用 CSS box-sizing 属性

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。

如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框

由于使用 box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

下面的代码能够确保以这种更直观的方式调整所有元素的大小。许多浏览器已经在对许多表单元素使用 box-sizing: border-box;（但并非全部 - 这就是为什么 input 和 textarea 在 width: 100%; 时看起来不同）。
将其应用于所有元素是安全且明智的。

CSS学习笔记（二十一）CSS变量var()相关推荐

css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
媒体查询配合rem使用（HTML+CSS学习笔记二十一）
媒体查询 + rem 计算方法计算rem方法: 结合媒体查询 -> 随着设备的改变更改html font-size的值. 媒体查询确定范围?? 移动端设计图 : 640px 750p ...
CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法
python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0. zfill()方法语法: ...
Mr.J-- jQuery学习笔记(二十一)--模拟微博页面
先看之前的节点操作方法:Mr.J-- jQuery学习笔记(二十)--节点操作方法 Mr.J-- jQuery学习笔记(五)--属性及属性节点 Mr.J-- jQuery学习笔记(十一)--事件委托 ...
CSS学习笔记(二) 移动WEB开发
思维导图文章目录思维导图 1. 移动端基础 1.1 浏览器现状 1.2 手机屏幕现状 1.3 移动端调试方法 2. 视口 2.1 布局视口 2.2 视觉视口 2.3 理想视口 2.4 视口总结 2 ...
makefile 学习笔记二：makefile变量
一.变量定义语法变量的名称 = 值列表变量的名称可以由大小写字母.阿拉伯数字和下划线构成. 等号左右的空白符没有明确的要求,因为在执行 make 的时候多余的空白符会被自动的删除. 至于值列表,既 ...
kvm虚拟化学习笔记(二十一)之KVM性能优化学习笔记
本学习笔记系列都是采用CentOS6.x操作系统,KVM虚拟机的管理也是采用virsh方式,网上的很多的文章都基于ubuntu高版本内核下,KVM的一些新的特性支持更好,本文只是记录了CentOS6. ...
CSS学习笔记(二) －－－－盒子模型
我们日常生活中的盒子大概见了不少了,且都为六面体,也就是说是立体的. 那么它到底跟我们学习CSS里面的盒子模型到底有些啥区别呢,之前看过不少的书,千篇一律的一句话代过,讲的也不太细,或者是讲的非细但我 ...

CSS学习笔记（二十一）CSS变量var()

CSS 变量

CSS 变量

var() 函数的语法

var() 如何工作

用局部变量覆盖全局变量

添加一个新的局部变量

CSS 在媒体查询中使用变量

在媒体查询中使用变量

CSS Box Sizing

CSS Box Sizing

假如不指定 CSS box-sizing 属性

如果使用 CSS box-sizing 属性

CSS学习笔记（二十一）CSS变量var()相关推荐

最新文章

热门文章