一 背景类样式
1、 背景图片：background-image 属性
基本语法：background-image：URL（‘images/HTML.jpg’）;
2、 背景重复：background-repeat 属性
3、 背景定位：background-position 属性
4、 背景关联：background-attachment 属性
属性功能：用于设置背景图像是否固定或者随着页面的其余部分滚动
基本语法：background-attachment：fixed；设置元素背景图像不随着页面的滚动而运动，固定保持不变。
值 |
描 述 |
Scroll
扫描二维码关注公众号，回复：
1693955 查看本文章
|
默认值，背景图像会随着页面其余部分的滚动而移动 |
Fixed |
当页面的其余部分滚动时，背景图像不会移动 |
Inherit |
规定应该从父元素background-attachment属性的设置 |
5、 背景类样式的相关问题
1） 背景颜色和背景图，从哪里开始显示？
背景颜色是从边框区域开始显示的，背景图是从内边距区域开始显示的。
2） 背景图和背景颜色同时设置时，是什么效果？
当为一个元素同时设置背景颜色和背景图，且背景图尺寸小于元素区域时，元素会被背景图覆盖，而背景图之外的部分使用背景颜色进行填充。
二 透明背景
1、Opacity与filter
Filter
基本语法：filter：alpha（opacity=50）； /*表示50%的透明度*/
Opacity（适用于火狐浏览器）
基本语法：-moz-opacity:0.5; /*表示透明度为50%的*/
注意：使用opacity属性，针对某一个元素设置透明度之后，会引发这个元素内部的子元素跟着变的半透明，简言之就是透明度会影响后代，即便是为后代远古三设置透明度为完全不透明，显示方面还是会到父级元素透明度的影响。所以想解决这个问题就需要应用到定位的知识。实现的基本原理是：通过“定位”，将视觉效果模仿为一个元素嵌套另一个元素的样式，但这两个元素实际上是同级关系。
2、CSS Sprite
什么是CSS Sprite?
CSS Sprite 也称为CSS精灵，是一种网页图片应用处理方式。它允许将一个页面涉及的所有零星图片都合并到一张大图当中，当访问该页面时，载入的图片就不会像以前那样一张一张的显示出来。它的原理是：把网页中的一些背景图片整合在一张图片文件中，再利用CSS中的background-position属性进行背景定位。
使用步骤：
1） 准备需要整合在一起的小图片
2） 打开CSS背景图合并小工具，在线地址：http://s.uis.cc/pw/。
3） 选择多张图片单击“打开”按钮
4） 排布图片：可以选择程序提供的按钮完成横竖的默认排布，也可以用鼠标选中图片拖动位置，拖动完成后程序会根据内部图片的位置，生成面积最小的背景图。
5） 代码生成：在程序中可以查看没张小图片的CSS代码，建议生成图片后再赋值生成的代码
6） 单击“选择目录并生成测试文件”按钮，调整目录，生成图片即可，生成之后会得到一个合并的背景图以及每张图相应位置的代码。
3、word-wrap与word-break
Word-wrap：
属性功能：设置长单词能否自动换行。
基本语法：word-wrap：break-word；
Word-break：
属性功能：设置自动换行的处理。
基本语法：word-break：break-all； /*允许在文本的单词内换行*/
Word-break：keep-all； /*只能在半角空格或连字符处换行*/
比较：
word-break：break-all是用来断开单词的，在单词到便捷式，下一个字母自动到下一行；
使用word-wrap：break-word是用来进行强制换行，中文没有任何问题，英文语句也没有问题，但是对于长串的英文就不起作用了。
4、font的复合样式
基本语法：font：italic bold 12px/20px ‘SimSun’
代码解析：设置字体为宋体、倾斜、加粗，12像素大小、20像素的行高。
注意：1）属性值与属性值之间使用空格隔开，字体大小与行高之间使用/分割、font属性当中，必须设置字体大小和字体类型两个属性的属性值，否则font的代码不会生效。2）属性值的顺序为：font-style、font-variant、font-weight、font-size/line-height、font-family。3）在实际开发中，更倾向于使用分开设置字体的各类属性，而不采用font这个复合属性。其中font-variant是将段落设置为小型大写字母，在日常开发工作中很少使用。
5、网络字体
作用：网站中难免会用到一些特殊的字体（如“华文行楷”）等修饰网站，让其不那么代办，然而，用户计算机上不一定会有这种字体，也就是说，只有客户端安装了这个兹特才能正常显示，否则会调用客户端上的别的字体来代替开发工程师设定的字体样式。这样单纯使用font-family就不能满足需求。
@font-face的使用：
@font-family{
font-family：‘STXINGKA’;src:local(‘SXTIUNGKA’),url(‘STXINGKA.ttf’) format(‘truetype’)}
5、Format
Format是一个可选参数，他的作用是提示该资源URL所引用的字体格式。
创建自己的字库
国外的一些网站都局部地应用font-face来美化网站，但是，和中文字体不同的是，国外的字库只有几十KB的大小（26个大写和26个小写英文字母以及一些标点符号），而中文字库由于存在大量的文字，大部分都是几兆字节甚至几十兆字节不等，为了美化网站而为网站增加几兆字节的流量是不明智的选择。这时，可以把网页中出现的特殊文字添加到一个新文字库里面，把不常用的去掉，做一个精简的字库来满足需求。可以使用fontmin来实现创建字体库。
1）为何推荐fontmin
与其他的字体生成工具相比，fontmin方便、快捷，不需要自己手动抠文字，直接生成各类文字字体，而且代码也可以直接生成。
2）Fontmin的基本特点
既能删除多于文字，又能够调整文字映射。
子集化（只取用当前字体中的部分文字）后的文字删掉了所有没用的空字符，不需要另开fontcreator进行二次精简。
3）fontmin的下载
Fontmin官网：http://ecomfe.github.io/fontmin.
4）fontmin的操作步骤
打开软件；
输入需要采用特殊字体的文字（注意不要换行）；
打开系统中的字体库。选择需要的特殊字体，并将特殊字体拖到软件的相应位置，生成；
将生成的文件复制或剪切到开发文件夹的指定位置（会生成各种格式的字体文件以及CSS文件，可以使用编辑器打开CSS文件）。
5）注意事项
在使用该工具进行字体处理时，吧需要的文字内容粘贴上去，不要换行，否则声称出来的字体，在部分手机中会出现字符间距增大的现象。
建议采用英文名称命名字体（CSS文件中font-family的属性值及所有的字体名称），而不采用中文，中文有可能出现乱码现象。
6、 italic与oblique的区别
Italic是使用文字的倾斜，oblique是让文字倾斜。通常情况下，italic和oblique文本在web浏览器中看上去是完全一致的，但是对于没有斜体样式的字体，如果使用italic则没有效果，需要使用oblique属性值来实现倾斜的文字效果。
一些字体在设计时，会有粗体、斜体、下划线、删除线等诸多属性，但是并非所有字体在创建时完整地设计了各类属性和样式，对于一些字体可能只存在正常状态。