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

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

关键字

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

全局关键字

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

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

    1
    2
    3
    4
    5
    6
    7
    <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: 是inheritiniital的通用替身。如果属性可继承,则unset效果与使用inherit相同。如果属性不可继承,则效果与使用initial相同。

all

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

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

Strings

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

URLs

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

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

Images

image 值是对图像的引用

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
      // 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 个字符的宽度
      1
      2
      3
      4
      5
      6
      7
      .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 年末,这些分辨率单位仅用于媒体查询中,
1
2
3
@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()表达式完成。

1
2
3
4
5
6
7
8
9
  .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: 当前元素的颜色的计算值
色调图 色调/RGB

角度

  • 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 个 值: 最后一个 默认0right 20px top->right 20px top 0
  • 4 个 值: top 50% left 35px,表示 距离 top 的偏移量为 50%,距离 left 的偏移量是 35px。

自定义值(Custom Values)

  • 自定义标识符以两个连字符开头--base--color,之后使用val()值类型调用它
  • 可使用特性查询(@supports)判断是否支持该特性
  • 自定义值有限定的,仅在给定的上下文中可以
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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>