當前位置：妙知谷 >

遊戲數碼 >IT技術 >

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性

CSS在網頁中應用非常廣泛，今天我就來分享一些關於文本的CSS樣式屬性。一起來學習一下吧！

操作方法

（01）如圖，比如我們有一段文字hello html!。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性

（02）然後在瀏覽器中預覽一下最初始的效果。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第2張

（03）然後我們在網頁中添加style標籤，從而設置CSS樣式。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第3張

（04）如圖，書寫標籤名加花括號，這裏我使用的是p標籤。如果你用的是其他標籤，則修改為其他標籤。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第4張

（05）接着書寫書寫font-family，font-family是關於字體的屬性，這裏我設置成微軟雅黑，你也可以設置成楷體，隸書等，注意要帶上雙引號哦。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第5張

（06）接着再來預覽，可以看到字體變成微軟雅黑了哦。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第6張

（07）再來書寫屬性font-size，這個屬性是設置文本的大小的。這裏我就設置成36px，px表示像素。數值越大則文字越大。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第7張

（08）接着預覽效果，就會發覺字號變大了。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第8張

（09）接着設置font-style,這個屬性是設置文本的風格，我設置的是斜體italic，默認是normal。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第9張

（10）接着預覽效果可以看到文字變成斜體了哦。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第10張

（11）設置文本是否為粗體可以用屬性font-weight，這裏我設置為bolder，或者也可以設置成bold。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第11張

（12）這樣文字就會加粗了。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第12張

（13）而color這個屬性可以設置文本的顏色，這裏我就設置成red紅色了。你也可以設置成blue藍色，orange橙色，pink粉色等。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第13張

（14）最後，網頁文本變成紅色的了。

HTML網頁製作：[17]CSS常用樣式字體及顏色屬性 第14張

（15）貼出源代碼可以參考參考。<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">p{font-family: "微軟雅黑";font-size: 36px;font-style: normal;font-weight: bolder;color: red;}</style></head><body><p>hello html!</p></body></html>

標籤： HTML 17CSS 網頁 字體 屬性
  • 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/sm/itjishu/o39kog.html

相關內容

熱門文章

猜你喜歡

專題
推薦文章