当前位置: 首页 > news >正文

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;

在这里插入图片描述

相关文章:

CSS数据类型以及符号

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

LeetCode-54. 螺旋矩阵

题目来源 54. 螺旋矩阵 题目思路 while循环只遍历"环"&#xff0c;不成环就不遍历了 四个边界 上边界 top : 0下边界 bottom : matrix.length - 1左边界 left : 0右边界 right : matrix[0].length - 1 矩阵不一定是方阵 top < bottom && left < r…...

【Python入门第十八天】Python For 循环

Python For 循环 for 循环用于迭代序列&#xff08;即列表&#xff0c;元组&#xff0c;字典&#xff0c;集合或字符串&#xff09;。 这与其他编程语言中的 for 关键字不太相似&#xff0c;而是更像其他面向对象编程语言中的迭代器方法。 通过使用 for 循环&#xff0c;我们…...

Qt图片定时滚动播放器

目录参考结构PicturePlay.promain.cpppictureplay.hpictureplay.cpppictureplay.ui效果源码参考 Qt图片浏览器 QT制作一个图片播放器 Qt中自适应的labelpixmap充满窗口后&#xff0c;无法缩小只能放大 可以显示jpg、jpeg、png、bmp。可以从电脑上拖动图到窗口并显示出来或者打开…...

李宏毅2023春季机器学习课程

目录2021&2022课程重磅须知我维护的其他项目更新日志课程地址课程资料直链课程作业直链其他优质课程2021&2022课程 CSDN Github 重磅须知 为方便所有网课资料与优质电子书籍的实时更新维护&#xff0c;创建一个在线实时网盘文件夹&#xff1b;   网盘获取方式&#…...

计算机操作系统知识点汇总

计算机操作系统选择填空题&#xff0c;300知识点&#xff0c;包含操作系统概论、处理机管理、内存管理、设备管理、文件管理等&#xff0c;为大学生期末创造奇迹提供无限可能 1、填空题 1、操作系统是对计算机资源进行管理的软件 2、操作系统是提供了处理机管理、 存储器管理…...

【离线数仓-8-数据仓库开发DWD层设计要点-交易域相关事实表】

离线数仓-8-数据仓库开发DWD层设计要点-交易域相关事实表离线数仓-8-数据仓库开发DWD层设计要点-交易域相关事实表一、DWD层设计要点二、交易域相关事实表1.交易域加购事务事实表1.加购事务事实表 前期梳理2.加购事务事实表 DDL表设计分析3.加购事务事实表 加载数据分析1.首日全…...

计算机网络(七):DNS协议和原理,DNS为什么用UDP,网页解析的全过程

文章目录一、什么是DNS二、DNS的作用三、DNS作用四、DNS为什么用UDP五、如果打开一个网站很慢&#xff0c;要如何排查六、网页解析的全过程一、什么是DNS DNS是域名系统的英文缩写&#xff0c;是一种组织成域层次结构的计算机和网络服务命名系统&#xff0c;用于TCP/IP网络。 …...

算法23:多叉树_派对的最大快乐值

公司的每个员工都符合 Employee 类的描述。整个公司的人员结构可以看作是一棵标准的、 没有环的多叉树。树的头节点是公司唯一的老板。除老板之外的每个员工都有唯一的直接上级。 叶节点是没有任何下属的基层员工(subordinates列表为空)&#xff0c;除基层员工外&#xff0c;每…...

中国ETC行业市场规模及未来发展趋势

中国ETC行业市场规模及未来发展趋势编辑根据市场调研在线网发布的2023-2029年中国ETC行业发展策略分析及战略咨询研究报告分析&#xff1a;随着政府坚持实施绿色出行政策&#xff0c;ETC行业也受到了极大的支持。根据中国智能交通协会统计&#xff0c;2017年中国ETC行业市场规模…...

每日刷题(一)——只出现一次的数字

前言 今天遇到一个位运算的题目&#xff0c;感觉很有意思&#xff0c;记录一下。 Question1 136. 只出现一次的数字 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实…...

洛谷P5737 【深基7.例3】闰年展示 C语言/C++

【深基7.例3】闰年展示 题目描述 输入 x,yx,yx,y&#xff0c;输出 [x,y][x,y][x,y] 区间中闰年个数&#xff0c;并在下一行输出所有闰年年份数字&#xff0c;使用空格隔开。 输入格式 输入两个正整数 x,yx,yx,y&#xff0c;以空格隔开。 输出格式 第一行输出一个正整数&a…...

shell注释

注释对于任何编程语言都是不可忽视的重要组成部分&#xff0c;编写者通过注释来为其他人提供解释或提示&#xff0c;能有效提高代码的可读性。 Bash 同其他编程语言一样提供了两种类型注释的支持。 单行注释多行注释一、Bash 单行注释 在注释段落的开头使用 # &#xff0c;如下…...

【C++入门(上篇)】C++入门学习

前言&#xff1a; 在之前的学习中&#xff0c;我们已经对初阶数据结构进行相应了学习&#xff0c;加上之前C语言的学习功底。今天&#xff0c;我们将会踏上更高一级“台阶”的学习-----即C的学习&#xff01;&#xff01;&#xff01; 文章目录1.C 简介1.1什么是C1.2.C的发展史…...

【密码学】 一篇文章讲透数字签名

【密码学】 一篇文章讲透数字签名 数字签名介绍 数字签名&#xff08;又称公钥数字签名&#xff09;是只有信息的发送者才能产生的别人无法伪造的一段数字串&#xff0c;这段数字串同时也是对信息的发送者发送信息真实性的一个有效证明。它是一种类似写在纸上的普通的物理签名…...

POI导入导出、EasyExcel批量导入和分页导出

文件导入导出POI、EasyExcel POI&#xff1a;消耗内存非常大&#xff0c;在线上发生过堆内存溢出OOM&#xff1b;在导出大数据量的记录的时候也会造成堆溢出甚至宕机&#xff0c;如果导入导出数据量小的话还是考虑的&#xff0c;下面简单介绍POI怎么使用 POI导入 首先拿到文…...

手把手教你做微信公众号

手把手教你做微信公众号 微信公众号可以通过注册的方式来建立。 1.进入微信公众平台 首先&#xff0c;在浏览器中搜索微信公众号&#xff0c;网页第一个就是&#xff0c;如下图所示&#xff0c;我们点进去。 2.注册微信平台账号 进入官网之后&#xff0c;如下图所示&#…...

python-在macOS上安装python库 xlwings失败的解决方式

问题&#xff1a;python库 xlwings安装失败 今天&#xff0c;看到网上有wlwings库&#xff0c;可以用来处理excel表格&#xff0c;立刻想试一试。结果&#xff0c;安装这个python库失败了。经过排查&#xff0c;问题解决。 安装过程和错误提示&#xff1a; 我用最简单直接的…...

【Linux】进程间通信(匿名管道和命名管道通信、共享内存通信)

文章目录1、进程间通信1.1 进程的通信1.2 如何让进程间通信&#xff1f;1.3 进程间通信的本质2、管道通信2.1 匿名管道2.2 匿名管道通信2.3 命名管道2.4 命名管道的通信3、SystemV中的共享内存通信3.1 共享内存3.2 共享内存的通信3.3 共享内存的缺点以及数据保护3.4 共享内存的…...

漏洞分析: WSO2 API Manager 任意文件上传、远程代码执行漏洞

漏洞描述 某些WSO2产品允许不受限制地上传文件&#xff0c;从而执行远程代码。以WSO2 API Manager 为例&#xff0c;它是一个完全开源的 API 管理平台。它支持API设计&#xff0c;API发布&#xff0c;生命周期管理&#xff0c;应用程序开发&#xff0c;API安全性&#xff0c;速…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...