CSS-文字相關屬性

上篇博文介紹了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兩者不能換位置,並且不能省略,而且必須擺放在最後兩位

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章