字體樣式
| 屬性 | 作用 |
|---|---|
| font-family | 字體類型 |
| font-size | 字體大小 |
| font-weight | 字體粗細 |
| font-style | 字體風(fēng)格 |
| color | 字體顏色 |
font-family 字體類型
用法：
如下，定義 div元素內(nèi)的字體，默認(rèn)是宋體，要設(shè)定其他字體就用這個屬性進行設(shè)定，關(guān)于各字體，我用VSCode寫代碼時有補全，就不一一列出了
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
div {font-family: 'Courier New', Courier, monospace;}
</style>
</head>
<body>
<div class="x">這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
<div>這里還有一段話</div>
</body>
</html>
font-size 字體大小
用法：
<!--用法和其他的一樣，我直接放，可以接像素值 xpx，也可以接 small, medium, large關(guān)鍵字-->
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
div {font-size:15px;}
p {font-size: large;}
</style>
</head>
<body>
<div class="x">這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
<div>這里還有一段話</div>
</body>
</html>
font-weight 字體粗細
字體粗細屬性：
normal 正常粗細（默認(rèn)值)
lighter 較細
bold 較粗
bolder 很粗
100-900取值
用法：
font-weight: 900;
font-style 字體風(fēng)格
屬性：
normal 正常值，默認(rèn)的
italic 斜體
oblique 斜體
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
div {font-size:15px;font-style: italic;}
p {font-weight: 900;font-style: oblique;}
</style>
</head>
<body>
<div class="x">這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
<div>這里還有一段話</div>
</body>
</html>
效果：
color 字體顏色
屬性：
字體顏色可以用16進制RGB值來賦值，也可以用類似 red/yellow/blue/green等關(guān)鍵字來設(shè)定
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
div {font-size:15px;font-style: italic;color: #03FCA1;}
p {font-weight: 900;font-style: oblique;color:red;}
</style>
</head>
<body>
<div class="x">這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
<div>這里還有一段話</div>
</body>
</html>
效果：
注釋： /* 注釋內(nèi)容 */
在HTML中可以使用HTML的注釋
CSS也有自己的注釋方法,但要注意CSS注釋只能放在 style里，外面是不生效的
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
div {font-size:15px;font-style: italic;color: #03FCA1;}
p {font-weight: 900;font-style: oblique;color:red;}
/*這是CSS注釋*/
</style>
</head>
<body>
<div class="x">這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
<div>這里還有一段話</div>
<!--這是HTML注釋-->
/*這是CSS注釋*/
</body>
</html>
效果：可以看到 body內(nèi)的注釋并未生效
文本樣式
文本樣式主要涉及以下屬性：
text-indent 首行縮進
text-align 水平對齊
text-decoration 文本修飾
text-transform 大小寫轉(zhuǎn)換
line-height 行高
letter-spacing、word-spacing 字母間距、詞間距
首行縮進 text-indent
書上說，最好和font-size搭配使用，先定義字體大小，再定義text-indent為字體大小的兩倍，做到精確地首行縮進兩個字
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
p{
font-size: 14px;
text-indent: 28px;
}
</style>
</head>
<body>
<p>這里是另外一段話</p>
<span>正常的一段話</span>
</body>
</html>
水平對齊 text-align
屬性：
left 左對齊，默認(rèn)值
center 居中對齊
right 右對齊
·```html
這里是另外一段話
居中對齊
左對齊
右對齊
```
## 文本修飾 text-decoration 屬性： > none 去除超鏈接中的劃線效果（默認(rèn)值），主要用于去除超鏈接下的下劃線 > underline 下劃線 > line-through 中劃線（刪除線） >overline 頂劃線 誒，這里又出現(xiàn)了可以設(shè)定下劃線中劃線的格式，之前HTML的時候，記得使用 `s`可以定義中劃線，`u`定義下劃線，這里無疑是另一種方法，書上說優(yōu)先使用CSS的方法，便于格式管理 ```html
帶下劃線
帶刪除線
帶頂劃線
無法取消我s定義的中劃線
默認(rèn)的百度鏈接網(wǎng)址 ``` 效果：
## 大小寫 text-transform 屬性：只適用于英文 >none 無轉(zhuǎn)化（默認(rèn)值） >uppercase 轉(zhuǎn)換為大寫 >lowercase 轉(zhuǎn)換為小寫 >capitalizr 只將每個英文單詞首字母轉(zhuǎn)換為大寫 ```html
my room Case
MY ROOOM Case
my room case文章來源：http://www.zghlxwxcb.cn/news/detail-799092.html
``` 效果：
## 行高 line-height 用法： `line-height:像素值;` ## 字間距 letter-spacing 用法：x px `letter-spacing:像素值;`
詞間距 word-spacing(針對英文單詞)
用法：x pxword-spacing:像素值;文章來源地址http://www.zghlxwxcb.cn/news/detail-799092.html
到了這里，關(guān)于HTML--CSS--字體、文本樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)8（HTML5、CSS3、JavaScript ）CSS樣式屬性,withborder,italic | oblique,indent,padding,——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/755873-1.png)
![[HTML]Web前端開發(fā)技術(shù)2（HTML5、CSS3、JavaScript ）格式化文本標(biāo)記，定義列表，＜blockquote＞，definition description，ruby——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/753184-1.png)
