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标签的文字设置成红色，浏览器中效果如下：
2 外链式
所谓外链式，就是把CSS代码保存在单独的.css文件中，然后用<link>标签引入这个文件。
<link>标签语法如下：
<link>标签上的rel属性，是英文单词relationship的前三个字母，它的值是样式表，这个属性就表示你要引入的文件，和当前这个HTML文件的关系是"stylesheet"，也就是说你要引入的文件是个样式表。
<link>标签上的href属性，表示引入文件的路径和文件名。跟<a>标签的href属性类似。
外链式的优点：多个HTML文件，可以共用一个CSS样式表文件。
比如，
我在项目文件夹中，创建一个"外链式.html"文件，再在css文件夹中创建一个"css.css"文件。
然后在"css.css"这个文件中写css代码，在.css文件中写css代码，就不需要写style标签了，直接写css语句就行了。
比如我给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文件产生了绑定关系。
此网页在浏览器中效果如下：
采用外链式，假如你有多个网页文件，那么你就可以在这些网页文件中引入同一个css文件，这样一份css代码可以在多个HTML文件中起作用。也就是说，多个网页文件可以共用一个样式表。
3 导入式
导入式是在<style></style>标签对中写一个@，然后紧跟import，然后一个空格，再写url(css文件路径/css文件名)。
即：
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这个文件。
浏览器中效果如下：
当然现在我这个演示代码写的很简单，采用导入式，网页的样式也瞬间显示了，但是假如说网页比较复杂，或者说网速比较慢的情况下，很可能你首先看到的就是黑色的字，然后几秒钟之后，才变成黄色。
4 行内式
所谓行内式，就是直接在标签上面写style属性，然后style属性的值就是css语句。
比如：
这就是行内式的写法。
行内式也不常用。
为什么呢？
因为采用行内式，既然是在标签上写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>
在浏览器显示效果如下：
我们看到，我要把这4个p标签的文字都设置成绿色，就需要在每一个p标签上都写style属性。如果采用内嵌式或者外链式的话，就更简单，不用写这么多重复的代码。
感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！
京公网安备 11010802035086号