如何在CSS中使用var()变量
今天就跟大家聊聊有关如何在CSS中使用 var()变量,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联专注于贵德企业网站建设,响应式网站开发,商城网站建设。贵德网站建设公司,为贵德等地区提供建站服务。全流程按需定制,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
定义和使用CSS变量
与任何其他CSS定义一样,变量遵循相同的范围和继承规则。使用它们的最简单方法是通过将声明添加到:root伪类来使它们全局可用,以便所有其他选择器都可以继承它。
:root { --awesome-blue:#2196F3; }
要访问变量中的值,我们可以使用var(…)语法。请注意,名称区分大小写,因此–foo != –FOO。
.element { background-color:var(--awesome-blue); }
浏览器支持
常用的浏览器除了IE都完美支持,您可以在此处获取更多详细信息 –我可以使用CSS变量。下面是几个例子,展示了CSS变量的典型用法。为确保它们正常工作,请尝试在我们上面提到的其中一个浏览器上查看它们。
示例1 – 主题颜色
当我们需要对多个元素一遍又一遍地应用相同的规则时,CSS中的变量是最有用的,例如主题中的重复颜色。我们不是每次想要重复使用相同颜色时进行复制和粘贴,而是将其放在变量中并从那里访问它。
现在,如果我们的客户不喜欢我们选择的蓝色阴影,我们可以在一个地方(变量的定义)改变样式来改变整个主题的颜色。没有变量,我们必须手动搜索和替换每一次出现。
可将代码复制下来在你的编辑器里面测试
* {margin: 0;padding: 0;box-sizing: border-box;}html {padding: 30px;font: normal 13px/1.5 sans-serif;color: #546567;background-color: var(--primary-color);}.container {background: #fff;padding: 20px;}h4 {padding-bottom: 10px;margin-bottom: 15px;}p {background-color: #fff;margin: 15px 0;}button {font-size: 13px;padding: 8px 12px;background-color: #fff;border-radius: 3px;box-shadow: none;text-transform: uppercase;font-weight: bold;cursor: pointer;opacity: 0.8;outline: 0;}button:hover {opacity: 1;} :root { --primary-color: #B1D7DC; --accent-color: #FF3F90; } html { background-color: var(--primary-color); } h4 { border-bottom: 2px solid var(--primary-color); } button { color: var(--accent-color); border: 1px solid var(--accent-color); }
对话框窗口
过放荡不羁的生活,容易得像顺水推舟,但是要结识良朋益友,却难如登天。
示例地址
示例2 – 属性类名可读性
变量的另一个重要用途是当我们想要保存更复杂的属性值时,我们不必记住它。最好的例子就是有多个参数,如CSS规则box-shadow,transform和font。
通过将属性放在变量中,我们可以使用语义可读的名称来访问它。
html{background-color: #F9F9F9;} ul{padding: 20px;list-style: none;width: 300px;} li{font: normal 18px sans-serif;padding: 20px;transition: 0.4s;margin: 10px;color: #444;background-color: #fff;cursor: pointer;} :root{ --tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2); --animate-right: translateX(20px); } li{ box-shadow: var(--tiny-shadow); } li:hover{ transform: var(--animate-right); }
- 我在这里!
- 我在这里!
- 我在这里!
示例地址
示例3 – 动态更改变量
当多次声明自定义属性时,标准规则有助于解决冲突,样式表中最后定义的会覆盖上面定义的。
下面的示例演示了用户动态操作改变属性是多么容易,同时仍然保持代码清晰简洁。
*{margin: 0;padding: 0;box-sizing: border-box;} html{background: #eee;padding: 30px;font: 500 14px sans-serif;color: #333;line-height: 1.5;} .blue-container{background: #64B5F6;padding-left: 50px;} .green-container{background: #AED581;padding-left: 50px;} .container{background: #fff;padding: 20px;} p{transition: 0.4s;} .title{font-weight: bold;} .blue-container{ --title-text: 18px; --main-text: 14px; } .blue-container:hover{ --title-text: 24px; --main-text: 16px; } .green-container:hover{ --title-text: 30px; --main-text: 18px; } .title{ font-size: var(--title-text); } .content{ font-size: var(--main-text); }
这是个标题
将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。
示例地址
正如您所看到的,CSS变量非常简单易用,开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容:
var()函数有两个参数,如果自定义属性失败,它可用于提供回退值:
width: var(–custom-width, 20%);
可以嵌套自定义属性:
–base-color: #f93ce9;
–background-gradient: linear-gradient(to top, var(–base-color), #444);
变量可以与CSS的另一个新增功能- calc() 函数结合使用。
–container-width: 1000px;
max-width: calc(var(–container-width) / 2);
css的三种引入方式
1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用
进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上
就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。看完上述内容,你们对如何在CSS中使用 var()变量有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
当前名称:如何在CSS中使用var()变量
链接地址:http://azwzsj.com/article/pdgsgh.html