CSS自学5（H5CSS3提高）

一辆封闭货车

已于 2023-05-23 16:27:51 修改

阅读量88

点赞数

分类专栏： css学习文章标签： css css3 前端

于 2023-04-26 21:23:08 首次发布

本文链接：https://blog.csdn.net/qq_42727908/article/details/130273632

版权

css学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

参考自：链接: 黑马程序员
从视频P275-P298

1 HTML5新特性

新特性都有兼容性的问题，IE9以上的浏览器才支持。

1.1 新增语义化标签

以前布局基本都是用 div 来做，但是对于搜索引擎，div 是没有语义的。

新增语义标签	标签名
header	头部标签
nav	导航标签
article	内容标签
section	定义文档某个区域（大号的div）
aside	侧边栏标签
footer	尾部便签

在这里插入图片描述

1.2 新增视频标签 video

支持格式：MP4，WebM、Ogg

<video scr=“文件地址” controls=“controls”></video>

下面举几个常用的属性，其余属性自行查阅。

属性	值	描述
autoplay	autoplay	视频就绪自动播放（chrome中添加 muted=“muted” 可以解决自动播放问题）
controls	controls	向用户展示播放控件
loop	loop	循环播放视频
poster	lmguri	加载等待的画面图片

1.3 新增音频标签 audio

<audio scr=“文件地址” controls=“controls”></audio>

属性	值	描述
autoplay	autoplay	音频就绪后马上播放
controls	controls	向用户显示播放控件
loop	loop	循环播放

1.4 新增 input 类型

属性值	说明
type=“email”	只能输入邮件类型
type=“url”	只能输入url类型
type=“search”	搜索框

其他的属性都类似，看单词就能看出来什么意思，就不赘述了。

1.5 新增的表单属性

属性	值	说明
required	required	内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦
autocomplete	off/on	默认显示之前成功提交过的选项
multple	multiple	提交多个文件，和 file 结合使用

2 CSS3的新特性

2.1 属性选择器（权重为10）

选择符	简介
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元素

2.2 结构伪类选择器

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

2.2.1 E:nth-child(n)

括号里的n可以是
数字：1、2、3…
关键词：even（偶数）、odd（奇数）
公式：

公式	取值
n	从0开始循环+1，直到超出元素的个数
2n	偶数
2n+1	奇数
5n	5,10，15…
n+5	从第五个（包括第五个）到超出元素
-n+5	前5个（包括第5个）

    <style>
        section div:nth-child(1) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

  /* 本意是选择section中的第一个div */
  /* 但是nth-child(n)会把所有的盒子都编号 */
  /* 所以实际执行顺序是：section->n->第n个是否为div->是/否->更改样式/不更改样式 */

2.2.2 E:nth-of-type

同样的情况，该语句的执行顺序是：

  /*section->div->n->第n个是否为div->是/否->更改样式/不更改样式 */

2.3 伪元素选择器（重点）（权重为1）

element::before/after{…}

利用css创建新标签元素，不需要在HTML中新建标签，简化HTML结构。
创建的新元素属于行内元素。
创建的新元素在文档树中找不到。
before 和 after 必须有 content 属性。
content：‘要添加的内容 ’。

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

使用场景
- 配合字体图标
- 仿视频遮罩层
- 清除浮动

2.4 盒子模型

box-sizing

盒模型值	计算方式	特点
content-box(默认)	width + padding + border	会撑大盒子
border-box	width	如果padding和border不超过width，就不会撑大盒子

2.5 滤镜filter

对元素进行模糊或颜色偏移。

filter: 函数();
函数为blur时是模糊元素

2.6 calc函数

在声明CSS属性值时执行一些计算。

/* 子盒子的宽度永远比父盒子小80px */
width:calc(100%-80px)

2.7 CSS过渡

从一个状态慢慢过渡到另一个状态。
经常和 :hover 一起使用

transition:要过渡的属性花费时间运动曲线开始时间，要过渡的属性花费时间运动曲线开始时间；
或者
transition:all 花费时间运动曲线开始时间；

花费时间：单位必须是 s
运动时间（可以省略）：默认是ease
开始时间（可以省略）：设置延迟触发时间，默认是0s，单位必须是 s
谁做过渡就给谁加。

2.8 狭义和广义的H5

狭义的

HTML5结构标签本身

广义的

HTML5本身 + CSS3 + JavaScript