使用css 中自定义属性(变量)

自定义属性(有时候也被称作CSS 变量或者级联变量)是由 CSS 作者定义的,它包含的值可以在整个文档中重复使用。

由自定义属性标记设定值(比如: --main-color: black;),由 var() 函数来获取值(比如: color: var(–main-color);)复杂的网站都会有大量的 CSS 代码,通常也会有许多重复的值。

- 基本用法

声明一个自定义属性,属性名需要以两个减号(–)开始,属性值则可以是任何有效的 CSS 值。和其他属性一样,自定义属性也是写在规则集之内的,如下:

element {
	--text-color: red;
	--border-width: 5px;
	--bg-color: blue;
	--text-font-size: 12px;
}

使用:通过一个局部变量时用 var() 函数包裹以表示一个合法的属性值:

element {
	color: var(--text-color);
	background-color: var(--bg-color);
	font-size: var(--text-font-size);
}

注意:自定义属性名是大小写敏感的,–my-color 和 --My-color 会被认为是两个不同的自定义属性。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 自定义变量 demotitle>
    <style>
        :root {
            --text-color: #101dd5;
        }
        h2 {
            color: var(--text-color)
        }
        /*自定义一个容器,给容器中的变量赋值*/
        section {
            --text-color: #e52e9c;
            --font-size: 36px;
            --bg-color: purple;
        }
        span {
            color: var(--text-color);
            font-size: var(--font-size);
            background-color: var(--bg-color);
        }
    style>
head>
<body>
    <div class="div-wrapper">
        <h2>这是h2标签h2>
    div>
    <section>
        <span>这是一个 span 标签span>
    section>
body>
html>

使用css 中自定义属性(变量)_第1张图片

总结:

  • 复杂的网站都会有大量的 CSS 代码,通常也会有许多重复的值。
  • 举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦,很繁琐)。
  • 自定义属性在某个地方存储一个值,然后在其他许多地方引用它
  • 另一个好处是语义化的标识。比如,–main-text-color 会比#00ff00
    更易理解,尤其是这个颜色值在其他上下文中也被使用到
  • 自定义属性受级联的约束,并从其父级继承其值

CSS 自定义属性(变量)

你可能感兴趣的:(CSS,Sass,css,前端,html)