CSS的4种编写位置( 二 ) _CSS

导入式，导入的也是单独写的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>

在浏览器显示效果如下：