CSS-行内/内部/外部样式

幸运小圣

已于 2023-05-03 11:18:26 修改

阅读量131

点赞数

文章标签： css 前端 html

于 2023-05-03 10:31:33 首次发布

本文链接：https://blog.csdn.net/qq_53002037/article/details/130470212

版权

样式：（最推荐外部样式）

优先级：行内样式>内部样式=外部样式（看最下面的优先级）

行内样式：（不便于维护）

通过在标签里写style属性中，只控制当前标签的样式，对其他标签无效
样式是一个名-值对的形式（Html里面名-值对形式用等号连接，CSS里面名值对用冒号连接）

    <h1 style="color:brown">欢迎大家阅读博主笔记</h1>

有图有真相：
在这里插入图片描述
可以写多种形式，每个样式需要用分号隔开，例：

<h1 style="color:brown;font-size: 60px;">欢迎大家阅读博主笔记</h1>

内部样式：

使用style标签（结构与样式没有完全分离，多个HTML页面无法复用样式）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
         h2{
            color:green;
            font-size: 60px;
         }
    </style>
</head>

<body>
    <h2>欢迎学习前端知识</h2>
</body>

</html>

有图有真相：
在这里插入图片描述

*外部样式：（最推荐使用）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <!--连接外部样式的方式用link标签-->
    <link rel="stylesheet" href="./position.css">
</head>

<body>
    <h2>欢迎学习前端知识</h2>
    <p>有意见可以提出哦</p>
    <p>感谢观看</p>
</body>
</html>

在这里插入图片描述
`h2 {
color: green;
font-size: 60px;
}

p {
color: red;
font-size: 50px;
}`

有图有真相：
在这里插入图片描述
1.外部标签要写单独的.css文件，随后使用link标签在html文件中引入使用。
2.link标签要写在head标签中
3.link标签里面 href：引入的文档来自于哪里，rel：说明引入的文档和当前文档之间的关系。
4.样式可以复用，结构清新，可以触发浏览器的缓存机制，提高访问速度，实现了结构和样式的完全分离。