一、引入方式（只介绍两种常用的）
1、直接在HTML的head标签写<style></style>添加样式
2、在head中引入CSS文件： <link href="xx.css" type="text/css" rel="stylesheet" >
二、选择器
1、标签、id、class选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>TEST</title> 6 ????<style> 7 ????????/*标签选择器*/ 8 ????????p{ 9 ????????????color: blue;10 ????????}11 ????????/*id选择器*/12 ????????#Myid{13 ????????????color: red;14 ????????}15 ????????/*class选择器,为所有的class="Myclass2"的加样式*/16 ????????/*也可以用 div.Myclass2来表示为div标签的class为Myclass2的加样式*/17 ????????.Myclass2{18 ????????????color: red;19 ????????????background-color: black;20 ????????}21 ????</style>22 </head>23 <body>24 <P>标签选择器</P>25 <p id="Myid">id选择器（id是唯一的不可以重复）</p>26 <div class="Myclass1">class选择器（名称可以重复，也可以有多个）1</div>27 <div class="Myclass1 Myclass2">class选择器（名称可以重复，也可以有多个）2</div>28 </body>29 </html>2、组合选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>TEST</title> 6 ????<style> 7 ????????/*逗号表示同时样(可以多个组合)*/ 8 ????????p,div{ 9 ????????????color: brown;10 ????????????background-color: blue;11 ????????}12 ????????/*为css1后代所有的div标签加红色背景*/13 ?????????.css1 div{14 ????????????color: brown;15 ????????????background-color:red;16 ????????}17 ????????/*为css1的子代所有的div标签加白色背景*/18 ?????????.css1>div{19 ????????????color:black;20 ????????????background-color:white;21 ????????}22 ????????/*为紧挨着css2的P标签（兄弟标签）加上绿色的背景*/23 ?????????.css2+P{24 ????????????color:black;25 ????????????background-color:green;26 ????????}27 ????</style>28 </head>29 <body>30 <p>与小div爷爷同级的p</p>31 <div class="css1">我是是小div爷爷！32 ????<div>我是小div的爸爸！33 ????????<div class="css2">我是小div！</div>34 ????????<p>我是小div的兄弟，小p</p>35 ????</div>36 </div>37 </body>38 </html>3.伪装类选择器
<style>
p[name1 ="xx1"]{/*加样式*/}
</style>
.......
<p name1="xx1">
----------------------------------------------
# 有多个名字，找其中的某个
<style>
p[name1^ ="xx2"]{/*加样式*/}
</style>
.......
<p name1="xx1 xx2">
----------------------------------------------
# 找一XX1开头的（| 代表找以什么开头的）
<style>
p[name1| ="xx1"]{/*加样式*/}
</style>
.......
<p name1="xx1-xx2">
CSS基础
原文地址：http://www.cnblogs.com/ggboom/p/7456110.html