CSS的强大之CSS中的变量

这篇具有很好参考价值的文章主要介绍了CSS的强大之CSS中的变量。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


css 变量,css,前端,html

一、 什么是CSS变量?

自定义属性的通俗叫法,就是根据我们的需求定义属性的名称和属性值,CSS一开始就不支持原生变量。所以大家开始选择SCSS,LESS等兼容的 CSS 扩展语言。不过庆幸的是CSS目前也已经支持变量。

二、 如何定义CSS变量?

属性名

必须使用俩个减号(- -)开头,数字、字母、下划线、中划线都是可以的。但是他跟普通属性还是有一个根本区别,他必须用俩个用划线(减号)开头

属性值

属性值的规则跟普通属性一样,也就是css样式属性值,普通属性可以用数字文本带单位的长度角度等等都可以作为它的属性值

注意事项
  1. 大小写敏感
    大写和小写会是俩个不同的自定义属性
  2. 计算时有时效性
    自定义属性值可以是任何内容,甚至可能不是css的有效数值,但并不影响定义,只要保证在使用css自定义属性的地方,最终的计算结果是有效的就可以了
  <style>
    :root{
      --color:'#fff';
      --Color:'#666';
      --font-cm:20px;
      --num_1:10;
    }
  </style>

css 变量,css,前端,html

三、 如何使用CSS变量?

var()方法

CSS提供了一个var()方法进行自定义属性值的获取,可以在多个地方获取到自定义的属性值

<!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变量</title>
  <style>
    /* 定义CSS变量 */
    :root{
      --color:'#fff';
      --Color:'#666';
      --font-cm:20px;
      --num_1:10;
    }
    /* 使用CSS变量 */
    p{
      font-size: var(--font-cm);
    }
  </style>

</head>
<body>
  <p>CSS变量使用</p>
</body>
</html>

效果
css 变量,css,前端,html

calc()方法

CSS页提供了calc()进行数值计算,就可以通过var()使用自定义属性的值进行计算

<!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变量</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /* 定义CSS变量 */
    :root{
      --color:'#fff';
      --Color:'#666';
      --font-cm:20px;
      --num_1:10;
    }
    /* 使用CSS变量 */
    p{
      /* var 方法 */
      font-size: var(--font-cm);
      /* calc 方法 */
      width: calc(var(--font-cm)*10);
    }

  </style>

</head>
<body>
  <p>CSS变量使用</p>
</body>
</html>

效果
css 变量,css,前端,html

四、 CSS变量可以干什么?

  1. 提取相同的属性值,方便后期批量修改,在维护代码的时候,直接修改变量,然后使用变量的就会跟着改变
  2. 简化相似代码

五、 CSS变量作用域问题?

当我们使用var()方法的时候,会首先从当前选择器进行查找,然后是父元素,祖父元素,直至根元素
以下代码供大家测试

<!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变量</title>
  <style>
    /* 作用域问题 */
    .a{
      --color:red;
    }
    .b{
      --color: yellow ;
    }
    .c{
      --color:blue ;
      color: var(--color)
    }
  </style>

</head>
<body>
  <div class="a">
    <div class="b">
      <div class="c">作用域问题</div>
    </div>
  </div>
</body>
</html>

先从当前选择器进行查找
css 变量,css,前端,html
当前选择器没查找到查找,其次是在父元素中查找
css 变量,css,前端,html
在其次就是在祖父元素中查找,直至根元素
css 变量,css,前端,html

扩展

var()方法的第二个参数

var()方法获取不到任何值就失效了,会显示默认的颜色也就是继承来的颜色,其实var()方法支持多个参数,第二个参数就是当我们的变量失效时使用的一个默认值,甚至第二个参数还可以嵌套一层var()方法
第二个参数就是当我们的变量失效时使用的一个默认值

<!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变量</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .c{
      --color1:green;
      color: var(--color,pink)
    }
  </style>

</head>
<body>
   <div class="c">var方法第二个参数</div>
</body>
</html>

css 变量,css,前端,html

第二个参数还可以嵌套一层var()方法

<!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变量</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .c{
      --color1:green;
      color: var(--color,var(--color1))
    }
  </style>

</head>
<body>
   <div class="c">var方法第二个参数</div>
</body>
</html>

css 变量,css,前端,html

总结

自定义属性可以大大的简化我们的样式代码,尤其是那些重复或者有规律的属性值,结合calc方法更是可以创造出很多很有意思的效果
ie是不支持自定义属性的
css 变量,css,前端,html

参考文献

https: / / developer.mozilla.org/zh-
CN/docs/Web/CSS/Using_cSs_custom_properties

此文仅总结我对CSS变量,学到的一些知识。日后若是有新用法新场景,也会整理进来!如果这篇【文章】有帮助到你💖,希望可以给我点个赞👍,创作不易,如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖,咱们一起探讨和努力!!!
👨‍🔧 个人主页 : 前端初见文章来源地址https://www.toymoban.com/news/detail-753470.html

到了这里,关于CSS的强大之CSS中的变量的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web前端——HTML+CSS

    HTML CSS CSS进阶 CSS盒子模型 定位装饰 CSS精灵图 目录 基础认识  HTML  一、HTML概念 二、HTML页面固定结构  三、HTML标签的结构   四、标签学习 1、排版标签 1)标题标签  2)段落标签  3)换行标签 4)水平线标签  2、文本格式化标签  3、媒体标签 1)图片标签 2)路径  3)音

    2024年01月16日
    浏览(56)
  • 前端(HTML + CSS + JS)

    HTML是超文本标记语言,超文本是指文本、声音、图片、视频、表格、链接等等。标记表示由许许多多的标签组成。HTML页面是运行到浏览器上的。 (1)HTML 文件基本结构 html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性 body 标签中写的是页面上显示的内

    2024年02月05日
    浏览(49)
  • CSS中的变量

    1.1 变量的声明 声明变量的时候,变量名前面要加两根连词线( -- )。变量名大小写敏感, --header-color 和 --Header-Color 是两个不同变量。 上面代码中, body 选择器里面声明了两个变量: --foo 和 --bar 。使用变量用var()函数。 它们与 color 、 font-size 等正式属性没有什么不同,只

    2024年02月08日
    浏览(35)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(59)
  • 前端基础:HTML和CSS简介

    目录 1、HTML 简介 (1)在 HTML 中引入外部 CSS (2)在 HTML 中引入外部 JavaScript 2、CSS 简介 (1)CSS 的基本语法 (2)三种使用 CSS 的方法 2.1 - 外部 CSS 的使用 2.2 - 内部 CSS 的使用 2.3 - 行内 CSS 的使用         HTML 指的是超文本标记语言 ( H yper  T ext  M arkup  L anguage), 标记语

    2024年02月16日
    浏览(42)
  • Web前端开发:HTML、CSS

    在介绍Web网站工作流程的时候提到, 前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序 ,如下图所示: 1.   网页有哪些部分组成 ? 文字、图片、音频、视频、超链接、表格等等。 2.  我们看到的网页,背后的本质是什么 ? 程序员写的前端

    2023年04月18日
    浏览(41)
  • Web 前端—HTML+CSS系列

    (1)知识点 :是制作网页的编程语言 浏览器把代码解析后的样子就是我们看到的网站 一个网站是由很多个网页组成的 查看网页代码源 (2).html网页制作 新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式(打开记事本)——输入要输入的内容—

    2024年02月04日
    浏览(56)
  • 前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月17日
    浏览(45)
  • 蓝旭前端预习1——HTML+CSS

    目录 HTML HTML:超文本标记语言 HTML基本骨架 标签的关系 常见标签及其属性 注释标签 标题 段落 换行 水平线 文本格式化 图像 超链接 多媒体:音频+视频 div、span标签:划分网页区域,摆放内容 字体实体:在网页中显示预留字符 列表 有序列表 无序列表 定义列表 表格 表单:

    2024年04月15日
    浏览(45)
  • 前端全集Ⅰ---- HTML/CSS/JavaScript

    Web:全球广域网,也称万维网,能够通过浏览器访问的网站 Web网站的工作流程:(前后端分离模式) 网页有哪些组成? 文字、图片、视频、音频、超链接 前端代码通过浏览器的解析和渲染变成用户看到的页面,对网页进行解析渲染的部分就是浏览器的内核 Web标准 不同的浏

    2024年02月15日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包