CSS知识点梳理(4)-值和单位

关键字、字符串、其他文本值

关键字

在需要用某种类型的单词来描述值的时候，那个单词就是关键字。例如none

全局关键字

CSS 定义了每个属性都给以接受的三个全局关键字:inherit、initial、unset.

• inherit: 使元素上的属性值与其父元素上的属性值相同。

  <div id="toolbar">
    <a href="one.html">One</a> | <a href="two.html">Two</a> |
    <a href="three.html">Three</a>
    </div>
  
  #toolbar {background: blue; color:white;} // a链接 颜色，默认样式
  #toolbar a {color: inherit;}              // a链接，颜色 继承自父元素

• initial: 重置元素的属性值为默认值。

• unset: 是inherit和iniital的通用替身。如果属性可继承，则unset效果与使用inherit相同。如果属性不可继承，则效果与使用initial相同。

all

一个特殊的属性，它的值只接受全局关键字 (inherit | initial | unset )
all是所有属性的替代，除了direction和unicode-bidi.如果一个元素声明了all: inherit, 则其所有属性的值都从其父元素继承，除了direction和unicode-bidi 。

<section>
    <div id="example">This is a div</div>
</section>

Strings

字符串值用单引号或双引号包装的任意字符序列，用<string>的值来表示

URLs

在@import声明中，导入外部样式表是用到。注意：在 CSS 中，相对 url 是相当样式表本身的，而不是相当于使用样式表的 HTML 文档

@import url(protocol://server/pathname);   /* 绝对路径 */
@import url(pathname)                     /* 相对路径 */

Images

image 值是对图像的引用

• <url>: 外部资源标识符，在本例中，就是图像的 url

• <image-set>: 一组图像，根据嵌入值中的条件来选择。例如image-set()可以指定大的突图像应用于桌面布局，小的图像应用于移动设计。类似于图像元素的 srcset 属性。

    // 1x 2x 表示：像素密度
   .imageSet {
    width: 300px;
    height: 400px;
    background: -webkit-image-set(url(https://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png) 1x, url(https://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png) 2x);
    background-repeat: repeat-y;
  }
  
    <img src="https://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png"
        srcset="
        https://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png 1x,
        https://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png 2x
        "
    />
        <img src="https://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png"
        srcset="
        https://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png 325W,
        https://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png 375W
        "
    />

• <gradient>: 指一个线性或经向的梯度图像。

分数值（弹性值）（Fractions）

分数值（弹性值）是一个后跟标签fr。这是在网格布局中引入的概念，用于划分布局中无约束空间的部分。

距离

绝对长度单位

• Inche (in)英寸，1in = 2.54cm；1cm = 0.394in
• Centimeter(cm)
• Millimeter(mm)
• Point(pt)点，72pt = 1in； p {font-size:18pt}相当于p {font-size: 0.25in;}
• Pixel(px)像素，是屏幕上的一个小格子。但在 CSS 中像素比较抽象，像素被定义为每英寸产生 96 像素所需要的大小。
  在 CSS 规范建议，如果显示器的分辨率密度明显不同于每英寸 96 像素（ppi，96 pixels per inch）,则用户代理应将像素缩放到“参考像素”，CSS2.1 和 CSS3 建议是 96ppi。
  如果一个显示器的分辨率是宽：1024px，高：768px，则其屏幕的尺寸是宽：10 2/3 英寸，高：8 英寸，它完全由显示像素填充，每个像素宽、高是 1/96 英寸。一些显示器的 ppi 高于 96，如视网膜显示屏，iPhone 4S 是 326ppi，iPad 是 264ppi

相对长度单位

• em/ex，em:小写 m 的宽度；ex:小写 x 的高度。
• rem, rem总是使用根元素（html 元素）字体大小来计算；em使用它所应用的元素的字体大小来计算；
• ch, “one character”,等于0字符的宽度或高度。(文字本身的宽度+两边内置间距)。
  1. 可保证每一行最大 80 个字符宽度
  2. 可给图片宽度设置 25 个字符的宽度

     .contanier {
       width: 80ch;
     }
     img {
       height: 1rem;
       width: 25ch;
     }

视口相对大小单位

CSS3 中新增的特性，相对于视口进行计算的单位。如浏览器窗口、可打印区域、移动设备显示

• Viewport width unit(vm)：由视口宽度/100 计算而来，如果视口宽度 937px，1vm=9.37px,如果视口改变，vm 值也随之改变。
• Viewport height unit(vh): 由视口高度/100 计算而来
• Viewport minimum unit(vmin): 取 vm 和 vh 中较小的，如果视口宽 937px，高 640px，则 1vmin = 6.4px
• Viewport maximum unit(vmax): 取 vm 和 vh 中较大的

分辨率单位

随着媒体查询和响应设计的出现，为了能够描述显示分辨率，引入了三种新的单位

• Dots per inch(dpi)：线性上每英寸的显示点数。可以指打印机输出的点，设备的物理像素，或电子墨显示屏中的电子像素。
• Dots per centimeter(dpcm)：每厘米的显示点数。
• Dops per pixel unit(dppx)：每个 CSS 像素单位的显示点数。CSS3 中。1dppx 相当于 96dpi,因为 CSS 以该比率定义像素单位。
  截止 2017 年末，这些分辨率单位仅用于媒体查询中，

@media (min-resolution: 500dpi) {

}

计算的值（Calculation Values, calc()）

calc(),可以在任何允许使用以下数值类型的地方。<length>,<frequency>, <angle>,<time>,<percentage>, <number>, <integer>，也可以使用它们的单位类型。单需要注意以下限制：

• +,-符号两边的值必须相同单位类型或<number>和<integer>.如5em + 2.7是非法的,因为一个是长度单位（em），另一个不是。5em + 20px是合法的，两个都是长度单位。
• +,-符号两边需要空格，*,/不需要。

属性值 （Attribute Values, attr()）

在一些 CSS 属性中，可以填入该元素定义的 HTML 属性的值，还可以指定表达式中的值类型。通过attr()表达式完成。

  .say::before {
    content: "[" attr(class) "]";
  }
  .say::after {
    content: attr(data-after);
  }

<div class="jiangjiang say" data-height="10" data-after="after>>>>>>>>">
</div>

颜色

type	description
name colors	148 color keywords
RGB/RGBa	rgb(255,255,255) rgba(100%,100%,100%,0.5)
hexadecimal RGB color	#FF3BC0 #0F0 #00FF00
hexadecimal RGBa color	#000000FF 第 7-8 位表示透明度，FF~00,透明度递减
HSL/HSLa	H:hue(色调,色相角度,0-360);S:saturation(饱和度,0-100%);L:lightness(亮度,0-100%)
color keywords	transparent：透明色 rgba(0,0,0,0),是背景色的默认值; currentColor： 当前元素的颜色的计算值

角度

• deg : Degrees, 一圈 360 度
• rad : Radians,一圈 2π(近似 6.28)
• turn : Turns，一整圈，常用在动画、旋转，10turn代表 10 圈

Degrees	Radians	Turns
0deg	orad	0turn
45deg	0.785rad	0.125turn
90deg	1.571rad	0.25turn
180deg	3.142rad	0.5turn
270deg	4.712rad	0.75turn
360deg	6.283rad	1turn

位置

<position>值是如何指定背景区域中原始图像的位置

• 1 个 值: 第 2 值默认center; 25%-> 25% center
• 2 个 值：第 1 个是长度或百分比，则代表水平方向上的值。25% 35px，水平方向:25%,竖直方向:35px;
• 3 个 值: 最后一个 默认0，right 20px top->right 20px top 0
• 4 个 值: top 50% left 35px，表示 距离 top 的偏移量为 50%，距离 left 的偏移量是 35px。

自定义值(Custom Values)

• 自定义标识符以两个连字符开头--base--color,之后使用val()值类型调用它
• 可使用特性查询（@supports）判断是否支持该特性
• 自定义值有限定的，仅在给定的上下文中可以

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Custom Values</title>
    <style>
      @supports (color: var(--custom)) {
        html {
          --base-color: #639;
        }
        aside {
          --base-color: #f60;
        }
        h1 {
          color: var(--base-color);
        }
        .box {
          --gutter: 3ch;
          --offset: 1;
        }
        ul li {
          margin-left: calc(var(--gutter) * var(--offset));
        }
        ul ul li {
          --offset: 2;
        }
        ul ul ul li {
          --offset: 3;
        }
      }
    </style>
  </head>
  <body>
    <h1>Main H1</h1>
    <aside>
      <h1>aside H1</h1>
    </aside>
    <h1>Main H1</h1>
    <h1>Main H1</h1>

    <br />
    <div class="box">
      <h2>a regular set of indents for unordered lists</h2>
      <ul>
        <li>1111</li>
        <li>1111</li>
        <ul>
          <li>2222</li>
          <li>2222</li>
          <ul>
            <li>3333</li>
            <li>3333</li>
            <li>3333</li>
          </ul>
        </ul>
      </ul>
    </div>
  </body>
</html>