第6天：使用CSS的三种方式

最新推荐文章于 2021-08-04 03:17:40 发布

lefex

最新推荐文章于 2021-08-04 03:17:40 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/103351443

版权

前面的课程中，我们提到过在HTML中如何使用CSS，今天回顾并总结一下在HTML使用 CSS 的三种方式，下图是 CSS 的加载过程：

1.通过 link 的方式引用 CSS 样式，也就是外部引入，这种方式需要一个 css 文件，比如 css 的名字为 style.css。这种方式可以把样式和HTML分离，方便维护。（常用）：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="style.css">    <title>CSS的使用</title></head><body>    <h1>《前端小课》</h1>    <p class="title">《前端小课》是一本关于前端入门到进阶的多媒体电子书，    通过公众号的形式呈现内容，并与粉丝形成互动，推动读者自我驱动，利用        业余时间学习前端，迎合大前端的浪潮。</p></body></html>

/* style.css */.title {    color: red;    font-size: 18px;}

2. 内部引入，在 HTML 中的 head 位置添加 style 标签，CSS 样式放到 style 标签中。这种方式把 HTML 和 CSS 样式放到了一起，如果页面太复杂将导致页面代码太臃肿。（偶尔用）

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <title>CSS的使用</title>    <style>        .title {            color: red;            font-size: 18px;        }</style></head>
<body>    <h1>《前端小课》</h1>        <p class="title">《前端小课》是一本关于前端入门到进阶的多媒体电子书，    通过公众号的形式呈现内容，并与粉丝形成互动，推动读者自我驱动，利用        业余时间学习前端，迎合大前端的浪潮。</p></body>
</html>

3.内联样式：直接作用于元素上，只会对一个元素起作用（不到万不得已不用）。

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <title>CSS的使用</title></head>
<body>    <h1>《前端小课》</h1>    <p style="color: red; font-size: 18px;">《前端小课》是一本关于前端入门到进阶的多媒体电子书，    通过公众号的形式呈现内容，并与粉丝形成互动，推动读者自我驱动，利用        业余时间学习前端，迎合大前端的浪潮。</p></body>
</html>