本文详细介绍了CSS初始化的重要性，包括消除浏览器差异、统一样式，以及使用Unicode编码字体避免乱码。接着讲述了HTML5的新特性，如语义化标签、多媒体元素（视频和音频）的使用和表单输入的改进。CSS3部分涵盖了选择器、盒子模型、模糊效果、动画和转换等内容。
CSS初始化
不同的浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CDD初始化。
CSS初始化是指重设浏览器的样式，（也成为CSS reset）
每个网页都必须首先进行CSS初始化。
Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码的时候出现乱码的问题。
比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\9ED1
下列以京东为例：
/* 所有的标签内外边距变为0 清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 的斜体文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li标签的小圆点 */
li {
list-style: none
}
img {
/* 边框为0,照顾低版本的浏览器 如果图片包含了链接会有边框的问题bug */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当鼠标经过button按钮的时候,鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
/* 去除a链接的下划线 */
text-decoration: none
}
a:hover {
/* 当鼠标经过的时候a链接变成京东红颜色 */
color: #c81623
}
button,
input {
/* "\5B8B\4F53"为宋体 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3抗锯齿形,让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
/* hide,none 元素隐藏,看不见 */
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
重点：
font-style: normal ； 斜体文字不倾斜
li { list-style: none；} 去掉li标签的小圆点
img { border: 0; 边框为0,照顾低版本的浏览器 如果图片包含了链接会有边框的问题bug
vertical-align: middle； 取消图片底侧有空白缝隙的问题 }button { cursor: pointer；} 当鼠标经过button按钮的时候,鼠标变成小手
a { text-decoration: none； } 去除a链接的下划线
display: none 元素隐藏,看不见
HTML5和CSS3提高
HTML5的新特性
这些新特性都有兼容性问题，基本都是IE9+以上版本的浏览器才支持
HTML5新增的语义化标签
<header> : 头部标签
<nav> : 导航标签
<article> : 内容标签
<section> : 定义文档某个区域
<aside> : 侧边栏标签
<footer> : 尾部标签
注意点：
1.这些语义化标准主要针对搜索引擎的
2.新标签页面中可以多次使用
3.在IE9中，需要把这些元素转换为块级元素
4.移动端更喜欢使用这些标签
HTML新增的多媒体标签
1.视频：<video>
语法：
<video src="文件地址" controls="controls"></video>
controls播放
| 浏览器 | MP4 | WebM | Ogg | |
|---|---|---|---|---|
| Interent Explorer | yes | no | no | |
| Chrome | yes | yes | yes | |
| Firefox | yes 从Firefox 21版本开始 Linex 系统从Firefox 30 开始 | yes | yes | |
| Safari | yes | no | no | |
| Opera | yes 从Opara 24 版本开始 | yes | yes |
2.视频： <video>
视频video常见属性
实例
播放录像：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto（预先加载视频） none（不应加载视频） | 规定是否预加载视频（如果有了antoplay，就忽略该属性） |
| src | url | 视频url地址 |
| poster | lmgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
2.音频：<audio>
语法：
<audio src="文件地址" controls=“controls”></ audio>
当前<audio>元素支持三种音频格式
目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
实例
播放声音：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 如果出现该属性，则音频输出为静音。 |
| preload | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src | URL | 规定音频文件的 URL。 |
多媒体标签总结：
1.音频标签和视频标签使用方式基本一致
2.浏览器支持情况不同
3.谷歌浏览器把音频和视频自动播放禁止了
4.我们可以给视频标签添加muted属性来静音播放，音频不可以（可以通过JavaScript解决）
5.视频标签是重点，我们经常设置自动播放，不实用controls空间，循环和设置大小属性
HTML新增的input表单标签
| 属性值 | 说明 |
|---|---|
| type="email" | 限制用户输入必须为Email类型 |
| type="url" | 限制用户输入必须为URL类型 |
| type="date" | 限制用户输入必须为日期类型 |
| type="time" | 限制用户输入必须为时间类型 |
| type="month" | 限制用户输入必须为月类型 |
| type="week" | 限制用户输入必须为周类型 |
| type="number" | 限制用户输入必须为数字类型 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="color" | 生成一个颜色选择表单 |
13
type="file" 选择文件
<body>
<!-- 我们验证的时候必须添加from表单域 -->
<form action="">
<ul>
<li>邮箱：<inout type="email"/></li>
<li>网址：<inout type="url"/></li>
<li>日期<inout type="date"/></li>
<li>日期<inout type="time"/></li>
<li>数量<inout type="number"/></li>
<li>手机号码<inout type="tel"/></li>
<li>搜索<inout type="search"/></li>
<li>颜色<inout type="color"/></li>
<!-- 当我们点击提交按钮就可以验证表单 -->
<li><inout type="submit" value="提交"></li>
</ul>
</form>
</body>新增表单属性重点注释：
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如autocompelete=“on”，关闭autocompete=“off”需要放在表单内，同时加上name属性，同时成功提交 |
| mumltiple | multiple | 可以多选文件提交 |
CSS3新增选择器
1.属性选择器
属性选择器可以根据元素特定属性的来选择元素，这样就可以不用借助于类或者id选择器
| 选择符 | 简介 |
|---|---|
| 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。
<style>
/* 1.必须是input，但是同时具有value这个属性 选择这个元素 */
input[value] {
color: pink;
}
/* 2.选择属性=值的某些元素,来选择这个元素，只选择type=text 文本框的input 选取出来 */
input[type=text] {
color: aqua;
}
/* 3.选择首先是div 然后 具有class属性 并且属性值必须是 icon开头的这些元素 */
div[class^=icon] {
color: blue;
}
/* 4.跟第三条相反，选择首先是div 然后具有class 属性 并且属性值是data结尾的这些元素 */
div[class$=data] {
color: red;
}
</style>
</head>
<body>
<!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text" >
<!-- 2.属性选择器还可以选择属性=值的某些元素 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3.属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">我是谁</section>
</body> 
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（n） | 指定类型E的第n个 |
nth-child(n)选择某个父元素的一个或者多个特定的子元素
· n 可以是数字，关键字和公式
· n 如果是数字，就是选择第n个子元素，里面数字从1开始...
· n 可以是关键字 ： even 偶数 ，odd 奇数
· n 可以是公式 ： 常见的公式如下 （如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 ... |
| n+5 | 从第5个开始（包含第五个）到最后 |
| -n+5 | 前5个（包含第5个）... |
区别：
nth-child(n) 会把所有的盒子都排列序号
执行的时候首先看 nth-child(n)，之后在回去看 前面的标签
/** nth-child对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配 **/
nth-of-type(n) 会把指定元素的盒子排列序号
执行的时候首先看 前面的标签 之后在看 nth-of-type(n) 选择第n个盒子
/** nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后在根据E 找第n个孩子 **/
3.伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
· before 和 after 创建一个元素，但是属于行内元素
· 新创建的这个元素在文档树中是找不到的，所以我们成为伪元素
· 语法： element::before {}
· before 和after 必须有 content 属性
· before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素
· 伪元素选择器和标签选择器一样，权重为1
事例：
结果：
（注* 在浏览器中不显示标签元素‘<>开头的盒子’）
伪元素选择器使用场景1-字体图标
语法：
p::before {
position:absolute;
right: 20px;
top: 10px;
content: '\e91e' ;
font-size: 20px ;
}
事例：
<style>
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?qtkmnl');
src: url('fonts/icomoon.eot?qtkmnl#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?qtkmnl') format('truetype'),
url('fonts/icomoon.woff?qtkmnl') format('woff'),
url('fonts/icomoon.svg?qtkmnl#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: '\e91e';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
</body>
伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例
<style>
.liuneng {
position: relative;
width: 1000px;
height: 600px;
top: 100px;
left: 100px;
background-color: blue;
}
/* 图片尺寸是958*542，比父盒子小 */
.liuneng img {
width: 100%;
height: 100%;
}
.liuneng::before {
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5) url(lianxi/bofang.png) no-repeat center;
}
/* 当我们鼠标经过liuneng这个盒子，就让里面的遮罩层 伪元素 ::before 显示出来 */
.liuneng:hover::before {
/* 这个地方不是转换为块级元素，而是显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="liuneng">
<img src="lianxi/liuneng.png" alt="">
</div>
</body>
伪元素选择器使用场景3-伪元素清除浮动
第一种：(在内容后面::after插入一个清除浮动的盒子，后面闭合)
.clearfix::after {
content:""; /** 为元素必须写的属性 **/
display:block; /** 插入的元素必须是块级，转换为块级元素 **/
height:0; /** 高度为0，不要看见这个元素 **/
clear:both; /** 核心代码清除浮动 **/
visibility:hidden; /** 设置隐藏，不要看见这个元素 **/
}
第二种：(在内容后面::after和前面::before分别插入一个清除浮动的盒子，双伪元素，两边闭合)
.clearfix::before , .clearfix::after {
content:""; /** 为元素必须写的属性 **/
display:table; /** 插入的元素必须是块级，如果用display:block; 两个盒
} 清除浮动的盒子会上下顺序排列，display:table;可以把两个
盒子都写在一行上 **/
...
.clearfix::after {
clear:both;
}
CSS3盒子模型
CSS3 中可以通过box-sizing 来指定盒模型，有2个值：即指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
分为两种情况：
1.box-sizing：content-box 盒子大小为width+padding+border （以前默认的）
2.box-sizing：border-box 盒子大小为width
注意：如果盒子模型我们改为了box-sizing：boder-box，那padding和border就不会撑大盒子了（前提是padding和border不会超过width）
代码属性新加一句
.{
margin：0；
padding：0；
box-sizing：border-box；
}
CSS3其他特性
图片模糊
CSS3滤镜filter：
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
语法：
filter：函数（）；
例如：filter：blur（5px）； blur模糊处理 数值越大越模糊
filter - CSS（层叠样式表） | MDN (https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)
CSS3 calc函数：
calc（）此CSS函数让你在声明CSS属性值时执行一些计算。
width：calc（100%-80px）
括号里面可以使用 +（加） -（减） *（乘） /（除）来进行计算
CSS3新特性
过渡（transition）
过渡写到本身上，谁做动画给谁加
transition: all 0.3s;
all代表全部
0.3s代表时间
转换(transfrom)（2D转换）
二位坐标系转换，改变标签在二维平面上的位置和形状的一种技术
1.移动：translate
可以改变元素在页面中的位置，类似定位
语法：
transfrom ： translate(X,Y);
或者分开写
transfrom ： translateX(n);
transfrom ： translateY(n);
特点：
1.沿着XY轴移动元素
2.translate不会影响到其他元素的位置
3.translate中的百分比单位是相对于自身元素的translate:(50%,50%);
4.对行内标签没有效果
2.旋转：rotate
让元素在二维平面内顺时针或者逆时针旋转
语法：
transfrom: rotate(度数)；
重点：
1.rotate里面跟度数，单位是deg 比如rotate(45deg)
2.角度为正数时，顺时针旋转；为负数时，逆时针旋转
3.旋转的中心默认是元素的中心点
设置旋转中心点transfrom-origin
语法
transfrom-origin: x y;
------
重点：
1.注意后面的参数x和y用空格隔开
2.x y默认旋转的中心点是元素的中心点（50% 50%）
3.还可以给x y设置像素、方位名词（top bottom left right center）
3.缩放：scale
给元素添加上这个属性就能控制大放大还是缩小
语法:
transfrom: scale(x,y);
注意：
1.注意其中的xy用逗号分隔
2.transfrom: scale(1,1) 宽和搞都放大了一倍
3.transfrom: scale(2,2) 宽和高都放大了二倍
4.transfrom: scale(2) 宽和高都放大了二倍
5.transfrom: scale(0.5，0.5) 缩小
6.sacle最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子，或者说不会影响、盖住下面的盒子
比如：
以前的方法 （影响其他盒子）：width: 300px ; hight: 300px;
现在的方法（不会影响其他盒子）：transfrom: scale(300px，300px)
4. 2D转换综合写法
注意：
1.同时使用多个转换，其格式为：transfrom: translate() rotate() scale() ...等等等
2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
3.当我们同时有位移和其他属性时，记得要将位移放到最前面
5.转换总结
CSS3 动画
1.基本使用
制作动画分为两步：
1.先定义动画
2.再使用（调用）动画
方法一：
用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0% {
width:100px ;
}
100% {
width:200px;
}
}
解释：
0%是动画的开始，100%是动画的完成
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数
请用百分比来规定发生的时间，或用关键词“from”和“to”，等同于0%和100%
------
元素使用动画（谁要使用给谁加）
div {
width：200px；
height：200px；
background-color：aqua;
margin:100px auto;
调用动画
animation-name：动画名称；
持续时间
animatain-duration：持续时间；
}
案例：我们一打开页面，一个盒子就从左边走到右边
1.定义动画
@keyframes move {
开始状态
0% {
transform：translateX（0px）；
}
结束状态
100% {
transform：translateX（1000px）；
}
}
div {
width：200px；
height：200px；
background-color:pink;
2.调用动画
动画名称
animation-name：move；
持续时间
animation-duration：2s；
}
缩放：scale
扫一扫
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
