HTML5前端開發入門之CSS文字屬性

2021-09-05 00:26:27 字數 1474 閱讀 3073

1.規定文字樣式的屬性

格式:font-style: italic;

取值:normal:正常的,預設是正常的

italic:傾斜的

快捷鍵:

fs+tab鍵 == font-style:italic;

fsn+tab鍵 == font-style:normal;

2.規定文字粗細的屬性

格式:font-weight: bold;

取值:1.單詞取值:

bold  加粗

bolder  比加粗還要粗

lighter  細線,預設就是細線

快捷鍵:同理(fw+tab)  其中fwbr+tab == font-weight: bolder;

2.數字取值:

100-900之間整百的數字,其中100是細線,900是加粗

3.規定文字大小的屬性

格式:font-size: 30px;

單位:px(畫素 pixel)

注意點:通過font-size設定大小,必須帶單位,也就是必須寫px

快捷鍵:fz30+tab == font-size: 30px;

4.規定文字字型的屬性

font-family: "華文楷體"

注意點:

1.取值為中文時,一定要用雙引號或者單引號括起來

2.設定的字型必須是使用者電腦裡已經安裝的字型

3.ff+tab == font-family:

5.如果設定的字型不存在,那麼系統會使用預設的字型來顯示

如果設定的字型不存在,而我們又不想用預設的字型來顯示,怎麼辦?

可以給字型設定備選方案

格式:font-family:"字型1","備選方案1,...";

6.如果想給中文和英文分別單獨設定字型屬性,怎麼辦?

但凡是中文字型,裡面都包含了英文

但凡是英文本型,裡面都沒有包含中文

也就是說,中文字型可以處理英文,英文本型不可以處理中文

如果想給頁面中的英文單獨設定字型,可以將英文本型放在前面,中文字型寫在備選字型

7.補充在企業開發中最常見的字型有以下幾個

中文:宋體/黑體/微軟雅黑

英文:「times new roman」/arial

8.還需要知道一點,並不是名稱是英文就一定是英文本型

因為中文字型都有自己的英文名稱,所以看是不是中文字型主要看它能不能處理中文

9.文字屬性的簡寫:

格式:font:style weight size family;

例如:font:italic hold 30px 」華文行楷「;

注意點:

1.在這種縮寫格式中,有的屬性值可以省略(style可以省略,weight可以省略)

2.在這種縮寫格式中style和weight的位置可以交換

3.在這種縮寫格式中,有點屬性值是不可以省略的(size,family不可以省略)

4.在這種縮寫格式中,size和family位置不可以隨便亂放

HTML5前端開發入門之CSS浮動流

1.什麼是浮動元素的脫標?脫標 脫離標準流 當某乙個元素脫標以後,那麼這個元素看上去就像被從標準流中刪除了一樣,這個就是浮動元素的脫標 2.浮動元素脫標之後會有什麼影響?如果前面乙個元素浮動了,而後面乙個元素沒有浮動,那麼這個時候前面的乙個元素就會蓋住後面的乙個元素 1.浮動元素排序規則 1.1相同...

HTML5前端開發入門之CSS定位流

1.定位流分類 1.1相對定位 1.2絕對定位 1.3固定定位 1.4靜態定位 預設情況下元素就是靜態定位 2.什麼是相對定位?相對於自己在原來標準流中的位置進行移動 格式 position relative top 20px left 20px 3.相對定位注意點 3.1相對定位是不脫離標準流的,...

HTML5前端開發入門之video audio標籤

1.什麼是video標籤?格式1 video 標籤的屬性 srcautoplay controls 用於告訴video標籤是否需要控制條 poster loop preload muted 靜音 width 寬度 height 高度 格式2 這個時候w3c未了解決這個問題,所以推出了第二個video...