温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何在CSS中使用 var()变量

发布时间:2021-05-12 16:40:25 阅读:619 作者:Leah 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

今天就跟大家聊聊有关如何在CSS中使用 var()变量,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

定义和使用CSS变量

与任何其他CSS定义一样,变量遵循相同的范围和继承规则。使用它们的最简单方法是通过将声明添加到:root伪类来使它们全局可用,以便所有其他选择器都可以继承它。

:root {
  --awesome-blue:#2196F3;
}

要访问变量中的值,我们可以使用var(…)语法。请注意,名称区分大小写,因此–foo != –FOO。

.element {
background-color:var(--awesome-blue);
}

浏览器支持

常用的浏览器除了IE都完美支持,您可以在此处获取更多详细信息 –我可以使用CSS变量。下面是几个例子,展示了CSS变量的典型用法。为确保它们正常工作,请尝试在我们上面提到的其中一个浏览器上查看它们。

示例1 – 主题颜色

当我们需要对多个元素一遍又一遍地应用相同的规则时,CSS中的变量是最有用的,例如主题中的重复颜色。我们不是每次想要重复使用相同颜色时进行复制和粘贴,而是将其放在变量中并从那里访问它。

现在,如果我们的客户不喜欢我们选择的蓝色阴影,我们可以在一个地方(变量的定义)改变样式来改变整个主题的颜色。没有变量,我们必须手动搜索和替换每一次出现。

可将代码复制下来在你的编辑器里面测试

* {margin0;padding0;box-sizing: border-box;}html {padding30px;font: normal 13px/1.5 sans-serif;color#546567;background-colorvar(--primary-color);}.container {background#fff;padding20px;}h4 {padding-bottom10px;margin-bottom15px;}p {background-color#fff;margin15px 0;}button {font-size13px;padding8px 12px;background-color#fff;border-radius3px;box-shadow: none;text-transform: uppercase;font-weight: bold;cursor: pointer;opacity0.8;outline0;}button:hover {opacity1;}
<!-- 分割线 -->:root {
--primary-color#B1D7DC;
--accent-color#FF3F90;
}
html {
background-colorvar(--primary-color);
}
h4 {
border-bottom2px solid var(--primary-color);
}
button {
colorvar(--accent-color);
border1px solid var(--accent-color);
}
<div class="container">
<h4>对话框窗口</h4>
<p>过放荡不羁的生活,容易得像顺水推舟,但是要结识良朋益友,却难如登天。</p>
<button>确认</button>
</div>

示例地址

示例2 &ndash; 属性类名可读性

变量的另一个重要用途是当我们想要保存更复杂的属性值时,我们不必记住它。最好的例子就是有多个参数,如CSS规则box-shadow,transform和font。

通过将属性放在变量中,我们可以使用语义可读的名称来访问它。

html{background-color#F9F9F9;}
ul{padding20px;list-style: none;width300px;}
li{font: normal 18px sans-serif;padding20px;transition0.4s;margin10px;color#444;background-color#fff;cursor: pointer;}
<!-- 分割线 -->
:root{
--tiny-shadow0 2px 1px 0 rgba(0000.2);
--animate-righttranslateX(20px);
}
li{
box-shadowvar(--tiny-shadow);
}
li:hover{
transformvar(--animate-right);
}
<ul>
<li>我在这里!</li>
<li>我在这里!</li>
<li>我在这里!</li>
</ul>

示例地址

示例3 &ndash; 动态更改变量

当多次声明自定义属性时,标准规则有助于解决冲突,样式表中最后定义的会覆盖上面定义的。

下面的示例演示了用户动态操作改变属性是多么容易,同时仍然保持代码清晰简洁。

*{margin0;padding0;box-sizing: border-box;}
html{background#eee;padding30px;font500 14px sans-serif;color#333;line-height1.5;}
.blue-container{background#64B5F6;padding-left50px;}
.green-container{background#AED581;padding-left50px;}
.container{background#fff;padding20px;}
p{transition0.4s;}
.title{font-weight: bold;}
<!-- 分割线 -->
.blue-container{
--title-text18px;
--main-text14px;
}
.blue-container:hover{
--title-text24px;
--main-text16px;
}
.green-container:hover{
--title-text30px;
--main-text18px;
}
.title{
font-sizevar(--title-text);
}
.content{
font-sizevar(--main-text);
}
<div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">这是个标题</p>
<p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
</div>
</div>
</div>

示例地址

正如您所看到的,CSS变量非常简单易用,开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容:

var()函数有两个参数,如果自定义属性失败,它可用于提供回退值:

widthvar(&ndash;custom-width20%);

可以嵌套自定义属性:

  • &ndash;base-color: #f93ce9;

  • &ndash;background-gradient: linear-gradient(to top, var(&ndash;base-color), #444);

变量可以与CSS的另一个新增功能- calc() 函数结合使用。

  • &ndash;container-width: 1000px;

  • max-width: calc(var(&ndash;container-width) / 2);

css的三种引入方式

1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用

进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上

就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。

看完上述内容,你们对如何在CSS中使用 var()变量有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/655062.html

css
AI

开发者交流群×