CSS快速入门
学习目的：本博客仅仅适用于网站后台程序员，对于css美工的更多知识这里不会涉及，看完后应该能了解如何修改已有css模板，这是这个教程的唯一目的
前期准备：请学完了html标签再来学，程度是：会自己书写，知道什么地方放入即可
知识点1：CSS是嘛，干嘛用的
一句话：如果说HTML定义了一个个可以显示的东西，那么CSS就是让这些东西按照自己想要的方式换脸，排列。
总结：CSS是皮肤+座位号
知识点2：为什么那么多CSS种类，究竟怎么理解
预备知识：块级元素----比如DIV，h1,， 接下来他们特型，块级元素占用一行，再小也占用一行
行内元素----比如span，比如按钮，这些不会独占一行，而是几个占用一行，称为行内元素
预备知识：理解这里时，注意一个点，那就是HTML标签（就是那些可以显示的东西）本身就有一个样子，这个样式定义在一个.CSS文件中，所以HTML一开始会有那个鬼样子，而且他们的位置是：从上而下排布，这个.CSS文件就是默认css，其的属性最低
补充：还有一种.CSS 是在浏览器中设置，这里不介绍
总结：接下来的3种加入。css的方法本质上就是把原来的样子变变，位置变变。
那么，接下来学习如何利用三种自己定义的css把原有的默认样式定义的样子，位置变化
第一种：外部样式表
<link rel="stylesheet" type="text/css" href="style.css" /> 不用记忆语法，直接拖入就可以，而且既然是拖入的，那么这个文件一定是外部的，没错，第一种就是
把外部的拖入
第二种：内部样式表
<style type="text/css">
body {background-color: #FF0000;}
</style>
这是写在head中，理解为在开头设置样式
第三种：行内样式表
<body style="background-color: #FF0000;">
注意模仿style的写法，这没有道理
总结：为什么有三个，这个问题我不回答，因为具体用中自会了解，这里说的是如果同时设置了三个怎么办
很简单，有一个原则：
越近越好，越明确越好
①越近越好，就是style距离这个html元素越近越好，通过上面可以了解就是行内>内部>外部>默认
②这个原则还有一句话“越明确越好”：如果是相同的属性，那么就覆盖，越近越好
如果是近的没有的属性，那么就叠加
知识点3：选择器
预备知识：什么是选择器
一句话概括就是：哪家的鸡就用那家的鸡叫声去叫
鸡----HTML标签
鸡叫声----选择器
选择器是为了标志应用这个css样式的html标签，所以选择器=css内容是什么+该内容对应的标签是什么（不同的对应方式对应不同的css选择器，但是记住一点，
所有的css选择器的方式一定是可以通过特定方式找到被匹配的html标签，把自己定义的样式用到这个标签上）
怎么记：鸡叫声一起，这个家的鸡就会换皮肤和变位置
好多种，晕了吧，下面通过另一种方式讲解：
一 、单独出现，就是定义时仅仅只有一个被定义的
标记选择器：方法----
html标签名{css属性设置} 怎么记：所有的html可显示的标签打个大括号就可以设置属性
怎么用：这通常适用于设置html标签共同属性，而每个标签的单独属性根据原则“越明确越好”，没有的加上就可以
适用于 写的 html标签名
类选择器：方法-----
.某某{css属性设置} 怎么记：某某打个点，这个某某自己取名字
怎么用：class=某某 的这个标签被套用该选择器的样式
ID选择器：方法-----
#某某{css属性设置}
写到这，懂了吧，道理一样，<>中写了 id=某某 的那个标签就是那家的鸡，她的皮肤和位置按照某某设定
二、不是单独出现的
①包含关系的
预备知识：
这种记住，并排出现的是包括嵌套关系的标签，即<某某A>
<某某B>
</>
</>
某某A就包含某某B
知识：
某某A 某某B{}
这种就是针对上面的那种，怎么理解：
如果仅仅想设置被A包含的B而不是其他地方的B就用这种
总结：某某A 某某B{}
首先这种是设置某某B属性的，不是某某A 某某B同时设置
其次，某某B一定包含在某某A中
最后，设置的是某某A中的某某B，不是所有的某某B
②带逗号的
某某A，某某B{}
有个逗号的，这个逗号不是逗你玩，而是另外一种，加了逗号后便是同时设置某某A某某B
三、其他
①伪选择器
把握两点：
1：用在哪：鼠标经过时那个标签的样式，用上面的例子，这声 鸡叫 对应的鸡不是鼠标，而是鼠标经过的标签
2：语法
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
模仿就可以，这里不讲，我只说:各位，鼠标在一个标签上不就是经过了，停一下，点一下，点过了吗，这四种状态下被选中的标签就被 使用对应的样式
② 其他
只要抓住：样式是什么，对应的被选中的标签是什么就可以
他们的叠加关系就是第二个知识点
知识点4：float position
预备知识：盒子
各位，这个没有想象中那么难，是盒子，那就是盒子，从这里开始，请以后把所有的html标签当成盒子
怎么记：抓住border边界，往里到具体内容是padding，往外倒另一个盒子（标签）是margin
虽然很多时候border没有，但是排布时注意抓住border就可以理解了
①float
看起来很难，但是我有两点秘籍，马上学会：
第一：哪个设置而来float，那么他就不属于文档流，即这个标签后面的元素忽略它，但是它确实存在，所以后面的元素就排在他的右边（float：left）和左边（float：right），直到这个空间填满后就往下一行
怎么记：设置了float的标签，他就变成了占了位置的石头，而被她占据的那几行剩下的空间就被接下来的元素填满
怎么记上面的怎么记：看过：图片------------------------------------------------------
首字很大的吗，左边那张图片变成了“石头”，占了一个地方，剩下的标签填满右边
第二：如果想另起一行，不想填在剩下空间，那就用clear
②position
这个只要记住是相对于什么移动的就可以，她的位置本质就是以相对于什么来定的，切记：
