header header nav audio video标签
header 表示一个页头
<header></header>
footer 表示一个页脚
<footer></footer>
nav 表示一个导航
<nav></nav>
audio 定义一个音频
<audio></audio>
属性
src
音频播放路径
controls
控制当前音频显示控制面板(播放 暂停 进度条 声音等等)
autoplay
控制音频自动播放
loop
控制音频循环播放
muted
控制音频静音
可以在audio标签内部添加 source标签
source标签作用
可以引入更多备选的音频资源 当第一个source不能播放时候 可以自动调用第二个 ...
格式：
<audio>
<source src="音频播放路径1">
<source src="音频播放路径2">
...
</aduio>
音频常见格式： mp3 mp4 ogg ... video 定义一个视频
<video></video>
属性
src
视频播放路径
controls
控制当前视频显示控制面板(播放 暂停 进度条 声音等等)
autoplay
控制视频自动播放
loop
控制视频循环播放
muted
控制视频静音
poster
视频封面
source标签作用
可以引入更多备选的音频资源 当第一个source不能播放时候 可以自动调用第二个 ...
格式：
<video>
<source src="视频播放路径1">
<source src="视频播放路径2">
...
</video>
视频格式： mp3 avi ogg mp4 ...
input新增属性
input 输入框新增属性
date
日期
week
周
month
月
range
进度条
search
搜索
file
文件上传
自定义字体及字体图标使用
自定义字体
使用步骤：
1 引入字体 @font-face
@font-face {
font-family: "自定义字体名";
src: url("字体的路径");
}
2 在需要使用的地方直接调用 字体名称
标签 {
font-family: "自定义字体名"
}
字体图标
1 登录iconfont, 在个人主页-资源管理-我的项目-新建项目
2 返回首页 选择自己需要的图标 添加进购物车，选择将购物车的图标，添加进新的项目中
3 下载项目到本地 解压文件 将文件中iconfont.css 及各种字体文字复制粘贴进font文件夹中
4 在页面中首先使用link引入iconfont.css文件 然后在需要用到字体图标标签上边 添加对应的类名
<元素标签 class="iconfont icon-图标类名"></元素标签>
注意：字体图标可以通过color及font-size控制图标的颜色及大小 相比较于原始图片图标 优势在于图片可以随意更改颜色 随意调整大小而不失帧 体积比图片小很多
在一个css文件中 引入另一个css文件 我们需要使用 @import 'css相对文件路径'
border-radius圆角
border-radius: 值;
一个值相当于四个角
左上角
右上角
右下角
左下角
border-radius: 值1 值2；
值1： 左上 右下
值2： 右上 左下
border-radius: 值1 值2 值3 值4
1: 左上
2：右上
3：右下
4：左下
border-radius: 1 2 3
1：左上
2：右上 左下
3：右下
值：
px
%
rem
...
分开写法：
border-top-left-radius: 左上
border-top-right-radius: 右上
border-bottom-left-radius: 左下
border-bottom-right-radius: 右下
box-shadow text-shadow属性
box-shadow
边框阴影
格式：
{
box-shadow: 水平距离 垂直距离 模糊程度 阴影大小 颜色 内阴影/外阴影;
}
默认是外阴影
内阴影 inset
text-shadow
文字阴影
格式：
{
text-shadow: 水平偏移 垂直偏移 模糊程度 颜色
}
background-image渐变
径向渐变 以中间为圆心 往四周进行渐变 可重复
radial-gradient()
格式：
{
background-image: radial-gradient(值)
}
值：
颜色1,颜色2,颜色3
颜色1 %,颜色2 %,颜色3 %
注意： 使用background-image 值至少有两个颜色值 颜色值可以设置百分比表示颜色的宽度范围
线性渐变 从一个方向向另一个方向进行渐变
linear-gradient()
格式：
{
background-image: linear-gradient(值)
}
值：
颜色1,颜色2,颜色3,...
颜色1 %,颜色2 %,颜色3 %
to 方向,颜色1 %,颜色2 %,颜色3 %
方向(right bottom left top right bottom, left bottom,...)
方向(数字deg,颜色1,颜色2,颜色3,...)
数字deg 表示度数
如： /* background-image: linear-gradient(to left bottom,blue,red,yellow,green); / / background-image: linear-gradient(to right, #fa2800,#fa7c62); */ background-image: linear-gradient(0deg, blue, green);
2d与3d转化
2d指的是平面 x y轴
3d指的是立体 x y z轴
我们可以使用transform来实现2d与3d转化
2d
旋转 rotate
格式：
{
transform: rotate(值)
}
值：为1个 单位deg 表示绕0 0原点旋转
值为正值 顺时针旋转 反之 逆时针旋转
值允许写负值 负值表示逆时针
分开写
控制绕x轴旋转 rotateX(值deg)
控制绕y轴旋转 rotateY(值deg)
即想绕x 又想绕y
transform: rotateX() rotateY()
缩放 scale
格式：
{
transform: scale(值)
}
值：数字 没有单位 大于1表示放大 小于1表示缩小 代表原有元素的倍数
分开写：
x轴放大 scaleX(值)
y轴放大 scaleY(值)
合在一起 既想控制x 又想y
scale(值1,值2)
倾斜 skew
格式：
{
transfrom: skew()
}
单位:deg
分开写：
x轴倾斜 skewX(值)
y轴倾斜 skewY(值)
合在一起 既想控制x 又想y
skew(值1,值2)
平移 translate
格式：
{
transform: translate(值)
}
单位:deg
分开写：
x轴平移 translateX(值)
y轴平移 translateY(值)
xy轴平移
translate(值1,值2)
3d属性
3d 比2d多了一个z轴
旋转 rotate
格式：
{
transform: rotate3d(值1,值2,值3,度数)
}
值1,2,3 0-1之间
值4 旋转的度数
rotateZ(度数)
缩放 scale
格式：
{
transform: scale3d(值1,值2,值3)
}
scaleZ()
平移 translate
格式：
{
transfrom: translateZ(值)
}
复合：
{
transform: translate3d(值1,值2,值3) rotateY(50deg) scale
}
transition 使用
transition 显示过渡动画
格式：
{
transition: 要实现动画的属性 动画的持续时间 动画执行速率 动画开始的时间(延迟);
}
动画执行速率
linear 匀速
ease 先慢 后快 再慢
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 以慢速开始和结束
cubic-bezier(n,n,n,n) 贝塞尔曲线 使用贝塞尔曲线 https://cubic-bezier.com/
这里边的时间单位是秒
transition里边要实现动画的属性 一般情况下都是带数字
例如：width height translate rotate background-color等等
以上属性可以分开编写
transition-property 要实现动画的属性
transition-duration 动画的持续时间
transition-timing-function 动画执行速率
transition-delay 动画开始的时间
transform
实现2d和3d转化
animation 实现动画的过渡效果
animation 实现动画的过渡效果
格式：
{animation: 自定义动画名 动画持续的时间 动画执行速率 动画延迟时间 动画播放的次数 是否反复播放动画 应用到元素的样式 动画是否正在运行或已暂停;}
以上属性 我们也可以分开写
animation-name 自定义动画名
animation-duration 动画持续的时间
animation-timing-function 动画执行速率
animation-delay 动画延迟时间
animation-iteration-count 动画播放的次数
number 播放多少次
infinite 无限次播放
animation-direction 是否反复播放动画
值：
reverse
alternate
alternate-reverse
animation-fill-mode 应用到元素的样式
值：
forwards
backwards
both
animation-play-state 动画暂停或者运行
值：
paused
running
注意： 以上八个分开属性 我们使用最多是前四个 必须掌握 后边四个 我们作为了解
自定义动画
需要使用@keyframs 自定义动画名来进行定义每一帧的动画
@keyframs 自定义动画名 {
from {
样式
}
to {
样式
}
}
@keyframs 自定义动画名 {
0% {
样式
}
...
100% {
样式
}
}
媒体查询
媒体查询 @media 使用在响应式布局
1 在最小宽度与最大宽度之间
@media (min-width: 最小尺寸) and (max-width: 最大尺寸) {
样式
}
2 小于某个尺寸
@media screen and (max-width: 最大尺寸) {
样式
}
3 大于某个尺寸
@media screen and (min-width: 最小尺寸) {
样式
}
语法格式：
@media media-type and (media-feature-rule){
css rules go here
}
书写格式: 注意 screen表示浏览器窗口 条件书写成组 and两边有空格，条件用（）扩起来
flex弹性布局
flex布局 弹性布局 提供一种页面布局方式 所有的元素标签都可以适用flex布局
注意： 我们可以使用display: flex给元素添加flex布局 但是 如果给元素添加了flex 则其子元素float clear vertical-align将要失效
属性
1 flex-direction （给添加display:flex元素）
当前元素 是在水平还是在垂直方向 排列
值：
row 默认值(从左向右)
row-reverse 水平反向(从右向左)
column 垂直方向(从上向下)
column-reverse 垂直方向(从下向上)
2 flex-wrap
元素是否折行
值：
nowrap 默认值
wrap 折行
wrap-reverse 反向折行
3 flex-flow
是flex-direction和flex-wrap复合写法
格式：
flex-flow: row nowrap;
4 justify-content
控制元素在水平方向的对齐方式
值：
flex-start 默认值 左对齐
flex-end 右对齐
space-between 两端对齐 中间距离相等
space-around 两端等分对齐 元素左右间隙一致
center 居中对齐
使用最多是space-between flex-end
5 align-content
控制元素在垂直方向的对齐方式
值：
flex-start 上对齐
flex-end 下对齐
center 垂直居中对齐
stretch 默认值 两端拉伸对齐(改变原有元素的高度)
space-between 垂直方向两端对齐
space-around 垂直方向两端等分对齐
使用最多的是center
flex属性：
align-items
交叉轴上如何对齐（元素可以直接在不换行的情况下 进行垂直方向的对齐）
值：
flex-start 居上
flex-end 居下
center 居中
stretch 两端拉伸对齐
baseline 文字底端对齐
order
数值越小 越靠前 默认值为0
flex-grow
定义元素的放大比例 默认值为0
格式：
{
flex-grow: number // 正整数
}
flex-shrink
控制元素缩小比例 默认值1
格式：
{
flex-shrink: number // 正整数
}
flex-basis
弹性项在弹性变化之前的（内容区）的初始值
横排,则为初始宽度；竖排则为初始高度
横排有第三个参数时，则设置的宽度width无效;
竖排有第三个参数时，则设置的高度height无效
值为100%时，表示继承离它最近的父级块元素的值
{
flex-basis: length || auto;
}
flex
相当于flex-grow flex-shrink flex-basis复合写法
格式：
{
flex: flex-grow flex-shrink flex-basis; // 三个值
flex: flex-grow; // 一个值
}
align-self
可以单独控制某一个元素 在垂直方向的对齐方式
格式：
{
align-self: 值; // 值与align-items一致
}
注意： flex里边有很多的属性，但是我们需要掌握是 flex-direction flex-wrap justify-content align-items flex
css3伪类选择器
first-child 选中第一个子元素
格式：
选择器:first-child {
样式
}
last-child 选中最后一个元素
格式：
选择器:last-child {
样式
}
nth-child(n) 选中父元素第n个元素
格式：
选择器:nth-child(n) {
样式
}
nth-child(xn) 选中n的x倍的元素
例如：
li:nth-child(2n) {
// 选中2的倍数的元素
}
nth-of-type(n) 选中第n个的元素
格式：
选择器:nth-of-type(n) {
样式
}
nth-last-child(n) 选中倒数第n个元素
例如：
li:nth-last-child(2) {
// 选中倒数第二个的元素
}
nth-last-of-type(n) 选中倒数第n个元素
例如：
li:nth-last-of-type(2) {
// 选中倒数第二个的元素
}
nth-child(odd) 选中奇数项
nth-child(even) 选中偶数项
