当前位置：首页 > news >正文

CSS的4种引入方式

news 2025/8/21 20:30:10

CSS的4种引入方式

一、内嵌式：CSS写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

案例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* css注释 *//* 这里写的都是css *//* 选择器{css属性} *//* 选择器：查找标签 */p {/* 文字颜色变红色 */color: red;/* 字变大 px:像素 */font-size: 30px;background-color: green;/* width height */width: 400px;height: 400px;}</style></head><body><p>这是一个p标签</p></body>
</html>

二、外联式：CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

案例代码
my.css文件

/* 选择器{} */
p{color: red;
}

html中通过link标签的href属性引入
html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 关系：样式表 --><link rel="stylesheet" href="/my.css" /></head><body><!-- css到底能写在哪里 --><p>这是p标签</p><div style="color: green; font-size: 30px">这是div标签</div><div>这是一个div</div>
</body>
</html>

三、行内式：CSS写在标签的style属性中

提示：会配合js使用

案例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><p style="color: red">这是一个p标签</p></body>
</html>

四、导入外部样式

外部样式
hello.css文件

p{color: red;
}
div{background-color: green;
}

html文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>@import url(hello.css);</style></head><body><p>这是一个p标签</p><div>这是一个div标签</div></body>
</html>