CSS系列 CSS文字樣式

2021-09-08 17:25:38 字數 3046 閱讀 4216

在css中字型通過font-family屬性來設定。

font-family: verdana, arial, helvetica, sans-serif;

上面的字型設定告訴瀏覽器首先在訪問者的計算機中尋找verdana字型。如果該訪問者的計算機中沒有verdana字型,則尋找arial字型。若沒有arial字型,再依次尋找helvetica、sans-serif字型。如果這4種字型都沒有,則使用瀏覽器的預設字型顯示。

font-family屬性可以同時宣告多種字型,字型之間用逗號分隔開。另外一些字型的名稱中間會出現空格,如times new roman,這時需要用雙引號將其引起來,使瀏覽器知道這是一種字型的名稱。

css通過font-size屬性來設定文字的大小。

font-size: 12px;

長度單位:

◊ px 表示在瀏覽器上1個畫素的大小;

◊ em  1em表示在其父元素中字母m的標準寬度;

◊ ex   1ex表示字母x的標準高度。

css中通過line-height屬性設定。在css中line-height的值表示兩行文字之間基線的距離,即每行文字的高度。如果給文字加上下劃線,下劃線的位置就是文字的基線。

line-height: 30px;

除了可以使用px等作為行高的單位,也可以不加任何單位,此時行高應該寫成與字型大小的比值。

line-height: 1.5;

css中字型、大小和行高的組合:

font: 12px/18px verdana, arial, helvetica, sans-serif;

font: 12px/1.5 verdana, arial, helvetica, sans-serif;

color: blue;

color: #0000ff;

color: rgb(0,0,255);

color: rgb(0%,0%,100%);

white-space: nowrap;

屬性型別

說明font-family

字型字型型別

font-style

字型字型樣式,包括:normal、italic(斜體)、oblique(傾斜)

font-variant

字型字型大小寫,包括:normal、small-caps(小型的大寫字母字型)

font-weight

字型字型粗細

font-size

字型字型大小

font

字型(復合屬性)

字型樣式,可以包含所有字型屬性的宣告值

color

顏色字型顏色

word-spacing

文字詞間距

letter-spacing

文字字元間距

text-decoration

文字文字修飾線,包括:none(預設值)、blink(閃爍)、underline(下劃線)、line-through(中劃線)、overline(上劃線)

vertical-align

文字文字垂直對齊方式,包括:auto、baseline、sub、supper、top、text-top、middle、bottom、text-bottom、length。

text-transform

文字文字大小寫,包括:none(預設值)、capitalize(首字母大寫)、uppercase(大寫)、lowercase(小寫)

text-align

文字文字的水平對齊方式,包括:left、right、center、justify(兩端對齊)

text-indent

文字首行縮排

line-height

文字行高 屬性

型別說明

font-size-adjust

字型是否強制對文字使用同一尺寸

font-stretch

字型是否橫向拉伸變形字型

text-shadow

文字文字陰影效果

direction

文字文字流入的方向,包括:ltr(預設值,從左到右)、rtl(從右到左)、inherit(由繼承獲得)

unicode-bidi

文字定義同乙個頁面中存在不同方向讀進的文字顯示,與direction屬性一起使用 屬性

型別說明

text-shadow

文字文字陰影或模糊效果

text-overflow

文字省略文字的處理方式

word-wrap

文字文字超過指定容器的邊界時是否斷開換行

示例

text-shadow: -0.1em 0.1em #cccccc;

text-shadow: -0.1em 0.1em 0.3em #cccccc;

text-shadow: -0.1em 0.1em #cccccc,

-0.1em 0.1em 0.3em #cccccc;

text-shadow屬性的第乙個值表示水平偏移;第二個值表示垂直偏移,正值偏右或偏下,負值偏左或偏上;第三個值表示模糊半徑,可選;第四個值表示陰影是顏色,可選。

text-shadow屬性可以接受乙個以逗號分隔的陰影效果列表,並應用到元素的文字上。

text-overflow: ellipsis;

text-overflow屬性值包括:clip | ellipsis | ellipsis-word。

clip:不顯示省略標記,只是簡單的裁切。

ellipsis:當物件內文字溢位時顯示省略標記,省略標記插入的位置是最後乙個字元。

ellipsis-word:當物件內文字溢位時顯示省略標記,省略標記插入的位置是最後乙個詞。

word-wrap: break-word;

word-wrap屬性值包括:normal | break-word。

normal:連續文字換行。

break-word:內容將在邊界內換行。

CSS樣式 文字樣式

文字擷取 employorganizalistctrl listtext 文字對齊方式 text align justify 文字超出固定高度 顯示滾動條 overflow scroll 顯示邊框 border 1px dashed ff6b6b 虛線 border top style 1px so...

CSS樣式 文字

css文字屬性可定義文字外觀。通過文字屬性,可以改變文字的顏色,字元間距,對齊文字,裝飾文字,對文字縮排 color aquamarine 顏色是繼承效果 text align center 文字對齊方式 text indent 2 em 首行文字縮排2個畫素 text transform capi...

CSS 文字樣式

left center right左中右 justify 兩端對齊 inherit 繼承 行高不夠時,行與行之間後重疊 數字px 數字em 數字 基於字型大小的百分比 數字 父元素的百分比 數字px 數字em 固定值預設為0 inherit繼承 normal 預設 數字px 固定值 可為負值 inh...