Css 简明教程

CSS - Custom Properties

自定义属性使用以 -- 开头的名称，例如 --color-name 。这些属性可以存储值，然后可以使用 var() 函数在其他元素中使用这些值。

自定义属性特定于元素，并且它们的值遵循级联规则，自定义属性的值由级联算法确定。

Possible Values

  1. <declaration-value> − 此值可以作为令牌的任意组合，但不能包括某些不允许的令牌。它指定有效的声明可以将什么作为自己的值。

Applies To

所有 HTML 元素。

Syntax

--keywordValue: right;
--colorValue: #e74c3c;
--complexValue: 5px 10px rgb(238, 50, 17);

CSS Custom Properties - Commas in Values

以下语法显示了如何使用逗号使用多个值。 transform: scale(var(--scale, 1.1, 1.5)) 属性定义第一个逗号（它将备用内容分开），以及第二个逗号（这表示一个值）−

button {
   transform: scale(var(--scale, 1.1, 1.5));
}

CSS Custom Properties

以下示例演示了如何使用自定义属性 −

<html>
<head>
<style>
   :root {
      --red-color: red;
      --green-color: rgb(125, 226, 31);
   }
   div {
      width: 200px;
      height: 100px;
      margin: 10px;
   }
   .box1 {
      background-color: var(--green-color);
      color: var(--red-color);
   }
   .box2 {
      background-color: var(--red-color);
      color: var(--green-color);
   }
   .box3 {
      --pink-color: rgb(247, 30, 193);
   }
   .box3 p {
      color: var(--pink-color);
   }
</style>
</head>
<body>
   <div class="box1">
      Green Background, Red Text
   </div>
   <div class="box2">
      Red Background, Green Text
   </div>
   <div class="box3">
      <p>Pink Text</p>
   </div>
</body>
</html>

CSS Custom Properties - Setting Value

以下示例演示了可以利用另一个自定义属性来设置自定义属性的值 −

<html>
<head>
<style>
   html {
      --red-color: #e92424;
      --green-color: #2c1fdd;
      --yellow-color: #f6f867;

      --back: var(--yellow-color);
      --para: var(--green-color);
      --border: var(--red-color);
   }
   div {
      width: 200px;
      height: 150px;
      padding: 10px;
      background-color: var(--back);
      border: 3px solid var(--border);
   }
   h3 {
      color: var(--green-color);
      text-align: center;
   }
   p {
      color: var(--para);
   }
</style>
</head>
<body>
   <div>
      <h3>Tutorialspoint</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
   </div>
</body>
</html>

CSS Custom Properties - Splitting Colors

以下示例演示了将鼠标悬停在框上后，将通过修改 --h、--s、--l 和 --a 的值来更改背景颜色 −

<html>
<head>
<style>
   .box {
      width: 150px;
      width: 150px;
      padding: 10px;
      --h: 0;     /* hue */
      --s: 70%;   /* saturation */
      --l: 50%;   /* lightness */
      --a: 1;     /* alpha */

      background-color: hsl(var(--h) var(--s) var(--l) / var(--a));
      color: white;
   }
   .box:hover {
      --l: 75%;
   }
   .box:focus {
      --s: 75%;
   }
   .box[disabled] {
      --s: 0%;
      --a: 0.5;
   }
</style>
</head>
<body>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
   </div>
</body>
</html>

CSS Custom Properties - Shadow

以下示例演示了 --shadow 值的盒子阴影效果。盒子阴影最初为 2px，但将鼠标悬停在其上方时，阴影会增加到 10px −

<html>
<head>
<style>
   .box {
      width: 150px;
      width: 150px;
      padding: 10px;
      margin: 30px;
      --shadow: 2px;
      background-color: aqua;
      box-shadow: 0 0 20px var(--shadow) red;
   }
   .box:hover {
      --shadow: 10px;
   }
</style>
</head>
<body>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
   </div>
</body>
</html>

CSS Custom Properties - Gradients

以下示例演示了带有从绿色过渡到黄色再到红色的渐变背景的盒子。渐变角最初为 90 度，但将鼠标悬停在其上方时，渐变角会变为 180 度 −

<html>
<head>
<style>
   .box {
      width: 150px;
      width: 150px;
      padding: 10px;
      margin: 30px;
      --gradient-angle: 90deg;
      background: linear-gradient(var(--gradient-angle), green, yellow, red);
   }
   .box:hover {
      --gradient-angle: 180deg;
   }
</style>
</head>
<body>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
   </div>
</body>
</html>

CSS Custom Properties - Grid

以下示例演示了基于屏幕宽度的列宽发生变化的网格布局。 --boundary 的值最初为 30px，但当你调整浏览器窗口大小时， --boundary 的值会改变为容器宽度的 40% −

<html>
<head>
<style>
   .box {
      background-color: lightcoral;
      display: grid;
      --boundary: 30px;
      grid-template-columns: var(--boundary) 1fr var(--boundary);
   }
   @media (max-width: 800px) {
   .box {
         --boundary: 40%;
      }
   }
</style>
</head>
<body>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
   </div>
</body>
</html>

CSS Custom Properties - Transforms

以下示例演示了使用自定义属性的变换效果。将鼠标悬停在按钮上时，它缩小到其原始大小的 80%，并且当你单击它时，它向下移动 3 个像素 −

<html>
<head>
<style>
   button {
      transform: var(--scale-button, scale(1)) var(--translate-button, translate(0));
      padding: 10px;
      background-color: yellow;
   }
   button:active {
      --translate-button: translate(0, 3px);
   }
   button:hover {
      --scale-button: scale(0.8);
   }
</style>
</head>
<body>
   <button>
      Tutorialspoint
   </button>
</body>
</html>

CSS Custom Properties - Concatenation of Unit Types

以下示例演示了如何使用 CSS 自定属性来动态设置字体大小。 calc() 函数通过乘以自定属性 --size-val 和 --pixel-values 来计算大小 −

<html>
<head>
<style>
   html {
      --size-val: 24;
      --unit-val: px;

      font-size: var(--size-val) + var(--unit-val);
      font-size: calc(var(--size-val) * 1px);

      --pixel-values: 1px;
      font-size: calc(var(--size-val) * var(--pixel-values));
   }
   .box {
      width: 200px;
      height: 150px;
      background-color: yellowgreen;
   }
</style>
</head>
<body>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS Custom Properties - Using the Cascade

以下示例演示了如何将 CSS 自定属性与级联一起使用。第一个盒子使用默认全局 --background-color 值（黄色），而第二个盒子使用本地 --background-color 值（淡蓝色） −

<html>
<head>
<style>
   html {
      --background-color: yellow;
      --color: red;
   }
   .container {
      --background-color: lightblue;
   }
   .box {
      background: var(--background-color);
   }
   div {
      height: 100px;
      width: 100px;
      margin: 10px;
   }
</style>
</head>
<body>
      <div class="box">
         Yellow background color box.
      </div>

      <div class="container">
      <div class="box">
         Blue background color box.
      </div>
      </div>
</body>
</html>

CSS Custom Properties - :root

以下示例演示了如何使用 :root 选择器来设置自定属性。 :root 选择器匹配它们可以到达的最上方 −

<html>
<head>
<style>
   :root {
      --yellow: yellow;
   }
   .box {
      background-color: var(--yellow);
   }
</style>
</head>
<body>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS Custom Properties - Combining With !important

以下示例演示了将 !important 应用于 --background-color 变量后，很难覆盖 --background-color 变量的值 −

<html>
<head>
<style>
   .box {
      --background-color: yellow !important;
      background-color: var(--background-color);

      --text: red;
      color: var(--text);
   }
</style>
</head>
<body>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS Custom Properties - Fallbacks

以下示例演示了按钮的变形效果。使用 --scale 自定属性指定缩放因子。如果未定义 --scale ，则缩放设置为 1.2 −

<html>
<head>
<style>
   button {
      transform: scale(var(--scale, 1.2));
      padding: 10px;
      background-color: yellow;
      margin: 5px;
   }
   button:hover {
      --scale: scale(0.8);
   }
</style>
</head>
<body>
   <button>
      Hover Me
   </button>
</body>
</html>

CSS Custom Properties - @property

以下示例演示了使用 @property 规则来定义具有初始值粉红色和过渡效果的自定属性 --gradient-color 。将鼠标悬停在框上后，渐变色会变为绿色 −

<html>
<head>
<style>
   @property --gradient-color {
      initial-value: pink;
      inherits: false;
   }
   .box {
      width: 150px;
      height: 150px;
      --gradient-color: pink;
      background: linear-gradient(var(--gradient-color), yellow);
      transition: --gradient-color 1s;
   }
   .box:hover {
      --gradient-color: green;
   }
</style>
</head>
<body>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>