CSS书写位置

更新日期: 2019-11-20阅读: 2.4k标签: 样式分享

复制链接

新浪微博

QQ 好友

扫一扫分享

css 书写位置

行内样式，style标签link标签

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
</head>
<body>
    <p style="color: red;">生当作人杰，死亦为鬼雄</p>
</body>
</html>

注意这句：

<p style="color: red;">生当作人杰，死亦为鬼雄</p>

p 标签有 style 属性，可以给p标签设置样式，这种称为行内样式，又叫内联样式。

注意：除了 body 元素之外的标签，所有HTML标签都能设定style属性。行内样式只对当前元素起作用，不方便复用，假如另一个元素也要使用相同的样式，那么只能复制一份，不推荐使用

如下：两个标签内的相同样式，使用行内样式只能复制一份。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
</head>
<body>
    <p style="color: red; font-size: 30px">生当作人杰，死亦为鬼雄</p>
    <p style="color: red; font-size: 30px">至今思项羽，不肯过江东</p>
</body>
</html>

style标签

为了解决上面的问题，使用style标签可以解决，将样式写入到style标签里面，各个元素可以复用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
    <style type="text/css">
        p {
            color: red;
            font-size: 30px
        }
    </style>
</head>
<body>
    <p>生当作人杰，死亦为鬼雄</p>
    <p>至今思项羽，不肯过江东</p>
</body>
</html>

这里面主要关注的是：

  <style type="text/css">
        p {
            color: red;
            font-size: 30px
        }
   </style>

在style标签中，p 是要选中的标签名称，大括号里面的是样式，上面的意思是所有 p 标签内容都设置为红色、30个像素大小。这里就解决了在同一个文本中样式不能复用的问题。但是如果想在不同的文件中复用样式呢？这种方式不能解决。

link标签

为了解决不同文件共享同一种样式，link 标签出现了，这需要我们把css写在外部，然后html文件引入样式即可，做到了结构和样式的分离。

首先需要编写 css 样式文件： style.css，内容如下：

p {  
    color: red;  
    font-size: 30px  
}

然后在 html 文件中引入即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>生当作人杰，死亦为鬼雄</p>
    <p>至今思项羽，不肯过江东</p>
</body>
</html>

这里最关键的是：

<link rel="stylesheet" type="text/css" href="style.css">

link 的前两个属性是固定的，href 属性是要引入外部css的相对位置。如果还有别的 html 文件想用到这个样式文件，同样也引入即可，实现了样式复用的效果，提高了访问速度。

注意：link标签在同一个文档中可以加载多个外部样式。

总结

上面我们使用了三种方式为 html 标签添加样式，归结起来就三种：

1.元素内部：行内样式
2.文档内部： style标签
3.外部样式： link标签

一般工作中都是使用外部样式，其余两种可以在学习测试的时候使用，不建议在生产工作中使用。

链接: https://fly63.com/article/detial/6956