html及css学习笔记_12_css三种使用方式_列举css的三种应用方式-优快云博客

本文链接：https://blog.youkuaiyun.com/aishangcike/article/details/47148035

本文介绍了如何在HTML中使用CSS样式，包括内链、内嵌和引入三种方式，并提供了具体的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html中，除了使用html提供的各种标签对样式进行修改外，我们还可以使用CSS样式对网页样式进行修改。
一般我们在从事页面开发时，绝大多数是使用css样式来设置html的外貌，一般是使用外链式（后面讲），这样的好处是html与css文件分开了，有点像页面逻辑与页面UI分开了，以后要改样式时只要修改css即可，如同松耦合，好处太多了，自己开发就知道了。

好，回到正题，css有三种方式：内链、内嵌、引入

内链：即加在标签上

看下面例子

<html>
    <head>
    </head>
    <body>
        <div style="background:blue">
        这是内链使用方式
        </div>
    </body>
</html>

内嵌样式表（内嵌）：必须在head标签里，写在style标签内

看下面例子

<head>
    <style type="text/css">
        p{
            background-color:blue
        }
    </style>
    <p>
        这里的文字的背景会被变成蓝色。
    </p>
<head>

引入样式表（引入）：即将css写到另一个文件里，再在html里引入这个文件

看下面例子

<head>
    这是优快云的一个样式：
    <link rel="Stylesheet" type="text/css" href="http://static.blog.youkuaiyun.com/skin/default/css/style.css?v=1.1" />
    下面是一般的引入方式：
    <link rel="Stylesheet" type="text/css" href="路径或风址">
</head>