CSS文字屬性

2021-08-01 19:16:58 字數 2391 閱讀 1518

一、可以被繼承的屬性

font-size

font-family

font-weight

font-style

line-height

color

text-align

text-indent

二、文字大小

屬性值為數值型,必須給屬性值加單位,屬性值為0時除外。

單位可以是pt、px、em  9pt=12px

em是相對文字單位,當前文字的字元大小

pt是絕對長度單位,表示多少個點

px是相對長度單位,使用比較廣泛

為了減小系統間的字型顯示差異,ie netscape mozilla的瀏覽器製作商於2023年召開會議,共同確定16px為標準字型大小預設值,即1em.預設情況下,          

1em=16px,0.75em=12px;

如果給元素中的文字大小設定為 xem的時候,就是x倍的字元大小,請參照該元素的祖先元素的字型大小,然後求倍數,若祖先元素在都沒有設定字型大小,那麼該元素字         體是相對於16px求倍數

三、文字字型:

示例:

說明:瀏覽器首先會尋找字型1、如存在就使用改字型來顯示內容,如在字型1不存在的情況下,則會尋找字型2,如字型2也不存在,按字型3顯示內容,如果字型3 也不存在;則按系統預設字型顯示;

當字型是中文字型時,需加雙引號;

當英文本型中有空格時,需加雙引號如(「times new roman」)

當英文本型只有乙個單詞組成是不加雙引號;如:(arial);

windows中文版本作業系統下,中文預設字型為宋體或者新宋體,英文本型預設為arial.

字型粗細

font-weight:normal(預設)/bold/bolder/lighter/100-900   

字型傾斜樣式

font-style :italic/oblique/normal(預設)

字型顏色

color

四、文字行高:

說明:

當單行文字的行高等於容器高時,可實現單行文字在容器中垂直方向居中對齊;

當單行文字的行高小於容器高時,可實現單行文字在容器中垂直中齊以上任意位置的定位;

當單行文字的行高大於容器高時,可實現單行文字在容器中垂直中齊以下任意位置的定位。(ie6及以下版本存在瀏覽器相容問題)

line-height 與 font-size 的計算值之差(在 css 中成為「行間距」)分為兩半,分別加到乙個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。

倍行高: 2倍 ,2倍行距;

五、文字大小、文字型別、文字粗細、文字傾斜、行高  可以簡寫成font

font:加粗 傾斜  大小/行高  型別;

其中大小和型別必須設定font才會起作用   其他屬性值若沒有設定則採用預設值  

設定文字在容器中的水平對齊方式用text-align:left/right/center/justify(該值對中文不一定起作用)

注意:這個屬性必須給容器(可以設定寬度和高度的元素)設定

text-decoration:none(預設)/underline/overline/line-through/blink(都不支援)

首行縮排text-indent

注意:這個屬性只能給容器設定

text-indent:..px   ..pt   ...em

只對容器的首行文字起作用,可以為正值或負值

字元間距:letter-spacing  對中英文都起效

詞間距:word-spacing  只對英文起作用   行內元素與行內塊元素可以看成是詞

去除行內元素和行內塊元素之間的間隙可以設定父級元素word-spacing:負值

同時設定white-space:nowrap; overflow: hidden; text-overflow:ellipsis;

可以讓單行文字超出界限的文字呈現...的形式

CSS 文字屬性

1 縮排文字 text indent 3em 段落首行縮排給定長度 只應用於塊級元素,無法將這個屬性應用與行內元素。影象之類的替換元素上也無法應用text indent屬性。可以繼承 如果要設定成負值,為了防止超出邊界,建議的寫法如下 p2 水平對齊 text align left center r...

css 文字屬性

字型顏色color 字元間距letter spacing 文字背景色background color 行間距line height 90 10px,0.3 對齊文字text align 文字修飾text decoration 取值 overline line through underline bl...

CSS 文字屬性

元素的第一行縮排乙個指定長度。縮排可以使用所有的長度單位,當使用百分數時,是表示對於其父元素的寬度進行縮排。p divdiv p關鍵字 left center right justify inherit 行高和字型大小的差值就是行間距 關鍵字 normal 表示font size的1.2倍 inhe...