前言：

本文内容：CSS的快速入门、四种CSS导入方式

推荐免费CSS3基础讲解视频：【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

CSS的快速入门及优势

书写格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo01</title>
<!--    引入外部css-->
    <link rel="stylesheet" href="css/style.css">
<!--    规范：<style> 可以编写css代码
    语法：
        选择器{
            申明1
            申明2
            申明3
        }
    -->
</head>
<body>
<h1>我是h1标题</h1>
</body>
</html>
1
2
3
h1{
    color: red;
}

CSS的优势

  1. 内容和表现分离
  2. 内容结构表现统一，可以实现复用
  3. 样式丰富
  4. 建议使用外部css文件
  5. 利用SEO，容易被搜索引擎收录

四种CSS导入方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo01</title>
<!--    引入外部css-->
    <link rel="stylesheet" href="css/style.css">
<!--   内部样式 -->
    <style>
        h1{
            color: green;
        }
    </style>
</head>
<body>
<!--优先级：就近原则，越靠近越优先-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是h1标题</h1>
</body>
</html>

拓展：外部样式两种写法

  • 链接式

    1
    2
    <!--链接式链接式-->
        <link rel="stylesheet" href="css/style.css">

  • 导入式

    1
    2
    3
    4
    <!--导入式 (已经被淘汰，先加载 在渲染 展示效果不好)-->
        <style>
            @import url("css/style.css");
        </style>