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

网页是什么？

说白了，网页就是一堆【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. Sometimes it takes going through something so awful to realize the beauty that is out there in this world.

    Sometimes it takes going through something so awful to realize the beauty that is out there in this ...

  2. nrm—源管理工具

    全局安装 npm install -g nrm 查看可选源 nrm ls 其中,带*的是当前使用的源,上面的输出表明当前源是hiknpm 切换源 nrm use taobao 新增源 nrm add ...

  3. 爬虫系统Lucene分词

    思路:查询数据库中信息,查询出id和name把那么进行分词存入文件 package com.open1111.index; import java.io.IOException;import java ...

  4. 论overflow滚动的重要性

    原理 设置一个块级作用域溢出的效果,只需要在外部块的位置上设置overflow:scroll和height:xx即可. 此时,块级作用域的内容位移超出外部块的位移就会出现滚动条,当内部块滚动时,我们能 ...

  5. noip模拟赛#24

    这套题我只会写第二题...我... T1:给出一个含有向边和无向边的混合图,如何确定无向边的方向使得图中不存在环.保证有解.多解情况输出任意解. =>我往最大流的残量网络的方向去想了...因为混 ...

  6. POJ-1936 All in All---字符串水题

    题目链接: https://vjudge.net/problem/POJ-1936 题目大意: 给两个字符串,判断是s1是不是s2的子序列 思路: 水 #include<iostream> ...

  7. java菜鸟的Python学习之路(1)

    学习一门新的语言,应当抓住语言的共有特性,这样容易触类旁通,学习起来也十分的快捷愉悦 而语言的特性大约有以下元素 变量定义与类型 算术符号与逻辑符号 for 循环与 while 循环 数组,线性表等一 ...

  8. 在mac下使用python抓取数据

    2015已经过去,这是2016的第一篇博文! 祝大家新年快乐! 但是我还有好多期末考试! 还没开始复习,唉,一把辛酸泪! 最近看了一遍彦祖的文章叫做 iOS程序员如何使用Python写网路爬虫 所以自 ...

  9. Vim编辑器基础命令

    Linux系统中都默认安装了vi或vim编辑器,两种命令基本一致.vim为Vi IMproved,功能更强大. vim有命令模式,输入模式,和末行模式三种. ➢ 命令模式:控制光标移动,可对文本进行复 ...

  10. C++ 学习笔记 （六） 继承- 子类与父类有同名函数，变量

    学习了类的继承,今天说一下当父类与子类中有同名函数和变量时那么程序将怎么执行.首先明确当基类和子类有同名函数或者变量时,子类依然从父类继承. 举例说明: 例程说明: 父类和子类有同名的成员 data: ...