CSS3 總結(三) 文字屬性(Text)

2021-10-03 14:40:35 字數 2072 閱讀 6572

屬性

描述color

color 屬性規定文字的顏色。這個屬性設定了乙個元素的前景色(在 html 表現中,就是元素文字的顏色)。屬性值:

1.預定義的顏色,如red、green、blue等。

2.規定顏色值為十六進製制值的顏色(比如 #ff0000,每兩位分別代表顏色紅綠藍),當每種顏色中的數值都是同乙個的時候可以簡寫(如#ff2200,#f20),該類方式最常用。

3.規定顏色值為 rgb **的顏色(比如 rgb(255,0,0),取值0-255,或rgb(100%,0%,0%),分別為紅綠藍)。

line-height

line-height 屬性設定行間的距離(行高),不允許使用負值。line-height 與 font-size 的計算值之差(在 css 中成為「行間距」)分為兩半,分別加到乙個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。常用屬性值單位有三種:

1.畫素px,設定固定的行間距。

2.相對值em,設定數字,此數字會與當前的字型尺寸相乘來設定行間距。

3.百分比%,基於當前字型尺寸的百分比行間距。

其中px為最常用,一般情況下,行距比字型大小大7、8畫素左右即可。

text-align

text-align 屬性規定元素中的文字的水平對齊方式,相當於html的align屬性。該屬性通過指定行框與哪個點對齊,從而設定塊級元素內文字的水平對齊方式。常用取值:

1.left 把文字排列到左邊。預設值:由瀏覽器決定。

2.right 把文字排列到右邊。

3.center 把文字排列到中間。

4.justify 實現兩端對齊文字效果。

text-indent

text-indent 屬性規定文字塊中首行文字的縮排。允許使用負值。如果使用負值,那麼首行會被縮排到左邊。取值方式:

1.不同單位的數值,如px,定義固定的縮排。預設值:0px。

2.%,相對於瀏覽器視窗的百分比的縮排。

3.em,字元寬度的倍數。建議使用該方式。

letter-spacing

letter-spacing 屬性增加或減少字元間的空白(字元間距)。該屬性定義了在文字字元框之間插入多少空間。由於字元字形通常比其字元框要窄,指定長度值時,會調整字母之間通常的間隔。因此,normal 就相當於值為 0(即不增加額外間距)。允許使用負值,這會讓字母之間擠得更緊,屬性值可以為不同單位的數值。可設定英文字母的間距

word-spacing

word-spacing 屬性增加或減少單詞間的空白。預設值:normal ,就等同於設定為 0。允許指定負長度值,這會讓單詞之間擠得更緊,對中文字元無效,屬性值可以為不同單位的數值。

color(css3新增顏色半透明)

color:rgba(r,g,b,a),a為alpha,透明意思,取值:0~1之間。

text-shadow

text-shadow 屬性應用於陰影文字,為文字新增陰影效果。

text-shadow: h-shadow v-shadow blur color;屬性取值說明:

1.h-shadow: 必需。水平陰影的位置。允許負值。

2.v-shadow: 必需。垂直陰影的位置。允許負值。

3.blur: 可選。模糊的距離。

4.color: 可選。陰影的顏色。

text-decoration

text-decoration 屬性規定新增到文字的修飾,這個屬性允許對文字設定某種效果,如加下劃線。如果後代元素沒有自己的裝飾,祖先元素上設定的裝飾會「延伸」到後代元素中,修飾的顏色由 「color」 屬性設定。取值:

1.none :預設。定義標準的文字,即不加修飾。

2.underline :定義文字下的一條線。

3.overline :定義文字上的一條線(該修飾為鏈結標籤自帶)。

4.line-through :定義穿過文字下的一條線。

5.blink :定義閃爍的文字。

注意:text-shadow可以有多組屬性,屬性組之間用逗號分隔。可以用來實現文字的凹凸效果。

凹凸效果示例:

張建文

css3文字屬性

text shadow 用來是文字產生陰影!text shadow x y blur color text stroke 用來給文字加邊框的!text stroke size color text overflow 用來處理文字溢位的。text overflow ellipsis或者clip 其中e...

css 3 常用文字屬性

一 text overflow 規定當文字溢位包含元素時發生的事情 瀏覽器支援 所有主流瀏覽器 值 clip 修剪文字 ellipsis 顯示省略符號來代表被修剪的文字 string 使用給定的字串來代表被修剪的文字 二 word break 規定自動換行的處理方法 瀏覽器支援 除opera以外的所...

css3 新增的文字屬性

1 word wrap 允許對長的不可分割的單詞進行分割並換行到下一行 2 word break 規定非中日韓文字的換行規則 3 text wrap 規定文字的換行規則 4 text shadow 向文字新增陰影 5 text overflow 規定當文字溢位包含元素時發生的事情 6 text ou...