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

2021-09-16 01:22:23 字數 2425 閱讀 4817

font-size:字型大小大小

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

font-family:字型

font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等。

p

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

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

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

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

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

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

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

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

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

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

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

font-weight:字型粗細

其可用屬性值:normal、bold、bolder、lighter、100~900(100的整數倍)。

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

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

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

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

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

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

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

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

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

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

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

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

line-height:行間距

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

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

text-align:水平對齊方式

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

left:左對齊(預設值)

right:右對齊

center:居中對齊

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

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

text-decoration 文字的裝飾

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

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

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個字型長度 當前物件...