<返回更多

CSS的4种编写位置

2020-11-26    
加入收藏

css代码要写在哪里呢?一共有4种编写位置。

 

1 内嵌式

 

顾名思义,内嵌式就是直接嵌在html文件中

 

就是在<head></head>标签对中,写<style></style>标签对,然后在<style></style>标签对中写CSS语句

 

比如我在项目文件夹中,创建一个"内嵌式.html"文件,里面写如下代码:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌式</title>
    <style>
        h1{color:red;}
    </style>
</head>
<body>
    <h1>我是一个主标题</h1>
</body>
</html>

 

这就是内嵌式的写法。

 

这里是把h1标签的文字设置成红色,浏览器中效果如下:

31  CSS的4种编写位置

 

2 外链式

 

所谓外链式,就是把CSS代码保存在单独的.css文件中,然后用<link>标签引入这个文件。

 

<link>标签语法如下:

31  CSS的4种编写位置

 

<link>标签上的rel属性,是英文单词relationship的前三个字母,它的值是样式表,这个属性就表示你要引入的文件,和当前这个HTML文件的关系是"stylesheet",也就是说你要引入的文件是个样式表。

 

<link>标签上的href属性,表示引入文件的路径和文件名。跟<a>标签的href属性类似。

 

外链式的优点:多个HTML文件,可以共用一个CSS样式表文件

 

比如,

 

我在项目文件夹中,创建一个"外链式.html"文件,再在css文件夹中创建一个"css.css"文件。

31  CSS的4种编写位置

 

然后在"css.css"这个文件中写css代码,在.css文件中写css代码,就不需要写style标签了,直接写css语句就行了。

31  CSS的4种编写位置

 

比如我给p标签的文字设置成黄色。

 

然后我打开"外链式.html"文件,在<body>中写几个p标签,然后在<head></head>标签对中写<link>标签,引入css文件,代码如下:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外链式</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <p>上天不给我的,无论我怎么十指紧扣,都会漏走,上天给我的,无论我怎么失手,都会拥有。</p>
</body>
</html>

 

通过<link>标签,就让当前的网页文件,和<link>引入的css文件产生了绑定关系。

 

此网页在浏览器中效果如下:

31  CSS的4种编写位置

 

采用外链式,假如你有多个网页文件,那么你就可以在这些网页文件中引入同一个css文件,这样一份css代码可以在多个HTML文件中起作用。也就是说,多个网页文件可以共用一个样式表。

 

3 导入式

 

导入式是在<style></style>标签对中写一个@,然后紧跟import,然后一个空格,再写url(css文件路径/css文件名)。

 

即:

31  CSS的4种编写位置

 

import这个单词就表示导入的意思。

 

但是,导入式是最不常见的样式表导入方法

 

为什么呢?

 

因为采用导入式方法引入样式表,HTML结构加载好了,但是css文件是单独写的,它还没加载好,这时不会等css文件加载好,而是立即就渲染HTML结构,这样的话,用户并不是直接看到有样式的网页,而是首先看到的就是白底黑字的网页,然后等几秒钟之后,网页才会显示css文件中写好的样式。

 

所以这种方式,在工作中几乎不用。但是为了知识更全面一些,还得知道它。

 

现在我再创建一个"导入式.html",演示代码如下:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导入式</title>
    <style>
        @import url(css/css.css);
</style>
</head>
<body>
    <p>成熟和成长的过程,就是分清了什么样的人能信任,什么样的人不能信任。</p>
</body>
</html>

 

导入式,导入的也是单独写的css文件,所以我导入的是前面写好的css.css这个文件。

 

浏览器中效果如下:

31  CSS的4种编写位置

 

当然现在我这个演示代码写的很简单,采用导入式,网页的样式也瞬间显示了,但是假如说网页比较复杂,或者说网速比较慢的情况下,很可能你首先看到的就是黑色的字,然后几秒钟之后,才变成黄色。

 

4 行内式

 

所谓行内式,就是直接在标签上面写style属性,然后style属性的值就是css语句

 

比如:

31  CSS的4种编写位置

 

这就是行内式的写法。

 

行内式也不常用

 

为什么呢?

 

因为采用行内式,既然是在标签上写css语句,那么在哪个标签上写css语句,就只能给哪个标签设置样式。这就牺牲了样式表批量设置样式的能力。

 

但是后端工程师,为了省事,经常使用行内式。

 

现在我创建一个"行内式.html"文件,演示一下行内式。代码如下:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内式</title>
</head>
<body>
    <p style="color:green">大处着眼</p>
    <p style="color:green">小处着手</p>
    <p style="color:green">群居守口</p>
    <p style="color:green">独居守心</p>
</body>
</html>

 

在浏览器显示效果如下:

31  CSS的4种编写位置

 

我们看到,我要把这4个p标签的文字都设置成绿色,就需要在每一个p标签上都写style属性。如果采用内嵌式或者外链式的话,就更简单,不用写这么多重复的代码。

 

感谢阅读!知识总结不易,请点个赞或转发鼓励一下呗!想系统性学习前端的小伙伴可以关注我!

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>