1
CSS是由选择器加声明组成的。
比如：
h1{color:red}
h1就是选择器，意思是只要遇到h1，就使用该CSS的规则
color：red:这个事声明
color:这个是属性
red:这个是值
2
OK，我们先来分析选择器。
END
一.选择器
1
选择器的种类很多，各有各的作用。我们来一一讲解。
标签选择器
class选择器
id选择器
全局选择器
组合选择器
伪类选择器
2
标签选择器
顾名思义，HTML中有许多标签，而标签选择器就是用来给标签直接申明样式的，简单、实用、常用。
举例：
p{color:red}
只要是p标签，其P标签内部的颜色，都是红色。
如图代码
<head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><title>无标题文档</title><style>p{ color:red}</style></head><body><p>嘿嘿哦嘿嘿呀哦嘿嘿哦</p></body>
其中，<style>标签是样式标签，请将CSS放在其中
（这部分内容后续会介绍，这里只是先提一下）
3
看网页效果
4
class选择器
也叫做类选择器，直接说概念估计你也不明白，直接上例子吧。
举例：
.alsp{color:red}
这就是一个class选择器，意思是有一种CSS的样式，其名字是alsp，谁想用谁用。
看代码：
<head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><title>无标题文档</title><style type="text/css">.alsp{color:red}</style></head><body><p class="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol class="alsp"><li>嘿啥嘿</li><li>我想嘿嘿</li><li>专制各种不服</li></ol><p>世界为亡，死不投降</p></body>
5
看网页效果
通过.alsp定义一个class选择器。
在后面的代码中，哪个标签想用，就用class="alsp"去调用，就可以使用这件“衣服”来修饰自己了
6
ID选择器
ID和class很像，但是和class有一个区别。class像姓名，两个人是可以同名的，但是id像身份证，只有一个人可以使用。
例如：
#alsp{color:red}
OK，上代码：
#alsp{color:red}</style></head><body><p id="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol><li>嘿啥嘿</li><li>我想嘿嘿</li><li>专制各种不服</li></ol><p>世界为亡，死不投降</p></body>
7
看网页效果
只能有一个标签使用该id，或者说该标签专属ID
8
全局选择器
*{margin:0padding:0}
这个很简单，前面用个*来表示，整个网页都会使用。这句话也是网页基本都要添加的，什么意思呢？自己试试看吧。
9
组合选择器
组合选择，小编是非常喜欢使用的，原因无他，懒而已。他可以减少代码量，并且方便、易读。
不过组合选择器的组合方式比较多，但也多很好理解。
1）群模式
比如：
h1{color:redfont-size:14px}
p{color:redfont-size:14px}
a{color:redfont-size:14px}
这三个虽然标签不同，但是样式是一模一样的，所以，可以这样写：
h1,p,a,{color:redfont-size:14px}
2）继承模式
比如：
.alsp li{color:red}
<ul class=".alsp">
<li>fdf</li>
</ul>
li是在ul之中的，算是ul的后代。通过.alsp li确定li是属于调用alsp类选择器里的li标签，其他的li标签并不会使用该样式。
3）群模式（多元素并列选择器）
其实也是一种特殊的群模式
p.alsp{color:red}
<p class="alsp">p.alsp</p>
<a class="alsp">a.alsp</p>
alsp仍然是一种class选择器，但是他只有在p的标签下被使用才生效。
所以，第一行生效，p.alsp字样变红，第二行不生效
10
伪类选择器
“伪”字暴露了他的本质，伪类选择器并不像其他选择器直接做用在标签上，但是他偏偏又是在标签上进行使用，所以称为“伪类选择器”。
伪类的作用，是作用在状态上。
一般情况正常运行，只有当达成条件的时候触发，才会执行伪类选择器所代表是css样式。
伪类选择器很多，但许多都是我们这辈子估计都用不到的。
OK，伪类选择器后续我会专门写一篇经验介绍，有点小多，这里也就不多说了。
END
二.在HTML中调用CSS
调用CSS的常用方法有3中
内样式
外样式
行间样式
内样式
直接看代码，如图所示
在<head></head>中，加入<style></style>,并将相关的CSS样式放在其中
外样式
直接看代码，如图所示：
<link rel="stylesheet" type="text/css" href="index.css">
这里，href为css的路径。
意思是，你专门创建一个index.css的文件，里面放上CSS样式，和内样式的语法一模一样，只是专门找了一个文件存放而已。
4
行间样式
行间样式直接写在元素里面
例如：<p style="color:#900">嘿嘿哦嘿嘿呀哦嘿嘿哦</p>
直接在标签后面加上style
一般不要用，不过可以用来调试使用
CSS网页布局的意义体现在如下方面： 一、使页面载入得更快 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 二、降低流量费用 页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。 三、修改设计时更有效率 由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。 四、保持视觉的一致性 DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。 五、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。 六、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。 说了这么多CSS网页布局的意义与优点，同时也不能轻视CSS网页布局的副作用： 一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。 二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。 四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。CSS样式是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，可以很方便的控制网页表现，比如配色，布局等。
