前端CSS3 字型樣式

2021-10-24 01:47:05 字數 1720 閱讀 6413

一、font-family設定字型

sans-serif是專指西文中沒有襯線的字型

例如:為網頁中的文字設定字型為"宋體"。

"text/css"

>

body

或body

<

/style>

二、font-size設定字型大小

例如:設定網頁中文字的字型大小為12畫素。

"text/css"

>

body

<

/style>

三、font-weight設定字型粗細

"text/css"

>

p span

<

/style>

四、font-style設定字型樣式

"text/css"

>

p <

/style>

注意:

1、font-style可以設定字型樣式,並且有種3設定方式。

2、正常字型normal,也是font-style的預設值。

3、italic為設定字型為斜體,用於字型本身就有傾斜的樣式。

4、oblique為設定傾斜的字型,強制將字型傾斜。

(italic是字型系列(比如宋體,楷體)裡的斜體,而oblique是字型傾斜效果,對於沒有斜體的字型系列使用oblique實現斜體效果)

五、color設定字型顏色

color的值有3種設定方式:

1、英文命令顏色

p
2、rgb顏色

這個與 photoshop 中的 rgb 顏色是一致的,由 r(red)、g(green)、b(blue) 三種顏色的比例來配色。每一項的值可以是 0~255 之間的整數

例如:

p
也可以是 0%~100% 的百分數。如:

p
3、十六進製制顏色

這種顏色設定方法是現在比較普遍使用的方法,其原理其實也是 rgb 設定,但是其每一項的值由 0-255 變成了十六進製制 00-ff。

如:

p
七、 font樣式的簡寫方式

body
簡寫後:

body
注意:

1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性,其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用預設值。

2、在縮寫時 font-size 與 line-height 中間要加入「/」斜扛。

八、text-decoration新增文字修飾

1、text-decoration預設值為none, 定義標準的文字。

2、text-decoration的值為underline為定義文字下的一條線。

3、text-decoration的值為overline為定義文字上的一條線。

4、text-decoration的值為line-through為定義穿過文字下的一條線,一般用於商品折扣價。

CSS3 字型樣式

lang en charset utf 8 css3的其他屬性title type text css font face 宣告使用伺服器端字型 伺服器端字型對otf和ttf這兩種字型格式支援良好 font face p box sizing 設定width和height屬性值包含的內容。div di...

css3字型樣式

一 font family的使用 font family屬性可以設定html文字的字型樣式,eg.注意 當字型名稱中包括空格 之類的符號,則使用 font family 可以把多個字型名稱作為乙個 回退 系統來儲存。如果瀏覽器不支援第乙個字型,則會嘗試下乙個。也就是說,font family 屬性的...

CSS3字型樣式和文字樣式

body body body 上面比這種方法相容性更好一些。bodyp span 粗體樣式 box1 color的值有3種設定方式 p每一項的值可以是 0 255 之間的整數,也可以是 0 100 的百分數。p p這種顏色設定方法是現在比較普遍使用的方法.pbody 可以簡寫為 body 1 使用這...