HTML鞏固練習之字型樣式

2021-08-01 22:04:36 字數 2066 閱讀 6815

字型樣式屬性包括:font-family(字型型別)、font-size(字型大小)、font-weight(字型粗細)font-style(字型斜體)color(顏色)。

1、font-family:可指定多個字型,多個字型將按優先順序排列,以逗號隔開,注意逗號一定要是英文逗號。

如果電腦上沒有定義的這些字型,瀏覽器將按照預設的字型來顯示,預設情況下是「宋體」。

**編寫:

按順序優先使用字型

瀏覽器執行效果:

2、font-size:屬性值可以有兩種使用方式,使用關鍵字和使用px作為單位的數值。

採用關鍵字的方式是相對瀏覽器預設情況下的字型大小而言。實際開發中很少使用這種方法,一般是採用畫素作為單位的數值。

**編寫:

字型大小為xx-small(最小)

字型大小為x-small(較小)

字型大小為small(小)

字型大小為medium(預設值,正常)

字型大小為large(大)

字型大小為x-large(較大)

字型大小為xx-large(最大)

瀏覽器執行效果:

**編寫:

字型大小為12px

字型大小為15px

字型大小為18px

瀏覽器執行效果:

3、color:顏色值可以有兩種方式來顯示,乙個是關鍵字乙個是16進製制的rgb。

**編寫:

字型顏色為gray(灰色)

字型顏色為orange(橙色)

字型顏色為red(紅色)

瀏覽器執行效果:

**編寫:

字型顏色為#03fca1

字型顏色為#048c02

字型顏色為#ce0592

瀏覽器執行效果:

4、font-weight:字型粗細和字型大小是不一樣的,粗細指的是字型的「肥瘦」,大小指的是字型的「高寬」。

屬性取值也有兩種方法,一種是關鍵字,一種是100~900的數值。而對於中文網頁來說,一般使用bold和normal這兩個屬性值,不建議使用數值(100~900)。

**編寫:

字型粗細為light(較細)

字型粗細為normal(預設值,正常)字型粗細為bold(較粗)

字型粗細為boder(很粗)

瀏覽器執行效果:

5、font-style:定義字型的傾斜效果。font-style屬性值為italic或oblique時,在瀏覽器預覽的效果是一樣的,不過從表中的定義就可以看出了;

italic是字型的乙個屬性,也就是說並非所有字型都有italic屬性,對於沒有italic屬性的字型可以使用oblique將該字型進行傾斜設定。

**編寫:

字型樣式為normal

字型樣式為italic

字型樣式為oblique

瀏覽器執行效果:

HTML 字型顏色和樣式

字型樣式 隸書 lisu 幼圓 youyuan 華文細黑 stxihei 華文楷體 stkaiti 華文宋體 stsong 華文中宋 stzhongsong 華文仿宋 stfangsong 方正舒體 fzshuti 方正姚體 fzyaoti 華文彩雲 stcaiyun 華文琥珀 sthupo 華文隸...

03 CSS樣式之字型樣式

屬性 含義font sytle字型風格 font weight字型粗細 font size字型大小 font family字型樣式 font綜合設定 以上1 font style 字型風格 1 normal 正常字型 一般把傾斜字型變為普通字型 2 italic傾斜字型 不常用 舉例快樂最重要 漂亮...

CSS基礎之字型樣式設定

css字型樣式設定 1.字型樣式設定 字型樣式大致有如下幾種特徵 字型型別 風格 字型粗細 字型大小 字型系列 1 字型型別 風格 font style 用於設定字型風格,可設定以下值 normal 普通字型 italic 斜體 oblique 傾斜字型 2 字型粗細 font weight 用於設...