字型粗細的使用 CSS入門基礎(007)

2021-10-11 18:41:03 字數 2058 閱讀 7559

今天我們接著分享字型的內容。

在css中,我們使用font-weight屬性來定義字型粗細。字型的粗細和字型的大小是不一樣的,粗細指的是字型的肥瘦,而大小指的是字型的高寬。

語法:

font-weight:粗細值
屬性取值有兩種,一種是關鍵字,一種是100~900之間的數值。

關鍵字:

font-weight屬性取值

屬性值說明

normal

預設值,正常

lighter

較細bold

較粗bolder很粗

屬性取值:

100,200,300,400,500,600,700,800,900;其中400相當於字型normal,700相當於bold。100表示最細,900表示最粗,值越大表示越粗,值越小表示越細。

在實際開發中,對於中文網頁,一般僅用到bold、normal兩個屬性,不建議使用數值作為font-weight屬性值。

示例**:

字型粗細為:lighter

字型粗細為:normal

字型粗細為:bold

字型粗細為:bolder

示例**:

字型粗細為:100

字型粗細為:400

字型粗細為:700

字型粗細為:900

font-style字型斜體:

之前我們在分享關於html中斜體時,說到今後我們介紹關於css的斜體,這個就是css中字型斜體的屬性。

語法:

font-style:屬性值;
font-sytle

屬性值說明

normal

預設值,正常體

italic斜體

示例**:

字型樣式為normal

字型樣式為italic

字型樣式為oblique

從上面**中,可以發現屬性值italic和oblique,都可以表示斜體,但是他們二者是有區別的。

區別在於,italic是字型的乙個屬性,但是並非所有的字型都有italic屬性,而oblique則是將字型直接進行傾斜設定。

css注釋:

在html中,為了**便於理解,查詢或者對於**的作用進行提示等,我們需要給**加注釋。在html中,注釋的寫法如下,

html注釋
而在css中,注釋寫入如下,

css注釋/*注釋的內容*/
/*表示注釋開始,*/表示注釋結束。

示例**:

區域一

區域二

大家如果記憶起來有點困難,我給大家分享個經驗,html**中需要瀏覽器解釋**,並展示給大家看,瀏覽器對於左尖括號開頭的符號較為敏感,所以html的注釋就是左尖括號開頭,但是又需要讓瀏覽器明白它是注釋,緊跟著乙個感嘆號,這樣就會容易記些。

而css**使用的注釋,則是c語言中常用的注釋,這個比較好記憶的。

字型顏色的使用 CSS入門基礎(006)

今天我們接著說字型樣式的內容。color字型顏色 語法 color 顏色值 顏色值可以是乙個關鍵字,也可以是乙個十六進製制的rgb值。關鍵字的顏色值,其實就是比較常用的顏色的一種列舉值,比如 black,黑色 white,白色 green,綠色 blue,藍色 red,紅色 gray,灰色 等等 示...

字型樣式 CSS入門基礎(005)

今天我們分享關於字型樣式的內容。在網頁開發中,需要優先考慮頁面的文字樣式屬性。包括字型 大小 粗細 顏色等 css字型樣式屬性 屬性值說明 font family 字型型別 font size 字型大小 font style 字型斜體 color 字型顏色 除了字型顏色以外,其他文字屬性都是font...

邊框樣式的使用 CSS入門基礎(011)

今天我們說說邊框樣式的內容。在網頁中,任何塊元素和行內元素都可以設定邊框屬性。像div img table span都可以設定邊框屬性的。設定邊框一般有三個方面,一是邊框的寬度,二是邊框的外觀,三是邊框的顏色。語法 border width 畫素值 border style 屬性值 border c...