CSS是一种分层设计的思想，把网页的颜色、大小、字体布局什么什么的全剥离到Style标签里面，这样一来
html中就只用关心提供什么内容就行了。
1、语法
第一种，通过选择标签，在style标签内设置内容：
<style>
p{
color:red;
}
</style>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>第二种，直接在元素上面增加style属性：
<p style="color:red">这是style为红色的</p>
<p>这是一个没有style的p</p>2、选择器
选择器主要分为三种，分别是
one 元素选择器，通过标签名选择元素，直接打标签名就行。
two id选择器，通过自己设置的id选择元素，id是唯一的哒。格式为在设置的id前加上#
three 类选择器，如果有多个元素需要设置同样的css的时候，就可以给他们设置相同的类名，然后一次性设置好。
格式为设置的类名前加个 .
如果需要更准确的选择，可以用元素名加上类名的方式，进行精准选择。
3、注释
就像c语言的块注释一样 /* */
4、尺寸
就width呗 值可以是百分比 也可以是具体像素。
5、背景
| background-color | 背景颜色 |
示例代码 |
| background-image:url(imagepath); | 图片做背景 |
示例代码 |
| url(background.jpg) | 本地测试 |
示例代码 |
| background-repeat | 背景重复 |
示例代码 |
| background-size: contain | 背景平铺 |
需要注意的，背景重复就是图片不够长，然后就不断重复，可以设置重复方向。
背景平铺就是把图片给拉开，容易失真。
6、文本
| color | 文字颜色 |
三种方式，red，rgb(255.0.0)，#00ffff |
| text-align | 对齐 |
需要注意是块元素还是内联元素 |
| text-decoration | 文本修饰 |
就是下换线，删除效果等 |
| line-height | 行间距 |
|
| letter-spacing | 字符间距 |
|
| word-spacing | 单词间距 |
|
| text-indent | 首行缩进 |
|
| text-transform | 大小写 |
uppercase 全部大写 capitalize 首字母大写 lowercase 全部小写 |
| white-space | 空白格 |
需要提醒的有：
text-align 文本对齐，首先要是块元素才有对齐的前提，比如div，默认的宽度是100%，而span标签是内联元素，默认的宽度是其文本的宽度，就看不出对齐的效果。
还有white-space ，几个值的区别：
white-space值：
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br
7、字体
| font-size | 尺寸 |
数字或百分比 |
| font-style | 风格 |
normal 标准字体、italic 斜体 |
| font-weight | 粗细 |
值：normal 标准粗细 bold 粗一点 |
| font-family | 字库 |
|
| font | 把大小，风格，粗细，字库都写在一行里面 |
8、鼠标样式
cursor属性，当鼠标移动到该内容上面，鼠标变成啥样。
9、表格
one： 表格布局：
属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
two：表格边框
属性：border-collapse
separate:边框分隔
collapse:边框合并 这个好看点。
10、边框
one：边框风格
属性： border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
two：边框颜色
属性：border-color
three：边框的宽度
属性：border-width
four:都放在一起：
属性：border
值：颜色 风格 宽度
除此之外，每个内容的上下左右四个部分其实都有边框，可以分别设计四个方向的边框的属性：
<style>
div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>
<div class="alldirection">
四边都有边框
</div>分别是top，left、bottom、right；
11、内边距
元素内边距
指的是元素里的内容与边框之间的距离，就是一个框框里面的内容怎么放的，
属性：
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左
12、外边距
元素外边距
指的是元素边框和元素边框之间的距离
属性：
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距
13、超链状态
字面意思，超链接的状态
超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候
<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
<a href="http://www.12306.com">超链的不同状态</a>然后还有超链接一般都有下划线，现在的网页上的超链接一般都没有下划线了，是这样设置的！
属性：text-decoration
值设置为none就行了。
text-decoration: none
14、隐藏元素
隐藏元素有两种方式
display:none;
visibility:hidden;
使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”
15、css文件
把冗长的css内容写到文件里面，就让html可读性更高啦，而且易维护，通常把文件命名为style.css
然后写上：
<link rel="stylesheet" type="text/css" href="style.css" />
就行啦。
16、优先级
style.css中 < <style>标签中 < style属性
如果样式上增加了!important，则优先级最高，甚至高于style属性
