前端打卡-day9--css学习--1.CSS简介_前端签到打卡怎么弄 css-CSDN博客

本文链接：https://blog.csdn.net/qq_41083616/article/details/118930599

想要在一个页面引入CSS，共有以下3种方式。

（1）外部样式表
（2）内部样式表
（3）行内样式表一、外部样式表

一、外部样式表

外部样式表是最理想的CSS引入方式。在实际开发中，为了提升网站的性能速度和可维护性，一般都是使用外部样式表。所谓的外部样式表，指的是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。
**语法：

<link rel="stylesheet" type="text/css" href="文件路径" />

案例：**

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>

二、内部样式表

内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，并且style标签是放在head标签内部的。

语法：

<style type="text/css">
    ……
</style>

三行内样式表

行内样式表跟内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
</body>
</html>

行内样式是在每一个元素内部定义的，冗余代码非常多，并且每次改动CSS的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。
为什么我们一直强烈不推荐使用Dreamweaver“点点点”的方式来开发页面？就是因为这种方式产生的页面代码中，所有的CSS样式都是行内样式。对于这三种样式表，在实际开发中，一般都是使用外部样式表。不过在本书中，为了讲解方便，我们采用的都是内部样式表。