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

网页是什么？

说白了，网页就是一堆【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. 微软高性能缓存AppFabric (一) 安装

    博客原文链接:http://www.cnblogs.com/Qbit/p/6088703.html AppFabric 缓存功能的前身是VeloCity ,它是基于windows平台的一个高速内存缓存 ...

  2. Centos7安装 PostgreSQL步骤

    1. 安装服务器即可. Yum install postgresql-server Yum install postgresql-contrib 2. 验证是否安装成功: rpm -aq| grep ...

  3. json字符串转换成对象需要注意的问题

    json转换成对象的时候应该尽量避免出现特殊的符号,如“\”这样的字符在转义成数组的时候会被去除掉,最好的例子就是后台返回的内容为存储路径的JSON,这时候最好是把一个斜杠变为两个斜杠,如: [{&q ...

  4. 基于Dockerfile 构建redis5.0.0（包括持久化）及RedisDestopManager 监控

    一 创建Dockerfile [root@zxmrlc docker]# mkdir redis [root@zxmrlc docker]# cd redis && touch Doc ...

  5. hdu1213-How Many Tables---基础并查集

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1213 题目大意: 今天是Ignatius的生日,他邀请了许多朋友.现在是吃晚饭的时间,Ignatiu ...

  6. Linux基础精华（转）

    Linux基础精华 (继续跟新中...) 常用命令: Linux shell 环境 让你提升命令行效 率的 Bash 快捷键 [完整版] 设置你自己的liux alias Linux的Find使用 L ...

  7. Mybatis-动态 SQL语句

    if标签 判断语句,用户单条件分支判断 where标签 为了简化上面where 1=1的条件拼装,我们可以采用标签来简化开发 同 foreach标签 场景:传入多个 id 查询用户信息 标签用于遍历集 ...

  8. C++手写快读详解（快速读入数字）

    众所周知,C++里是自带读入的(这不废话吗) 例如: int a; cin>>a; 这样的读入理解简单,适合初学者,但是非常慢. 再例如: int a; scanf("%d&qu ...

  9. 高阶函数 -------JavaScript

    高阶函数 本文摘要:http://www.liaoxuefeng.com/ JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作 ...

  10. C++性能优化笔记

    最近着手去优化项目中一个模块的性能.该模块是用C++实现,对大量文本数据进行处理. 一开始时,没什么思路,因为不知道性能瓶颈在哪里.于是借助perf工具来对程序进行分析,找出程序的性能都消耗在哪里了. ...