正保建设工程网站,在青岛建网站,dw可以做视频网站么,40个免费网站推广平台下载css数据类型定义的是css属性中具有代表性的值#xff0c;在规范的语法格式中#xff0c;使用关键字外加一对 和表示#xff0c;例如数值类型number、色值类型color等。 举个例子#xff1a;background-image这个css属性语法结构如下#xff1a;
…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 classmasks/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、unset和revert是全局关键字会被所有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;
