CSS基本知识

1. CSS 的数据类型

部分数据类型如下：数据来源

1.1 <image>

• ：数据类型：用于表示url()函数调用的图像资源

• : 数据类型：用于表示渐变图像，包含两种或多种颜色的过渡转变。目前有四种渐变类型

  • linear-gradient（线性渐变），radial-gradient（径向渐变），repeating-linear/radial-gradient（重复渐变），conic-gradient（锥形渐变）

• element(): 用于表示元素的图像，如：element(#myPic)

• image(): 函数将会创建一个新的 HTMLImageElement 实例，等价于 document.createElement('img')

• image-set(): 根据屏幕指定不同图像

• cross-fade()

  • 使用 cross-fade 实现半透明背景

  •   .dark { width: 200px; height: 200px; 
      --transparent:
      url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /**纯黑的背景 */
      background: no-repeat center / contain ;/**居中按比例缩小 */ background-image:
      -webkit-cross-fade(var(--transparent), url(1.jpg), 40%); 
      }
      ​
      <div class="dark">
        我来测试一下，这是一张半透明的哦！我来测试一下，这是一张半透明的哦！我来测试一下，这是一张半透明的哦！我来测试一下，这是一张半透明的哦！我来测试一下，这是一张半透明的哦！我来测试一下，这是一张半透明的哦！我来测试一下，这是一张半透明的哦！
      </div>
    

1.2 <box>

background-origin / background-clip 等css属性值就是 数据类型 box数据类型包括下面这些属性值

• content-box
• border-box
• padding-box

1.3 <color>

几乎所有带color关键字的css属性都支持这个数据类型 数据类型支持的属性值如下：

• <rgba()>
• <rgb()>
• <hsl()>
• <hsla()>
• <hex-color()>
• <named-color()>
• currentColor
• <deprecated-system-color>: 废弃的系统颜色

2. css属性值定义语法

用来表示css属性值的合法组成

2.1 符号

列举部分符号

1. 字面符号
   1.1 逗号, ：并列分隔符
   1.2 正斜杠/ : 缩写分隔符，用于分离类型相同但是数据不同css属性的值
2. 组合符号 2.1 []：将各部分进行分组
3. 数量符号
   3.1 !: 当前分组必须产生一个值 [<image-src>? , <color>? ] !
   3.2 *: 任意个数量的
   3.3 #: 和*基本一样，但是后面可以指定数量范围 ,例如：rgb( <number>#{3} , <alpha-value>? ) rgb只能由三个数字 - 红绿蓝组成

2.2 全局关键字

• inherit：继承，使用场景：height: inherit实现子元素对父元素的高度继承，background-image:inherit实现子元素对父元素的背景图片继承。

• initial：初始化，使用场景： 需要重置某些css样式，但又不记得初始值的场景。注意：初始值和浏览器内置的默认值有可能不同，例如ul中，list-style-type:initial => list-style-type:disc而非decimal。

• unset：如果该css属性具有继承特性，则等同于使用inherit关键字，否则等同于inital。使用场景：dialog{all: unset;}，对于dialog的样式进行批量重置，在设置我们需要的css属性

  • all：可以重置除unicode-bidi, direction 以及css自定义属性以外的所有css属性。

• revert: 让当前元素的样式还原成浏览器内置的样式。

区分各种浏览器

• IE9+ 浏览器才开始支持伪类和伪元素: _::before, .some-class{}

• IE10+ 浏览器才开始支持与表单验证相关的伪类：_:valid, .some-class{}

• IE11+ 浏览器才开始支持::-ms-backdrop, .some-class{}, 其他浏览器加了私有前缀反而无法识别

• IE12+ 可以使用@supports规则

  • @support: 用来检测当前浏览器是否支持某个css新特性
  • @supports: 规则的复杂条件判断是把合法的逻辑语句放到括号里不断嵌套，例如，判断支持弹性布局，但不支持网格布局：@support (display: flex) and (not (display: grid)){...}
  • JS中可以使用CSS.supports()方法

• IE13+可以使用:in-range或者:out-of-range伪类

• 识别火狐浏览器：_::-moz-progress-bar, .some-class{} 只需要带有-moz-私有前缀的伪类或者伪元素就行了。

• 只想让webkit浏览器识别，只能使用带有-webkit-前缀的伪类 => 注意：firefox认为带有-webkit-前缀的伪元素是合法的