乐趣区

关于前端:CSS数据类型以及符号

css数据类型定义的是 css 属性中具备代表性的值,在标准的语法格局中,应用关键字外加一对 <> 示意,例如数值类型 <number>、色值类型<color> 等。
举个例子:background-image这个 css 属性语法构造如下:

background-image : none | <image>

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

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

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

再来看一个例子:
mask-image,该属性能够设置图片蒙版,它的数据类型为:

mask-image : none | <image> | <mask-source>
/* 成果如下 */ 
.masks{
            width: 200px;
            height:200px;
            background-color: cyan;
            mask-image: url(../images/music.png);
            -webkit-mask-image: url(../images/music.png);  /* 兼容谷歌 */
   }
<div class="masks"></div>

数据类型文档:
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([<angle> | to <side-or-corner> ,] ? <color-stop-list>);
/*
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([<angle> | to <side-or-corner> ,] ? <color-stop-list>);
background-image: linear-gradient(red, yellow);[<angle> | to <side-or-corner> ,] ? 
/* 示意角度或者方向只能选一个,要么选角度,要么选方向,如果选方向则能够设置多个方向 */

<color-stop-list>
/* 示意并列的色彩汇合:red , blue */

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

成果:


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

/* 各局部只有呈现一个即可满足条件 */
border : <line-width> || <line-style> || <color>
/* 线宽 线的类型 色彩 */
/* 由此可得 */
border : 1px solid red;
/* 也能够 */
border : 1px solid;

拓展二:

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

/* 成果 */
box-shadow: 10px 0px 0px 0 red, -10px 10px 0px 0 cyan;
退出移动版