首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 自定义属性变量 (variables)

自定义属性(有时候也被称作CSS 变量或者级联变量)是由 CSS 开发者自行定义的,它包含的值可以在整个文档中重复使用。...基本用法声明一个自定义属性,属性名需要以两个减号(--)开始,属性值则可以是任何有效的 CSS 值。...和其他属性一样,自定义属性也是写在规则集之内的,如下:element { --main-bg-color: brown;}所定义自定义属性需要在其可见作用域内(即被嵌套的标签内使用),通常的最佳实践是定义在根伪类...实践中主要用于声明全局CSS变量。...;使用不同于CSS,声明变量以“插值”的形式使用,并且不但可以表示为数值,文本嵌入表达式,还可以作为类名、属性名等。

20310

CSS自定义属性级联变量var()

大小写敏感(另:CSS中,书写属性名时大小写不敏感,但是书写选择器时大小写敏感) 定义只能出现在块{}内 可以使用!...important修饰 作用域就是选择器的选定范围,作用域出现交叉时,同名变量覆盖规则取决于选择器权重 css"> /* 这里定义的变量是全局的 */ :root...自定义属性变量是不能用作CSS属性名称的,比如:var(--color): red; 不能用作背景地址,比如:url(var(--url)); 由于var()后面会默认跟随一个空格,因此在其后面加单位是无效的...document.documentElement); var value = rootStyles.getPropertyValue('--variableName'); // 获取某个元素中定义的属性变量...image.png 响应式布局 可以结合媒体查询实现不同的尺寸采用不同的变量值 /* 先定义一些变量,如主配色和次要配色 */ body { --primary: red; --

1.2K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS变量(自定义属性)实践指南

    CSS变量和预处理器中的变量有什么不同? 你可能已经在CSS预处理器中尝试过使用变量而带来的好处了,比如Sass和Less。 预处理器让你能设置变量,以及在函数、循环、数学计算等等地方中使用它们。...例如,var(--foo)和var(--FOO)是在求两个不同的自定义属性值,分别是--foo和--FOO的。 CSS变量受级联关系影响 和普通CSS属性一样,CSS变量是可继承的。...如何在SVG中使用CSS变量 CSS变量和SVG配合得很好。你可以使用CSS变量去修改SVG中的样式,以及和呈现相关的属性。 举个例子,假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。...注意到SVG symbol中,circle元素里的stroke属性和text元素里的fill属性:它们都使用了CSS变量,这里是--icon-color。...请看看CodePen中的如下示例,你可以交互式地点击侧边栏,修改blend mode属性和背景色。这些实现只用到了CSS变量和JavaScript。 示例6代码。

    1.4K10

    js nextSibling属性和previousSibling属性

    1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。...需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示: 先来看一个例子: 和safari对nextSibling的处理方式与FF一致 2:previousSibling属性 该属性与nextSibling属性的作用正好相反。...3:通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题 一般先通过nextSibling.nodeName来获知其标签名,或者通过nextSibling.nodeType...如果该nextSibling.nodeName = #text,则通过nextSibling.nodeValue来获知其文本值;否则,可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性

    6.8K30

    前端-CSS变量(自定义属性)实践指南

    CSS变量和预处理器中的变量有什么不同? 你可能已经在CSS预处理器中尝试过使用变量而带来的好处了,比如Sass和Less。 预处理器让你能设置变量,以及在函数、循环、数学计算等等地方中使用它们。...例如,var(--foo)和var(--FOO)是在求两个不同的自定义属性值,分别是--foo和--FOO的。 CSS变量受级联关系影响 和普通CSS属性一样,CSS变量是可继承的。...如何在SVG中使用CSS变量 CSS变量和SVG配合得很好。你可以使用CSS变量去修改SVG中的样式,以及和呈现相关的属性。 举个例子,假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。...注意到SVG symbol中,circle元素里的stroke属性和text元素里的fill属性:它们都使用了CSS变量,这里是--icon-color。...请看看CodePen中的如下示例,你可以交互式地点击侧边栏,修改blend mode属性和背景色。这些实现只用到了CSS变量和JavaScript。

    1.8K20

    js 和 css动画

    js和css动画 使用setTimeout()或者setInterval()使用这两个函数定时调用一段代码。这是其原理。 目的,重复修改内联样式,达到动画的效果 通过不断的修改达到动画的目的。...通过在相同的时间内构造出一帧帧的内容,然后让其在函数的作用下不断的改变css的值,达到动画的效果 下面将会是用js写css动画 js写css动画 下面是一个函数 将e转化为相对定位的元素,使得其可以左右移动...e.classList() 脚本化样式表 开启和关闭样式表 style和link元素的CSSStyleSheet对象定义了一个在js中可以设置和查询的disabled属性。...关于disabled属性,该属性在HTML中不属于规范的一部分,在HTML中不存在,但是,在DOM中存在该属性。...该样式只读,不可进行插入和删除 其中selectorText为css选择器 cssText 为css的文本样式 添加和删除规则 insertRule()和deleteRule()这两种方法,达到添加和删除规则

    8.4K60

    css列表属性和样式控制

    如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表。...list-style:简写属性,用于把下边三个属性声明到一起。 list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。...list-style-type的属性值: none:无标记。 disc:标记实心圆。不设置的时候默认disc。 circle:空心圆。 square:实心方块。 decimal:标记是数字。...list-style-position的属性值 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside:默认值,保持标记位于文本的左侧。...inherit:从父级继承list-style-position属性值。

    1.2K20

    css列表属性和样式控制

    如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表。...list-style:简写属性,用于把下边三个属性声明到一起。 list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。...list-style-type的属性值: none:无标记。 disc:标记实心圆。不设置的时候默认disc。 circle:空心圆。 square:实心方块。 decimal:标记是数字。...list-style-position的属性值 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside:默认值,保持标记位于文本的左侧。...inherit:从父级继承list-style-position属性值。

    1K10

    CSS基础——css 属性

    我们知道 css 我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....border-right:10px solid green;border-bottom 设置底边边框,如:border-bottom:10px solid pink;padding 设置元素包含的内容和元素边框的距离...margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right...小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;

    1.5K21

    js动画和css3动画_js控制css动画

    动画 js动画 css动画 Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的。...动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有JavaScript动画才能完成 CSS3有兼容性问题,而JS大多时候没有兼容性问题 css动画 CSS动画通常指使用...如果CSS动画只是改变transform和opacity,这时整个CSS动画得以在compositor thread完成(而JS动画则会在main thread执行,然后触发compositor进行下一步操作...CSS动画比JS流畅的前提: JS在执行一些昂贵的任务 同时CSS动画不触发layout或paint 在CSS动画或JS动画触发了paint或layout时,需要main thread进行Layer树的重计算...,这时CSS动画或JS动画都会阻塞后续操作。

    12.3K30
    领券