1.内容与表现分离
写一个网页就好比建房子，房子的结构通过砖块、钢筋、水泥搭建，后期通过瓷砖、地板等的装饰，才能让房子更加漂亮。
网页通过HTML搭建整体结构，通过CSS修饰美化网页。为了使得在搭建的过程中不受到美化网页的影响，而是专注在结构上。并且在后期的维护上也更加方便。
2.网页的表现统一，容易修改
分开之后，结构和样式在不同的文件，互不影响，结构清晰，可读性强，后期如果修改维护便于定位查找。
3.丰富的样式，使得页面布局更加灵活
首先样式表中提供了强大的而且非常全面灵活的选择器，可以供大家选取到网页中的任何一个元素
从大的方面选择器可以分为四大类：
1.基本选择器
2.层次选择器
3.结构伪类选择器
4.属性选择器
如下图偶只是截取了属性选择器中几种：
其次样式表不仅提供了文本效果、背景和边框还有2D/3D 转换、动画、多列布局、用户界面等。
4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”
换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。
另外，更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数，这是提升页面加载速度的最佳方法之一。
而使用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，并且提升了页面的加载速度
基于以上几点，使用样式表是必须的！！
1、打开hbuilder，在空白的html文件上面设置一个div，给div一个class并命名为img。
2、在CSS里设置img的类一定的宽和高，引入示例图片，设置图片为不重复。并且给img的类设置“:hover”伪类，设置伪类内的透明度为0.6。
3、打开浏览器，在浏览器内查看效果。
4、将鼠标移入图片，就会发现图片已经变亮了。
以上就是用CSS设置鼠标经过图片变亮，移开变变暗效果的演示。
a：hover表示当鼠标选定在a标签上时a标签的样式变化。 这是css中伪类的使用格式。 伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。
它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类： :link用在未访问的连接上。 :visited用在已经访问过的连接上。 :active用于获得焦点（比如，被点击）的连接上。 :hover 用于鼠标光标置于其上的连接。
css修改超链接颜色的方法：
1.通过“a:link”修改超链接颜色；
2.通过“a:visited”改颜色；
3.通过“a:hover”设置变颜色；
4.通过“a:active”修改颜色。
在css中，可以使用“:link”伪类选择器来设置链接颜色，只需要给a元素设置“a:link{颜色:颜色值;}”即可。“:link”选择器用于选取未访问的链接，然后给该链接添加所需样式。
