写在开始

之前的两篇博主主要介绍了HTML5标记的使用和具体案例的实现。到了这一篇，我们就进入了CSS样式的学习了。

CSS简介

CSS是层叠样式表的英语缩写(英文全称：Cascading Style Sheets)，是一种用来表现HTML或XML等文件样式的计算机语言。

如果用比喻来说的话，HTML文件是一张原图，那么CSS就是给原图加滤镜和美颜特效。

四种CSS应用方式

1.行内式
在这里插入图片描述
2.内嵌式

3.链接式
在这里插入图片描述
4.导入式（不常用）

CSS使用样例

1.行内式

<!DOCTYPE html>
<html>
<head>
    <title>CSS样式应用方式</title>
</head>
<body>
   <h1 style="color: green;text-align: center;font-family: 隶书;font-size: x-large;">CSS样式应用方式</h1>
</body>
</html>

2.内嵌式

<!DOCTYPE html>
<html>
<head>
    <title>CSS样式应用方式</title>
    <style type="text/CSS">
        h1{
            color: green;
            text-align:center;
            font-family: 隶书;
            font-size: x-large;
        }
    </style>
</head>
<body>
   <h1>CSS样式应用方式</h1>
</body>
</html>

3.链接式

<!DOCTYPE html>
<html>
<head>
    <title>CSS样式应用方式</title>
    <link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
   <h1>CSS样式应用方式</h1>
</body>
</html>
h1{
    color: green;
    text-align:center;
    font-family: 隶书;
    font-size: x-large;
}

4.导入式

<!DOCTYPE html>
<html>
<head>
    <title>CSS样式应用方式</title>
    <style>
        @import url(01.css);
    </style>
</head>
<body>
   <h1>CSS样式应用方式</h1>
</body>
</html>
h1{
    color: green;
    text-align:center;
    font-family: 隶书;
    font-size: x-large;
}