:【教程】html+css零基礎入門教程（九）-圖片素材模板推薦免费ppt模版下载-道格办公

在前面我們一起將HTML的基礎知識學習完了，我想你應該知道怎麼寫基礎的HTMl代碼了，那麼接下來從今天開始，我們一起來學習CSS的基礎部分，如果你還不知道前面的HTML的基礎知識，請到文章底部點擊【相關文章】裡面的內容進行學習。有什麼可以後台留言交流學習。

CSS文字 - font 屬性

CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。

font 簡寫屬性在一個聲明中設置所有字體屬性。
這個簡寫屬性用於一次設置元素字體的兩個或更多方面。

使用 icon 等關鍵字可以適當地設置元素的字體，使之與用戶計算機環境中的某個方面一致。

注意，如果沒有使用這些關鍵詞，至少要指定字體大小和字體系列。
可以按順序設置如下屬性：
font-style font-variant < code class='syntax brush-html' >font-weight font-size/line-height font-family

如下代碼：

.ex2{font:italic bold 12px/20px 
arial,sans-serif;}

< p >頁面上顯示為 F2E.TMING

還有一些屬性也可以寫font裡，如下：
caption icon menu small-caption status-bar

CSS文字 - font-family 屬性font-family 規定元素的字體系列。 
font-family 可以把多個字體名稱作為一個“回退”系統來保存。
如果瀏覽器不支持第一個字體，則會嘗試下一個。
有兩種類型的字體系列名稱：
1) 指定的系列名稱：具體字體的名稱，比如：'times'、'courier'、'arial'。
2) 通常字體系列名稱：比如：'serif'、'sans-serif'、'cursive'、'fantasy'、'monospace'
p{ font-family:'Times New Roman',Georgia,
Serif; }
< p >提示：使用逗號分割每個值，並始終提供一個類族名稱作為最後的選擇。

CSS文字 - font-size 屬性font-size 屬性可設置字體的尺寸。
font-size屬性有3種值的方式：（比較常用的）
1) length
把 font-size 設置為一個固定的值。如:p{font-size:14px;}
2) %
把 font-size 設置為基於父元素的一個百分比值。如:p{font-size:50%;}
3) inherit
規定應該從父元素繼承字體尺寸。如:p{font-size:inherit;}

CSS文字 - font-style 屬性font-style 屬性定義字體的風格。
font-size屬性有4種值:
1) normal
默認值。瀏覽器顯示一個標準的字體樣式。如:p.normal{font-style:normal;} 
頁面上顯示為 < strong >F2E.TMING
2) italic
瀏覽器會顯示一個斜體的字體樣式。如:p.italic{font-style:italic;}
頁面上顯示為 < strong >F2E.TMING
3) oblique
瀏覽器會顯示一個傾斜的字體樣式。如:p.oblique{font-style:oblique;}
頁面上顯示為 < strong >F2E.TMING
4) inherit
規定應該從父元素繼承字體樣式。如:p.inherit{font-style:inherit;}
頁面上顯示為 < strong >F2E.TMING

CSS文字 - font-weight 屬性font-weight 屬性設置文本的粗細。 
使用 bold 關鍵字可以將文本設置為粗體。 
關鍵字 100 ~ 900 為字體指定了 9 級加粗度。
如果一個字體內置了這些加粗級別，那麼這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。
數字 400 等價於 normal，而 700 等價於 bold。 
p{font-weight:100;}p.normal{font- weight:normal;}p.thick{font-weight:bold;}p.thicker{font- weight:900;}
頁面上顯示為 
F2E.TMING
F2E.TMING
F2E .TMING
F2E.TMING
提示：如果將元素的加粗設置為bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。

CSS文字 - font-variant 屬性font-variant 屬性可以設定小型大寫字母。 
小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母採用不同大小的大寫字母。 
p{font-variant:small-caps;} 頁面上顯示為 aaaaa

CSS文字 - text-decoration 屬性text-decoration 屬性規定添加到文本的修飾。
text-decoration屬性有4種值:
1) none
默認。定義標準的文本。如:p.none{text-decoration:none;} 
頁面上顯示為 < strong >F2E.TMING
2) underline
定義文本下的一條線。如:p.underline{text-decoration:underline;}
頁面上顯示為 < strong >F2E.TMING
3) overline
定義文本上的一條線。如:p.overline{text-decoration:overline;}
頁面上顯示為 < strong >F2E.TMING
4) line-through
定義穿過文本下的一條線。如:p.line-through{text-decoration: line-through;}
頁面上顯示為 F2E.TMING
5) blink
定義閃爍的文本。如:p.blink{text-decoration:blink;}
頁面上顯示為 < strong >F2E.TMING
6) inherit
規定應該從父元素繼承 text-decoration 屬性的值。如:p.inherit{text-decoration:inherit;}
頁面上顯示為 < strong >F2E.TMING

CSS文字 - text-underline-position 屬性text-underline-position 屬性線條在文本的位置。該屬性有2種值:
1) below
默認值。在文本下面。如:p.below{text-underline-position :below;text-decoration:underline;} 
頁面上顯示為 F2E.TMING
2) above
在文本上面。如:p.above{text-underline-position :above;text-decoration:underline;} 
頁面上顯示為 F2E.TMING

CSS文字 - text-shadow 屬性text-shadow 屬性給文本添加陰影效果。 
語法：p{text-shadow: h-shadow v-shadow blur color;}  
h-shadow 必需。水平陰影的位置。允許負值。 
v-shadow 必需。垂直陰影的位置。允許負值。 
blur 可選。模糊的距離。 
color 可選。陰影的顏色。 
p{ text-shadow: 5px 5px 5px #FF0000; }

頁面上顯示為 < strong >F2E.TMING

CSS文字- text-transform 屬性text-transform 屬性控製文本的大小寫。該屬性有4種值:
1) none
默認。定義帶有小寫字母和大寫字母的標準的文本。如:p{text-transform:none;} 
頁面上顯示為  flash
2) capitalize
文本中的每個單詞以大寫字母開頭。如:p{text-transform:capitalize;}
頁面上顯示為  Flash
3) uppercase
定義僅有大寫字母。如:p{text-transform:uppercase;}
頁面上顯示為  FLASH
4) lowercase
定義無大寫字母，僅有小寫字母。如:p{text-transform:lowercase;}
頁面上顯示為  flash

CSS文字 - line-height 屬性line-height 屬性設置行間的距離（行高）。 
註釋：不允許使用負值。
1) normal
默認。設置合理的行間距。如:p{line-height:normal;} ,頁面上顯示為
flash
flash
2) number
設置數字，此數字會與當前的字體尺寸相乘來設置行間距。如:p{line-height:1.2;},頁面上顯示為
flash
flash
3) length
定義僅有大寫字母。如:p{line-height:20px;},頁面上顯示為
flash
flash
4) %
基於當前字體尺寸的百分比行間距。如:p{line-height:100%;},頁面上顯示為
flash
flash

CSS文字 - letter-spacing 屬性letter-spacing 屬性增加或減少字符間的空白（字符間距）。 
註釋：允許使用負值，這會讓字母之間擠得更緊。
p{ letter-spacing:2px; }
頁面上顯示為flashflash p{ letter-spacing:-5px; }
頁面上顯示為flashflash

CSS文字- word-spacing 屬性letter-spacing 屬性增加或減少單詞間的空白（即字間隔）。 
註釋：允許使用負值，這會讓字母之間擠得更緊。
p{ word-spacing:25px; }
頁面上顯示為< strong >flash flash

相關文章

【教程】html+css零基礎入門教程（一）

【教程】html+css零基礎入門教程（二）

【教程】html+css零基礎入門教程（三）

【教程】html+css零基礎入門教程（四）

【教程】html+css零基礎入門教程（五）

【教程】html+css零基礎入門教程（六）

【教程】html+css零基礎入門教程（七）

【教程】html+css零基礎入門教程（八）

          

                        
                            
                        
                        文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Tutorial%20HTMLCSS%20zerobased%20introductory%20tutorial%209.html