使用了三种方式

• attr 可以用于 content: attr() ，本次传递颜色值没有成功
• currentColor 获取可以当前颜色值
• var(--color) 可以获取当前作用域内的变量值

效果如下

完整代码

<style>
      .box-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      .box {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border: 1px solid #dddddd;
      .box-1 {
        background-color: attr(data-color);
      .box-2 {
        background-color: currentColor;
      .box-3 {
        background-color: var(--color);
    </style>
    <div class="box-wrapper">
      <div class="box box-1" data-color="red">attr</div>
      <div class="box box-2" style="color: green">currentColor</div>
      <div class="box box-3" style="--color: red">var</div>
    </div>
 
参考
 CSS - 使用数据属性添加颜色 - attr(数据颜色)
 
用法：Ember 2.17及以上
从Ember 2.17或更高版本开始，我们切换到使用修饰符在元素上设置自定义属性。 此设计决策使在应用程序的任何级别（包括顶级模板）上应用自定义属性变得容易得多。
 这是设置自定义属性的改进方法。 您只需要确保跟踪传递给
                                    CSS（层叠样式表）是一种用于控制网页样式和布局的语言，它赋予网页以美观的外观和结构。通过将HTML文档与CSS样式分离，开发人员可以更好地管理、修改和维护网页的外观。以下是关于CSS笔记的详细描述：
样式规则： CSS通过一系列样式规则来定义元素的外观和布局。每条规则由一个选择器和一个声明块组成。选择器指定要应用样式的元素，声明块包含一个或多个属性-值对。
选择器： 选择器是标识要应用样式的HTML元素的模式。常见的选择器包括元素选择器（如p选择所有段落）、类选择器（如.btn选择具有特定类的元素）、ID选择器（如#header选择特定ID的元素）等。
属性和值： 样式规则的声明块由属性和值组成。属性表示要修改的样式特性（如color表示文本颜色），值则表示为属性设置的样式值（如red表示红色）。
样式继承： 某些样式属性会从父元素传递给子元素，形成样式继承。这意味着子元素将继承父元素的一些样式属性，除非子元素上明确地进行了覆盖。
盒模型： CSS的盒模型描述了元素的尺寸和布局。每个元素被认为是一个矩形的盒子，包括内容区域、内边距、边框和外边距。
布局： CSS通过属性和值来
                                    结构与层叠
每个合法的文档都会生成一个结构树，有了结构树元素的祖先、属性兄弟元素等等创建选择器来选择元素，这是CSS继承的核心。继承是从一个元素向后代元素传递属性值所采用的机制。面向一个元素使用哪些值时，用户代理不仅要考虑继承，还要考虑特殊性，另外需要考虑声明本身的来源，这个过程就叫层叠。
本文讨论3种机制之间的关联：特殊性、继承和层叠。
同一元素可以使用不同的方法来选择元素。但是每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则的个个声明。如果一个元素有两个或多个冲突的属性声明，那么最高特殊性的声明会胜出。
特殊性计算规则：
1）对于选择器中给定的各个ID属性值，加01
HTML1.0 – HTML2.0 (IETF制定) – HTML4.0(最终版) W3C
IETF – Internet Engineering Task Force
HTTP协议 RFC等
RFC2616 Http1.1  RFC1521 MIME
W3C – World Wide Web Consortium (www.w3.org)
HTML XML等
XHTML
符合XML标准的HTML
DHTML  Dy’namic HTML 
（X）HTML / CSS / JavaScript的综合运用
CSS—Cascade Style Sheet层叠样式表
1998/5/12，CSS level2成为W3C标准
用来装饰HTML/XML的标记集合
样式表由样式规则组成，以告诉浏览器如何显示一个文档
每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式
每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现
JavaScript和Java的区别
基于对象和面向对象 
解释和编译 
强变量和弱变量 
JavaScript中变量声明，采用其弱类型。
即变量在使用前不需作声明，而是解释器在运行时检查其数据类型
x=1234;                        //数值型变量
y＝“4321”;                  //字符型变量
代码格式不一样 
嵌入方式不一样
                                    CSS属性动态传值
定义CSS变量
<span class="header-title" :style="{'--font-color': dropdownFont}"></span>
CSS中使用变量
.header-title{
	color: var(--font-color);
CSS中有很多媒体查询的用法，例如设备尺寸判别，是否支持鼠标行为，是否是黑暗模式，是否是省电模式等。
比方说最近经常提到的黑暗模式，深色主题：
@media (prefers - color - scheme : dark) {
      /* 黑暗模式，深色主题 */
@media (prefer...
                                    本节我们要学习一下 CSS 样式的几种形式，在实际应用中向 HTML 中引入 CSS 样式的方法有三种，分别是行内样式、内部样式、外部样式。我们会依次学习这三种方式的优缺点以及应用场景，本节我们先来讲一下行内样式。
什么是行内样式
行内样式，其实从它的名字就可以看出来它的特点，就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这样的：
<p style="font-size: 18px;">行内样式</p>
HTML 中的 style 属性提供了一种改
今天和大家分享下，页面的布局，首先我们来分析以下网页的基本机构，我们来分析下李宁官网，企业官网，结构都很相似。
看第一部分导航，分为俩个部分，第1部分和第2部分，面对这样的结构，我们通常会用到float,俩个div,一个向左浮动，一个向右浮动
通常我们都会先会把页面结构写出来，然后再写对应的样式，要重点提一下，子元素使用float的时候，父元素要加上clear...