CSS 简介CSS 即 Cascading Style Sheet（层叠样式表），用来控制网页外观。 CSS 与 CSS

CSS 即 Cascading Style Sheet（层叠样式表），用来控制网页外观。
CSS 与 CSS3 的关系：CSS3 指的是相对于 CSS2 增加的内容，所以想学好 CSS，应该学习 CSS2.1 + CSS3。

CSS 引入方式

1、外部样式表

外部样式是最理想的 CSS 引入方式，这种方式可以提升网站的性能和可维护性。外部样式表即将 HTML 和 CSS 放在不同的文件里，在 HTML 里面使用 link 标签来引入 CSS 样式。

使用方式：<link rel="stylesheet" type="text/css" href=""/>，rel 为 relative，取值固定，表明引入的是一个样式表文件；type 取值固定，表明引入的是标准 CSS；href 属性指定路径。link 标签放在 head 中。

写法如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
    </body>
</html>

2.内部样式表

内部样式表即将 HTML 和 CSS 放在同一个 HTML 文件中，CSS 代码放在 head 的 style 标签中，写法如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div{
                color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div>Like_Frost</div>
    </body>
</html>

在浏览器中的效果：

3、行内样式表

行内样式表是在标签内部定义 style 属性，用法如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
    </head>
    <body>
        <div style="color: aquamarine; font-size: 50px;">Like_Frost</div>
    </body>
</html>

在浏览器中显示为：

行内样式在每一个元素内部定义，冗余代码较多，导致网页的可读性和可维护性变差，一般都是使用外部样式；

在实际开发中，很少用到的一种方式 @import ，其和 link 方式用法相似，但 @import 是先加载 HTML，后加载 CSS，用户体验不佳；link 先加载 CSS，后加载 HTML，所以在实际开发中使用 link 方式引入。