我给女友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

时间 2020-06-19

标签编程 css 系列添加样式方式优先权栏目悠闲生活繁體版

原文原文链接

若是说，原生态就是美，那么，咱们就没有必要穿衣打扮。css

网页是什么？html

说白了，网页就是一堆【html标签】有序的搭配，让【CSS属性值】整整容，请【Javascript语言】处理一下事件。程序员

一我的的整容效果，很大程度上取决于Ta本人，也就是原材料，对网页来讲，原材料就是html标签，所以设计优秀的html标签结构十分重要。浏览器

整容医生的做用也相当重要，割双眼皮，整容医生的基本功，不一样医生割出来的效果不一样。学习

做为一个网页设计师，咱们是否是应该追求完美，尽最大努力，让网页漂亮一些。字体

我知道，咱们每每自称“屌丝程序员”，有时候本身都看不上本身写出来的东西，我之前也这样，不过，我在追求上进，就像这篇文章，是否是比前几篇要好一些呢？spa

什么是CSS呢？设计

CSS 是Cascading Style Sheets的缩写，意思是“层叠样式表”。3d

下面，咱们经过一个“选美比赛”来学习添加CSS样式的3种方式及它们的优先权。code

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：

这一句就是把样式文件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：支持【蓝天】的单击下面的微博图标【分享至新浪微博】

以为本文写的很烂，耽误了您宝贵时间的，请单击下面的【反对】，若是能够耽误您一点宝贵的时间，您能够留言，我争取下次改进。

谢谢合做。