什麼是CSS？
Cascading Style Sheets，簡稱CSS，層疊樣式表。
用來修飾HTML檔案，對網頁元素進行排版或大小控制等操作。
也就是說，HTML檔案填充了網頁的內容，而CSS則是控制內容的表現
例如：元素的大小，元素在網頁中的位置，元素的背景等屬性。
CSS代碼寫在那裡？
1 內聯樣式(行內式)：css代碼可以寫在html標籤中，使用style=”css樣式”;
<p style="color: red;">這是一個段落</p>
2 內部樣式:
把css代碼寫在style標籤裡面
style標籤理論上寫在文檔的任何位置都可以生效，但是我們都會把style寫在head標籤裡面
<html> <head> ... <style type="text/css"> css樣式 </style> </head></html>
3 外部樣式：
外部樣式是把css代碼單獨寫在一個css檔案(css尾碼檔案)中
再使用link標籤把外部樣式檔案引入進來
外部樣式檔案中不需要style標籤，直接寫css代碼就可以了
<html> <head> ... <link rel="stylesheet" type="text/css" href="css檔案路徑" /> </head></html>
三種樣式可以多種同時使用
文字屬性 : font屬性
1 字型大小：font-size
設定字型的大小，使用帶單位的值，例如px,em,pt等
font-size: 12px;
2 字型顏色：color
color: red;
3 字型樣式：font-family
設定字型，例如宋體、雅黑之類的
可以有多個值
但只顯示一種字型樣式
若第一個字型可用就使用第一個，否則使用第二個
若第二個字型也不可用，就是用第三個，以此類推
字型與字型之間用英文逗號隔開，如果是中文或多個單詞的值，要用英文雙引號包起來
font-family: "宋體",Times,"New Century Schoolbook";
4 字型粗細：font-weight
| 可選值 | 說明 |
|---|---|
| normal | 預設值，不加粗 |
| bold | |
| bolder | 加粗，效果比bold更明顯 |
| value | 100~900的不帶單位元值，一般100~500為正常效果，600~900為加粗，數值越大，字型越粗 |
font-weight: bold;
5 文本的大小寫: text-transform
| 可選值 | 說明 |
|---|---|
| none | 預設值，無效果 |
| capitalize | 首字母大寫 |
| uppercase | 全部大寫 |
| lowercase | 全部小寫 |
text-transform: capitalize;
6 文字水平對齊：text-align
| 可選值 | 說明 |
|---|---|
| left | 預設值，靠左對齊 |
| right | 靠右對齊 |
| center | 置中對齊 |
| justify | 左右對齊 |
text-align: left;
7 文字垂直對齊
| 可選值 | 說明 |
|---|---|
| baseline | 預設。元素放置在父元素的基準上 |
| sub | 垂直對齊文本的下標 |
| super | 垂直對齊文本的上標 |
| top | 把元素的頂端與行中最高元素的頂端對齊 |
| text-top | 把元素的頂端與父元素字型的頂端對齊 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊 |
| text-bottom | 把元素的底端與父元素字型的底端對齊 |
| inherit | 規定應該從父元素繼承 vertical-align 屬性的值 |
只有元素屬於inline或是inline-block ，vertical-align屬性才會起作用。
vertical-align: baseline;
8文本劃線: text-decoration
| 可選值 | 說明 |
|---|---|
| none | 無底線 |
| underline | 底線 |
| overline | 上劃線 |
| line-through | 中間劃線(刪除線) |
text-decoration: underline;
9 首行縮排: text-indent
該屬性接受一個帶單位的值
規定文本首行縮排多少個單位的空間
只對第一行有縮排，而且只用於塊元素
text-indent: 2em;
text-indent的屬性值一般會使用em作為單位，因為一般縮排都以多少個字元為標準
10字間距: letter-spacing
該屬性接受一個帶單位的值
規定每個字元之間間隔多少個單位的空間
letter-spacing: 1em;
11 詞間距: word-spacing
該屬性接受一個帶單位的值
規定每個單詞之間間隔多少個單位的空間
該屬性對中文無效
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
