CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标

精灵图

为什么要使用精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度,因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术(也称CSS Sprites、CSs 雪碧)。
核心原理:将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
精灵技术目的:为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

精灵图(sprites)的使用

使用精灵图核心:

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为sprites 精灵图 或者 雪碧图
3. 移动背景图片位置，此时可以使用 background-position
4. 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
5. 因为一般情况下都是往上往左移动，所以数值是负值。
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

字体图标

字体图标的产生

字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器，请放心使用.
注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

精灵图与字体图标的使用总结

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标的使用

字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为
1.字体图标的下载
2.字体图标的引入(引入到我们htm页面中)
3.字体图标的追加(以后添加新的小图标
2.3 字体图标的下载

推荐下载网站:

1. icomoon字库 http://icomoon.io
2. 阿里 iconfont 字库 http://www.iconfont.cn/

字体图标的引用

下载完毕之后，注意原先的文件不要删，后面会用。

1. 把下载包里面的 fonts 文件夹放入页面根目录下
   
2. 在 CSS 样式中全局声明字体:简单理解把这些字体文件通过css引入到我们页面中定注意字体文件路径的问题。
   这段文字在文件里有。

@font-face{
font-family:"icomoon';
url('fonts/icomoon.eot?7kkyc2');
src: 	url('fonts/icomoon.eot?7kkyc2#iefix')format('embedded-opentype')
src: 	url("fonts/icomoon.ttf?7kkyc2')format('truetype'),
		url("fonts/icomoon.woff?7kkyc2')format('woff')
		url("fonts/icomoon.svg?7kkyc2#icomoon')format('svg');
font-weight:normal;
font-style:normal;
}

3. html 标签内添加小图标。

span {
	font-family:"icomoon';
	font-size: 100px;
}

字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selectionjson 重新上传，然后选中自己想要新的图标,重新下载压缩包，并替换原来的文件即可。

HTML5新增属性

HTML5新增的input类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须是URL类型
type=“data”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

重点记住：number tel search 这三个

HTML5新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”,关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交

HTML5新增的语义化标签

 <header>: 头部标签
<nav>: 导航标签
 <article>：内容标签
<section>: 定义文档某个区域
<aside>: 侧边栏标签
<footer>: 尾部标签

注意:
这种语义化标准主要是针对搜索引擎的，这些新标签页面中可以使用多次。在IE9 中，需要把这些元素转换为块级元素。其实，我们移动端更喜欢使用这些标签HTML5 还增加了很多其他标签

video视频标签

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	px	设置播放器宽度
height	px	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频) none(不应加载视频)	规定是否加载视频(如果有了autoplay，就忽略该属性)
src	url	视频url地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

属性选择器

属性选择器可以根据元素特定属性来显示元素。这样就可以不用借助于类或者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。

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符	简介
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个)

区别:

1. nth-child 对父元素里面所有孩子排序选择(席号是固定的) 先找到第n个孩子，然后看看是否和E匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E 找第n个孩子

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而化HTML结构，

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

注意：

• before 和 after 创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法: element::before {}
• before 和 after 必须有 content 属性
• before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为1
  

p::before {
position:absolute;
right:20px;
top: 10px;e91e";content:font-size:20px;
}

伪元素清除浮动

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

.clearfix:after {
content:";
display: blolk;
height:0;
clear: both;
visibility: hidden;
}

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}

CSS创建三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标张图 ，CSS 三角做法如下：

div {
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:pink;
}

界面样式

所谓界面样式，就是更改一些用户操作样式，以提高更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

鼠标样式cursor

li {cursor : pointer}

设置过检索在对象上移动的鼠标指针采用何种系统定义的光标形状。

属性值	描述
default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线outline

给表单添加outline 0;或者outline: none;样式之后，就可以去掉默认的蓝色边框。

input {outline: none;}

防止拖拽文本域 resize

实际应用过程中，文本域右下角是不可以拖拽的。

textarea {resize:none;}

vertical-align属性

CSS 的 vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐官方解释:用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

vertical-align :baseline l top | middle l bottom

值	描述
baseline	默认。元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的对齐

vertical-align 属性应用

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
默认文字与图片是基线对齐。
此时可以给图片、表单这些行内块元素的vertical-align 属性设置为 middle 就可以让文字和图片垂直
居中对齐了。

解决图片底部默认空白缝隙问题

bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
主要解决方法有两种

1. 给图片添加vertical-align:middle|top|bottom等。(提倡使用的)
2. 把图片转换为块级元素 display: block；

文本溢出显示省略号

1. 单行文本溢出显示省略号

/*1.先强制一行内显示文本*/
默认 normal 自动换行)white-space: nowrap;/*2.超出的部分隐藏*/公
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow:ellipsis;

2. 多行文本溢出显示省略号
   多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)

overflow:hidden;
text-dverflow: ellipsis;
/*弹性伸缩盒子模型显示 */
display:-webkit-box;
/*限制在一个块元素显示的文本的行数 */
webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
webkit-box-orient:vertical;

常见布局技巧

margin负值的运用

1. 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
   果有定位，则加z-index)
2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位(保留位置)，如果有定位，则加z-index)

文字围绕浮动元素

巧妙运用浮动元素不会压住文字的
特性

行内块的巧妙运用

CSS三角强化

width:0;
height:0;
border-color:transvarent red transparent transparent;solid;border-style:
border-width:22px8px00;

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化
简单理解: CSS初始化是指重设浏览器的样式。(也称为CSSreset)
每个网页都必须首先进行CSS初始化。
这里我们以以 京东css初始化代码为例。

Unicode编码字体:

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如:
黑体 \9ED1\4F53宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1

CSS盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:

1. box-sizing:content-box 盒子大小为 width + padding+ border (以前默认的)
2. box-sizing:border-box 盒子大小为width
   如果盒子模型我们改为了box-sizing:border-box ，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

CSS其他特性

CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数(); 例如：filter:blur(5px);blur模糊处理 数值越大越模糊filter: 

CSS3 calc 函数:

calc()此CSS函数让你在声明CSS属性值时执行一些计算。

width: calc(100% -80px);

括号里面可以使用 +、-、*、/来进行计算。

CSS3 过渡

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画 : 是从一个状态 渐渐的过渡到另外一个状态，可以让我们页面更好看，动感十足，虽然 低版本浏览器不支持(ie9以下版本 ) 但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用。

transition:要过渡的属性 花费时间 运动曲线 何时开始;

1.属性 : 想要变化的 css 属性，宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡，写一个a 就可以。
2.花费时间 :单位是 秒(必须写单位 )比如 0.5s
3.运动曲线:默认是 ease (可以省略)
4.何时开始 :单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s(可以省略)

网站 favicon 图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持favicon.ico 图标。

制作favicon图标

1. 把品优购图标切成png图片。
2. 把 png 图片转换为ico 图标，这需要借助于第三方转换网站，例如比特虫:http://www.bitbug.net/

favicon图标放到网站根目录下

HTML页面引入favicon图标

1.在html页面里面的 元素之间引入代码。

<link rel="shortcut icon" href="favicon.ico"
type="image/x-icon"/>