<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 内部样式 */
            div{
                color: aqua;
                font-size: 50px;
            }
            p{
                color:blue;
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <!-- 行内样式 -->
        <div class="" style="font-size: 50px; color: black;">
            666
        </div>
        <div class="">
            666
        </div>
        <p>777</p>
        <p>777</p>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 外部样式 -->
        <!-- 方法1 用link链接 推荐使用 -->
        <link rel="stylesheet" href="外部.css">
        <!-- 方法2 用import导入 -->
        <!-- <style type="text/css">
            @import url(外部.css);
        </style> -->
    </head>
    <body>
        <div>我是大盒子</div>
        <div>我是大盒子</div>
        <p>我是老六</p>
        <p>我是老六</p>
    </body>
</html>

补充：

1.三种样式同时存在时，行内样式优先级最高

2.只有内部样式和外部样式存在时，就近原则，谁离标签近谁的优先级就高