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

时间:2023-03-08 15:45:57

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

网页是什么?

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

一个人的整容效果,很大程度上取决于Ta本人,也就是原材料,对网页来说,原材料就是html标签,因此设计优秀的html标签结构十分重要。

整容医生的作用也至关重要,割双眼皮,整容医生的基本功,不同医生割出来的效果不同。

作为一个网页设计师,我们是不是应该追求完美,尽最大努力,让网页漂亮一些。

我知道,我们往往自称“屌丝程序员”,有时候自己都看不上自己写出来的东西,我以前也这样,不过,我在追求上进,就像这篇文章,是不是比前几篇要好一些呢?

什么是CSS呢?

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

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

1号选手:原生态

(1)    晒照片,如下:

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

(2)    看代码:

新建一个网页a.html,复制粘贴下面的内容:

<html>

<head>

</head>

<body >

添加CSS样式的3种方式及它们的优先权

</body>

</html>

使用浏览器打开,看到的样子就是上图。

(3)    知识讲解

每一个浏览器都有自己的默认设置,当html标签没有整容以前,都采用默认值。

“白纸黑字”就是最典型的一种默认设置,网页的背景显示为白色,字体显示为黑色。

并不是所有的浏览器的默认值都是相同的,相同的内容,在不同浏览器中显示的可能不同,这就是浏览器的差异性。

小结:

浏览器的默认值在样式设置中是最低级的,只有当没有样式修饰时才会按照默认值来显示。

2号选手:红色女郎

(1) 晒照片,如下:

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

(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) 晒照片,如下:

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

(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) 晒照片,如下:

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

(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:支持【蓝天】的单击下面的微博图标【分享至新浪微博】

觉得本文写的很烂,耽误了您宝贵时间的,请单击下面的【反对】,如果可以耽误您一点宝贵的时间,您可以留言,我争取下次改进。

谢谢合作。