iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
1
Modern Web

HTML 與 CSS 學習筆記系列 第 6

Day06 - CSS (1) - Element、位置

開始之前先補充一下 Element (元素)的說明

Element (元素)

  • Element:簡單說元素就是一個前後完整的標籤 + 內容的組合,如下會是一個段落元素
<p>這是一個段落</p>
  • 當有的標籤是沒有結束的標籤或是內容,稱之為空元素 (Empty Element),如 <img>
  • 當有的標籤內再放入標籤是一個巢狀結構,可以稱之為巢狀元素 (Nesting Element)

CSS 的位置

延續 Day02 的內容,CSS = Cascading Style Sheets (階層式樣式表),目的是美化排版,因此可以修改網頁的樣式,那要寫在哪邊呢?大概會有這 3 種寫法

  • 元素內:就像一開始練習時,直接寫在要改的標籤內,當然就只作用在這個標籤上的內容
<h1 style="color:red"> 標題 </h1>
  • 頁面內:style 內,設定一個格式,因此整個標籤都會套用這個格式,如下整個網頁的 <h1>,不管幾個都會是藍色的
<head>
    <style>
        h1 {
          color: blue;
        }
    </style>
</head>
  • 連結的檔案:在 HTML 的 <head> 內設定一個檔案,進行連結引用,把 HTML 和 CSS 分開,這會是後續使用的方法
    • VS Code:可輸入 link:css + Enter,快速輸入此行
    • 代表用一個連結 <link>rel="stylesheet" 代表關聯一個樣式表,href="style.css" 代表檔案連結位置與檔名是 style.css
<head>
    <link rel="stylesheet" href="style.css">
</head>

記得新建 style.css 的檔案,內容如下,可以發現標題變成紅色了

h1 {
    color: red;
}
  • CSS 檔案內的架構:寫出目標的選擇器,之後用 {} 包起來,然後輸入要設定的屬性:值,再使用;將不同的屬性設定分開
選擇器{
    屬性: 值;
    屬性: 值;
}
  • 常見錯誤
    • 檔案載入錯誤
      • 檔名錯誤,如 stylle.css
      • 路徑連結錯誤,是否有另開資料夾導致路徑錯誤
    • 格式錯誤
      • 屬性設定間少了 ; 隔開,導致樣式跑掉
      • 前後結尾的 {} 缺少,導致錯誤
    • 單字拼錯,導致設定錯誤,如 colr
    • 從 chrome 的檢查工具 (F12) 裡面查看看是否有問題
      • Elements > Styles 看看是否有正確套用或是出現驚嘆號

參考資料

次回

繼續介紹 CSS


上一篇
Day05 - HTML (3) - 列表、a、img
下一篇
Day07 - CSS (2) - 選擇器、隨機假文
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言