CSS数据类型以及符号

news2024/12/24 9:15:39

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;

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/370805.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【汇编】二、预备知识(一只 Assember 的成长史)

嗨~你好呀&#xff01; 我是一名初二学生&#xff0c;热爱计算机&#xff0c;码龄两年。最近开始学习汇编&#xff0c;希望通过 Blog 的形式记录下自己的学习过程&#xff0c;也和更多人分享。 这篇文章主要讲述学习汇编所需的基础知识。 话不多说~我们开始吧&#xff01; 目…

电信网上用户自管理系统的设计与实现

技术&#xff1a;Java等摘要&#xff1a;当今时代随着科技的飞速发展&#xff0c;用户信息的收集处理变得非常重要&#xff0c;因此用户自管理系统模式正迅猛发展并深入到各行各业中。在这个新的时代下&#xff0c;要求程序设计员能根据不同行业、不同需求的特点&#xff0c;来…

Spring MVC 源码- RequestToViewNameTranslator 组件

RequestToViewNameTranslator 组件RequestToViewNameTranslator 组件&#xff0c;视图名称转换器&#xff0c;用于解析出请求的默认视图名。就是说当 ModelAndView 对象不为 null&#xff0c;但是它的 View 对象为 null&#xff0c;则需要通过 RequestToViewNameTranslator 组件…

Flink高手之路1一Flink的简介

文章目录一、Flink简介1. Fink的引入2.Flink简介3.支持的编程语言4.Flink的特性5.Flink四大基石6.批处理和流处理二、Flink的架构1.Flink的角色2.编程模型一、Flink简介 1. Fink的引入 大数据的计算引擎&#xff0c;发展过程有四个阶段 第一代&#xff1a;Hadoop的MapReduce…

如何确定RocketMQ中消费者的线程大小

背景 随着物联网行业的发展、智能设备数量越来越多&#xff0c;随着设备活跃量过大&#xff0c;常常存在一些高并发的请求&#xff0c;形成了流量尖峰&#xff0c;过多的请求会压垮服务器&#xff0c;影响其他服务运行。因此&#xff0c;为了保护云端服务&#xff0c;需要对请求…

KALOS.art AI 作品每周精选 006

KALOS.art —— AI 和 数字艺术作品展示及销售平台。创作者们可以在这创建自己的主页和画廊&#xff0c;收取充电打赏、以图库模式出售作品。爱好者们可以在这里探索发现&#xff0c;购买作品图片&#xff08;带商用授权&#xff09;&#xff0c;跟艺术家们开启私信通道交流。具…

在外包公司熬了 3 年终于进了字节,竭尽全力....

其实两年前校招的时候就往字节投了一次简历&#xff0c;结果很明显凉了&#xff0c;随后这个理想就被暂时放下了&#xff0c;但是这个种子一直埋在心里这两年除了工作以外&#xff0c;也会坚持写博客&#xff0c;也因此结识了很多优秀的小伙伴&#xff0c;从他们身上学到了特别…

云镜CVE-2021-44983复现

CVE-2021-44983复现漏洞信息漏洞复现读取flag&#x1f349; shell来源&#xff1a;https://yunjing.ichunqiu.com/cve/detail/967?type1&pay2漏洞信息 漏洞名称taocms 3.0.1 登陆后台后文件管理处存在任意文件下载漏洞漏洞编号CVE-2021-44983危害等级中危漏洞类型任意文…

大学毕业后,送了2个月外卖,哭了一整晚

先简单介绍一下自己&#xff0c;我来自湛江&#xff0c;大学学的的物流管理专业&#xff0c;现在就职于一家互联网公司&#xff0c;从事软件测试工作。 我来自湛江的一个偏远农村&#xff0c;家里兄弟姐妹多&#xff0c;父母无力负担我的学费&#xff0c;很多时候学费都是靠姐…

戴尔Latitude 3410电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。硬件型号驱动情况主板戴尔Latitude 3410处理器英特尔酷睿i7-10510U已驱动内存8GB已驱动硬盘SK hynix BC511 NVMe SSD已驱动显卡Intel UHD 620Nvidia GeForce MX230(屏蔽)无法驱动声卡Realtek ALC236已驱动网卡Realtek RTL81…

哈希表以及哈希冲突

目录 哈希表 哈希冲突 1. 冲突发生 2. 比较常见的哈希函数 3. 负载因子调节(重点) 散列表的载荷因子概念 负载因子和冲突率的关系 冲突-解决-闭散列 线性探测 二次探测 冲突-解决-开散列 结尾 我们在前面讲解了TerrMap&#xff08;Set&#xff09;的底层是一个搜索…

雅思经验(十四)

剑10 test3 阅读p3这篇阅读比较难做下来&#xff0c;主要是这个题材我们不太熟悉&#xff0c;介绍了一种成为拉皮塔人&#xff0c;他们在太平洋上航行&#xff0c;很多岛屿上都有他们足迹&#xff0c;后来人们发掘、探索他们的历史的故事。1.derelict 与 abandoned 主要是前面的…

Mysql 语句优化 (Explain)

Mysql 语句优化 &#xff08;Explain&#xff09; 1. 概述 ​ 在 select 语句之前增加 explain 关键字&#xff0c; mysql 会在查询上设置一个标记&#xff0c;返回查询执行计划信息&#xff0c;而不是执行这条sql 字段formatjson时的名称含义idselect_id该语句的唯一标识sel…

图形编辑器:拖拽阻塞优化

大家好&#xff0c;我是前端西瓜哥。在图形编辑器中&#xff0c;想象这么一个场景&#xff0c;我们撤销了一些重要的操作&#xff0c;然后想选中一个图形&#xff0c;看看它的属性。你点了上去&#xff0c;然后你发现你再也无法重做了。 你以为你点了一下&#xff0c;但其实你…

Java知识复习(七)常见的设计模式(装饰、代理、观察、策略、建造)

前言 参考书籍&#xff1a;《秒懂设计模式》 1、装饰器模式&#xff08;Decorator&#xff09; 1、装饰器模式&#xff1a;对原始对象动态地进行“包装”&#xff0c;是对类实例“装饰”的结果&#xff1b;类似于继承的效果&#xff0c;但这个过程是动态的&#xff0c;是可设…

Java基础常见面试题-异常-泛型-反射-注解-SPI-序列化-IO流

Java基础常见面试题-异常-泛型 1 Exception 和 Error 有什么区别&#xff1f; 1**Exception** :程序本身可以处理的异常&#xff0c;可以通过 catch 来进行捕获。Exception 又可以分为 Checked Exception (受检查异常&#xff0c;必须处理) 和 Unchecked Exception (不受检查异…

构建系统发育树简述

1. 要点 系统发育树代表了关于一组生物之间的进化关系的假设。可以使用物种或其他群体的形态学&#xff08;体型&#xff09;、生化、行为或分子特征来构建系统发育树。在构建树时&#xff0c;我们根据共享的派生特征&#xff08;不同于该组祖先的特征&#xff09;将物种组织成…

Spring AOP之基于注解的使用

1、技术说明 AOP是思想&#xff0c;AspectJ是AOP思想的实现。 动态代理&#xff08;InvocationHandler&#xff09;&#xff1a;JDK原生的实现方式&#xff0c;需要被代理的目标类必须实现接口。因为这个技术要求代理对象和目标对象实现同样的接口&#xff08;兄弟两个拜把子模…

【SPSS】单样本T检验分析详细操作教程(附案例实战)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

服务端开发之Java备战秋招面试3

今天继续学习&#xff0c;先做两题算法题练练手&#xff0c;在继续整理八股文&#xff0c;深入理解&#xff0c;才能在面试的时候有更好地表现&#xff0c;一起加油吧&#xff0c;希望秋招多拿几个令人心动的offer&#xff0c;冲吧。 目录 1、算法题&#xff1a;判断链表中是…