如果说，原生态就是美，那么，我们就没有必要穿衣打扮。

网页是什么？

说白了，网页就是一堆【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：支持【蓝天】的单击下面的微博图标【分享至新浪微博】

觉得本文写的很烂，耽误了您宝贵时间的，请单击下面的【反对】，如果可以耽误您一点宝贵的时间，您可以留言，我争取下次改进。

谢谢合作。

我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权的更多相关文章

  1. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  2. 我给女朋友讲编程html系列(4) -- html常用简单标签

    今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...

  3. 我给女朋友讲编程html系列(2) --Html标题标签h1

    Html是一门标签语言,因此学习Html最快的方式就是学习使用html标签. html标题标签:h1,h2,h3,h4,h5,h6 标题标签总共有6个,h1,h2,h3,h4,h5,h6,从h1到h6 ...

  4. 我给女朋友讲编程html系列(1) -- Html快速入门

    Html是一门编写网页的语言. 在我学习Html的时候,网上的很多朋友说,直接使用[记事本]编写就行了,最后保存为后缀名为 .html 的文件. 不过,我建议你用[Nodepad++]来编写网页,用这 ...

  5. 【Xamarin 挖墙脚系列：IOS 开发界面的3种方式】

    原文:[Xamarin 挖墙脚系列:IOS 开发界面的3种方式] xcode6进行三种基本的界面布局的方法,分别是手写UI,xib和storyboard.手写UI是最早进行UI界面布局的方法,优点是灵 ...

  6. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  7. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

随机推荐

  1. Apache Spark 2.2.0 中文文档 - GraphX Programming Guide | ApacheCN

    GraphX Programming Guide 概述 入门 属性 Graph 示例属性 Graph Graph 运算符 运算符的汇总表 Property 运算符 Structural 运算符 Joi ...

  2. 【Java/Android性能优5】 Android ImageCache图片缓存，使用简单，支持预取，支持多种缓存算法，支持不同网络类型，扩展性强

    本文转自:http://www.trinea.cn/android/android-imagecache/ 主要介绍一个支持图片自动预取.支持多种缓存算法.支持二级缓存.支持数据保存和恢复的图片缓存的 ...

  3. 9.26<立方网>技术笔试题

    该公司题目感觉不难,算法设计有三道大题. 1.设有m和n两个整数,求它们的最大公约数和最小公倍数. 2.猴子分桃问题,每次分桃多一个,共有五个猴子,问最少有多少个桃子. 3.关于java的题目,有A, ...

  4. No module named 'revoscalepy'问题解决

    SqlServer2017开始支持Python,前段时间体验了下,按照微软的入门例子操作的:https://microsoft.github.io/sql-ml-tutorials/python/re ...

  5. springMvc-对servletApi的支持以及把后台对象以json方式传到前台

    1.对servletApi的支持:request.response以及session.cookie的支持 2.把后台代码以json格式向前台输出: 代码: package com.java.contr ...

  6. 平时对Vue的总结

    1.v-bind和v-on的区别 v-bind绑定的函数是立即执行的 v-on是需要一定触发执行的 2.computed和methods的区别 computed的函数是设置属性的 methods的函数 ...

  7. SwiftHN阅读器应用IOS源码

    SwiftHN是用Swift语言编写的Hacker News阅读器,同时采用了iOS 8最新的API. <ignore_js_op> <ignore_js_op> 详细说明:h ...

  8. 集成Ehcache用来缓存表以后，怎么设置缓存刷新时间

    问答 集成Ehcache用来缓存表以后,怎么设置缓存刷新时间  发布于 217天前  作者 老司机  93 次浏览  复制  上一个帖子  下一个帖子  标签: 无 集成Ehcache用来缓存表以后, ...

  9. Github的基本功能

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Fadeoc Khaos链接:http://www.zhihu.com/question/20070065/answer/30 ...

  10. SQL小知识_长期总结

    1. 左联接右联接区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner ...