文字改變

在標籤中間，加上 style= 便可進行改變。

<p style="color:purple; font-size:18px;">紫色文字</p>

顏色可以用

• rgb(紅,綠,藍)
• hsl()
• #顏色色碼

文字外框

可以在文字外加上外框與背景顏色，也一樣在style= 後加上即可。

<p style="background-color:purple; border:1px solid;">被1px大小圍起來、背景為紫色</p>

而如果要改變文字的排版，可以用padding 和 margin
padding 會改變外框與文字之間的距離。
margin 會改變外框外部在網頁中的距離。

與圖片的排版

若想要文字直接接在圖片的右邊或左邊，
可以用float讓圖片或其他需排版的文字(例如：左右的選單)，來達成。

<img src="圖片名稱.jpg" width="寬度px" style="float:left;"/>

定位

position可以將圖片或文字框定位在畫面的某個位置。
固定定位 fixed 直接根據你給的位置做改變，且會跟著拉動而一起改變。

<div style="position:fixed; top:距離上方多遠; bottom:距離下方多遠; right:距離右邊多遠; left;距離左邊多遠"/>

相對定位 relative 根據你給的位置，從原本的位置偏移
絕對定位 absolute 若外層有做定位，則依據給予的改變，與外層一同改變。

引用CSS檔

最常使用的就是 link。

<link href="網址或位置" rel="stylesheet" />

即可直接引用CSS檔進來，更詳細的CSS選擇器可以參考：
https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048
https://www.runoob.com/cssref/css-selectors.html

參考連結(https://youtu.be/Ml78vnNTBLw)