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

网页是什么？

说白了，网页就是一堆【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. CentOS服务器初始化设置

    CentOS服务器初始化设置 以阿里云服务器为例 一.挂载硬盘 1.磁盘分区 fdisk -l #查看设备,一般可以看到设备名为/dev/xvdb,或者为/dev/vdb(阿里云io优化型) fdis ...

  2. Navicat for Oracle设置唯一性和递增序列

    [数据库] Navicat for Oracle基本用法图文介绍 一. 设置唯一性 参考文章:Oracle之唯一性约束(UNIQUE Constraint)用法详解唯一性约束英文是Unique Con ...

  3. Yii2 Working with Relational Data at ActiveDataProvider

    Yii2 Working with Relational Data at ActiveDataProvider namespace common\models; use Yii; use yii\ba ...

  4. windows添加快速启动栏

    步骤: 右击任务栏——选择“新建工具栏” 在“文件夹”路径中填入%appdata%\Microsoft\Internet Explorer\Quick Launch并单点“选择文件夹” 右键单击任务栏 ...

  5. ABAP和Java的destination和JNDI

    Netweaver里使用事务码SM59创建Destination: Java 新建一个destination: 测试代码: try { Context ctx = new InitialContext ...

  6. IOS UITabBarController(控制器)的子控制器

    UITabBarController的简单使用 ● UITabBarController的使用步骤 ➢ 初始化UITabBarController ➢ 设置UIWindow的rootViewContr ...

  7. memcached for .net on windows

    memcached for windowshttp://www.cnblogs.com/dudu/archive/2009/07/19/1526407.htmlhttp://www.cnblogs.c ...

  8. 关于profile集合

    profile集合是mongodb的慢操作日志 > db.getProfilingStatus() { , , } 可以通过getProfilingStatus来查看当前profile设置 pr ...

  9. PMBOK(第六版) PMP笔记——第十章（项目沟通管理）

    PM 大多数时间都用在与干系人的沟通上.第十章有三个过程: 规划沟通管理:根据干系人的需求,制定沟通管理计划管理沟通:根据沟通管理计划发布.收集.处理信息监督沟通:确保在正确时间将正确信息传递给正确的 ...

  10. 2017.12.25 Java中面向对象思想的深刻理解

    今日内容介绍 1.面向对象思想 2.类与对象的关系 3.局部变量和成员变量的关系 4.封装思想 5.private,this关键字 6.随机点名器 01面向对象和面向过程的思想 * A: 面向过程与面 ...