CSS数据类型以及符号

css数据类型定义的是css属性中具有代表性的值,在规范的语法格式中,使用关键字外加一对 <>表示,例如数值类型、色值类型等。
举个例子:background-image这个css属性语法结构如下:

background-image : none | 

这里的image就是一种数据类型,它包括下面这些类型和函数:

1、
2、
3、element()
4、image()
5、iamge-set()
6、cross-fade()
7、paint()

这也就是说background-image属性不仅支持url()函数和渐变图像,还支持element()、image()、image-set()等函数。

再来看一个例子:
mask-image,该属性可以设置图片蒙版,它的数据类型为:
CSS数据类型以及符号_第1张图片

mask-image : none |  | 
/*效果如下*/ 
.masks{
            width: 200px;
            height:200px;
            background-color: cyan;
            mask-image: url(../images/music.png);
            -webkit-mask-image: url(../images/music.png);  /* 兼容谷歌 */
   }

CSS数据类型以及符号_第2张图片
数据类型文档:
mdn web docs文档:https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-value

数据类型文档:https://www.zhangxinxu.com/wordpress/2019/11/css-value-type/#color-zxx


CSS属性值定义语法详解
css的语法基本包含下面3中基本组成元素:

  • 关键字
  • 数据类型
  • 符号

举个例子:线性渐变

background-image: linear-gradient(to bottom right, red, yellow);
/*拆解*/
linear-gradient([ | to  ,] ? );
/*
to:关键字,用来指定方向
angle:角度
side-or-corner:方向(left | right | top | bottom),关键字to可以指定方向
color-stop-list:颜色集合(red, yellow)
*/

1、关键字:
关键字分为通用关键字和全局关键字

  • aoto、none、ease等关键字是通用关键字,这些关键字只被部分css属性支持
  • inherit、initial、unsetrevert是全局关键字,会被所有css属性支持。

2、数据类型:上面有讲过这里就不多赘述。

3、符号
css语法中的符号分为字面符号组合符号数量符号三类。

(1)、字面符号
css属性值中原本就支持的合法符号,就是字面意思的符号,目前就两个:

符号 说明
, 并列分隔符,用来分隔数个并列值,或者分割函数的参数值
/ 缩写分隔符,用来分隔一个值的多个部分,在css缩写中用于分离类型相同但属于不同css属性的值,以及用在部分css函数中。凡是出现 / 的地方,斜杠前后的数据类型一定是相同或者部分相同的,否则整个语句就是非法的。

(2)、组合符号:用来表示数个基本元素之间的组合关系,目前有5个:
: 并列,符号位普通空格符,表示各部分必须出现,同时需要按顺序出现|
&& : “与”组合符,各部分必须出现,但可以不按顺序出现,相当于js的&&
|| : “或”组合符,相当与js||,只要包含一个即可满足条件,可以全部出现,可以不按顺序出现
|:“互斥”组合符,各部分恰好出现其中一个
[]:方括号,将各部分进行分组以绕过上面几个符号的优先规则,因此方括号的优先级最高

3、符号数量
用来描述一个元素可以出现多次,数量符号不能叠加出现,并且优先级高于组合符号,目前有6个。

符号 说明
无数量符号,表示恰好出现一次
* 星号,可以出现任意次数
+ 可以出现一次或多次
? 可以出现零次或者一次,也就是该元素是可选的
{a,b} 出现最少a次,最多b
# 可以出现一次或多次,但多次出现时必须以逗号分隔
! 表示当前分组必须产生一个值,该符号多出现在组合符号方括号的后面

了解这些之后,再来拆解一下上面的线性渐变

background-image: linear-gradient(to bottom right, red, yellow);
/*拆解*/
linear-gradient([ | to  ,] ? );
background-image: linear-gradient(red, yellow);[ | to  ,] ? 
/* 表示角度或者方向只能选一个,要么选角度,要么选方向,如果选方向则可以设置多个方向 */


/* 表示并列的颜色集合:red , blue */

/* 线性渐变效果 */
background-image: linear-gradient(to bottom right, red, yellow);

效果:
CSS数据类型以及符号_第3张图片


通过上面的例子,再做一下拓展
拓展一:

/* 各部分只要出现一个即可满足条件 */
border :  ||  || 
/* 线宽 线的类型 颜色 */
/* 由此可得 */
border : 1px solid red;
/* 也可以 */
border : 1px solid;

CSS数据类型以及符号_第4张图片
拓展二:

border-shadow : none | [ , ]#
/* 相当于 */
border-shadow : none | [ , ] *

/* 效果 */
box-shadow: 10px 0px 0px 0 red, -10px 10px 0px 0 cyan;

CSS数据类型以及符号_第5张图片

你可能感兴趣的:(CSS数据类型以及符号)