※ 建立色票結構：
建立一個大盒子：index.html
<body>
<!-- 建立一個大盒子 -->
<div>
</div>
</body>
依序建立色票卡：index.html
<body>
<!-- 建立一個大盒子 -->
<div>
<!-- 依序建立色票卡 -->
<p>#372C4A</p>
<p>#4F3961</p>
<p>#EA728C</p>
<p>#FC9D9D</p>
<p>#F3D4D4</p>
</div>
</body>
建立大盒子的大小：style.css
div {
border: 1px solid #000;
width: 400px;
background-color: #ccc;
}
顯示畫面：
調整字體的大小：style.css
p {
color: red;
font-size: 18px;
font-family: "微軟正黑體";
line-height: 2;
border: 1px solid #000;
text-align: center;
margin: 0;
}
顯示畫面：
設定每張色票的顏色：index.html
作法：套用選擇器「class」<div>
<!-- 依序建立色票卡 -->
<p class="color1">#372C4A</p>
<p class="color2">#4F3961</p>
<p class="color3">#EA728C</p>
<p class="color4">#FC9D9D</p>
<p class="color5">#F3D4D4</p>
</div>
說明：
color ：是通用的樣式類別，用來統一所有「顏色展示項目」的外觀。
color1 具體的色彩類別，專門用來套用某一種顏色的樣式。
設定CSS樣式：style.css
.color {
color: #fff;
font-size: 18px;
font-family: "微軟正黑體";
font-weight: 800;
line-height: 2;
border: 1px solid #000;
text-align: center;
margin: 0;
}
.color1 {
background-color: #372C4A;
}
.color2 {
background-color: #4F3961;
}
.color3 {
background-color: #EA728C;
}
.color4 {
background-color: #FC9D9D;
}
.color5 {
background-color: #F3D4D4;
height: 300px;
}
顯示畫面：
針對div這一區進行樣式設定：index.html
<div class="colorpalette">
</div>
設定CSS樣式：style.css
.colorpalette {
/* border: 1px solid #000; */
width: 400px;
background-color: rgb(173, 148, 148);
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}
作法：「.div」––>「.colorpalette」
顯示畫面：
※ 層級選擇器說明：
.color.color1 {
background-color: #372C4A;
}
說明：
.color.color1 是一種常見的 CSS 類別選擇器寫法，表示「同時具有 color 和 color1 這兩個 class 的元素」。這種寫法主要用在樣式的組合與繼承上，讓設計更具彈性和模組化。
.是 class 選擇器的標誌：用來針對 HTML 元素的 class屬性進行樣式指定。
.color.color1：代表 HTML 元素要同時有 class="color color1"才會被這條 CSS 規則選中。
※ 開發人員工具（DevTools）：
使用原因：即時檢查、測試與除錯 網頁的行為與外觀。
開啟方式：
- 使用工具列開啟：
- 使用「檢視」開啟：直接選取畫面上的某個元素，然後使用右鍵選單裡的「檢查 (inspect)」。
- 檢視元件：
用 Windows 系統的同學請按下 F12，Mac 的同學請同時按下 command + option + i，你將會看到瀏覽器跳出了新的分割視窗，內容有網頁的 HTML 和 CSS 資訊。通常預設是綁到網頁的 body 元素：
改變視窗位置：點選工具列右上方「三個點」的按鈕，可以用其中的 Dock side 來調整位置。
常用功能：
- Elements（元素） & Styles（樣式） 面板：最常查看的會是 Elements & Styles 這兩個面版，分別是 HTML 資訊和 CSS 資訊，這裡呈現的資訊和網頁當下呈現的內容/外觀是同步的，如果實際修改內容，畫面上的資訊也會同步連動。
- 元素選取工具：透過元素選取工具（element selection tool）直接用鼠標在畫面上選取元素，可以即時看到元素的資訊，並查看元素周邊的空間。
- 模擬不同尺寸的裝置：在設計網頁時需要思考不同的螢幕大小，在 DevTools 裡可以打開裝置工具列（device toolbar），在這裡模擬其他的裝置尺寸。
- JavaScript Console：在 Console 面板裡是我們熟悉的 JavaScript 主控台。
