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

2021-10-09 03:28:40 字數 1867 閱讀 5836

絕對長度單位

font-family

font-weight

font-style

綜合設定

外觀屬性

格式

font-size:字型大小大小

設定字型大小的大小,設定時可以分為設定為相對長度單位和絕對長度單位。但是常用 相對長度單位。

em相對於當前內文字的字型尺寸,2em就是2個字型長度(當前物件內文字)

px畫素,除了使用首行縮排,其他常用的就是px

in英吋

cm厘公尺

mm公釐pt點

格式

font-family:字型

字型這可以寫 字型名稱 或者 英文名稱 或者 unicode 編碼。

這裡需要注意的是,有些系統不支援中文,如:xp系統不支援類似微軟雅黑的中文。

格式

font-weight:字型粗細

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

**注意:**寫數值時400等價於normal(正常),而700等價於bold(加粗)。我們更喜歡用數字來表示。

對照表:

用於定義字型風格,如設定斜體,傾斜,或者正常字型。

常見字型風格

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

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

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

選擇器注意:必須按照這個順序寫,不能顛倒順序。但是有些屬性可以不寫,自動設定為預設值,如style,weight。

格式:color:文字顏色

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

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

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

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

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

**格式:**line-height:行間距

line-height屬性用於設定行間距,就是行與行之間的距離,即字元的垂直間距,一般稱為行高。

line-height常用的屬性值單位有三種,分別為畫素px,相對值em和百分比%,實際工作中使用最多的是畫素px

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

格式:text-align:水平對齊方式

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

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

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

text-decoration 文字的裝飾

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

值的設定

none 預設。定義標準的文字。

underline 定義文字下的一條線。下劃線 也是我們鏈結自帶的

overline 定義文字上的一條線。

line-through 定義穿過文字下的一條線。

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 水平方向...

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

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