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

网页是什么？

说白了，网页就是一堆【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. 【迷你微信】基于MINA、Hibernate、Spring、Protobuf的即时聊天系统：11.定制化Log输出

    欢迎阅读我的开源项目<迷你微信>服务器与<迷你微信>客户端 前言 在<迷你微信>服务器中,我们用了Log4J来进行输出,这可以在我们程序出现异常的时候找到错误发生时 ...

  2. MvvmCross框架在XamarinForms中的使用入门

    做XamarinForms快一年了,最近趁着项目不是很紧,有点空闲的时间,研究了一下MvvmCross这个框架,感觉挺高大上的.一边研究一下写点入门的东西吧,大部分的东西github都有. 1添加Pa ...

  3. Redis基础对象

    Redis 中每个对象都由一个 redisObject 结构表示 typedef struct redisObject { //类型 unsigned type:; //编码 unsigned enc ...

  4. JAVA设计模式初探之适配器模式（转）

    1. 概述 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作. 2. 解决的问题 即Adapter模式使得原本由于接口不兼容而不 ...

  5. POJ 2392 Space Elevator（多重背包）

    显然塔的总高度不会超过最大的a[i],而a[i]之前的可以到达的高度 是由a值更小的块组成,所以按照a从小到大的顺序去转移. 然后就是多重背包判断存在性了,几乎和coin那题一样. 数据没coin丧病 ...

  6. 从用户访问网站流程开始，细说web网络基础

    1.用户访问网站流程框架 2.dns解析原理 3.tcp/ip三次握手过程原理,11种连接状态 4.tcp/ip四次挥手过程原理,11种连接状态 5.http协议原理(www服务的请求过程)请求细节, ...

  7. RAC基本使用

    @interface ViewController () @property (weak, nonatomic) IBOutlet lwRedView *redView; @property (wea ...

  8. sqlldr将txt导入oracle数据库

    注意事项: 1.userid 和 control关键字不要缺少: 2.注意数据库格式:test/test@数据库IP:1521/Oracle8,最后一个是tnsnames中的service_name, ...

  9. C#的接口基础教程之七 覆盖虚接口

    有时候我们需要表达一种抽象的东西,它是一些东西的概括,但我们又不能真正的看到它成为一个实体在我们眼前出现,为此面向对象的编程语言便有了抽象类的概念.C#作为一个面向对象的语言,必然也会引入抽象类这一概 ...

  10. React后台管理系统-登录页面

    登录页面 <div className="col-md-4 col-md-offset-4">                <div className=&qu ...