CSS3基础
H5C3基础
- 一、HTML5 的新特性
- 1.1 HTML5 新增的语义化标签
- 1.2 HTML5 新增的多媒体标签
- ① 视频< video>
- ② 音频< audio>
- 1.3 HTML5 新增的 input 类型
- 1.4 HTML5 新增的表单属性
- 二、CSS3 的新特性
- 2.1 圆角边框 border-radius（重点）
- 2.2 盒子阴影 box-shadow（重点）
- 2.3 文字阴影 text-shadow（了解）
- 2.4 CSS3 新增选择器
- ① 属性选择器
- ② 结构伪类选择器
- :first-child
- :last-child
- :nth-child(n)
- ③ 伪元素选择器（重点）
- 2.5 CSS3 盒子模型
- 2.6 图片变模糊
- 2.7 CSS3 过渡 transition（重点）
- 进度条案例
- 2.8 CSS3 2D转换 transform
- ① 移动：translate
- 水平和垂直居中方法：
- ② 旋转：rotate
- ③ 缩放：scale
- ④ 2D转换综合写法及顺序问题
- ⑤ 2D转换总结
- 2.9 CSS3 动画 animation
- ① 动画的基本使用
- ② 动画的常见属性
- ③ 速度曲线细节
- ④ 动画简写属性
- 2.10 CSS3 3D转换
- ① 3D位移：translate3d（x,y,z）
- ② 3D旋转：rotate3d（x,y,z）
- ③ 透视：perspective
- ④ 3D呈现 transform-style
- 三、浏览器私有前缀
- 四、 广义的HTML5
一、HTML5 的新特性
1.1 HTML5 新增的语义化标签
1.2 HTML5 新增的多媒体标签
① 视频< video>
<!-- 1.MP4格式
2.autoplay="autoplay"视频就绪自动播放
controls="content"向用户显示播放控件
width height 设置宽高
loop="loop"循环播放
poster="加载等待的画面图片"
muted="muted"静音播放 -->
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="images/下载.jpg"></video>
考虑兼容性问题使用：
② 音频< audio>
1.3 HTML5 新增的 input 类型
<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="month"></li>
<li>周：<input type="week"></li>
<li>手机号码：<input type="tel"></li>
<li>搜索：<input type="search"></li>
<li>颜色：<input type="color"></li>
<li><input type="submit" value="提交"></li>
</ul>
</form>
结果演示：
1.4 HTML5 新增的表单属性
二、CSS3 的新特性
2.1 圆角边框 border-radius（重点）
2.2 盒子阴影 box-shadow（重点）
h-shadow: 越大越往右；
v-shadow: 越大越往下；
blur: 越大越模糊;
spread: 越大阴影越大。
2.3 文字阴影 text-shadow（了解）
2.4 CSS3 新增选择器
① 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新增选择器</title>
<style>
input[value] {
color: pink;
}
input[type=text] {
color: red;
}
/* 选择div中具有class的属性值以icon开头的元素 */
div[class^=icon] {
color: seagreen;
}
/* 选择div中具有class的属性值以data结尾的元素 */
section[class$=data] {
color: blue;
}
</style>
</head>
<body>
<!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text"> -->
<!-- 2.属性选择器可以选择属性=值的某些属性 -->
<input type="text">
<input type="password">
<!-- 3.属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 3.属性选择器可以选择属性值开结尾的某些元素 -->
<section class="icon1-data">五</section>
<section class="icon2-data">四</section>
<section class="icon3-data">三</section>
</body>
</html>
② 结构伪类选择器
:first-child
:last-child
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<style>
/* 1.选择ul里的第一个小li */
ul li:first-child {
background-color: pink;
}
/* 2.选择ul里的最后一个小li */
ul li:last-child {
background-color: pink;
}
/* 3.选择某个元素一个或多个的子元素 */
ul li:nth-child(2) {
background-color: purple;
}
</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>
:nth-child(n)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1.选择偶数的孩子 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.选择奇数的孩子 */
ul li:nth-child(odd) {
background-color: green;
}
/* 3.nth-child(n):选择所有的孩子 ，只能写n*/
ol li:nth-child(n) {
background-color: pink;
}
/* 4.nth-child(2n): 选择偶数的孩子*/
ol li:nth-child(2n) {
background-color: blue;
}
/* 4.nth-child(2n+1): 选择奇数的孩子*/
ol li:nth-child(2n+1) {
background-color: purple;
}
/* 5.nth-child(n+3): 选择从第三个孩子开始*/
ol li:nth-child(n+3) {
background-color: skyblue;
}
/* 6.nth-child(-n+3): 选择前三个孩子*/
ol li:nth-child(-n+3) {
background-color: orange;
}
</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>
<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>
总结：
③ 伪元素选择器（重点）
2.5 CSS3 盒子模型
2.6 图片变模糊
2.7 CSS3 过渡 transition（重点）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3过渡</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始 */
/* 如果想写多个属性利用逗号进行隔开 */
/* 如果想要所有属性都变写个all就行了 */
transition: width 1s, height 1s;
/* transition: all 1s; */
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
进度条案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度条</title>
<style>
.bar {
overflow: hidden;
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 8px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
transition: width 1s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
结果演示：
2.8 CSS3 2D转换 transform
① 移动：translate
水平和垂直居中方法：
- margin-left margin-top
- 定位：left 50% 左走自己宽度的一半（top50%上走自己高度的一半）
- 转换：先定位走父级元素的一半，再用转换x,y轴都-50%。
.yidong {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
transform: translate(150px, 50px);
/* transform: translateX(100px) translateY(100px); */
}
.yidong p {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
background-color: blue;
transform: translate(-50%, -50%);
}
② 旋转：rotate
③ 缩放：scale
④ 2D转换综合写法及顺序问题
⑤ 2D转换总结
2.9 CSS3 动画 animation
① 动画的基本使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
/* 1.定义动画 */
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 100px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用动画 */
animation-name: move;
animation-duration: 1s;
}
</style>
</head>
<body>
<div></div>
</body>
② 动画的常见属性
③ 速度曲线细节
④ 动画简写属性
2.10 CSS3 3D转换
① 3D位移：translate3d（x,y,z）
② 3D旋转：rotate3d（x,y,z）
③ 透视：perspective
④ 3D呈现 transform-style
三、浏览器私有前缀
四、 广义的HTML5
