1. 字體傾斜
font-style屬性: 為文本設(shè)置字體樣式.
常用取值:
normal: 正常顯示文本. 快捷鍵: fs+tab.
italic: 顯示斜體文本. 快捷鍵: fsn+tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font style</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
2. 字體粗細(xì)
font-weight屬性: 設(shè)置文本的字體粗細(xì)程度.
常用取值:
normal: 默認(rèn)值, 表示標(biāo)準(zhǔn)的字體粗細(xì); 快捷鍵: fwn+tab.
bold: 表示加粗文本; 快捷鍵: fwb+tab.
lighter: 表示更輕的字體權(quán)重; 快捷鍵: fwl+tab
bolder: 表示更重的字體權(quán)重; 快捷鍵: fwbr+tab
數(shù)字值: 可以使用數(shù)值來(lái)指定相對(duì)于標(biāo)準(zhǔn)字體的粗細(xì)程度, 如100, 200, 300等, 或使用絕對(duì)值的粗細(xì)程度, 如400, 700, 900等.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font weight</title>
<style>
p {
font-weight: bold;
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
3. 字體大小
font-size屬性: 設(shè)置文本的字號(hào)大小. 它可以應(yīng)用于任何具有文本內(nèi)容的HTML元素.
在CSS中, 可以使用像素(px), 百分比(%), em, rem等單位來(lái)指定字號(hào)大小.
以下是一些示例:
font-size: 16px; 使用像素作為單位; 快捷鍵: fz16 + tab.
font-size: 80%; 相對(duì)于父元素字號(hào)的百分比; 快捷鍵: fz80% + tab.
font-size: 2em; 相對(duì)于父元素字號(hào)的倍數(shù); 快捷鍵: fz2e + tab.
font-size: 0.8rem; 相對(duì)于根元素(通常是<html>)字號(hào)的倍數(shù); 快捷鍵: fz0.8r + tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font size</title>
<style>
p {
font-size: 30px;
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
4. 文本字體
font-family屬性: 用于指定文本的字體系列. 它可以應(yīng)用于任何具有文本內(nèi)容的HTML元素.
在CSS中, 可以通過(guò)指定一系列字體名稱或字體族來(lái)設(shè)置字體系列.
在字體系列的列表中, 瀏覽器會(huì)按優(yōu)先級(jí)依次嘗試使用字體, 直到找到合適的可用字體為止.
值: 字體名稱, 默認(rèn)為宋體.
常用字體: 宋體(SimSun), 黑體(SimHei), 微軟雅黑(Microsoft YaHei).
快捷鍵: ff+tab font-family:;
注意事項(xiàng):
* 1. 中文字體中包含英文, 英文字體沒(méi)有包含中文, 設(shè)置后能影響到中文的就是中文字體否則就是英文字體.
* 2. 如果取值是中文, 需要加單引號(hào)或雙引號(hào).
* 3. 設(shè)置的字體是電腦系統(tǒng)上安裝的了的字體.
* 4. 設(shè)置的字體不存在, 會(huì)使用默認(rèn)使用宋體顯示.
* 6. 可以設(shè)置備選方案, 設(shè)置多個(gè)值, 值與值之間用逗號(hào)隔開(kāi).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font family 1</title>
<style>
p {
font-family: '楷體', '微軟雅黑';
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
讓中英文分別使用不同的字體: 預(yù)備方案先設(shè)置英文字體再設(shè)置中文字體, 讓字母使用英文字體, 中文使用中文字體.
遇到中文時(shí)英文字體不起作用就使用備用的字體方案.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font family 2</title>
<style>
p {
font-family: Arial, '楷體';
}
</style>
</head>
<body>
<p>abc 你好！</p>
</body>
</html>
5. 文字樣式
font屬性: 設(shè)置文字樣式的屬性, 它可以接受多個(gè)值, 用空格分隔.
font: font-style font-weight font-size/line-height font-family;
注意事項(xiàng):
font-style與font-weight的值可以省略, 可以互換位置.
font-size與font-family的值不可以省略, 不可以互換位置, 必須寫(xiě)在的最后兩位.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font</title>
<style>
p {
/*
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: '楷體';
*/
font: italic bold 30px '楷體';
}
</style>
</head>
<body>
<p>
abc, 你好！
</p>
</body>
</html>
6. 字體顏色
color屬性: 設(shè)置文字的顏色.
可以使用以下不同的值來(lái)定義顏色:
* 1. 預(yù)定義顏色名稱(如red, blue, green等).
* 2. 十六進(jìn)制顏色值(如#FF0000表示紅色); 每?jī)晌皇M(jìn)制為一組, 分別代表R/G/B.
* 3. RGB顏色值(如rgb(255, 0, 0)表示紅色); 三原色數(shù)字代碼光源的亮度, 0不發(fā)光, 255最亮.
* 4. RGBA顏色值(如rgba(255, 0, 0, 0.5)表示帶有透明度的紅色, 透明度值范圍為0-1).
* 5. HSL顏色值(如hsl(0, 100%, 50%)表示紅色).
* 6. HSLA顏色值(如hsla(0, 100%, 50%, 0.5)表示帶有透明度的紅色, 透明度值范圍為0-1).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字顏色屬性</title>
<style>
p {
color: rgba(00, 255, 255, 0.5);
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
7. 字體裝飾
text-decoration屬性: 設(shè)置文字的裝飾效果, 可以添加或刪除文字的下劃線, 刪除線, 上劃線.
常用取值:
none: 無(wú)任何裝飾效果(默認(rèn)值); 快捷鍵: td+tab.
underline: 添加下劃線; 快捷鍵: tau+tab.
overline: 添加上劃線; 快捷鍵: tao+tab.
line-through: 添加刪除線; 快捷鍵: tal+tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text decoration</title>
<style>
p {
text-decoration: overline;
}
a { /* 取出a標(biāo)簽的下劃線 */
text-decoration: none;
}
</style>
</head>
<body>
<p>你好！</p>
<a href="https:www.baidu.com">百度</a>
</body>
</html>
8. 水平對(duì)齊
text-align屬性: 設(shè)置文字在其容器中的水平對(duì)齊方式.
常用取值:
left: 將文字左對(duì)齊; 快捷鍵: ta+tab.
right: 將文字右對(duì)齊; 快捷鍵: tar+tab.
center: 將文字居中對(duì)齊; 快捷鍵: tac+tab.
justify: 將文字兩端對(duì)齊, 盡可能平均分布在容器中.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text align</title>
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-653563.html
9. 字體縮進(jìn)
text-indent屬性: 用于設(shè)置文本塊(block-level element)的首行縮進(jìn)量.
通過(guò)設(shè)置text-indent, 可以在段落或其他塊級(jí)元素的每一行的開(kāi)頭添加一個(gè)空格或指定的縮進(jìn)值.
常用取值:
* 1. 像素值(px): 可以使用具體的像素?cái)?shù)值來(lái)設(shè)置縮進(jìn)值. 快捷鍵: ti2+tab --> text-indent: 2px.
* 2. em單位(em): em單位是相對(duì)于當(dāng)前元素的字體大小的倍數(shù). 快捷鍵: ti2e+tab --> text+indent: 2em.
* 3. 百分比(%): 可以使用百分比值來(lái)相對(duì)于父元素的寬度來(lái)設(shè)置縮進(jìn)值. 快捷鍵: ti80% --> text-indent: 80%.
* 4. 繼承值(inherit) 可以使用inherit關(guān)鍵字讓元素繼承父元素的text-indent值.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text indent</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>hello world!</p>
</body>
</html>
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-653563.html
到了這里，關(guān)于21.1 CSS 文字樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
