css的三種導入方式

時間 2020-01-13

標籤 css 三種導入方式欄目 CSS 简体版

原文原文鏈接

內聯樣式表

<p style="font-size:50px; color:blue">css內聯樣式表</p>

內部樣式表

<style type="text/css">
     p{
         font-size: 100px;
         color: red;
     }
</style>

<p>css內部樣式表</p>

外部樣式表

建立一個cssTest.css的css文件css

p{
    font-size: 50px;
    color:green;
}

span{
    font-size: 50px;
    color: yellow;
}

使用外部樣式表html

<link rel="stylesheet"  type="text/css" href="../css/cssTest.css">
    <p> 優先級： 內聯樣式表 > 內部樣式表 > 外部樣式表</p>
    <span >外部樣式表</span>

完整測試代碼

<!-- 文件名cssTest.html -->

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

    <style type="text/css">
        p{
            font-size: 50px;
            color: red;
        }
    </style>
    <link rel="stylesheet"  type="text/css" href="../css/cssTest.css">
</head>
<body>
    <p style="font-size:50px; color:blue">css內聯樣式表</p>
    <p>css內部樣式表</p>
    <p>優先級：內聯樣式表 > 內部樣式表 > 外部樣式表</p>
    <span >外部樣式表</span>
</body>
</html>

css文件測試

<!-- 文件名cssTest.css -->

p{
    font-size: 50px;
    color:green;
}

span{
    font-size: 50px;
    color: yellow;
}

css三種導入方式的優先級

內聯樣式表 > 內部樣式表 > 外部樣式表spa

相關標籤/搜索