CSS学习记录23 - 技术栈

CSS用户界面

CSS调整大小

resize 属性规定元素是否应（以及如何）被用户调整大小。下例只允许用户调整 <div> 元素的宽度：

css 复制代码

div {
  resize: horizontal;
  overflow: auto;
}

下例只允许用户调整 <div> 元素的高度：

css 复制代码

div {
  resize: vertical;
  overflow: auto;
}

下例允许用户能够调整 <div> 元素的高度和宽度：

css 复制代码

div {
  resize: both;
  overflow: auto;
}

在许多浏览器中，<textarea> 默认为可调整大小。在这里，可以使用 resize 属性来禁用这种可缩放性：

css 复制代码

textarea {
  resize: none;
}

CSS 轮廓偏移

outline-offset 属性在轮廓与元素的边框之间添加空间。

注意：轮廓与边框不同！轮廓线是在元素边框之外绘制的，并且可能与其他内容重叠。同时，轮廓也不是元素尺寸的一部分：元素的总宽度和高度不受轮廓线宽度的影响。

下面的例子使用 outline-offset 属性添加了边框和轮廓之间的空间：

css 复制代码

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

CSS变量

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

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

var() 函数的语法

var() 函数用于插入CSS变量的值。var() 函数的语法如下：

css 复制代码

var(name, value)

值	描述
name	必需。变量名（以两条破折号开头）。
value	可选。回退值（在未找到变量时使用）。

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

var() 如何工作

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

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

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

css 复制代码

: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;
}

使用var() 有如下优势：

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

如需将蓝色和白色改为较为柔和的蓝色和白色，您只需要修改两个变量值。CSS 变量也可以在特定的选择器中定义。这些变量仅在定义它们的选择器及其子元素中有效：

css 复制代码

.card {  
    --card-bg: #ffffff; /* 局部变量 */  
    background-color: var(--card-bg);  
    padding: 20px;  
    border: 1px solid #ddd;  
}  

.card:hover {  
    --card-bg: #f0f0f0; /* 更新局部变量 */  
    background-color: var(--card-bg);  
}

CSS覆盖变量

用局部变量覆盖全局变量

有时，我们希望变量仅在页面的特定部分中进行更改。假设我们想要按钮元素使用不同的蓝色。那么，我们可以在 button 选择器内重新声明 --blue 变量。当我们在这个选择器中使用 var(--blue) 时，它将使用此处声明的局部 --blue变量值。

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

css 复制代码

: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;
}

添加一个新的局部变量

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

css 复制代码

: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;

使用JavaScript 更改变量

CSS变量可以访问DOM，这意味着您可以通过 JavaScript 更改它们。这个例子说明了如何创建脚本来显示并更改实例中的 --blue 变量。

javascript 复制代码

<script>
// 获取根元素
var r = document.querySelector(':root');

// 创建获取变量值的函数
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}

// 创建设置变量值的函数
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

html 复制代码

<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>
<br>

<button type="button" onclick="myFunction_get()">使用 JavaScript 来获取 CSS 变量</button>
<button type="button" onclick="myFunction_set()">使用 JavaScript 来更改 CSS 变量</button>

在媒体查询中使用变量

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

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

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

css 复制代码

/* 变量声明 */
: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 变量的值：

css 复制代码

/* 变量声明 */
: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: 600px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}