CSS
CSS 是用來設置自己想要的HTML的元素。一個HTML的頁面，可以有許多不同的樣式。(CSS不可以單獨使用)
CSS的選擇器
CSS的選擇器有五種 1.簡單選擇器 2.組合器選擇器 3.偽類選擇器 4.偽元素選擇器 5.屬性選擇器
1.簡單選擇器
簡單選擇器又分好幾種(這裡簡單介紹其中幾種) ex: 元素選擇器、id 選擇器、類選擇器，等等
(1)元素選擇器 : 根據元素名稱選擇 HTML 元素。 在style底下的p{}裡面將文字的位置顏色進行修改
輸入
輸出
(2)id選擇器 : id 選擇器使用 HTML 元素的 id 屬性來選擇特定元素。一個元素的 id 在一個頁面中只有一個，所以 id 選擇器用於選擇一個唯一的元素。# 後跟某元素的 id，可以指定特定 id 元素 。id 的名稱不能以數字開頭。
輸入
輸出
(3)類選擇器 : 用來選擇具有特定類屬性的 HTML 元素。要選擇具有特定類的元素，請輸入句點 (.) 字符，後跟類名。類名不能以數字開頭！
輸入
輸出
2.組合器選擇器
一個 CSS 選擇器可以包含多個簡單的選擇器。在簡單的選擇器之間，我們可以包含一個組合器。組合器是解釋選擇器之間關係的東西。CSS中有四種不同的組合器 : 後代選擇器、 子選擇器、相鄰兄弟選擇器、通用兄弟選擇器。
(1)後代選擇器 : 在is和p的中間空格可以指定元素內的所有
元素 (is可改為其他代號)
輸入
輸出
(3)相鄰兄弟選擇器 : 在is和p的中間加入+可以指定<is> 元素內的所有<p>元素用於選擇直接在另一個特定元素之後的元素。
(4)後代選擇器 : 在is和p的中間加入~可以指定<is> 元素內的所有<p>元素作為指定元素的下一個兄弟的所有元素。
3.偽類選擇器
偽類選擇器用來定義元素的特殊狀態。底下簡單介紹幾種偽類選擇器。(偽類是一個冒號)
:hover在
輸入
輸出一
輸出二
:first-child 可以改變第一個匹配到p元素的第一個子元素所以數字的1和3會改變
輸入
輸出
:lang 可以在段落內加入字體，類似寫解釋之類的意思。
輸入
輸出
4.偽元素選擇器
偽元素用於設置元素的指定部分的樣式。底下簡單介紹幾種偽元素選擇器。(偽元素類是兩個冒號)
::first-letter偽元素用於為文本的第一個字或字母添加特殊的樣式。(可改變文字顏色、文字背景顏色、字體等等)
輸入
輸出
::first-line偽元素用於為文本的第一行添加特殊樣式。(可改變文字顏色、文字背景顏色、字體等等)
::before偽元素可用於在元素內容之前插入一些內容。(before和after，多了可加入圖片)
::after偽元素可用於在元素內容之後插入一些內容。
5.屬性選擇器
可以對具有特定屬性或屬性值的 HTML 元素進行樣式設置。
CSS的顏色
與HTML類似無太大差異
CSS的邊距
CSS的邊距用於在元素周圍創建空間，在任何定義的邊界之外。
margin可以編輯每一邊的邊距離，在後面接-top可改變頂部、 -right可改變右側、 -bottom可改變底部、 -left可改變可改變左側
輸入
輸出
CSS的填充
用來縮短程式碼，在一個屬性中指定所有填充屬性。padding 填充順序是 1. padding-top 2.padding-right 3.padding-bottom 4.padding-left
輸入
輸出
CSS的高度和寬度
利用height和width屬性設置元素的高度和寬度。放入height和width的位置跟padding還有margin一樣
CSS的盒子模型
主要是包含了邊距、邊框、填充
輸入
輸出
CSS的列表
list-style-type屬性可以指定表項標記的類型。
輸入
輸出
list-style-image屬性可以將圖像指定為表項的標記
list-style-position可以指定列表項標記應出現在內容的內部還是外部