CSS字型樣式屬性和外觀樣式屬性

2021-10-01 03:57:47 字數 3511 閱讀 7937

1css字型樣式屬性

1.1font-size:字型大小大小

font-size屬性用於設定字型大小,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用畫素單位px,絕對長度單位使用較少。具體如下:

1.2 font-family:字型

font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等,例如將網頁中所有段落文字的字型設定為微軟雅黑,可以使用如下css樣式**:

p可以同時指定多個字型,中間以逗號隔開,表示如果瀏覽器不支援第乙個字型,則會嘗試下乙個,直到找到合適的字型。

常用技巧:

1. 現在網頁中普遍使用14px+。

2. 盡量使用偶數的數字字型大小。ie6等老式瀏覽器支援奇數會有bug。

3. 各種字型之間必須使用英文狀態下的逗號隔開。

4. 中文字型需要加英文狀態下的引號,英文本型一般不需要加引號。當需要設定英文本型時,英文本型名必須位於中文字型名之前。

5. 如果字型名中包含空格、#、$等符號,則該字型必須加英文狀態下的單引號或雙引號,例如font-family: "times new roman";。

6. 盡量使用系統預設字型,保證在任何使用者的瀏覽器中都能正確顯示。

1.3 css unicode字型

在 css 中設定字型名稱,直接寫中文是可以的。但是在檔案編碼(gb2312、utf-8 等)不匹配時會產生亂碼的錯誤。xp 系統不支援 類似微軟雅黑的中文。

方案一: 你可以使用英文來替代。 比如 font-family:"microsoft yahei"。

方案二: 在 css 直接使用 unicode 編碼來寫字型名稱可以避免這些錯誤。使用 unicode 寫中文字型名稱,瀏覽器是可以正確的解析的。

font-family: "\5fae\8f6f\96c5\9ed1",表示設定字型為「微軟雅黑」。

可以通過escape()  來測試屬於什麼字型。

字型名稱  

英文名稱

unicode 編碼

宋體simsun             

\5b8b\4f53

新宋體nsimsun

\65b0\5b8b\4f53

黑體simhei   

\9ed1\4f53

微軟雅黑

microsoft yahei

\5fae\8f6f\96c5\9ed1

楷體_gb2312

kaiti_gb2312

\6977\4f53_gb2312

隸書lisu

\96b6\4e66

幼園youyuan

\5e7c\5706

華文細黑

stxihei

\534e\6587\7ec6\9ed1

細明體mingliu

\7ec6\660e\4f53

新細明體

pmingliu

\65b0\7ec6\660e\4f53

為了照顧不同電腦的字型安裝問題,我們盡量只使用宋體和微軟雅黑中文字型

1.4 font-weight:字型粗細

字型加粗除了用 b  和 strong 標籤之外,可以使用css 來實現,但是css 是沒有語義的。

font-weight屬性用於定義字型的粗細,其可用屬性值:normal、bold、bolder、lighter、100~900(100的整數倍)。

小技巧:

數字 400 等價於 normal,而 700 等價於 bold。  但是我們更喜歡用數字來表示。  

1.5 font-style:字型風格

字型傾斜除了用 i  和 em 標籤之外,可以使用css 來實現,但是css 是沒有語義的。

font-style屬性用於定義字型風格,如設定斜體、傾斜或正常字型,其可用屬性值如下:

normal:預設值,瀏覽器會顯示標準的字型樣式。

italic:瀏覽器會顯示斜體的字型樣式。

oblique:瀏覽器會顯示傾斜的字型樣式。

小技巧:

平時我們很少給文字加斜體,反而喜歡給斜體標籤(em,i)改為普通模式。

1.6 font:綜合設定字型樣式 (重點)

font屬性用於對字型樣式進行綜合設定,其基本語法格式如下:

選擇器使用font屬性時,必須按上面語法格式中的順序書寫,不能更換順序,各個屬性以空格隔開。

注意:其中不需要設定的屬性可以省略(取預設值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。

2css外觀屬性

2.1color:文字顏色

color屬性用於定義文字的顏色,其取值方式有如下3種:

1.預定義的顏色值,如red,green,blue等。

2.十六進製制,如#ff0000,#ff6600,#29d794等。實際工作中,十六進製制是最常用的定義顏色的方式。

3.rgb**,如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是,如果使用rgb**的百分比顏色值,取值為0時也不能省略百分號,必須寫為0%。

2.2 line-height:行間距

ine-height屬性用於設定行間距,就是行與行之間的距離,即字元的垂直間距,一般稱為行高。line-height常用的屬性值單位有三種,分別為畫素px,相對值em和百分比%,實際工作中使用最多的是畫素px

一般情況下,行距比字型大小大7.8畫素左右就可以了。

2.3text-align:水平對齊方式

text-align屬性用於設定文字內容的水平對齊,相當於html中的align對齊屬性。其可用屬性值如下:

left:左對齊(預設值)

right:右對齊

center:居中對齊

是讓盒子裡面的內容水平居中, 而不是讓盒子居中對齊

2.4text-indent:首行縮排

text-indent屬性用於設定首行文字的縮排,其屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%,允許使用負值, 建議使用em作為設定單位。

1em 就是乙個字的寬度   如果是漢字的段落, 1em 就是乙個漢字的寬度

2.5text-decoration 文字的裝飾

text-decoration   通常我們用於給鏈結修改裝飾效果

css外觀屬性和字型樣式屬性

1.color 文字顏色,屬性值三種寫法1.直接寫顏色值,red,blue,green.2.顏色的十六進製制值 ff00000 推薦寫法 3.rgb 比如紅色rgb 255,0,0 2.line height 行間距,也就是行與行之間的距離。行間距的單位用畫素px 3.text align 水平方向...

CSS 字型樣式屬性和外觀屬性

絕對長度單位 font family font weight font style 綜合設定 外觀屬性 格式 font size 字型大小大小 設定字型大小的大小,設定時可以分為設定為相對長度單位和絕對長度單位。但是常用 相對長度單位。em相對於當前內文字的字型尺寸,2em就是2個字型長度 當前物件...

08CSS 字型樣式屬性和外觀屬性

font size 字型大小大小 font size屬性用於設定字型大小,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用畫素單位px,絕對長度單位使用較少。font family 字型 font family屬性用於設定字型。網頁中常用的字型有宋體 微軟...