溫故知新 CSS學習筆記(字型樣式屬性)

2021-10-03 08:54:38 字數 1345 閱讀 7051

一、font-size:字型大小大小

該屬性可以使用相對長度單位(推薦),也可以使用絕對長度單位,推薦使用畫素單位px。

相對長度單位     說明

em                    相對於當前物件內文字的字型尺寸

px                     畫素(推薦)

絕對長度單位     說明

in                      英吋

cm                    厘公尺

mm                  公釐

pt                     點

tip:谷歌瀏覽器預設的字型大小大小是16 px。

[樣例**]

二、font-family:字型

該屬性用於設定字型,網頁中常用的字型有宋體(比較適合印刷)、微軟雅黑、黑體等。

[樣例**]

小貼士:

css unicode編碼

在css直接使用unicode編碼來寫字型名稱可以避免一些瀏覽器不識別的問題,使其可以正確解析。

中文名英文名

unicode

宋體simsun

\5b8b\4f53

黑體simhei

\9ed1\4f53

新宋體nsimsun

\65b0\5b8b\4f53

楷體kaiti

\6977\4f53

微軟正黑體

microsoft jhenghei

\5fae\x8f6f\6b63\9ed1\4f53

微軟雅黑

microsoft yahei

\5fae\8f6f\96c5\9ed1

三、font-weight:字型粗細

字型加粗除了使用b和strong標籤外,還可以使用css來實現,但是css是沒有語義的。

normal:正常字型(不加粗),相當於400

bold:粗體,相當於700

bolder:特粗體

lighter:細體

number:100/200/300...900 (建議用數字,解析起來更快)

[樣例**]

四、font-style:字型風格

字型傾斜除了用i和em標籤之外,還可以使用css來實現,但是css是沒有語義的。

normal:正常字型(讓斜體變正常)

italic:斜體

[樣例**]

溫故知新 css基礎

css練習 專案參考至mdn 點此檢視效果哦 任務介紹 為整體卡片的容器提供乙個固定的寬 高,背景顏色,邊框,以及邊框圓角等等。為header提供乙個漸變的背景顏色,從更暗到更亮,加上圓角,配合在卡片容器上設定的圓角。為footer提供乙個漸變的背景顏色,從更亮到更暗,加上圓角,配合在卡片容器上設定...

溫故知新 css布局

本文針對多種css布局進行解析 github 浮動 float left 將元素浮動到左側。right 將元素浮動到右側 none 預設 不浮動 inherit 繼承父元素的浮動屬性 定位 position static 預設 靜態定位 將元素放在文件布局流的預設位置 relative 相對定位 允...

css溫故知新 彈性盒子

css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。通過display flex 來指定盒子型別 彈性父元素屬性 flex direction 指定了彈性子元素在父容器中的位置。flex direction...