指引
前言
在查阅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。
basic-shape
<basic-shape>是一种表现基础图形的 CSS 数据类型,作用于clip-path 与 shape-outside 属性中。
clip-path 做尺寸裁切 属性
shape-outside
color
CSS 数据类型 <color> 表示一种标准 RGB 色彩空间(sRGB color space)的颜色
fliter-function
<filter-function> CSS 数据类型 代表可以改变输入图像外观的图形效果。它可以用于filter 和 backdrop-filter 属性。
blur()
模糊图像
brightness()
让图像更明亮或更暗淡
contrast()
增加或减少图像的对比度
drop-shadow()
在图像后方应用投影
grayscale()
将图像转为灰度图
hue-rotate()
改变图像的整体色调
invert()
反转图像颜色
opacity()
改变图像透明度
saturate()
超饱和或去饱和输入的图像
sepia()
将图像转为棕褐色
gradient
<gradient> 是一种<image>CSS 数据类型的子类型,用于表现两种或多种颜色的过渡转变。
<gradient> 数据类型由下列函数定义。
颜色值沿着一条隐式的直线逐渐过渡。由linear-gradient() 产生。
颜色值由一个中心点(原点)向外扩散并逐渐过渡到其他颜色值。由radial-gradient()函数产
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() (en-US)和repeating-radial-gradient() 函数产生。
image
一个<image>CSS 数据类型可能表示成如下几种类型:
一个图像被引用为 CSS <url>数据类型使用 url() 方法;
url(test.jpg)
一个 CSS<gradient>;
linear-gradient(to bottom, blue, red)
页面的一个部分,定义在element()方法中(不常见);
element(#colonne3)
interger
<integer>数据类型由一个或多个十进制数字组成,
包括 0 到 9,可以选择前面加一个 + 或-号。没有与整数关联的单位。
length
长度 <length> 是用于表示距离尺寸的 CSS 数据类型。
许多 CSS 属性会用到长度,
比如 width、margin、padding、font-size、border-width 和 text-shadow。
number
CSS 数据类型代表一个数字,可为整数或小数。
它的语法扩展了<integer>的数据值。要表示一个小数则加上小数部分
-- “."后跟一或多为十进制数字--到任何<integer>数据值。
像<integer>数据类型一样,<number>没有任何单位,并不是一个 CSS 尺寸。
percentage
CSS 数据类型 <percentage> 表述一个百分比值。
许多 CSS 属性 可以取百分比值,经常用以根据父对象来确定大小。
百分比值由一个<number>具体数值后跟着%符号构成。
就像其它在 css 里的单位一样,在%和数值之间是不允许有空格的。
position
<position> CSS 数据类型表示用于设置相对于框的位置的 2D 空间中的坐标。
特定坐标可以由具有特定偏移的两个关键字给出。
关键字表示元素框的一条边或两条边之间的中心线:左,右,上,下或中心
(其表示左边缘和右边缘之间的中心,或者顶部边缘或底部边缘之间的中心,
这取决于上下文).
符号
可以分为以下三类
字面符号
字面符号指的是CSS属性值中原本就支持的合法符号,这些
符号在CSS语法中会按照其原本的字面意义呈现。目前字面符号就两
个,一个是逗号(,),另一个是斜杠(/)
符号 | 描述 |
---|---|
, | 用来分隔数个并列值,或者分隔函数的参数值 |
/ | 用来分隔一个值的多个部分,在CSS缩写中用于分离类型相同但属于不同CSS属性的值,以及用在部分CSS函数中 |
组合符号
组合符号用来表示数个基本元素之间的组合关系。
目前共有5个组合符号,其中大多数组合符号的含义一目了然
符号 | 名称 | 描述 |
---|---|---|
空格符 | 并列 | 符号为普通空格字符,表示各部分必须出现,同时需要按顺序出现 |
&& | 与 | 各部分必须出现 但可以不按顺序出现 |
|| | 或 | 各部分至少出现一个,可以不按顺序出现 |
| | 互斥 | 各部分恰好出现其中一个 |
[] | 方括号 | 将各部分进行分组以绕过上面几个符号的优先规则,因此方括号的优先级最高 |
数量符号
练习
现在重新看下 border
border:<line-width> || <line-style> || <color>
<line-width>:定义元素的边框厚度。
<line-style>:定义元素的边框样式。
<color>:定义元素的边框颜色。
表示 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. 首先 [] 方括号优先级最高 后面接了个?代表 [ <angle> | to <side-or-corner> ,] 所设置的属性 可以设置也可以不设置
2. 再分析[ <angle> | to <side-or-corner> ,] 其中存在| 互斥符号 代表着 要么直接设置成<anger> 角度单位 要么设置成 to(关键字) <side-or-corner> ,设置后要带上,号才能设置后面的属性
3. 后面 <color-stop-list> 要分解开
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>数据类
型,```