在我们刚刚使用html的过程中，我们一定会遇到一些问题，诸如：调整图片，文字等标签时，同样意思但是属性名不同的问题，以及块属性调整麻烦等问题，而CSS的出现就是为了解决这些问题。（本文仅仅从功能以及理解层面解释，由于时间原因没有具体代码实现，详情请结合W3School官方学习）
一、CSS的作用
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠
这是来源于W3School的说法，个人理解来说CSS的作用在于几点：1.通过各种选择器实现样式的复用 2.统一规范整个html的常用属性设置，避免不同标签属性名不同的窘境。 3.通过CSS文件以及link的使用，将样式与html代码分离开来，既保证了CSS文件的复用，降低了样式与html代码的耦合，又提高了代码的逻辑性以及美观感。
二、CSS的选择器
1.派生选择器（直接以标签名作为样式名）--即直接对于html的标签进行样式定义，值的注意的是这样的话，会对整个html文件的所有该标签进行样式修改，所以在大型的网站编写中，不建议使用，即使使用也是放在后代选择器中结合使用。
2.id选择器（#样式名）--在html中id具备唯一性，可以视为身份证一样的唯一标识，所以id选择器也是作为唯一选择器使用。但是，虽然id的意义在于唯一性，html并没有这样设置，也就是锁id选择器依旧可以让多个标签使用，不过不推荐这样使用，因为会失去id选择器的意义。
3.类选择器（.样式名）--在html中使用class表示的标签均使用该选择器，作为样式复用的重要一环，可以将一些很通用的样式放于class中并结合id使用。
4.属性选择器（[属性名=“属性值”]）--可配合派生选择器来使用，设置所有具备这个属性值的标签的样式。
5.后代选择器（样式名1 样式名2）--对于样式1中的样式2的样式作出设置
6.相邻兄弟选择器（样式名1+样式名2）--如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
三、样式的一些细节
1.无论什么样式都可以对所有样式属性进行调整，但不一定会有效，比如非块元素调整background等块元素属性是不会生效的，不过错误的属性也不会影响后面属性的有效性。
2.每条属性相互独立，但是具有顺序性，重复的属性后者会重置前者，且在有顺序性的情况下，一些特殊的属性会相互影响，如浮动float与清除浮动的clear会因为顺序原因倒是代码异常，如border等总属性会直接覆盖掉border-bottom等分属性，在编写时需要注意。
3.在大型项目中，由于需要的样式太多，所以应该注意命名的规范以及样式的复用，避免出现命名困难的现象。
4.内边距的设置会直接增大宽高，影响布局。
5.可以使用line-height和text-indent对头部的标题作出上下居中和空行处理，而不是使用边距来进行处理，因为内边距会直接增加宽高。
四、常用的样式
1.背景：background-image，background-color：设置块属性的背景信息
2.文本：text-aligh：设置块属性内部的位置（居中左右等处理） text-indent：设置段落的首行空字符（em） word-spacing：设置字之间的间距 line-heigh：设置行距（可用于header部分左右居中）text-decoration：设置文本修饰（也可用于消除文本修饰）color：文本的颜色
3.字体：font：字体相关的总属性 font-family：设置字体系列 font-style：设置字体风格 font-weight：设置字体粗细 font-size：设置字体的尺寸
4.列表：list-style：把所有用于列表的属性做标记 list-style-image：将图片设置为列表项标志 list-style-type：对列表中的属性的类型做设置
5.表格：border：主要用于设置边框的样式宽度以及颜色等。
6.图片：vertical：图片的偏移与对齐（左偏，居中等），不过需要有效必须在img中设置，而不是图片的外围块
7.框模型：使用width和height对宽度以及高度作出设置，既可以使用准确的像素值进行设置，又可以使用百分数来设置，值的说的是由于高度的不固定所以height是无法直接使用百分比设置的，需要在外层块中固定高度。
8.边距：分为外边距与边距 外边距margin和内边距padding，边距又分为上下左右（top，bottom，left，right）来控制，也可以使用margin与padding来总控制。
9.定位：position：主要分为相对定位（relation）：即与上个元素之间的间隔；绝对定位（absolute）：针对于整个窗口的绝对位置即最左上方；fixed：针对于浏览器的左上角的位置定位，常用于做广告的处理，即页面上下左右移动不会改变这个的位置。
10.浮动：float：用于块的处理，因为块元素（div，dl，p）等会直接换行处理，这对于页面布局来说太过死板，所以可以通过使用浮动来控制块的左浮动，右浮动，不过浮动，顾名思义会使得块与普通的流相互隔离，即对于普通流兰说，浮动的块是不存在的，会直接影响页面布局，所以建议大量使用浮动布局时，将每个块的边框设置好，以便解决一些问题。clear：清除浮动，浮动会直接继承，如果不清除，则会继承给后来的所有块，这样显然不利于我们的布局。