[Day24]CSS-建立檔案及註解

2023 iThome 鐵人賽

DAY 24

Modern Web

從零寫出捷運美食介紹網頁(HTML/CSS)系列第 24 篇

15th鐵人賽

zyq1212

2023-10-09 13:54:05

372 瀏覽

分享至

先提供為了確認是否成功套用CSS而在HTML寫的段落。

<p>試著建立CSS檔案並將這句話變成藍色!</p>

建立檔案

又回到最初的起點──建立檔案
- 先從VS Code開啟「Practice」資料夾（可參考[Day3]）。
- 將滑鼠移到資料夾旁邊，會出現四個按鈕，點選第一個按鈕以新增檔案。
- 這次要建立的是CSS檔，所以副檔名必須是.css，檔名一般會取為style。
- 在CSS檔案中寫上能讓<p>段落變為藍色的程式碼。
  
  選擇器|屬性|值
  ---|---
  p|color|blue
```
p { color: blue; }
```
- 儲存後點擊「Go Live」，會發現一切都沒有改變，因為我們還沒有連結HTML和CSS！
連結HTML和CSS（可參考[Day23]）
- 在HTML<head>中寫入<link rel="stylesheet" href=".\style.css">。
- 儲存後點擊「Go Live」，可以看到成功把段落改成藍字。

註解

複習一下，HTML的註解為，那麼CSS註解怎麼寫呢？
答案是 /*註解內容*/ ，但是快捷鍵不變，一樣是 ctrl鍵 + /

範例網頁

在說明其他用法之前，這邊先提供將[Day14]內容稍作修改寫成HTML的程式碼，之後會以這個網頁當做示範。

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>練習頁面</title>
    <link rel="stylesheet" href=".\style.css">
</head>
<body>
<h1>HTML－影像地圖</h1>
    <p class="foreword">捷運美食介紹網頁，如果只用文字條列就太枯燥了，首頁當然要比較酷一點，必須有捷運地圖當索引才行，所以就來介紹如何產生影像地圖！</p>

<div class="left">
    <h2 class="center">介紹</h2>
        <p class="intro">&emsp;&emsp;影像地圖是一種讓網頁圖片能劃分出不同區塊，並將每個區塊做成超連結的網頁設計技巧。這邊提供一個<a href="https://spicyboyd.github.io/TainanGourmetPlaza/map.html" target="_blank">範例網站</a>。</p>
        <p class="intro">&emsp;&emsp;從上面的網站，我們可以看到一張地圖裡有許多店名，而那些店名都已做成超連結，方便讓網頁瀏覽者可以直接跳轉到介紹網頁。</p>
</div>

<div class="right">
    <h2 class="center">需要的元素及屬性</h2>
        <ol>
            <li>&lt;img&gt;元素</li>
                <p class="line_height">用來插入背景圖片、設定圖片寬高和連接影像地圖。
                    <br>屬性：src、width、height、usemap。</p>
            <li>&lt;map&gt;元素</li>
                <p class="line_height">影像地圖本體，設定各區塊並連接其他網頁。
                    <br>屬性：name。</p>
            <li>&lt;area&gt;元素</li>
                <p class="line_height">在&lt;map&gt;中的區塊，設定區塊形狀、座標及網頁位址。
                    <br>屬性：shape、coords、href。</p>
        </ol>
</div>
</body>
</html>

因為想要集中一篇介紹用法，所以今天只講了如何建立CSS檔案並套用，明天會好好地說明基本美化寫法，為最終美化實作做準備！我是YQ，完賽倒數6天，明天見。