Css 简明教程

CSS - Custom Properties

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

Custom properties use names that start with --, such as --color-name. These properties can store values, which can then be used in other elements using the var() function.

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

Custom properties are specific to elements, and their values follow the cascading rules, the value of a custom property is determined by the cascading algorithm.

Possible Values

  1. <declaration-value> − This value can be any combination of tokens, but it must not include certain disallowed tokens. It specifies what a valid declaration can have as its value.

Applies To

所有 HTML 元素。

All the HTML elements.

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)) 属性定义第一个逗号（它将备用内容分开），以及第二个逗号（这表示一个值）−

The following syntax shows how to use multiple values using commas. The transform: scale(var(--scale, 1.1, 1.5)) property defines the first comma, which separates the fallback, and the second comma, which is a value −

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

CSS Custom Properties

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

The following example demonstrates the use of 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

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

The following example demonstrates that custom property’s value can be set using another custom property −

<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 的值来更改背景颜色 −

The following example demonstrates that when you hover over the box, the background color is changed by modifying the values of --h, --s, --l, and --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 −

The following example demonstrates box shadow effect with --shadow value. The box shadow is initially 2px, but when you hover over it, the shadow increases to 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 度 −

The following example demonstrates that the box with gradient background transitioning from green to yellow to red. The gradient angle is initially 90deg, but when you hover over it, gradient angle changes to 180deg −

<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% −

The following example demonstrates the grid layout where the width of column changes based on the the screen width. The value of the --boundary is initially 30px, but when you resize the browser window, the --boundary value changes to the 40% of the container width −

<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 个像素 −

The following example demonstrates the transform effect using custom properties. When you hover over a button, it scales down to 80% of its original size, and when you click it, it moves down 3px −

<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 来计算大小 −

The following example demonstrates how to use CSS custom properties to dynamically set the font size. The calc() function calculates the size by multiplying the custom properties --size-val and --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 值（淡蓝色） −

The following example demonstrates that how to use CSS custom properties with cascade. The first box uses default global --background-color value (yellow), and second box uses the local --background-color value (lightblue) −

<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 选择器匹配它们可以到达的最上方 −

The following example demonstrates how to set custom properties with :root selector. The :root selector matches as high up as they can go −

<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 变量的值 −

The following example demonstrates applying !important to the --background-color variable, it is difficult to override the value of the --background-color variable −

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

The following example demonstrates scale transformation effect on the button. The scaling factor is specified using the* --scale* custom property. If --scale is not defined, the scale set to 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 。将鼠标悬停在框上后，渐变色会变为绿色 −

The following example demonstrates the use of @property rule to define custom property --gradient-color with initial value pink and transition effect. When you hover over the box, gradient color changes to green 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>