css 字體樣式:css篇四文本樣式(上)-字體教程免费ppt模版下载-道格办公

通過前面幾篇文章的介紹，相信大家對css層疊樣式表已經有了大概的了解和認識了，最起碼要知道它到底是做什麼用的。也就是所謂的應用場景，光是學會，但是不知道怎麼使用，那相當於沒學。

這裡再次說明css的作用就是給html標籤指定樣式的，不論是淘寶還是京東再或者是其他的網站都是用html+css+JavaScript來實現界面的，界面就是讓用戶能看得見摸得著的東西，通過界面就可以查看商品、瀏覽商品、選購商品，最終完成交易，賺到錢。所以說html、css、JavaScript是學習編程的基礎。

廢話不多說，開始今天的內容。 css選擇器可以讓我們定位hmtl標籤，只有定位到html標籤，我們才能給html標籤指定樣式。樣式的大小怎麼設置，就需要我們對css的度量單位有所了解。就和你上街買菜一樣，你光說要買白菜，賣菜的肯定會問你，買多少啊？如果你不告訴賣菜的你要買多少，那賣菜的應該賣給你多少呢？

css的度量單位就是解決這裡多少的問題。

ok，了解了以上內容，接著我們再來了解，css的都有哪些樣式，具體應該怎麼使用。

文本樣式，什麼是文本呢？就是文字啊。現在想一想文字可以有哪些樣式呢？

這不禁讓我想起一個故事：兩個人因為某件事情，爭論不下。所以決定用比文（相對於比武）的方式來論輸贏，做決定。其中有一題便是：怎麼用黑筆寫出紅字來？（大家可以思考一下）

這裡說的黑、紅就是顏色，html裡面的文本也就是文字可以有顏色，還可以有大小，還可以有粗細、還可以有傾斜、還可以在文字下面畫一個橫線叫下劃線、還可以在中間畫一道線叫刪除線、還可以設置字體樣式：像宋體、楷體、微軟雅黑等等...（盡情發揮你的想像，看看文本還可以有哪些樣式吧）

1.顏色< /span>

css給文本設置顏色通過：color來指定。前面幾篇中我用了大量的color來指定html標籤的顏色。

具體演示，看代碼：（我們給p標籤裡面的文本設置紅顏色）

<!DOCTYPE html><html><head>  <title>css顏色與度量單位</title>  <style>    p{      color: red;    }</style> </head><body>  <p>第一段落</p></body></html>

頁面效果：

這裡只有一個p標籤，所以我們利用元素選擇器可以很好地定位到p標籤，如果我們有很多p標籤，而你想給每個p標籤設置不同的顏色該怎麼做呢？（如果想不起來的同學，可以返回去看看css選擇器）

我們可以通過偽類選擇器進行精確地指定第一個第二個第三個，分別給他們指定不同的顏色。當然，你也可以使用id選擇器或者類選擇來精確定位。

<!DOCTYPE html><html><head>  <title>css顏色與度量單位</title>  <style>    p:last-child{      color: red;    }    p :first-child{      color:lime;    }    p:nth-child(2){      color: navy;    }</style></head><body>  <p>第一段落</p>  < ;p>第二段落</p>  <p>第三段落</p></body></html>

頁面效果：

2.文字大小

文字的大小通過font-size來指定

將第三個（也就是最後一個）p的文本大小設置為50px（px為css的度量單位，還不知道px是什麼的同學，可以返回去看看css度量單位那一篇）

<!DOCTYPE html><html><head>  <title>css顏色與度量單位</title>  <style>    p:last-child{      font-size: 50px; color: red;    }    p:first-child{      color:lime;    }    p:nth-child(2){      color: navy;    }</style></head><body>  <p>第一段落</p>  <p>第二段落</p>  <p>第三段落</p></body></html>

頁面效果：

這裡再囉嗦一句，css叫層疊樣式表，層疊的意思就是可以把很多樣式疊加作用在一個html標籤上，來達到樣式的豐富多彩。這裡我們不僅給最後一個p設置了紅色還把字號變成了50px，下面的例子中，我們可以一直往上疊加更多樣式。

3.文本傾斜

文本是否傾斜通過font-style來設置

將第三個p標籤的文本傾斜

<!DOCTYPE html><html><head>  <title>css顏色與度量單位</title>  <style>    p:last-child{      font-size: 50px; color: red;      font-style: oblique;    }    p:first-child{      color:lime;    }    p:nth-child(2){      color: navy;    }</style></head><body> <p>第一段落</p>  <p>第二段落</p>  <p>第三段落</p></body></html>< /pre>頁面效果：
下面給出一個表格：
值 說明
normal 表示讓傾斜狀態恢復到正常狀態
italic 表示使用斜體
oblique 表示讓文字傾斜。區別在沒有斜體時使用
4.字體加粗

設置字體是否加粗。 

通過font-weight來設置

<!DOCTYPE html><html><head>  <title>css顏色與度量單位</title>  <style>    p:last-child{      font-size: 50px; color: red;      font-style: oblique;      font-weight: bold;    }    p:first-child{      color:lime;    }    p:nth-child(2){      color: navy;    }</style></ head><body>  <p>第一段落</p>  <p>第二段落</p>  <p>第三段落</p></body></html> ;
頁面效果：
值 說明
normal 表示讓加粗的字體恢復正常
bold 粗體
bolder 更粗的字體
lighter 輕細的字體
100~900之間的數字 600及之後是加粗，之前不加粗
在目前計算機和瀏覽器顯示中，只有bold加粗，其他更粗更細，目前體現不出來。 
5.文本字體設置

通過font-family來設置

<!DOCTYPE html><html><head>  <title>css顏色與度量單位</title>  <style>    p:last-child{      font-size: 50px; color: red;      font-style: oblique;      font-weight: bold;          }    p:first-child{      color:lime;    }    p:nth-child(2){      color: navy;    }</style></ head><body>  <p>第一段落</p>  <p>第二段落</p>  <p>第三段落</p></body></html> ;
頁面效果：
好了，今天的內容就是這麼多了。每天學習一點點，日積月累，你會發現你已經完全掌握編程了。記住要多動手練習。