【CS50W】Lecture0：HTML & CSS

課程名稱：CS50(Web Programming with Python and JavaScript)

課程內容

  • HTML：HTML 結構、Common HTML Tags …簡介。
  • CSS：Common CSS Properties、Specificity、CSS Selectors。
  • Responsive Design：viewport、Media Queries、Flexbox、Grids。
  • Bootstrap
  • Sass：variables and nesting

問題討論： style method 的選擇

Method1 - Use inline style： 

1
<h1 style="color: green">CSS from inline style</h1>

Method2 - Use style tag： 

1
2
3
4
5
6
7
8
9
10
11
<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>

<body>
  <h1>CSS from style tag</h1>
</body>

Method3 - Use link to CSS file： 

1
2
3
4
5
6
7
<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>CSS from link to CSS file</h1>
</body>

上面三種方式的結果都一樣，各有優缺點。

  • inline style 在順位上是三者中最高的，不會被其他的 CSS 設定覆蓋或影響。缺點是每個 HTML 元素要分別設置，在效率上或實用性上較不方便。
  • style tag 把 CSS 設定從各個 HTML 標籤中分離出來，在配合 CSS 選擇器的情況下，可以一次對多個 HTML 元素進行樣式設定，效率較高。畢竟學習寫程式的過程中，很常看到的一句話就是：「盡可能減少重複的程式碼」。另外一點就是，使用這種方式會把文件的「內容」和「樣式」區分開來管理，除了文件內容的結構會比較清晰易懂，也較容易達到「關注點分離」的效用。
  • 相對於 style tag 雖然把樣式跟內容分開，但兩者還是在同一個 HTML 文件裡； link to CSS file 的方式就直接將樣式設定放進單獨的 CSS 檔案做管理，「關注點分離」也更明確。另外就是，隨著我們做的 web app 規模變大，為了網頁畫面的一致性，我們可能會在多個網頁套用相同的 CSS 樣式。直接將樣式設定獨立成一個檔案並用 link 的方式引用，可以讓多個 HTML 文件引用同一個 CSS 樣式檔案。

小結：關注點分離

關注點分離是在寫程式時要特別注意的地方，其目的就是讓程式碼的每個部分「分工明確」。這麼做的好處是，當程式碼執行結果發現任何不符合預期的地方，我們可以很容易地找出出問題的段落並進行修正，並且「只」需要修正該部分就好，程式碼的其他地方都不會受到影響。這在維護上會較方便、測試部分功能時也只需要針對特定一小段落即可，整體流程更有效率也不容易出錯。

文章內容如有錯誤，歡迎留言討論！

CS50
#HTML #CSS #CS50W

本 Blog 上的所有文章除特别聲明外，均採用 CC BY-SA 4.0 協議 ，轉載請註明出處！