[Udemy推薦課程] Day 4 The Web Developer Bootcamp 2021 [轉職軟體工程師，自學程式語言]

6月 01, 2021

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

今天大綱如下 :
➤ 外部樣式表
➤ color & background-color & background
➤ text-align
➤ font-weight
➤ text-decoration
➤ line-height
➤ letter-spacing
➤ font-size
➤ font-family
➤ @font-face
➤ text-transform

它是什麼？
CSS 是一種用於描述文檔如何以視覺方式呈現的語言 - 它們如何排列和設置樣式。

它代表什麼？
CSS stands for Cascading Style Sheets. 我們將稍後介紹“cascading”部分；暫時不用擔心！

有很多！
CSS 很容易掌握，但它可能令人生畏，因為我們可以操作多少屬性。

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

首先一般我們會先建立一個外部的 css 檔案，然後在 html 裡連到此 css 檔
➤ 外部樣式表 : 將樣式寫入 .css 文件，然後在 html 文檔的頭部包含 using <link>。受到推崇的！

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

INLINE STYLES
您可以直接在每個元素上 inline 編寫樣式，但這在大多數情況下不是一個好主意。

<樣式> 元素
您可以在 <style> 元素內編寫樣式。這很容易，但無法在文檔之間共享樣式。也不推薦。

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

一般常用的

➤ color & background-color & background

color 改變字體顏色

但從技術上講，background-color 是與 background 不同的屬性。

background 不僅僅是改變背景顏色。我們可以設置背景圖像，我們可以設置漸變。我們可以用這個背景屬性做很多事情。

詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

color 可以用不同的表示形式，可以用 RGB( , , )，#XXXXXX，color name

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

➤ text-align
text-align CSS 屬性定義行內內容（例如文字）如何相對於它的塊父元素。text-align 並不控制元素塊自己的對齊，只控制它的行內內容的天線。

詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

➤ font-weight
font-weight CSS 屬性指定了字體的粗細程度。一些字體只提供普通和粗體兩種值。

詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

➤ text-decoration

該速記CSS屬性設置的裝飾線文本的外觀。

詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

➤ line-height

line-height CSS屬性用於設置多行元素的空間量，如多行文本的技巧。對於塊級元素，它指定元素行盒（line box）的最小長度。對於非替代元素的內聯元素，它用於計算行盒（line box）的高度。簡單來說就是行高。

詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

➤ letter-spacing

CSS 的字母間距屬性用於設置文本字符的字符表達。

詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/CSS/letter-spacing

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

➤ font-size

font-size CSS 屬性指定字體的大小。因為該屬性的值會被用於計算em和ex長度單位，定義該值可能會改變其他元素的大小。

詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

➤ font-family
CSS 屬性 font-family 允許您通過給定一個有先後順序的，由字體名或者字體族名組成的列表來為選定的元素設置字體。

詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family

➤ @font-face
@font-face CSS at-rule 指定一個用於顯示文本的自定義字體；字體能從遠程服務器或者用戶本地安裝的字體加載. 如果提供了local()函數，從用戶本地查找指定的字體名稱，並且找到了一個匹配項, 本地字體就會被使用. 否則, 字體就會使用url()函數下載的資源。
通過允許作者提供他們自己的字體，@font-face 讓設計內容成為了一種可能，同時並不會被所謂的"網絡-安全"字體所限制(字體如此普遍以至於它們能被廣泛的使用) . 指定查找和使用本地安裝的字體名稱可以讓字體的自定義化程度超過基本字體，同時在不依賴網絡情況下實現此功能。
在同時使用url()和local()功能時，為了用戶已經安裝的字體副本在需要使用時被使用，如果在用戶本地沒有找到字體副本就會去使用戶下載的副本查找字體。
@font-face 規則不僅僅使用在CSS的頂層，還可以用在任何CSS條件組規則中.

詳細資訊請見 https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

STEP.1 可以利用google fonts來做