<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <!--
            type="text/css"表示这个style标签中的内容是css代码
        -->

        <link type="text/css" href="css/first.css" rel="stylesheet" />

        <style type="text/css">
            div {
                background: #00ff00;
            }
        </style>
        
        <style type="text/css">
            @import url("css/first.css");
        </style>
    </head>

    <!--
        
        描述：css层叠样式表
        用处：用来设置html元素的显示效果。（做美化）
        
                    如何定义css样式表（定义方式）
        1. 直接在 html元素的style属性中定义
        style="width: 100px;height: 200px; background: #FFD596;"
        
        2. 在html的<head></head>中使用style标签定义
        <style type="text/css">
            div {
                background: #00ff00;
            }
        </style>
          
        3.在外部css文件中定义样式表，然后引入到html页面
        如何引入？
        推荐使用link
            在加载html文件的时候，就会把link所引入的css文件拷贝到html中，
        import会在使用时，才会将所import的css文件拷贝过来。
        延迟：标签内容显示了，但是没有样式。
        
            1.link：相当于将外部css文件中的代码直接拷贝到link所在的位置
        <link type="text/css" href="css/first.css" rel="stylesheet" />
            
            顺序？
            先读取到的先起作用
            
            2.在style标签中使用@import url("路径");
            <style type="text/css">
                @import url("css/first.css");
            </style>
        
        
        推荐使用？
            推荐使用外部css文件。
            1. 复用性强
            2. 代码阅读性强
    -->

    <body>

        <div style="width: 100px;height: 200px; background: #FFD596;">

        </div>

        <div>
            这是第二个div
        </div>

        <div>
            这是第三个div
        </div>
    </body>

</html>