前面的课程中,我们提到过在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;
}
<!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>
总结
希望你能够掌握这三种方式,在项目中灵活使用。
推荐阅读:
前端小课,每日一课