-HTML5新增特性
一、新增语义化标签
- 新增:
- < header > :头部标签
- < nav >: 导航标签
- < article >: 内容标签
- < section >:定义文档某个区域
- < aside >:侧边栏标签
- < footer >: 尾部标签
- 注意:
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中,需要把这些元素转换为块级元素
- 其实,移动端更喜欢使用这些标签
二、新增音视频标签
2.1 新增video视频标签
- video支持三种视频格式(MP4,wabm,ogg),一般采用MP4格式
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
</body>
2.2 新增audio音频标签
- audio支持三种音频格式(MP3,wav,ogg),一般采用MP3格式
<audio src="文件地址" controls="controls"></audio>
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
2.3 音频视频总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加muted属性来静音播放视频,音频不可以(可以通过JavaScript解决)
- 视频标签是重点,我们经常设置自动播放,不适用controls控件,循环和设置大小属性
三、新增input属性
- 重点记住: number tel search 这三个
<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>
四、新增表单属性
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus" autocommplete="off">
<input type="submit" value="提交">
</form>
-
重点记住placeholder,multiple这两个属性
-
可以通过以下设置方式修改placeholder里面的字体颜色
input::placeholder {
color: pink;
}
-CSS3新增
一、新增选择器
1.1 属性选择器
-
属性选择器可以根据元素特定的属性来选择元素,这样就可以不用借助于类或者id选择器
-
类选择器,属性选择器,伪类选择器,权重为10
-
利用属性选择器就可以不借助于类或者id选择器
<head>
<style>
input[value] {
color: pink;
}
</style>
</head>
<body>
<!-- 1.利用属性选择器可以不借助类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
</body>
- 属性选择器还可以选择 属性 = 值的某些元素
<head>
<style>
input[type=text] {
color: pink;
}
</style>
</head>
<body>
<!-- 2.属性选择器还可以选择 属性=值的某些元素 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
</body>
- 属性选择器可以选择属性值开头的某些元素
<head> /* 选择首先是div,然后具有class属性,并且是icon开头的值 */
<style>
div[class^=icon] {
color: pink;
}
</style>
</head>
<body>
<!-- 3.属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
</body>
- 属性选择器可以选择属性值结尾的某些元素
<head>
<style>
section[class$=data] {
color: pink;
}
</style>
</head>
<body>
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">1</section>
<section class="icon2-data">2</section>
<section class="icon3-data">3</section>
</body>
1.2 结构伪类选择器
-
常用于根据父级选择器选择里面的子元素
-
E:first-child 和E:last-child
<style> /* 1.选择ul里面的第一个孩子 小li */ ul li:first-child { background-color: pink; } /* 2.选择ul里面的最后一个孩子 小li */ ul li:last-child { background-color: pink; }
-
nth-child(n)
<style> /* 选择ul里面的第2个孩子 小li */ ul li:nth-child(2) { background-color: pink; } ul li:nth-child(even) { background-color: #ccc; } /* 2.把所有的奇数 odd的孩子选出来 */ ul li:nth-child(odd) { background-color: gray; ol li:nth-child(-n+3) { background-color: pink; } </style>
-
nth-child(n)
选择某个父级元素的一个或多个特定的子元素(重点)- n可以是数字,关键字和公式
- n如果是数字,就是选择第n个子元素,里面数字从1开始
- n可以是关键字:even 偶数,odd奇数
- n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
-
-
E:first-of-type和E:last-of-type
<style> ul li:first-of-type { background-color: pink; } ul li:last-of-type { background-color: pink; } ul li:nth-last-child(2) { background-color: pink; } </style>
-
nth-child(n)
和nth-of-type(n)
区别?- nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择,先去匹配E,然后再根据E 找第n个孩子
-
小结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择,先去匹配E,然后再根据E找第n个孩子
- 关于nth-child(n), 我们要知道n是从0开始计算的,要记住常用的公式
- 如果是无序列表,我们肯定用 nth-child 更多
- 类选择器,属性选择器,伪类选择器,权重为10
1.3 伪元素选择器
- 伪元素选择器可以帮我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
- before 和 after 创建一个元素,但是是属于行内元素
- before和after 都是一个盒子,都作为父元素的孩子
- before是放在内容的前面,after是放在了内容的后面
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素 ,after 在父元素内容的后面插入元素
- 伪元素选择器 和 标签选择器 一样,权重为1
<style>
div::before {
content: '我';
}
div::after {
content: '小猪';
}
</style>
二、CSS3盒子模型
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 这样的话padding和border就不会撑大盒子了 */
}
- 此种情况盒子大小为 宽度,不包括内边距和边框,这样 padding 和 border 就不会撑大盒子了(前提是 padding 和 border 不会超过 width 宽度)
三、transition过渡
-
过渡的口诀:谁做过渡给谁加
-
transition: 要过渡的属性 花费时间 运动曲线 何时开始
- 要过渡的属性:想要变化的 CSS 属性,宽度高度,背景颜色,内外边距都可以,如果想要所有的属性都变化过渡,写一个all就可以。
- 花费时间:单位是秒(必须写单位) 比如0.5s
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒(必须写单位),可以设置延迟触发事件,默认是0s(可以省略)
-
如果是多个属性过渡,可以用逗号隔开,或者写all
<style>
div {
width: 200px;
height: 50px;
background-color: pink;
transition: width 0.5s,height 0.5s;
}
div:hover {
width: 400px;
height: 100px;
}
四、2D转换
4.1 移动translate
- 2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
transform:translate(x,y);
/* 或者分开写 */
transform:translateX(n);
transform:translateY(n);
transform:translate(100px,100px);
/* 如果只移动X轴 */
transform:translate(100px,0);
translateX(100px);
- translate 最大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的
translate:(50%,50%);
- 对行内标签没有效果
4.2 旋转rotate
- 2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
transform: rotate(-360deg);
-
rotate 里面跟度数,单位是 deg 比如 rotate(45deg)
-
角度为正时,顺时针,负时,为逆时针
-
默认旋转的中心点是元素的中心点
-
旋转中心点transform-origin
-
旋转中心点是谁的给谁加
transform-origin: top left;
```
- [x] 注意后面的参数x 和 y 用空格隔开
### 4.3 缩放scale
- [x] 只要给元素添加上了这个属性就能控制它放大还是缩小
```html
transform: scale(1.1,2)
- 注意其中的x和y用逗号分割
- sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
4.4 2D转换综合写法
- 同时使用多个转换,其格式为: transform:translate() rotate() scale() 移动-旋转-缩放
- 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性时候,记得要将位移放到最前面
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
五、动画
5.1 定义动画,使用动画
<style>
@keyframes move {
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(1000px, 0px);
}
50% {
transform: translate(1000px ,500px);
}
75% {
transform: translate(0px, 500px);
}
100% {
transform: translate(0px ,0px);
}
}
div {
width: 100px;
height: 100px;
background-color: tomato;
/* 使用动画 */
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
}
</style>
5.2 动画常用属性
5.3 动画简写
/* animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态 */
animation: myfirst 5s linear 2s infinite alternate;
5.4 速度曲线细节
-
animation-timing-function
:规定动画的速度曲线,默认是“ease”
六、3D转换
6.1 三维坐标系
- x轴:水平向右 注意: x 右边是正值,左边是负值
- y轴:垂直向下 注意: y 下面是正值,上面是负值
- z轴:垂直屏幕 注意: 往外面是正值,往里面是负值
6.2 3D位移translate3d
- 3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向
- translform:translateX(100px):仅仅是在x轴上移动
- translform:translateY(100px):仅仅是在Y轴上移动
- translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
- transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离
- 因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动
6.3 透视perspective
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 透视的单位是像素
- 透视写在被观察元素的父盒子上面的
perspective: 1000px;
6.4 translateZ
- 有了透视,就能看到translateZ 引起的变化了
- translateZ:近大远小
- translateZ:往外是正值
- translateZ:往里是负值
6.5 3D旋转rotate
transform: rotateX(45deg) :沿着X轴正方向旋转45度
transform: rotateY(45deg) :沿着Y轴正方向旋转45度
transform: rotateZ(45deg) :沿着Z轴正方向旋转45度
transform: rotate3d(x,y,z,deg) :沿着自定义轴旋转 deg为角度(了解即可)
transform: rotateY(360deg);
- 左手准则
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
6.6 3D呈现transform-style(重要)
- 控制子元素是否开启三维立体环境
transform-style: flat
子元素不开启3d立体空间 默认的transform-style: preserve-3d
子元素开启立体空间- 代码写给父级,但是影响的是子盒子
- 这个属性很重要
-移动端
一、视口
- 视口标签
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 视口就是浏览器显示页面内容的屏幕区域
- 视口分为布局视口、视觉视口和理想视口
- 我们移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽
- 想要理想视口,我们需要给我们的移动端页面添加 meta视口标签
二、二倍图
2.1 二倍图
**问题:**我们需要一个 50*50 像素(css像素)的图片,直接放到我们的手机里面会放大2倍变成 100 * 100,这样就会模糊。
**解决办法:**我们直接放一个 100 * 100 图片,然后手动的把这个图片缩小为 50 * 50。这样将图放到手机里面,手机自动放大2倍变成 100 * 100,这样就不会造成图片模糊
2.2 背景缩放
div {
width: 500px;
height: 500px;
border: 1px solid red;
background: url(images/dog.jpg) no-repeat;
/* background-size: 500px 200px; */
/* background-size: 500px; */
/* background-size: 50% 50%; */
/* background-size: cover; */
background-size: contain;
}
- 单位: 长度|百分比|cover|contain
- cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
- contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
三、特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a {
-webkit-touch-callout: none;
}
四、流式布局
- 流式布局,就是百分比布局,也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
section div:nth-child(1) {
float: left;
width: 50%;
height: 200px;
background-color: pink;
}
五、flex布局
5.1 父项常见属性
- flex-direction:设置主轴的方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-items:设置侧轴上的子元素的排列方式(多行)
- align-content:设置侧轴上的子元素排列方式(单行)
- flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
flex-flow: column wrap;
5.2 子项常见属性
-
flex 子项目占的份数(重点)
flex 属性定义子项目**分配剩余空间**,用flex来表示占多少份数。 父项:section {display: flex;} 子项:section div:nth-child(2) {flex: 1;}
-
align-self 控制子项自己在侧轴的排列方式(了解)
-
order属性定义子项的排列顺序(前后顺序)(了解)
六、 背景颜色渐变
background: -webkit-linear-gradient(top left, red, blue);
七、 rem适配布局
7.1 媒体查询
/* 小于540 */
@media screen and (max-width:539px) {
body {
background-color: pink;
}
}
7.2 媒体查询+rem实现元素动态大小变化
@media screen and (min-width:640px) {
html {
font-size: 12px;
}
}
@media screen and (min-width:960px) {
html {
font-size: 50px;
}
}
.shop {
margin: 0 auto;
height: 2rem;
line-height: 2rem;
background-color: green;
text-align: center;
color: #fff;
font-size: 1rem;
}
7.3 less
-
Less (Leaner Style Sheets 的缩写) 是一门 CSS 扩展语言,也成为CSS预处理器。
-
less变量
@color :pink;
@font14 :14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
- less嵌套
.header {
width: 200px;
height: 200px;
background-color: pink;
a {
color: purple;
&:hover {
color: blue;
}
}
}
-
内层选择器的前面没有 & 符号,则它被解析为父选择器的后代
-
如果有 & 符号,它就被解析为父元素自身或父元素的伪类
-
a{ &:hover{ color: red; } }
-
less运算
@basefont :50px;
@border :5px + 5;
.top {
width: 200px * 2;
height: 200px - 50;
border: @border solid red;
}
img {
width: (82rem / @basefont);
height:(82rem / @basefont);
}
-
乘号(*)和除号(/)的写法
-
运算符中间左右有个空格隔开 1px + 5
-
对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
-
如果两个值之间只有一个值有单位,则运算结果就取该单位
-
less适配方案