精灵图
为什么要使用精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度,因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术(也称CSS Sprites、CSs 雪碧)。
核心原理:将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
精灵技术目的:为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
精灵图(sprites)的使用
使用精灵图核心:
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为sprites 精灵图 或者 雪碧图
- 移动背景图片位置，此时可以使用 background-position
- 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动，所以数值是负值。
- 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
字体图标
字体图标的产生
字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点
轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器，请放心使用.
注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
精灵图与字体图标的使用总结
如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
字体图标的使用
字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为
1.字体图标的下载
2.字体图标的引入(引入到我们htm页面中)
3.字体图标的追加(以后添加新的小图标
2.3 字体图标的下载
推荐下载网站:
- icomoon字库 http://icomoon.io
- 阿里 iconfont 字库 http://www.iconfont.cn/
字体图标的引用
下载完毕之后，注意原先的文件不要删，后面会用。
-
把下载包里面的 fonts 文件夹放入页面根目录下
-
在 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;
} -
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个) |
区别:
- nth-child 对父元素里面所有孩子排序选择(席号是固定的) 先找到第n个孩子，然后看看是否和E匹配
- 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:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
主要解决方法有两种
- 给图片添加vertical-align:middle|top|bottom等。(提倡使用的)
- 把图片转换为块级元素 display: block；
文本溢出显示省略号
-
单行文本溢出显示省略号
/1.先强制一行内显示文本/
默认 normal 自动换行)white-space: nowrap;/2.超出的部分隐藏/公
overflow: hidden;
/3.文字用省略号替代超出的部分/
text-overflow:ellipsis; -
多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)overflow:hidden;
text-dverflow: ellipsis;
/*弹性伸缩盒子模型显示 */
display:-webkit-box;
/*限制在一个块元素显示的文本的行数 */
webkit-line-clamp:2;
/设置或检索伸缩盒对象的子元素的排列方式/
webkit-box-orient:vertical;
常见布局技巧
margin负值的运用
- 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
果有定位，则加z-index) - 鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位(保留位置)，如果有定位，则加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，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
- box-sizing:content-box 盒子大小为 width + padding+ border (以前默认的)
- 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图标
- 把品优购图标切成png图片。
- 把 png 图片转换为ico 图标，这需要借助于第三方转换网站，例如比特虫:http://www.bitbug.net/
favicon图标放到网站根目录下
HTML页面引入favicon图标
1.在html页面里面的 元素之间引入代码。
<link rel="shortcut icon" href="favicon.ico"
type="image/x-icon"/>