css变量

最新推荐文章于 2024-05-28 16:26:24 发布

Let dreams fly

最新推荐文章于 2024-05-28 16:26:24 发布

阅读量250

点赞数 1

分类专栏： css 文章标签： css变量 css设置变量

本文链接：https://blog.csdn.net/weixin_40687883/article/details/89351996

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css变量

1.html

<body>
    <header id="main-header">
        <h1>css 变量</h1>
    </header>
    <div class="container">
        <div class="grid">
            <div class="box">
                <h1>hello world</h1>
                <p>近日，北京流感样病例报告数较前期有所上升，来自北京疾病预防控制中心的数据显示，2017年9月1日-11月30日，全市共报告流感导致的集中发热疫情19起，主要是由乙型流感病毒、甲型H3N2亚型流感病毒及甲型H1N1流感病毒引起。据了解，北京市流感流行高峰期一般为12月至次年的1月份。
                </p>
            </div>
            <div class="box">
                <h1>hello world</h1>
                <p>近日，北京流感样病例报告数较前期有所上升，来自北京疾病预防控制中心的数据显示，2017年9月1日-11月30日，全市共报告流感导致的集中发热疫情19起，主要是由乙型流感病毒、甲型H3N2亚型流感病毒及甲型H1N1流感病毒引起。据了解，北京市流感流行高峰期一般为12月至次年的1月份。
                </p>
            </div>
        </div>
    </div>
</body>

2.css

2.1 全局变量

* {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}


/* 设置全局变量   固定名称:root*/

:root {
    --main-bg-color: #e6afaf;
    --main-text-color: #333333;
    --header-bg-color: #6767cc;
    --header-text-color: #ffffff;
    --header-padding: 5px 20px;
    --container-width: 80%;
}


/* 设置全局变量 */

body {
    background: var(--main-bg-color);
    color: var(--main-text-color);
}

header {
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    padding: var(--header-padding);
}

.container {
    width: var(--container-width);
    margin: 20px auto;
}

2.2 局部变量

/* 设置局部变量 */

.box {
    --box-bg-color: #dddddd;
    --box-border-color: #0066cc;
    --box-padding: 10px 15px;
    --box-shadow-h-offset: 10px;
    --box-shadow-v-offset: 5px;
    --box-shadow-blur-offset: 5px;
    --box-margin: 10;
}


/* 设置局部变量 */

.box {
    background-color: var(--box-bg-color);
    border: 1px solid var(--box-border-color);
    padding: var(--box-padding);
    /* box-shadow: 10px 5px 5px #0066cc; */
    box-shadow: var(--box-shadow-h-offset) var(--box-shadow-v-offset) var(--box-shadow-blur-offset) var(--box-border-color);
}

.box h1 {
    color: var(--box-border-color);
}

.grid {
    display: flex
}

.grid .box {
    margin: calc(var(--box-margin)*1px);
}

.box p {
    color: var(--box-p-color, red);
}

效果：

Let dreams fly

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css变量

css变量1.html<body> <header id="main-header"> <h1>css 变量</h1> </header> <div class="container"> <div class="grid"> ...
复制链接

扫一扫