我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权
如果说，原生态就是美，那么，我们就没有必要穿衣打扮。
网页是什么？
说白了，网页就是一堆【html标签】有序的搭配，让【CSS属性值】整整容，请【Javascript语言】处理一下事件。
一个人的整容效果，很大程度上取决于Ta本人，也就是原材料，对网页来说，原材料就是html标签，因此设计优秀的html标签结构十分重要。
整容医生的作用也至关重要，割双眼皮，整容医生的基本功，不同医生割出来的效果不同。
作为一个网页设计师，我们是不是应该追求完美，尽最大努力，让网页漂亮一些。
我知道，我们往往自称“屌丝程序员”，有时候自己都看不上自己写出来的东西，我以前也这样，不过，我在追求上进，就像这篇文章，是不是比前几篇要好一些呢？
什么是CSS呢？
CSS 是Cascading Style Sheets的缩写，意思是“层叠样式表”。
下面，我们通过一个“选美比赛”来学习添加CSS样式的3种方式及它们的优先权。
1号选手：原生态
(1) 晒照片，如下：
(2) 看代码：
新建一个网页a.html，复制粘贴下面的内容：
<html>
<head>
</head>
<body >
添加CSS样式的3种方式及它们的优先权
</body>
</html>
使用浏览器打开，看到的样子就是上图。
(3) 知识讲解
每一个浏览器都有自己的默认设置，当html标签没有整容以前，都采用默认值。
“白纸黑字”就是最典型的一种默认设置，网页的背景显示为白色，字体显示为黑色。
并不是所有的浏览器的默认值都是相同的，相同的内容，在不同浏览器中显示的可能不同，这就是浏览器的差异性。
小结：
浏览器的默认值在样式设置中是最低级的，只有当没有样式修饰时才会按照默认值来显示。
2号选手：红色女郎
(1) 晒照片，如下：
(2)看代码：
新建一个文件css.css，和a.html放在同一个文件夹中，复制粘贴下面的内容：
body { background-color:red; }
在a.html添加一行代码，添加后如下：
<html> <head> <link href="css.css" rel="stylesheet" type="text/css"> </head> <body > 添加CSS样式的3种方式及它们的优先权 </body> </html>
使用浏览器打开，你就会看见“红色女郎”。
(4) 知识讲解
A：
css.css中的body是一个类型选择符(专业叫法)。
类型选择符：类型选择符就是以文档语言对象(Element)类型作为选择符。也就是直接把html标签当做选择符。
我觉得，叫“标签选择符”更好一些，一听就知道怎么用，简单明了。
样式【属性键值对】一般要放在大括号{}内，多个【属性对】中间使用【分号】间隔，【属性和值】中间使用【冒号】。
的意思是设置body背景为红色。
background-color是background和color的组合，单独写background也行，background还可以设置背景图，加上color专门用来设置背景色。
B：
<link href="css.css" rel="stylesheet" type="text/css">
这一句就是把样式文件css.css链接到a.html中，专业的叫法是“外部样式表（Link Style Sheets）”。
注意链接词是link，而不是style啊，千万不要写错了。
一定要记住属性href，它指定了样式表css.css的路径，本例中它们在相同的文件夹下，直接写文件名就行了。
另外一个必须的属性rel，rel 属性规定当前文档与被链接文档之间的关系。当值为stylesheet时，浏览器才会把css.css当做样式表，如果你不写rel或者把属性值写错了，那么外部样式表也就不起作用了，你也就见不到红色女郎了。
小结：
外部样式表的优先级倒数第二，浏览器默认值倒数第一。
3号选手：绿色蔬菜
(1) 晒照片，如下：
(2)看代码：
在a.html的head标签内部添加一段代码，添加后如下：
<html> <head> <link href="css.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { background-color:green; } </style> </head> <body > 添加CSS样式的3种方式及它们的优先权 </body> </html>
使用浏览器打开，你就会看见“绿色蔬菜”。
(5) 知识讲解
A：
选择符和属性值的用法完全相同，一般设计网页都是先使用这种方式写样式，然后在把通用的样式复制剪切到一个css文件中，需要使用这种样式的网页加上link链接就行了。
B：
这用添加样式的方式叫：嵌入式样式表（Embedded Style Sheets），也就是把样式嵌入到网页head中。
但是head中有很多内容 ，为了区分哪一部分是样式，就需要把所有的样式统一放在<style type="text/css"><style>中。
上面两段是我编的，目的是方便初学者理解。
有没有发现，外部样式表和嵌入式样式表同时存在时，显示的是嵌入式的。这就是优先级的问题。
小结：
优先级顺序：嵌入式样式表 > 外部样式表 > 浏览器默认样式
4号选手：蓝天
(1) 晒照片，如下：
(2)看代码：
在a.html的body标签内部添加一段代码，添加后如下：
<html> <head> <link href="css.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { background-color:green; } </style> </head> <body style="background-color:blue"> 添加CSS样式的3种方式及它们的优先权 </body> </html>
(6) 知识讲解
这一种叫行内样式表（Inline Style）
使用style属性，将CSS直接写在HTML标签中。即style=" "，引号内部写属性和值。
行内样式表具有最高优先级。其他几种样式表和它同时存在时，都得靠边站，不管用。
小结：
优先级顺序：行内样式表 > 嵌入式样式表 > 外部样式表 > 浏览器默认样式
本场选美比赛现在开始投票：
1：支持【原生态】的单击下面的【好文要顶】或【推荐】
2：支持【红色女郎】的单击下面的【关注我】
3：支持【绿色蔬菜】的单击下面的【收藏该文】
4：支持【蓝天】的单击下面的微博图标【分享至新浪微博】
觉得本文写的很烂，耽误了您宝贵时间的，请单击下面的【反对】，如果可以耽误您一点宝贵的时间，您可以留言，我争取下次改进。
谢谢合作。
