---恢复内容开始---
总结并巩固学习css过程中知识点，如不对，欢迎指正，谢谢。
1.css概念
（Cascading Style Sheets）层叠样式表，是用来定义html内容在浏览器中显示的样式。
好处：可以是结构化标准语言（html）与表现标准语言（css）实现分离，方便管理。
2. css语法
选择符+ 声明（{属性+值}）
例如
p{color：blue}
3.css注释
html注释是 <!--注释语句-->
css注释是 /*注释语句*/
4.css样式的三种方式
第一种：内联样式表
1 <!doctype html> 2 <html> 3 <head> 4 <title>内联样式表</title> 5 </head> 6 <body> 7 <!--内联样式表写在属性里--> 8 <p style="color:blue">hello css!</p> 9 </body> 10 </html>
第二种：内部样式表
1 <!doctype html>
2 <html>
3 <head>
4 <title>内部样式表</title>
5
6 <style type="text/css">
7 p{color:blue;}/*内部样式表*/
8 </style>
9 </head>
10 <body>
11 <p >hello css!</p>
12 </body>
13 </html>
第三种：外部样式表
1 <!doctype html>
2 <html>
3 <head>
4 <title>外部样式表</title>
5 <link rel="stylesheet" href="style.css" type="text/css">
6 <!--
7 外部样式表
8 p{color：blue}
9 -->
10 </head>
11 <body>
12 <p>hello css!</p>
13 </body>
14 </html>
优先级比较：遵循就近原则，一般是内联样式>内部样式>外部样式
例如：p段落会显示内联的blue样式
<!doctype html>
<html>
<head>
<title>优先级</title>
<style type="text/css">
.pclass{color:red;}
#pid{color:green;}
</style>
</head>
<body>
<p class="pclass" id="pid" style="color:blue">hello css!</p>
</body>
</html>
5：css选择器
1）属性选择器，格式是 属性名称{样式name:value值}
例如：p{color：blue}
1 <!doctype html>
2 <html>
3 <head>
4 <title>属性选择器</title>
5
6 <style type="text/css">
7 p{color:blue;}/*属性选择器*/
8 </style>
9 </head>
10 <body>
11 <p >hello css!</p>
12 </body>
13 </html>
2）类选择器 格式是 .类名{样式name：值value}
1 <!doctype html>
2 <html>
3 <head>
4 <title>类选择器</title>
5 <style type="text/css">
6 .pclass{color:blue;}/*类选择器*/
7 </style>
8 </head>
9 <body>
10 <p class="pclass">hello </p>
11 </body>
12 </html>
3)id选择器 格式：#id名{样式name:值value}
1 <!doctype html>
2 <html>
3 <head>
4 <title>id选择器</title>
5 <style type="text/css">
6 #pid{color:blue;}/*id选择器*/
7 </style>
8 </head>
9 <body>
10 <p id="pid">hello </p>
11 </body>
12 </html>
ID选择器与类选择器的区别：
第一：ID选择器好像人的身份证一样，是唯一的，在文档中只能使用一次；而类选择器在文档中可以重复使用
第二：类选择器可以追加样式，而id选择器不可以追加样式。
1 <!doctype html>
2 <html>
3 <head>
4 <title>类选择器</title>
5 <style type="text/css">
6 .pclass{color:blue;}/*类选择器*/
7 .content{font-size:14px;}
8 </style>
9 </head>
10 <body>
11 <p class="pclass content">hello </p>
12 </body>
13 </html>
4)子选择器 格式：父元素>子元素{样式name:值value}，选择的是父元素的第一代子元素
<!doctype html>
<html>
<head>
<title>子选择器</title>
<style type="text/css">
ul>li{color:blue;}/*子选择器*/
</style>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
</body>
</html>
5)后代选择器 格式：父元素 空格 子元素{样式name：值value}，选择的是父元素的所有的后代子元素
1 <!doctype html>
2 <html>
3 <head>
4 <title>后代选择器</title>
5 <style type="text/css">
6 ul li{color:blue;}/*后代选择器*/
7 </style>
8 </head>
9 <body>
10 <ul>
11 <li>html</li>
12 <li>css</li>
13 <li>js</li>
14 </ul>
15 </body>
16 </html>
6）通用选择器 格式*{name：value}，作用于整个文档。
1 <!doctype html>
2 <html>
3 <head>
4 <title>通配符选择器</title>
5 <style type="text/css">
6 *{padding:0,margin:0;}/*通配符选择器*/
7 ul>li{color:blue;}
8 </style>
9 </head>
10 <body>
11 <ul>
12 <li>html</li>
13 <li>css</li>
14 <li>js</li>
15 </ul>
16 </body>
17 </html>
7）伪类选择器
1 <html>
2 <head>
3 <title>伪类选择器</title>
4 <style type="text/css">
5 a:hover{background:red;}/*伪类选择器*/
6 </style>
7 </head>
8 <body>
9 <a href="http://www.baidu.com" title="超链接">百度</a>
10 </body>
11 </html>
8)分组选择器
1 <!doctype html>
2 <html>
3 <head>
4 <title>分组选择器</title>
5 <style type="text/css">
6 h1,p{color:blue};
7 </style>
8 </head>
9 <body>
10 <h1>你好</h1>
11 <p>欢迎来学习css</p>
12 </body>
13 </html>
总结：主要回忆了所学的css样式的三种方式，以及css选择器的类型，下面接着总结盒子模型，流式布局，浮动布局，以及定位布局。
---恢复内容结束---