CSS样式(内联、内部、外部)1.内联样式2.内部样式3.外部样式

92 阅读 0 评论 61 点赞

我是靠谱客的博主彩色百褶裙，最近开发中收集的这篇文章主要介绍CSS样式(内联、内部、外部)1.内联样式2.内部样式3.外部样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

1.内联样式
2.内部样式
3.外部样式

1.内联样式

内联样式，又称行内样式。在标签内部通过 $s t y l e$ 属性来设置元素的样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p style="color: red;font-size: 30px;">我是一个段落</p>
    </body>
</html>

在这里插入图片描述

缺点是当同一个网页内需要多次用到同一个样式时，需要写很多次，而且如果之后需要更改的话，全部都要更改，非常不方便。所以尽量不要使用内联样式。

2.内部样式

把样式写到 $h e a d$ 中的 $s t y l e$ 标签中。这里还涉及到选择器的相关知识。下面这个例子只使用了元素选择器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            p{
                color: blueviolet;
                font-size: 15px;
            }
            h2{
                color:coral;
            }
        </style>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p style="color: red;font-size: 30px;">我是一个段落</p>
        <p>我是第二个段落</p>
    </body>
</html>

在这里插入图片描述

可以看到这种方式的复用性更高了，想要修改某一类元素的表现时只要修改一个地方就够了。而且我们会发现，内联样式的优先级是高于内部样式的。
但是这种方式也是有缺点的，因为在实际开发时不可能把所有的内容都写到一个网页里面，我们可能会有数百上千个网页，所以内部样式的复用性还不够高。

3.外部样式

编写一个外部的 $c s s$ 文件，在 $h t m l$ 内通过 $l i n k$ 标签引入它。

p{
    color: darkorange;
    font-size: 75px;
}
/*style.css文件 与下面的html位于同一目录下*/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            p{
                color: blueviolet;
                font-size: 15px;
            }
            h2{
                color:coral;
            }
        </style>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p style="color: red;font-size: 30px;">我是一个段落</p>
        <p>我是第二个段落</p>
    </body>
</html>