CSS 样式选择器种类引入方式继承组合。
1.种类
css样式选择器主要包括六种，分别是：标记选择器；类别选择器；ID选择器；关联选择器；组合选择器和伪元素选择器。
标记选择器：指的是使用html标签作为选择器，如：
div{height:100px;width:200px;}
类别选择器：指的是对html之类的标签，使用class进行类别的设置，然后通过设置类别选择器的样式来实现样式控制效果，将定义的css样式放在文件头或外部链接的css文件中。使用时，在类名之前应当添加点号（.）。如：
<head>
.classa{height:100px;width:200px;}
</head>
<body>
<div>使用类别选择器</div>
</body>
ID选择器：指的是使用id进行类别的设置，使用时，在类名之前应当添加井号（#）。如：
<head>
#a{height:100px;width:200px;}
</head>
<body>
<div id=”a”>使用类别选择器</div>
</body>
（ID选择器与Class选择器的区别并不只在于权重的区别，id选择器只能与样式一一对应，而class选择器能够应用于多个标签，且可以对一个标签挂多个class样式）
关联选择器：依据层叠关系，使用空格隔开的两个或多个单一选择器的合成的字符串。如：
div p {height:100px;width:200px;}
div .classa {height:100px;width:20px;}
.classa .classb {height:10px;width:200px;}
组合选择器：使用英文逗号隔开每个选择符。如：
div, p, li, ol, ul {margin:0;padding:0;}
伪元素选择器：对同一个HTML元素在不同状态下的一种定义方式，只有a和p可以使用，语法为a:link a:hover a:active a:visited p:first-letter p:first-line
2.样式优先级
ID选择器权重100，class选择器权重10，html选择器权重1，伪类的权重为10（a:hover为1+10），关联选择器为其内部所有选择器的加和，如：div p（权重为2）
3.引入方式
在行内（即标签内部）进行书写，如：<div style=“color:#f00;”></div>
在文件头部进行书写，如：<style type=”text/css”> body{ margin:0; padding:0;} </style>
使用外部引入的方式，在文件头部书写<link rel=”stylesheet” type=”text/css” href=”http://blog.163.com/hongshaoguoguo@126/blog/my.css”>，将具体样式书写在独立的css文件中。也可以使用@import 进行引入：
link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签,link除了调用CSS外还可以有其他作用，而@import就只能调用CSS。
4.组合 继承
继承的思路是：将一个复杂而包含变化的类，拆分为几个复杂但是稳定的子类。首先明确一个抽象的父类，父类有几乎所有的方法和属性，子类继承自父类，根据需求，添加新的方法和属性，覆盖掉父类有变化的属性和方法。
继承的弊端：任何一点微小的变化都会导致产生一大堆有细微不同的子类。
例如，要实现
<div></div>(宽100，高100，字体颜色红色，外顶部边距10px；)
<div></div>(宽100，高100，字体颜色黑色，外顶部边距10px；)
<div></div>(宽100，高200，字体颜色黑色，外顶部边距10px；)
<div></div>(宽100，高200，字体颜色红色，外顶部边距10px；)
使用继承的代码为：
css部分：
.classa{width:100px;height:100px;color:#f00;margin:10px 0 0;}
.classb{ width:100px;height:100px;color:#000;margin:10px 0 0;}
.classc{ width:100px;height:200px;color:#000;margin:10px 0 0;}
.classd{ width:100px;height:200px;color:#f00;margin:10px 0 0;}
div部分：
<div class=”classa”></div>
<div class=”classb”></div>
<div class=”classc”></div>
<div class=”classd”></div>
组合：将复杂的类分成容易产生变化的部分和相对稳定的部分，将容易变化的部分拆分出去，每一种可能的变化均设计成一个个单独的类，相对稳定的部分设计成一个主体类。
优势：把一个复杂的类分为几个简单的类，类之间没有继承的关系，遵循面向对象设计的单一职责原则。而且可以大量减少类的数量，节省源代码的大小。
例如，要实现
<div></div>(宽100，高100，字体颜色红色，外顶部边距10px；)
<div></div>(宽100，高100，字体颜色黑色，外顶部边距10px；)
<div></div>(宽100，高200，字体颜色黑色，外顶部边距10px；)
<div></div>(宽100，高200，字体颜色红色，外顶部边距10px；)
使用组合的代码为：
css部分：
.box{width:100px;margin:10px 0 0;} /*此处书写较为稳定的属性*/
.h10{height:100px;}
.h20{height:200px; }
. black{color:#000;}
. red{color:#f00;}
div部分：
<div class=”box h10 red”></div>
<div class=” box h10 black”></div>
<div class=” box h20 black”></div>
<div class=” box h20 red”></div>
将css部分放置到了html的头部，测算出使用继承的html文件大小696字节，而使用组合的html文件大小只有587字节。我认为，随着html代码的增加，组合的优势会越来越大。同时组合拥有良好的扩展性，如现在我需要两个新的div，分别要求(宽100，高100，字体颜色绿色，外顶部边距10px；) (宽100，高200，字体颜色绿色，外顶部边距10px；)在继承方法的css中需要再加入两行很长的代码，而使用组合的css中，只需要添加一个“.green{color:#0f0;}”，再对div的class值进行重新的组合即可。
注意：对于的制作好之后不怎么做修改，要求速度的网页内容比较推荐使用组合的方式，而进行更新程度较高的网站并不推荐，不容易维护。