为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
css的定义方法是：
选择器 { 属性：值； 属性：值； 属性：值；}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略，代码示例：
div{
width:100px;
height:100px;
background:gold;
}
Css的三种选择器
第一种：
标签选择器：标签选择器，此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。(受局限型比较大)
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 /*第一种选择器：标签选择器，会选择到页面上所有同类型的标签，局限性大，容易误伤*/ 10 div{ 11 color: red; 12 font-size: 30px; 13 } 14 </style> 15 </head> 16 <body> 17 <body> 18 <div class="bold">这是第一个div</div> 19 </body> 20 </body> 21 </html>
第二种：
类选择器：通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*第二种选择器:类选择器,使用最多的选择器，一个类可以用在多个标签上，一个标签可以用多个类（类之间用空格隔开），使用非常灵活*/ .bold{ font-weight: bold; } .indent{ text-indent: 50px; } </style> </head> <body> <body> <div class="indent bold">这是第二个div</div> </body> </body> </html>
第三种：
层级选择器：主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*第三种选择器：层级选择器，符合此种层级关系的标签才能被选中*/ .indent span{ font-family: ‘Times New Roman‘, Times, serif; color: slateblue; } </style> </head> <body> <body> <div class="indent bold">这是第二个<span>div</span></div> </body> </body> </html>
原文：http://www.cnblogs.com/sister-wen0318/p/7407206.html