--varName:var(--varName)

/*
CSS VARIBLES AKA Custom Properties
hold a value and reuse it
--varName:var(--varName)
scope
:root{} === global
element === local
any property

*/ 



INDEX.HTML:


<!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 Tutorial</title>    
    <link rel="stylesheet" href="styles.css">

   
</head>
<body >
    <h1 class="heading">main heading</h1>
    <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo culpa optio voluptatum ea at consequatur.</p>
    <div class="main">
        <p class="main-text">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio, inventore?
        </p>
    </div>
    <h3 class="second-heading">
        another heading
    </h3>
    <h3 class="third-heading">
        another heading
    </h3>
</body>
</html>


CSS:

/*
CSS VARIBLES AKA Custom Properties
hold a value and reuse it
--varName:var(--varName)
scope
:root{} === global
element === local
any property
*/

:root {
    --primaryColor:red;
    --secondColor:blue;
    --mainTransition:all 0.4s linear;
}

.heading {
    color: var(--primaryColor);
}

.second-heading {
    color:var(--primaryColor);
    transition:var(mainTransition);
}
.second-heading:hover {
    color: var(--secondColor);
}
div {
    --primaryRed:red;
}
.main-text {
    color: var(--primaryRed);
}
.third-heading {
    color: var(--primaryRed);
}



评论

此博客中的热门博文

又一款美国免费主机,无限流量动态X10hosting

Nginx【Docker系列】一个反向代理神器——Nginx Proxy Manager

这个网盘不限速,而且支持临时分享