CSS学习笔记10H5与CSS3的部分新特性

最新推荐文章于 2024-06-13 16:41:56 发布

最爱琴女E

最新推荐文章于 2024-06-13 16:41:56 发布

阅读量88

点赞数

分类专栏： HTML CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/qwq_666/article/details/117330442

版权

CSS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML

18 篇文章 0 订阅

订阅专栏

HTML5的新特性

新增的语义化标签

header ：头部标签
nav ：导航标签
article ：内容标签
section ：定义文档某个区域
aside ：侧边栏标签
footer ：尾部标签

注意：

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
其实，我们移动端更喜欢使用这些标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增语义化标签</title>
		<style type="text/css">
			header,nav {
				height: 120px;
				background-color: pink;
				border-radius: 15px;
				width: 800px;
				margin: 15px auto;
			}
		</style>
	</head>
	<body>
		<header>头部标签</header>
		<nav>导航栏标签</nav>
		<section>某个区域</section>
	</body>
</html>

在这里插入图片描述

新增的多媒体标签

视频video

<video src="文件地址" controls="controls"></video>

常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放宽度
height	pixels（像素）	设置播放高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto（预先加载视频），none（不应加载视频）	规定是否加载视频（如果有了autoplay就忽略该属性）
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>h5新增视频标签</title>
		<style type="text/css">
			video {
				margin: 200px 500px;
				width: 800px;
			}
		</style>
	</head>
	<body>
		<video src="../vide/redmiG.mp4" autoplay="autoplay" muted="muted" | loop="loop"></video>
	</body>
</html>

在这里插入图片描述

音频audio

<audio src="文件地址" controls="controls"></audio>

<audio controls="controls">
	<source src="happy.mp3" type="audio/mpeg">
	<source src="happy.ogg" type="audio/ogg">
	您的浏览器暂不支持<audio>标签。
</audio>

常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的URL

多媒体标签总结

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

新增input类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

重点记住：number 、tel、search这三个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增input表单</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<!-- 我验证的时候必须添加form表单域 -->
		<form action="">
			<ul>
				<li>邮箱：<input type="email" /></li>
				<li>网址：<input type="url" /></li>
				<li>日期：<input type="date" /></li>
				<li>时间：<input type="time" /></li>
				<li>数量：<input type="number" /></li>
				<li>手机号码：<input type="tel" /></li>
				<li>搜索：<input type="search" /></li>
				<li>颜色：<input type="color" /></li>
				<!-- 当我们点击提交按钮就可以验证表单了 -->
				<li><input type="submit" value="提交"></li>
			</ul>
		</form>
	</body>
</html>

在这里插入图片描述

新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定的表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，默认已经打开，如autocomplete=“on”,关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placehokder {
    color:pink;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增表单属性</title>
		<style type="text/css">
			input::placeholder {
				color: pink;
			}
		</style>
	</head>
	<body>
		<form action="">
			<input type="search" name="sear" id="" required="required" placeholder="阿波"
			autofocus="autofocus" autocomplete="off">
			<input type="submit" value="提交">
		</form>
	</body>
</html>

在这里插入图片描述

CSS3的新特性

CSS3新增选择器

属性选择器
结构伪类选择器
伪元素选择器

属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性且值以val开头的E元素
E[att$=“val”]	匹配具有att属性且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性且值中含有val的E元素

注意：类选择器、属性选择器、伪类选择器，权重为10

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style type="text/css">
			/* 必须是input 但是同时具有value这个属性 选择这个元素 */
			input[value] {
				color: pink;
			}
			/* 只选择type=text 文本框的input */
			input[type=text] {
				color: red;
			}
			/* 选择首先是div 然后具有class属性 并且属性值必须是icon开头的这些元素 */
			div[class^=icon] {
				color: orange;
			}
			section[class$=data] {
				color: blue;
		</style>
	</head>
	<body>
		<!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
		<!-- <input type="text" value="请输入用户名"> -->
		<!-- <input type="text"> -->
		<br>
		<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握 -->
		<input type="text" name="" id="">
		<input type="password" name="" id=""><br>
		
		<!-- 3.属性选择器可以选择属性值开头的某些因素 -->
		<br>
		<div class="icon1">小图标1</div>
		<div class="icon2">小图标2</div>
		<div class="icon3">小图标3</div>
		<div class="icon4">小图标4</div>
		<div>我是打酱油的</div><br>
		<!-- 4.属性选择器可以选择属性值结尾的某些因素 -->
		<section class="icon1-data">我是拉克丝</section>
		<section class="icon2-data">我是金克丝</section>
		<section class="icon3-ico">那我是谁</section>
	</body>
</html>

在这里插入图片描述

结构伪类选择器

选择符	简介
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个子元素E
E:nth-child	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 1.选择ul里面的第一个孩子 小li */
			ul li:first-child {
				background-color: pink;
			}
			/* 2.选择ul里面的最后一个孩子 小li */
			ul li:last-child {
				background-color: pink;
			}
			/* 3.选择ul里面的第4个孩子 小li */
			ul li:nth-child(4) {
				background-color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我是第1个孩子</li>
			<li>我是第2个孩子</li>
			<li>我是第3个孩子</li>
			<li>我是第4个孩子</li>
			<li>我是第5个孩子</li>
			<li>我是第6个孩子</li>
			<li>我是第7个孩子</li>
			<li>我是第8个孩子</li>
		</ul>
	</body>
</html>

在这里插入图片描述

nth-child选择器

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始
n可以是关键字：even偶数，odd奇数
n可以是公式：常见的公式如下（如果是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

公式	取值
2n	偶数，相当于even
2n+1	奇数，相当于odd
5n	5 10 15…
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第五个）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nth-child选择器</title>
		<style type="text/css">
			/* 1.把所有的偶数even的孩子选出来 */
			ul li:nth-child(even) {
				background-color: skyblue;
			}
			/* 2.把所有的奇数odd的孩子选出来 */
			ul li:nth-child(odd) {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我是第1个孩子</li>
			<li>我是第2个孩子</li>
			<li>我是第3个孩子</li>
			<li>我是第4个孩子</li>
			<li>我是第5个孩子</li>
			<li>我是第6个孩子</li>
			<li>我是第7个孩子</li>
			<li>我是第8个孩子</li>
		</ul>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他字母 选择了所有的孩子 */
			ol li:nth-child(n) {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<ol>
			<li>我是第1个孩子</li>
			<li>我是第2个孩子</li>
			<li>我是第3个孩子</li>
			<li>我是第4个孩子</li>
			<li>我是第5个孩子</li>
			<li>我是第6个孩子</li>
			<li>我是第7个孩子</li>
			<li>我是第8个孩子</li>
		</ol>
	</body>
</html>

区别

nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择。先匹配E，然后再根据E找第n个孩子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nth-type-of选择器</title>
		<style type="text/css">
			ul li:first-of-type {
				background-color: pink;
			}
			ul li:last-of-type {
				background-color: pink;
			}
			/* nth-child 会把所有的盒子都排列序列号 */
			/* 执行的时候首先看：nth-child(1) 之后回去看 前面的div */		
			section div:nth-child(1) {
				background-color: red;
			}
			
			/* nth-of-type 会把指定元素的盒子排列序号 */
			/* 执行的时候首先看 div指定的元素 之后回去看：nth-of-type(1) 第几个孩子 */
			section div:nth-of-type(1){
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我是第1个孩子</li>
			<li>我是第2个孩子</li>
			<li>我是第3个孩子</li>
			<li>我是第4个孩子</li>
			<li>我是第5个孩子</li>
			<li>我是第6个孩子</li>
			<li>我是第7个孩子</li>
			<li>我是第8个孩子</li>
		</ul>
		<!-- 区别 -->
		<section>
			<p>光头强</p>
			<div>熊大</div>
			<div>熊二</div>
		</section>
	</body>
</html>

在这里插入图片描述

小结

结构伪类选择器一般用于选择父级元素里面的第几个孩子
nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子
关于nth-child（n）我们要知道n是从0开始计算的，要记住常用的公式
如果是无序列表，我们肯定用nth-child更多
类选择器、属性选择器、伪类选择器，权重为10

伪元素选择器（重点）

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是不属于行内元素
新创建的这个元素在文档树种是找不到的，我们称之为伪元素
语法：element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			div::before {
				/* 这个content是必须要写的 */
				content: '我';
			}
			div::after {
				content: '阿波';
			}
		</style>
	</head>
	<body>
		<div>
			是
		</div>
	</body>
</html>

在这里插入图片描述

配合字体图标使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@font-face {
			  font-family: 'icomoon';
			  src:  url('fonts/icomoon.eot?zc2vt0');
			  src:  url('fonts/icomoon.eot?zc2vt0#iefix') format('embedded-opentype'),
			    url('fonts/icomoon.ttf?zc2vt0') format('truetype'),
			    url('fonts/icomoon.woff?zc2vt0') format('woff'),
			    url('fonts/icomoon.svg?zc2vt0#icomoon') format('svg');
			  font-weight: normal;
			  font-style: normal;
			  font-display: block;
			}
			
			div {
				position: relative;
				width: 200px;
				height: 35px;
				border: 1px solid red;
			}
			div::after {
				position: absolute;
				top: 10px;
				right: 10px;
				font-family: 'icomoon';
				/* content: ''; */
				content: '\e900';
				color: red;
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

遮罩案例修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遮罩案例修改</title>
		<style type="text/css">
			.tudou {
				position: relative;
				width: 260px;
				height: 200px;
				background-color: pink;
				margin: 30px auto;
			}
			.tudou img {
				width: 100%;
				height: 100%;
			}
			.tudou::before {
				content: '';
				/* 隐藏遮罩层 */
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.4) url(../img/娑娜小图标.png) no-repeat center;
			}
			/* 当我们鼠标经过了这个盒子，就让遮罩层显示出来 */
			.tudou:hover::before {
				/* 显示元素 */
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tudou">
			<img src="../img/娑娜.jpg" >
		</div>
	</body>
</html>

在这里插入图片描述

盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变

可以分成两种情况：

box-sizing：content-box盒子大小为width + padding + border（以前默认的）
box-sizing：border-box盒子大小为width

如果盒子模型我们改为了box-sizing：border-box，那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				border: 20px solid red;
				padding: 15px;
				box-sizing: content-box;
			}
			p {
				width: 200px;
				height: 200px;
				background-color: pink;
				border: 20px solid red;
				padding: 15px;
				/* CSS3 盒子模型 盒子最终的大小就是width 200 的大小 */
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div>小猪乔治</div><br>
		<p>小猪佩奇</p>
	</body>
</html>

在这里插入图片描述

其他新特性（了解）

图片变模糊

CSS3滤镜filter：

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

filter: 函数(); 例如：filter：blur（5px）; blur模糊处理 数值越大越模糊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片模糊</title>
		<style type="text/css">
			img {
				/* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
				filter: blur(5px);
			}
			img:hover {
				filter: blur(0);
			}
		</style>
	</head>
	<body>
		<img src="../img/娑娜.jpg" >
	</body>
</html>

鼠标移出变模糊

在这里插入图片描述

calc函数

此函数让你在声明CSS属性值时执行一些计算

width:calc(100% - 80px);

括号里面可以使用+、-、*、/来进行计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>calc函数</title>
		<style type="text/css">
			.father {
				width: 300px;
				height: 200px;
				background-color: pink;
			}
			.son {
				/* width:150px */
				/* width:calc(150px + 30px); */
				width: calc(100% - 30px);
				height: 30px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<!-- 需求我们的盒子宽度永远比父盒子小30px -->
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

在这里插入图片描述

过渡（重点）

transition:要过渡的属性 花费时间 运动曲线 何时开始;

属性：想要变化的css属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以了
花费时间：单位时秒（必须写单位）比如0.5s
运动曲线：默认是ease（可以省略）
何时开始：单位是秒，可以设置延迟触发时间默认是0s

记住过渡的使用口诀：谁做过渡给谁加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡效果</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 100px;
				background-color: pink;
				/* transition:变化的属性 花费时间 运动曲线 何时开始; */
				/* transition: width .5s ease 0s; */
				/* 如果想要写多个属性,利用逗号进行分割,若想要多个属性都变化,属性写all就可以了 */
				/* transition: width .5s,height .5s; */
				transition: all 0.5s;
			}
			div:hover {
				width: 400px;
				height: 200px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

鼠标经过效果

在这里插入图片描述

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>进度条</title>
		<style type="text/css">
			.bar {
				width: 150px;
				height: 15px;
				border-radius: 15px;
				padding: 1px;
			}
			.bar_in {
				width: 50%;
				height: 100%;
				background-color:red;
				transition: all .7s;
			}
			.bar:hover .bar_in {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="bar">
			<div class="bar_in"></div>
		</div>
	</body>
</html>

最爱琴女E

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记10H5与CSS3的部分新特性

HTML5的新特性新增的语义化标签header ：头部标签nav ：导航标签article ：内容标签section ：定义文档某个区域aside ：侧边栏标签footer ：尾部标签注意：这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9中，需要把这些元素转换为块级元素其实，我们移动端更喜欢使用这些标签<!DOCTYPE html><html> <head> <meta charset="utf-8"&
复制链接

扫一扫