一.基础知识
1.基本构成：选择符和声明，声明包括属性和值。
2.注释/*...*/
3.在html中插入形式(离被设置元素越近，优先级越高)
(1)内联式:直接写在现有的html标签中
<p style=“color:red;font-size:12px;...”>...</p>
(2)嵌入式(写在<head></head>之间)
<style type=“text/css”>
span
{
color:red;
}
</style>
(3)外部式:写入单独文件*.css
在head内使用link链接入html
<link href=“*.css” rel=“stylesheet” type=“text/css”> rel和type是固定写法
二.选择器
1.标签选择器(html中的标签)
标签{样式设置;}
✔可写成分组选择器
标签1，标签2{样式设置;}
2.类选择器
<span class=“类名1 类名2”>...</span>...
<span class=“类名1 类名2”>...</span>...
.类名1{样式设置;}
.类名2{样式设置;}
3.id选择器
<span id=“id名”>...</span>
#id名{样式设置}唯一性
4.子选择器(只包含第一代)
.类名>span{样式设置;}
5.包含(后代)选择器
.类名 span{样式设置;}
6.通用选择器(设置所有的标签样式)
*{样式设置;}
7.伪类选择器(给标签的某种状态添加样式)
标签.hover{样式设置;}鼠标划过时的样式
三.选择器权值
1.标签是1
2.类选择是10
3.id选择是100
例:
四.文字排版
1.body{font-family:"Microsoft Yahei";}给网页设置字体-微软雅黑
2.body{font-size:12px;color:red;}给网页设置字号和颜色
3.p span{font-weight:bold;}文字设置为粗体
4.p a{font-style:italic;}文字设置为斜体
5.p a{text-decoration:underline;}文字设置下划线
6. .oldPrice{text-decoration:line-through;}文字设置删除线
7.p{text-indent:2em;}段落缩进2个
8.p{line-height:2em;}行间距2倍行高
9.h1{letter-spacing:50px;}中文字，字母间距
h1{word-spacing:50px;}单词间距
10.h1{text-align:center;}段落居中
h1{text-align:left;}段落居左
h1{text-align:right;}段落居右
五.布局模型
1.流动模型(flow)默认
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
2.浮动模型(float)
div{float:left}
div块在一行按居左顺序显示
3.层模型(layer)
层模型有三种形式：
(1)绝对定位(position: absolute)
(2)相对定位(position: relative)
(3)固定定位(position: fixed)
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响
(4)相对于某个模块定位
六.代码缩写
1.盒模型缩写见html
2.颜色缩写
p{color:#000000} 缩写 p{color:#000}
p{color:#336699} 缩写p{color:#369}
3.字体缩写
注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
七.值
1.颜色值
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
八.样式设置
(一).居中
1.行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
2.块状元素之定宽
定宽块状元素：块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
3.块状元素之不定宽
(1)加入 table 标签
为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
(2)设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置。
改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
(3)设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
4.垂直居中
(1)父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
(2)父元素高度确定的多行文本
a)使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
b)这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
5.隐性改变diaplay类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
a) position : absolute
b) float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
九.样式
1.font-size:12px;字号
2.color:red;字体颜色
3.line-height:1.6em;行间距
4.font-weight:normal;去掉字体加粗
5.border:1px;边框1像素宽
6.solid:red;边框红色实心
