上篇博文介紹了css的固定格式,這次讓我們來看看文字的相關屬性吧!
css文字相關屬性
在我們運用開發工具的同時,瞭解工具的快捷鍵會讓我們事半功倍,我也會po出css中idea的一些快捷鍵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字相關屬性</title>
<style>
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family:"微軟雅黑";
}
</style>
</head>
<body>
<!--
1.規定文字樣式的屬性
格式:font-style: italic;
取值:
normal:正常的,默認就是正常
italic:傾斜的
快捷鍵:
fs font-style
fsn font-style: normal;
2.規定文字的粗細的屬性
格式:font-weight: bold;
單詞取值:
bold:加粗
bolder:比加粗更粗
lighter:細線 ,默認
快捷鍵:
fw font-weight
fwb font-weight: bold;
fwbr font-weight: bolder;
數字取值:
100-900之間整百數字
3.規定文字大小的屬性
格式:font-size: 30px;
單位:px(像素pixel)
注意點:通過font_size設置大小一定要帶單位
快捷鍵
fz font-size
fz30 font-size: 30px;
4.規定文字字體的屬性
格式:font-family:"微軟雅黑";
注意點:如果取值是中文,需要用雙引號或者單引號括起來
快捷鍵
ff font-family
-->
<p>
我是段落
</p>
</body>
</html>
在開發過程中我們可能還會遇到一些問題:
1、字體不存在?
系統會用默認字體
2、不想用默認字體?
給字體設置備選方案
格式:
font-family:”字體1”,”字體2”,…;
3、如果我們想給英文和中文分別單獨設置字體?
中文字體可以包含英文
英文字體不包含中文
我們可以利用這個特點,先設置英文字體,在備選方案設置中文字體
ex.
font-family:”Arial”,”宋體”;
在補充一下文字屬性的縮寫
<style>
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family:"微軟雅黑";
}
</style>
上面這段代碼可以縮寫爲:
<style>
p{
font:italic bold 30px "微軟雅黑";
}
</style>
我們可以看到可以把文字的四個屬性同時縮寫成一行
注意:
1、中間用空格隔開
2、style和weight兩者可以互換位置,也可以省略不寫
3、size和family兩者不能換位置,並且不能省略,而且必須擺放在最後兩位