2021-08-18

最新推荐文章于 2021-11-10 17:26:45 发布
最新推荐文章于 2021-11-10 17:26:45 发布
阅读量82 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56706590/article/details/119777513
版权

CSS3

4、声明的优先级

（1）特殊性

① 结合符是指逗号 ，
② 内敛声明是指html的style属性
在这里插入图片描述
示例： style的特殊性 > test的特殊性 > pink的特殊性，所以最后的背景颜色为黑色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
			}
			#test{
				background: deeppink;
			}
			.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink{
				background: pink;
			}
		</style>
	</head>
	<body>
		<div class="pink" id="test" style="background: black;">
			
		</div>
	</body>
</html>

效果
在这里插入图片描述

（2） 重要声明

① 若重要声明和非重要声明冲突之间不比较特殊性，胜出的是重要声明
② 重要声明和非重要声明的内部冲突需要比较特殊性在这里插入图片描述
示例： red和yellow被标注为重要声明，且red的特殊性更高，最后呈现红色的背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
			}
			div[id].pink{
				background: red!important;
			}
			div[id]{
				background: yellow!important;
			}
			#test{
				background: deeppink;
			}
			.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink{
				background: pink;
			}
		</style>
	</head>
	<body>
		<div class="pink" id="test" style="background: black;">
			
		</div>
	</body>
</html>

效果
在这里插入图片描述

（3） 继承性

在这里插入图片描述
示例： 通配符为0特殊性，而继承没有特殊性，所以最后字体为粉色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				color: pink;
			}
			div{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="pink" id="test" style="color: black;">
			<div>
				我是内部的div
			</div>
		</div>
	</body>
</html>

效果
在这里插入图片描述

（4）层叠

①按来源排序：读者的重要声明 > 创作人员的重要声明 > 创作人员的正常声明 > 读者的正常声明 > 用户代理的声明
②若来源相同，则按选择器的特殊性排序，特殊性更高的优先
在这里插入图片描述

二、自定义字体

1.自定义字体

① @font-face 要定义在声明块外部
在这里插入图片描述
示例： 利用 @font-face，使字体变为 Cooper 黑体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@font-face {
				font-family:"DAMU";
				src: url(Font/COOPBL.TTF);
			}
			#test{
				font: 50px "DAMU";
			}
		</style>
	</head>
	<body>
		<div id="test">
			圆滚滚 	QHF
		</div>
	</body>
</html>

效果
在这里插入图片描述

三、字体图标

① 设计并使用字体图标：将矢量图和不同的字符一 一绑定，通过工具或者站点，将矢量图和字符绑定起来的东西生成出一套字体，最终将自定义字体引用到页面当中，字体就会和矢量图绑定在一块
在这里插入图片描述
在这里插入图片描述

四、新增UI方案

1.文本新增样式

（1）opacity

① 该属性不是一个可继承的属性，但是它可以影响自己的后代元素

示例： 内部div的背景颜色受到外部divopacity属性的影响，颜色变浅

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			#wrap{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: pink;
				opacity: 0.1;
			}
			#inner{
				width: 100px;
				height: 100px;
				background: deeppink;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">
				inner
			</div>
		</div>
	</body>
</html>

效果
在这里插入图片描述

（2）rgba
（3）背景透明文字不透明

① 可以通过 rgb 和 rgba 之间的互换，将有颜色的背景或者文字转换为透明的

示例： 背景透明，文字不透明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				background: rgba(0,0,0,.5);
				color: rgb(255,255,255);
				font-size: 30px;
				line-height: 300px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			我是wrap
		</div>
	</body>
</html>

效果
在这里插入图片描述

（4）文字阴影

① 格式
text-shadow：color offset-x offset-y blur-radius , color offset-x offset-y blur-radius
在这里插入图片描述
示例： 上面阴影颜色为灰色，下面阴影颜色为粉色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			h1{
				text-align: center;
				font: 100px/200px "微软雅黑";
				text-shadow: gray 10px 10px 10px,pink 20px 20px 20px;
			}
		</style>
	</head>
	<body>
		<h1>尚硅谷</h1>
	</body>
</html>

效果
在这里插入图片描述

（5）浮雕文字

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			h1{
				text-align: center;
				font: 100px/200px "微软雅黑";
				color: white;
				text-shadow: black 1px 1px 5px;
			}
		</style>
	</head>
	<body>
		<h1>尚硅谷</h1>
	</body>
</html>

效果
在这里插入图片描述

（6）文字模糊

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			h1{
				text-align: center;
				font: 100px/200px "微软雅黑";
				color:black;
				transition: 1s;
			}
			h1:hover{
				color: rgba(0,0,0,0);
				text-shadow: black 0 0 200px;
			}
		</style>
	</head>
	<body>
		<h1>尚硅谷</h1>
	</body>
</html>

效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（7）模糊背景

示例： filter过滤器中的 blur函数将整个元素模糊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content=""/>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				height: 100px;
				background: rgba(0,0,0,.5);
				position: relative;
			}
			#wrap #bg{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: url(img/avatar.jpg) no-repeat;
				background-size: 100% 100%;
				z-index: -1;
				filter: blur(10px);
			}
			img{
				margin: 24px 0 0 24px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<img src="img/avatar.jpg" width="64px" height="64px" />
			<div id="bg"></div>
		</div>
	</body>
</html>

效果
在这里插入图片描述

（8）文字描边

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				font: 100px/200px "微软雅黑";
				text-align: center;
				color: white;
				-webkit-text-stroke: pink 4px; 
			}
		</style>
	</head>
	<body>
		<h1>尚硅谷</h1>
	</body>
</html>

效果
在这里插入图片描述

（9）文字排版

在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px solid;
				margin: 0 auto;
				direction: rtl;
				unicode-bidi: bidi-override;
			}
		</style>
	</head>
	<body>
		<div>尚硅谷</div>
	</body>
</html>

效果
在这里插入图片描述

（10）溢出显示省略号

① white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
以上三行要同时使用，且该元素不是靠内容撑开的
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px solid;
				margin: 0 auto;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div>尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷</div>
	</body>
</html>

效果

在这里插入图片描述

2.盒模型新增样式

（1）盒模型阴影

在这里插入图片描述
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				width: 100px;
				height: 100px;
				background: pink;
				text-align: center;
				line-height: 100px;
				
				box-shadow: -10px -10px 10px 0px black , 20px 20px 10px -10px deeppink;
			}
		</style>
	</head>
	<body>
		<div id="test">
			test
		</div>
	</body>
</html>

效果
在这里插入图片描述

（2）倒影

在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			body{
				text-align: center;
			}
			body::after{
				content: "";
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}
			img{
				 vertical-align: middle;
				 -webkit-box-reflect: above 10px;
			}
		</style>
	</head>
	<body>
		<img src="img/avatar.jpg" width="200px" height="200px">
	</body>
</html>

效果
在这里插入图片描述

（3）resize

在这里插入图片描述
示例： 可拖动元素改变其大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			body{
				text-align: center;
			}
			body::after{
				content: "";
				height: 100%;
				display: inline-block;
				vertical-align: middle;
			}
			div{
				display: inline-block;
				width: 200px;
				height: 200px;
				background: pink;
				vertical-align: middle;
				resize: both;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果
在这里插入图片描述
在这里插入图片描述

（4）box-sizing

① 值 border-box 使元素的宽高指定为 border-box 的宽高，而非内容区的宽高，若再指定 padding 的宽高，将会把内容区的大小挤小
在这里插入图片描述
在这里插入图片描述
示例： 指定了一个左右宽度为50px的 padding ，使内容区宽度变小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			input{
				width: 200px;
				padding: 0 50px;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<input type="text" />
	</body>
</html>

效果
在这里插入图片描述

3.新增UI样式

（1）圆角

① 在移动端最好使用 px值表示圆角，在pc端 px值和百分比都可以使用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 200px;
				height: 200px;
				border: 1px solid;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="test">			
		</div>
	</body>
</html>

效果
在这里插入图片描述

（2）风车

示例： 风车顺时针转动120°

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				width: 300px;
				height: 300px;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				transition: 2s;
			}
			#wrap > div{
				margin: 10px;
				width: 130px;
				height: 130px;
				border: 1px solid;
				background: deeppink;
				float: left;
				box-sizing: border-box;
			}
			#wrap > div:nth-child(1),#wrap > div:nth-child(4){
				border-radius: 0 60%;
			}
			#wrap > div:nth-child(2),#wrap > div:nth-child(3){
				border-radius: 60% 0;
			}
			#wrap:hover{
				transform: rotate(120deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

效果
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

（3）对话框

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#test{
				width: 600px;
				height: 400px;
				border: 1px solid;
				border-radius: 50%;
				text-align: center;
				font: 30px helvetica;
				line-height: 400px;
				position: relative;
			}
			#test::after{
				position: absolute;
				display: block;
				content: "";
				width: 80px;
				height: 80px;
				border: 1px solid;
				right: -20px;
				bottom: -20px;
				border-radius: 50%;
			}
			#test::before{
				position: absolute;
				display: block;
				content: "";
				width: 60px;
				height: 60px;
				border: 1px solid;
				right: -100px;
				bottom: -100px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="test">
			大家好，欢迎入坑前端
		</div>
	</body>
</html>

效果
在这里插入图片描述

（4）BFC

在这里插入图片描述

weixin_56706590
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
NOI Linux的使用系列-2021-08-18(G)--30页.pdf
08-18
NOI Linux的使用系列-2021-08-18(G)--30页.pdf
2021-01-08
weixin_45404781的博客
01-08 860
typedef struct tagCOPYDATASTRUCT { DWORD dwData; //用户自定义字段 DWORD cbData; //数据长度 PVOID lpData; //内容指针 } COPYDATASTRUCT;
CVE-2021-22205——Gitlab 远程命令执行漏洞复现
LiBai'S BLOG
11-10 8555
CVE-2021-22205Vuln Impact影响版本环境Fofa语法漏洞利用脚本反弹ShellEXP Vuln Impact An issue has been discovered in GitLab CE/EE affecting all versions starting from 11.9. GitLab was not properly validating image files that were passed to a file parser which resulted in a .
2021-07-18 Debug
Choulongx的博客
07-18 421
今天发现了一个低级错误 [Error] ld returned 1 exit status 回去查发现是写错了主函数名称 我是sb
2021-08-13
u012398269的博客
08-13 2350
如何在不编译的情况下，支持IDEA生成Q类 标签 annotationProcessorPaths MongoDB queryDsl com.querydsl.apt.morphia.MorphiaAnnotationProcessor spring-data-mongodb 2.3.4.RELEASE 2021-08-13 编辑 <plugin> <groupId>org.apache.maven.plugins</groupId>
2021-01-04
wubaoyu123的博客
01-04 2171
博客园Logo 首页 新闻 博问 专区 闪存 班级 代码改变世界 搜索 注册 登录 返回主页 知了一笑 博客园 首页 新随笔 联系 订阅 管理 数据仓库组件：Hive环境搭建和基础用法 本文源码：GitHub || GitEE 一、Hive基础简介 1、基础描述 Hive是基于Hadoop的一个数据仓库工具，用来进行数据提取、转化、加载，是一个可以对Hadoop中的大规模存储的数据进行查询和分析存储的组件，Hive数据仓库工具能将结构化的数据文件映射为一张数据库表，并提供SQL查询功能，能将SQL语句转变成
2021-06-08
热门推荐
luquanyou的博客
11-09 2万+
Copyright © 2017-2020, googlehosts members. https://github.com/googlehosts/hosts Last updated: 2020-02-19 This work is licensed under a modified HOSTS License. https://github.com/googlehosts/hosts/raw/master/LICENSE Modified Hosts Start Localhost (DO NOT R
2021-08-18 解决Github 使用token登录【Mac】
有关我的科研的足迹、算法竞赛的日子、生活记录。
08-18 3147
解决Github 使用token登录 〇、问题 自2021年8月13号开始，Github将不再接受用户使用账户和密码进行Git操作。 -<zhangruiyuan@zhangruiyuandeMacBook-Pro.local:~/TaroProjects/GFLMiniProgram [main]>- -<s002>- -<%>-
2021-01-10
qq_22667507的博客
01-10 900
jupyter notebook中直接安装python的第三方库。 例如安装pymysql ： ! pip install pymysql。 升级pip：
2021-08-18 折腾华为Matepad pro，低烈度编程篇
weixin_49812011的博客
08-18 3604
1、华为matepad pro上安装Termux 2、华为matepad pro上安装Vim 3、华为matepad pro上安装Python3 4、榨取Dataplore免费资源
2021年中国PaaS市场研究报告[2021-08-18]（90页）.pdf
05-18
2021年中国PaaS市场研究报告[2021-08-18]（90页）.pdf
2021年智能家电发展现状解析及趋势研判[2021-08-18]（37页）.pdf
05-18
2021年智能家电发展现状解析及趋势研判[2021-08-18]（37页）.pdf
2021开放数字资产价值报告：数字化孕育新的发展动能[2021-08-18]（39页）.pdf
05-18
2021开放数字资产价值报告：数字化孕育新的发展动能[2021-08-18]（39页）.pdf
【GFK】2021年智能家电发展现状解析及趋势研判[2021-08-18]（37页）.pdf
05-06
【GFK】2021年智能家电发展现状解析及趋势研判[2021-08-18]（37页）.pdf
一个c语言编写的sock5代理工具.zip
06-13
一个c语言编写的sock5代理工具
基于PHP的同城拼车平台（完整带PHP后台）.zip
06-13
基于PHP的同城拼车平台（完整带PHP后台） 在繁忙的都市生活中，同城拼车已成为一种既环保又经济的出行方式。为了满足广大用户的需求，我们推出了这款基于PHP的同城拼车平台，旨在为用户提供一个便捷、安全、可靠的拼车服务体验。 平台特色： 完整后台系统：平台配备了完整的PHP后台管理系统，管理员可以轻松管理用户信息、拼车订单、车辆信息等，确保平台的稳定运行和数据的准确性。 用户友好界面：简洁明了的界面设计，使用户能够快速上手并享受拼车服务。用户可以轻松发布拼车需求，查找合适的拼车伙伴，实现快速出行。 安全可靠：平台采用先进的加密技术和严格的数据管理措施，确保用户信息和交易数据的安全。同时，平台还设有严格的用户审核机制，确保拼车伙伴的可靠性。 智能匹配：平台通过智能算法，根据用户的出发地、目的地、时间等信息，为用户推荐最合适的拼车伙伴，提高拼车成功率。 实时通讯：平台支持用户之间的实时通讯功能，方便用户在拼车过程中进行交流和沟通，确保行程的顺利进行。 总结： 这款基于PHP的同城拼车平台以其完整的后台系统、用户友好界面、安全可靠的性能、智能匹配和实时通讯功能，为广大用户提供了一个优质
一个用C语言编写的学生信息管理系统，学生数据保存在文本文件中.zip
最新发布
06-13
一个用C语言编写的学生信息管理系统，学生数据保存在文本文件中
pyzmq-22.1.0-cp38-cp38-manylinux2010_i686.whl
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
逗号分隔的多个数据，每个数据项由#分隔的四个小项构成。 # 第一个为题号；第二个为时间；第三个为操作类型，可能的取值：12、11、10--读题，空值-作答；第四个为科目。 data = '''1#2021-05-18 14:31:55##初级会计实务,2#2021-05-18 14:31:57#12#初级会计实务,2#2021-05-18 14:32:08##初级会计实务,3#2021-05-18 14:32:09#12#初级会计实务,4#2021-05-18 14:32:34#12#初级会计实务,4#2021-05-18 14:32:45##初级会计实务,5#2021-05-18 14:32:46#12#初级会计实务,5#2021-05-18 14:32:57##初级会计实务,6#2021-05-18 14:33:00#12#初级会计实务,7#2021-05-18 14:33:44#12#初级会计实务,7#2021-05-18 14:34:42##初级会计实务,8#2021-05-18 14:34:43#12
06-10
data = '''1#2021-05-18 14:31:55##初级会计实务,2#2021-05-18 14:31:57#12#初级会计实务,2#2021-05-18 14:32:08##初级会计实务,3#2021-05-18 14:32:09#12#初级会计实务,4#2021-05-18 14:32:34#12#初级会计实务,4#...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值