1. 程式人生 > 其它 >CSS(1)匯入方式

CSS(1)匯入方式

匯入方式

  1. 內部樣式

    <!-- 內部樣式 -->
    <style>
    h1{
    color: brown;
    }
    </style>

  2. 外部樣式

     <!-- 外部樣式 -->
    <!-- 連結式html(推薦) -->
    <link rel="stylesheet" href="../匯入方式/style.css">
    h1{
    color: darkorange;
    }

     <!-- 匯入式css2.1(不推薦) -->
    <style>
    @import "style.css";
    </style>

  3. 行內樣式

<!-- 行內樣式:
在標籤元素中,編寫一個style屬性,編寫樣式即可
不可取,應結構與表現分離
-->
<h1 style="color: #4a78c2">一級標題</h1>

優先順序:就近原則

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>

<!-- 內部樣式 -->
<style>
h1{
color: brown;
}
</style>

<!-- 外部樣式 -->
<!-- 連結式html(推薦) -->
<link rel="stylesheet" href="../匯入方式/style.css">

<!-- 匯入式css2.1(不推薦) -->
<style>
@import "style.css";
</style>

</head>
<body>

<!-- 優先順序:就近原則 -->

<!-- 行內樣式:
在標籤元素中,編寫一個style屬性,編寫樣式即可
不可取,應結構與表現分離
-->
<h1 style="color: #4a78c2">一級標題</h1>

</body>
</html>
h1{
color: darkorange;
}