CSS
层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。 而css就可以分别为网页的各个层次设置样式。
CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。
语法：
– 选择器 {样式名:样式值；样式名:样式值 ; }
– p {color:red ; font-size:12px;}
方法一：
内联样式
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS</title> 6 </head> 7 <body> 8 <p style="color:red;font-size:40px;">锄禾日当午，汗滴禾下土</p> 9 <p style="color:red;font-size:40px;">谁知盘中餐，粒粒皆辛苦</p> 10 </body> 11 </html>
可以将CSS样式编写到元素的style属性当中将样式直接编写到style属性中，这种样式我们称为内联样式。内联样式只对当前的元素中的内容起作用，内联样式不方便复用内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用。所以我们就有了CSS。
内部样式
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" / 5 <style type="text/css"> 6 p{ 7 color:red; 8 font-size:40px; 9 } 10 11 </style> 12 13 </head> 14 <body> 15 <p>谁知盘中餐，粒粒皆辛苦</p> 16 <p>谁知盘中餐，粒粒皆辛苦</p> 17 <p>谁知盘中餐，粒粒皆辛苦</p> 18 <p>谁知盘中餐，粒粒皆辛苦</p> 19 <p>谁知盘中餐，粒粒皆辛苦</p> 20 <p>谁知盘中餐，粒粒皆辛苦</p> 21 </body> 22 </html>
这样就解决了数量很庞大的标签项目的样式设定。但是如果我们在其他页面也使用内部样式那？
外部样式表
先将上述p标签的样式复制下来，然后在新建一个文本文件，将样式拷贝进文本文件中，然后右键另存为sytle.css
然后我们编写了一个外部的CSS文件，然后通过link标签来将外部的CSS文件引入到当前页面中，这样外部文件中的css样式表将会应用到当前页面中。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS</title> 6 <link rel="stylesheet" type="text/css" href="style.css" /> 7 8 9 </head> 10 <body 11 <p>谁知盘中餐，粒粒皆辛苦</p> 12 <p>谁知盘中餐，粒粒皆辛苦</p> 13 <p>谁知盘中餐，粒粒皆辛苦</p> 14 <p>谁知盘中餐，粒粒皆辛苦</p> 15 <p>谁知盘中餐，粒粒皆辛苦</p> 16 <p>谁知盘中餐，粒粒皆辛苦</p> 17 </body> 18 </html>
将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以是样式表可以在不同的页面中使用，最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的CSS文件。href=css的路径。
css的注释
CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS</title> 6 <style type="text/css"> 7 8 /* 9 CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中 10 11 CSS的语法： 12 13 选择器 声明块 14 15 选择器： 16 - 通过选择器可以选中页面中指定的元素， 17 并且将声明块中的样式应用到选择器对应的元素上 18 19 20 声明块： 21 - 声明块紧跟在选择器的后边，使用一对{}括起来， 22 声明块中实际上就是一组一组的名值对结构， 23 这一组一组的名值对我们称为声明， 24 在一个声明块中可以写多个声明，多个声明之间使用;隔开， 25 声明的样式名和样式值之间使用:来连接 26 27 */ 28 29 30 p{ 31 color:red; 32 font-size:50px; 33 } 34 35 </style> 36 37 </head> 38 <body> 39 40 <p style="color:red">天天下雨，我已经半个月没见太阳了</p> 41 42 </body> 43 </html>
块元素和内联元素
div就是一个块元素，所谓的块元素就是会独占一行的的元素,无论他的内容有多少，他都会独占一整行。
p h1 h2 h3 ... 都是块元素。
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来对页面进行布局的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div style="background-color:red ; 200px;"> 9 我是一个div 10 </div> 11 <p>我是一个p标签</p> 12 <p>我是一个p标签</p> 13 14 15 </body> 16 </html>
span是一个内联元素（行内元素）：所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：a img iframe span
span没有任何的语义，span标签专门用来选中文字，
然后为文字来设置样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span>我是一个span</span> <span>我是一个span</span> <span>我是一段文字</span> </body> </html>
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何块元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <p><span>我是一个span</span></p> 8 9 <a href="#"></a> 10 11 12 <a href="#"> 13 <div style="background-color:red ; 200px;"> 14 我是一个div 15 </div> 16 </a> 17 </body> 18 </html>
在HTML5中，内联元素和块元素这两个概念已经取消了。但是我们在这里便于理解还是使用老的概念。
常用的CSS选择器
元素选择器
作用：通过元素选择器可以选则页面中的所有指定元素
语法：标签名 {}
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>常用选择器</title> 6 <style type="text/css"> 7 p{ 8 color: red; 9 } 10 11 12 h1{ 13 color: red; 14 } 15 </style> 16 </head> 17 <body> 18 <h1>悯农</h1> 19 <p>锄禾日当午</p> 20 <p>锄禾日当午</p> 21 </body> 22 </html>
这种选择器缺点显而易见，如果单独想设置某一个P标签的样式。就会更改整体P标签的样式。
id选择器
通过元素的id属性值选中唯一的一个元素
语法：
#id属性值 {}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用选择器</title> <style type="text/css"> #p1{ font-size: 20px; } </style> </head> <body> <h1>悯农</h1> <p>锄禾日当午</p> <p>锄禾日当午</p> <p id="p1">锄禾日当午</p> </body> </html>
虽然解决了不能单独分配样式的问题，但是相同的带来另外一个问题就是不能分组去分配样式。如果想多个分配样式必须把每一个P标签分配一个ID。
类选择器
通过元素的class属性值选中一组元素
语法：
class属性值{}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用选择器</title> <style type="text/css"> .p2{ color: red; } .hello{ font-size: 50px; } </style> </head> <body> <p class="p2 hello">锄禾日当午</p> <p class="p2">锄禾日当午</p> <p class="p2">锄禾日当午</p> </body> </html>
我们可以为元素设置class属性，
class属性和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们说他们是一组元素
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
选择器分组(并集选择器)
通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用选择器</title> <style type="text/css"> #p1 , .p2 , h1{ background-color: yellow; } </style> </head> <body> <h1>悯农</h1> <p id="p1">锄禾日当午</p> <p class="p2">锄禾日当午</p> </body> </html>
复合选择器（交集选择器）
可以选中同时满足多个选择器的元素
语法：
选择器1选择器2选择器N{}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用选择器</title> <style type="text/css"> span.p3{ background-color: yellow; } </style> </head> <body> <p class="p3">锄禾日当午</p> <span class="p3">汗滴禾下土</span> </body> </html>
对于id选择器来说，不建议使用复合选择器
通配选择器
他可以用来选中页面中的所有的元素
语法：*{}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用选择器</title> <style type="text/css"> *{ color: red; } </style> </head> <body> <h1>悯农</h1> <p id="p1">锄禾日当午</p> <p class="p2">锄禾日当午</p> </body> </html>
后代元素选择器
选中指定元素的指定后代元素
语法：
祖先元素 后代元素{}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div span{ color: greenyellow; } </style> </head> <body> <div> <span>我是div标签中的span</span> <p><span>我是p标签中的span</span></p> </div> <span>我是body中的span元素</span> </body> </html>
只要是div块元素后代的span标签都会应用选择器，而不是div块元素后代的span标签不会应用选择器。而且后代元素选择器也可以交叉使用ID选择器，class选择器 例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1 span{ color: greenyellow; } </style> </head> <body> <div id="d1"> <span>我是div标签中的span</span> <p><span>我是p标签中的span</span></p> </div> </body> </html>
也可以单独选择一个后代元素进行应用（第几个后代就在后面加几个标签）例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1 p span{ font-size: 50px; } </style> </head> <body> <div id="d1"> <span>我是div标签中的span</span> <p><span>我是p标签中的span</span></p> </div> </body> </html>
子元素选择器
选中指定父元素的指定子元素
父元素 > 子元素
* IE6及以下的浏览器不支持子元素选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div > span{ background-color: yellow; } </style> </head> <body> <div id="d1"> <span>我是div标签中的span</span> <p><span>我是p标签中的span</span></p> </div> </body> </html >
只选定子元素进行应用。
练习：