day 3 css字型與文字樣式

2021-08-20 05:44:16 字數 1583 閱讀 8559

用時:40分鐘

font-family:

定義文字的字型系列。(瀏覽會根據本地的字型來載入定義的文字字型系列中按順序來匹配是否有該字型,沒有就繼續往後匹配直到有匹配的字型出現,沒有則是預設字型。)

例子:p對於其中是否加單(雙)引號是因為字型名中存在空格或者字型名包括#、$的時候就要加上單(雙)引號

font-style

:用於規定斜體文字。可選值有:normal(預設)-文字正常顯示、italic-文字斜體顯示、oblique文字傾斜顯示

對於後兩者的區別:

italic:瀏覽器會顯示乙個斜體的字型樣式。italic是使用了文字本身的斜體屬性。

oblique:瀏覽器會顯示乙個傾斜的字型樣式。讓沒有斜體屬性的文字做傾斜處理。

font-variant

:設定小型大寫字母。可選值有small-caps

font-weight

:設定文字的粗細。可選值有normal(預設)、bold-設定文字為粗體、bolder-比繼承的更粗的字型、lighter-比繼承的更細的字型、100-900px(100-對於最細的字型、400-對應normal、900-對應最粗的字型)

font-size

:設定文字的大小(預設文字大小是16px=1em)。font-size的值可以是絕對值或者相對值。

單位有px(物理畫素)、em(相對父元素的的大小。例如父元素的font-size:20px,則1em=20px

)、%(相對父元素的大小

)各自動優缺點:

絕對值:1:將文字設定為特定的大小2:不允許使用者在瀏覽器中改變大小(不利於可用性)3絕對大小在確定輸出物理尺寸的時很有用

相對值:1:相對於周圍元素來設定2:允許使用者在瀏覽器改變文字

大小font屬性連寫的書寫順序如下(且至少要有font-size和font-family)

text-indent:屬性對文字段落第一行設定縮排

可以裡把text-indent設定為負值來製造』懸掛縮排『

text-align:元素中的

文字行互相之間的對齊方式

屬性值有:left、right、center、justify、inherit

word-spacing:設定單詞之間的間距(負值表示緊湊)

letter-spacing

:設定字母之間的間距(負值表示緊湊)

text-transform

:處理文字的大小寫

屬性值:none、uppercase、lowercase、capitalize(首字母大寫)

text-decoration

:文字裝飾,可以多個屬性值一起用在上面

underline、overline、line-thr

ought、none、blink(相容性問題)

text-shadow

:設定文字陰影(可以多個陰影設定)

屬性值:水平陰影、垂直陰影、模糊距離、陰影的顏色(以上四個屬性值都是可選)

line-height

:設定文字的行高(推薦位1.5-2)

color

:設定文字的的顏色 接受型別有四種: #ccc、red、rgb(0,0,0)、inherit

CSS字型 文字樣式屬性

1 字型屬性 1.2 字型大小屬性 1.3 字型粗細屬性 1.4 字型樣式屬性 1.5 字型復合屬性 2 文字外觀屬性 css fonts 字型 屬性用於定義字型系列 大小 粗細 和文字樣式 如斜體 css使用 font family屬性來定義字型 pcss使用 font size屬性來定義字型 語...

CSS3文字與字型相關樣式

1 功能 給頁面上的文字新增陰影效果。2 使用方法 text shadow length length length color 陰影離開文字的橫方向距離 縱方向距離 陰影的模糊半徑 陰影的顏色 注意 陰影離開文字的橫方向距離 縱方向距離 必須指定,可指定負值。陰影的模糊半徑 代表陰影向外模糊時的模...

CSS3 文字與字型相關樣式

給文字新增陰影 text shadow屬性text shadow length length length color前三個length分別指陰影離開文字橫向距離 縱向距離 這兩個引數允許值為負 和模糊半徑 值越大模糊範圍越大,預設為0,不模糊 color指定陰影的顏色 div讓文字換行 很多瀏覽器...