學習CSS

平凡力量發表於2024-06-16
CSS

2024-06-15

1.CSS快速入門示例及CSS匯入及行內樣式、本檔案內style定義、外部css定義樣式的優先順序（就近原則）

CSS檔案：

h1{
    color: red;
}

HTML檔案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 標籤選擇器
         樣式定義格式：
         宣告1;
         宣告2;*/
        h1{
            color: blue;
        }
    </style>
    <link rel="stylesheet" href="css/style.css"/>
    <!-- 行內樣式、當前頁面內定義style樣式、外部引入style裡定義樣式
    這3種優先順序：就近原則
     指 樣式程式碼和這<h1>程式碼在物理上的遠近
     行內樣式 肯定最近
     本例子中，外部樣式link標籤在當前頁面的<style>標籤下面，
     更靠近<h1>所以本例中外部樣式的優先順序高於內部<style>樣式 -->
</head>
<body>
<!--<h1 style="color: green;">我是標題</h1>-->
<h1>我是標題</h1>
</body>
</html>

2.三種基本選擇器及優先順序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
        color: red;
    }
    .practice-class{
        color: blue;
    }
    #practice-id{
        color: green;
    }
  </style>
</head>
<body>
<p>段落1</p>
<p class="practice-class">段落2</p>
<!--<p id="practice-id">段落3</p>-->
<!-- 3種基本選擇器優先順序：
 id選擇器>類選擇器>標籤選擇器 -->
<p id="practice-id" class="practice-class">段落3</p>
</body>
</html>

相關文章