标签：
---恢复内容开始---
总结并巩固学习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选择器的类型，下面接着总结盒子模型，流式布局，浮动布局，以及定位布局。
---恢复内容结束---
标签：
原文地址：http://www.cnblogs.com/kevoin/p/4865548.html
