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