读懂css属性值

前言

在查阅css 文档的时候 总是会出现 类似被<>包裹的语法提示，这些其实就是 css 的基本数据类型 就和编程语言中的基本数据类型至于编程语言一样重要，所以要想更顺畅的查阅css 文档 ，了解并熟悉css 基本数据类型是必要的。常见的数据类型再加上符号和关键字 就组成了css 的属性值语法
下面献上我常用的css 查阅链接
http://css.doyoe.com/

开始

先找个 最常见的一个css 属性 border
链接：http://css.doyoe.com/properties/backgrounds/border.htm

常见的几个数据类型

参考链接： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Types

angle

css 数据类型
用于表示角的大小，单位为：度（degrees）、 百分度（gradians）、弧度（radians）或圈数（turns）

deg
度。一个完整的圆是 360deg。例：0deg，90deg，14.23deg。
grad
百分度。一个完整的圆是 400grad。例：0grad，100grad，38.8grad。
rad
弧度。一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度。例：0rad，1.0708rad，6.2832rad。
turn
圈数。一个完整的圆是 1turn。例：0turn，0.25turn，1.2turn。
1
2
3
4
5
6
7
8
9
10
11

basic-shape

<basic-shape>是一种表现基础图形的 CSS 数据类型，作用于clip-path 与 shape-outside 属性中。
clip-path 做尺寸裁切 属性 
shape-outside 

1
2
3
4

color

CSS 数据类型 <color> 表示一种标准 RGB 色彩空间（sRGB color space）的颜色

1
2

fliter-function

<filter-function> CSS 数据类型 代表可以改变输入图像外观的图形效果。它可以用于filter 和 backdrop-filter 属性。

blur()
模糊图像
brightness()
让图像更明亮或更暗淡
contrast()
增加或减少图像的对比度
drop-shadow()
在图像后方应用投影
grayscale()
将图像转为灰度图
hue-rotate()
改变图像的整体色调
invert()
反转图像颜色
opacity()
改变图像透明度
saturate()
超饱和或去饱和输入的图像
sepia()
将图像转为棕褐色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

gradient

<gradient> 是一种<image>CSS 数据类型的子类型，用于表现两种或多种颜色的过渡转变。
<gradient> 数据类型由下列函数定义。
颜色值沿着一条隐式的直线逐渐过渡。由linear-gradient() 产生。
颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由radial-gradient()函数产
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() (en-US)和repeating-radial-gradient() 函数产生。

1
2
3
4
5
6

image

一个<image>CSS 数据类型可能表示成如下几种类型：
一个图像被引用为 CSS <url>数据类型使用 url() 方法；
url(test.jpg) 
一个 CSS<gradient>;
linear-gradient(to bottom, blue, red) 
页面的一个部分，定义在element()方法中(不常见)；
element(#colonne3)   
1
2
3
4
5
6
7

interger

<integer>数据类型由一个或多个十进制数字组成，
包括 0 到 9，可以选择前面加一个 + 或-号。没有与整数关联的单位。
1
2

length

长度 <length> 是用于表示距离尺寸的 CSS 数据类型。
许多 CSS 属性会用到长度，
比如 width、margin、padding、font-size、border-width 和 text-shadow。
1
2
3

number

 CSS 数据类型代表一个数字，可为整数或小数。
 它的语法扩展了<integer>的数据值。要表示一个小数则加上小数部分
  -- “."后跟一或多为十进制数字--到任何<integer>数据值。
 像<integer>数据类型一样，<number>没有任何单位，并不是一个 CSS 尺寸。
1
2
3
4

percentage

CSS 数据类型 <percentage> 表述一个百分比值。
许多 CSS 属性 可以取百分比值，经常用以根据父对象来确定大小。
百分比值由一个<number>具体数值后跟着%符号构成。
就像其它在 css 里的单位一样，在%和数值之间是不允许有空格的。
1
2
3
4

position

<position> CSS 数据类型表示用于设置相对于框的位置的 2D 空间中的坐标。

特定坐标可以由具有特定偏移的两个关键字给出。
关键字表示元素框的一条边或两条边之间的中心线：左，右，上，下或中心 
(其表示左边缘和右边缘之间的中心，或者顶部边缘或底部边缘之间的中心，
这取决于上下文).
1
2
3
4
5
6

符号

可以分为以下三类

字面符号

字面符号指的是CSS属性值中原本就支持的合法符号，这些
符号在CSS语法中会按照其原本的字面意义呈现。目前字面符号就两
个，一个是逗号（,），另一个是斜杠（/）
1
2
3

组合符号

组合符号用来表示数个基本元素之间的组合关系。
目前共有5个组合符号，其中大多数组合符号的含义一目了然
1
2

数量符号

练习

现在重新看下 border

border：<line-width> || <line-style> || <color>
<line-width>：定义元素的边框厚度。
<line-style>：定义元素的边框样式。
<color>：定义元素的边框颜色。


1
2
3
4
5
6

表示 border 可以设置 line-width line-style color 一个或多个 且不用排序

来个升级练习

 <side-or-corner> = [ left | right ] || [ top | bottom ]
 <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
 <linear-color-stop> = <color> [ <color-stop-length> ]?
 <color-stop-length> = [ <percentage> | <length> ]{1,2}
<color-hint> = [ <percentage> | <length> ]
1
2
3
4
5

分析：
1. 首先 [] 方括号优先级最高 后面接了个？代表 [ <angle> | to <side-or-corner> ,] 所设置的属性 可以设置也可以不设置
2. 再分析[ <angle> | to <side-or-corner> ,] 其中存在| 互斥符号 代表着 要么直接设置成<anger> 角度单位  要么设置成 to(关键字) <side-or-corner> ，设置后要带上，号才能设置后面的属性
3. 后面  <color-stop-list> 要分解开

1
2
3
4
5

box-shadow: none | [ inset? && {2,4} && ? ]#

其中出现的“与”组合符（&&），表明inset关键字、
<length>数据类型和<color>数据类型的顺序是可以随意排列的，
所以下面这几种写法都是合法的：
box-shadow: 2px 2px inset #000;
box-shadow: inset #000 2px 2px;
box-shadow: #000 2px 2px inset;
其中<length>{2,4}表示可以使用2～4个<length>数据类
型，```

1
2
3
4
5
6
7
8
9