1、样式表
内联样式表：
style=""
内部样式表：
<style type="text/css"></style>
外部样式表：
<link rel="stylesheet" type="text/css" href="">
优先级：内联样式表 > 内部样式表 > 外部样式表 > 浏览器缺省设置
2、选择器
selector {property: value;property: value;......}
1、标签选择器：
h1 {}
2、id选择器：
#red {color:red;}
<p id="red"></p>
div#red{}
3、类选择器：
.center {text-align:center;}
<h1 class="center"></h1>
<p class="center"></p>
(01)
div.red{}
(02)
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
<p class="important warning">This paragraph is a very important warning.</p>
4、 属性选择器：
[title]
{
color:red;
}
<h2 title="Hello County">Hello World</h2>
(02)
a[href][title] {color:red;}
1、属性和值选择器：
[title=w3school]
{
color:red;
}
<h2 title="w3school">Hello World</h2>
2、属性和值选择器(多个值)：
[title~=w3school]
{
color:red;
}
<h2 title="w3school">Hello World</h2>
<h2 title="hello w3school">Hello World</h2>
3、表单选择器：
input[type="text"]
{
150px;
}
5、多样
1、派生选择器：
li strong {} ：li标签下所有的strong元素
注：div#red{} td.center{} 跟 div #red{} td .center{} 是有区别的。
2、子元素选择器：
h1 > strong {} ：只能是li标签子元素下的strong，其他strong不行
3、相邻兄弟选择器:
h1 + p {} ：选择紧接在 h1 元素后出现的p，h1 和 p 元素拥有共同的父元素
4、分组选择器：
h1,h2,h3,...{} ：这几个h标签共用一些属性
5、伪类
selector : pseudo-class {property: value}
注：后面详细介绍
3、CSS背景
属性 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
4、 CSS文本
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
5、CSS字体
属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。
6、CSS链接
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
text-decoration 属性大多用于去掉链接中的下划线
7、CSS列表属性(list)
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
8、CSS表格属性(Table)
属性 描述
border
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。
9、盒子模型
margin：外边距
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
padding：内边距
border：边框
border-style、border-color、border-width
内容
10、CSS定位(position)
1、相对定位(relative)
1、占用文档流
2、是基于原来文档流中的位置
3、以边框为基准
2、绝对定位(absolute)
1、脱离文档流
2、是以浏览器窗口为基本位置
3、以边框为基准
3、fixed
相对于窗口的定位
4、浮动(float)
1、脱离文档流
2、会把内容挤掉
clear：
清除前面的元素浮动对后面元素的影响
5、relative和absolute混用
1、元素作为容器时，设置为relative，其内部元素如果是absolute，内部元素以容器为基准