CSS文字屬性 樣式及應用

2021-09-25 04:22:20 字數 1607 閱讀 6281

color屬性用於定義文字的顏色,其取值方式有如下3種:

預定義的顏色值,如red,green,blue等。

十六進製制,如#ff0000,#ff6600等,實際工作中,十六進製制是最常用的定義顏色的方式。

rgb**,如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是,如果使用rgb**的百分比顏色值,取值0時也不能省略百分號,必須寫為0%。

line-height屬性用於設定行間距,就是行與行之間的距離,即字元的垂直間距,一般為行高。line-height常用的屬性單位有三種,分別為畫素px,相對值em和百分比%,實際工作中使用最多的是畫素px。

一般情況下,行距比字型大小大7.8畫素左右就可以了

text-align屬性用設定文字內容的水平對齊,相當於html中的align對齊屬性。其可用屬性值如下:

left:左對齊(預設值)

right:右對齊

center:居中對齊

示例

h3
text-indent屬性用於設定首行文字的縮排,其屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%,允許使用負值,建議使用em作為設定單位。

示例

p
letter-spacing屬性用於定義字間距,所謂字間距就是字元與字元之間的空白。其屬性值可為不同單位的數值,允許使用負值,預設為normal;

word-spacing屬性用於定義英文單詞之間的間距,對中文字元無效。和letter-spacing一樣,其屬性值可為不同單位的數值,允許使用負值,預設為normal。

word-spacing和letter-spacing均可對英文進行設定,不同的是letter-spacing定義為字母之間的間距,而word-spacing定義為英文單詞之間的間距。

normal 使用瀏覽器預設的換行規則

break-all 允許在單詞內執行換行

keep-all 只能自半形空格或連字元處換行。

屬性值解釋

clip

修剪文字。

ellipsis

顯示省略符號來代表被修剪的文字。

string

使用給定的字串來代表被修剪的文字。

示例

#mydiv

溢位文字懸浮展示 親測有效示例
滑鼠懸浮顯示的內容

文字顏色到了css3我們可以財局半透明的格式,語法格式如下:

color:rgba(r,g,b,a)

a是alpha 透明的意思 取值範圍是0-1之間。

以後我們可以給我們的文字新增陰影效果了 shadow 影子

屬性值解釋

h-shadow

必需。水平陰影的位置。允許負值。

v-shadow

必需。垂直陰影的位置。允許負值。

blur

可選。模糊的距離。

color

可選。陰影的顏色。參閱 css 顏色值。

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

前兩項是必填項,後兩項選填。

示例:

h1

CSS文字屬性

一 可以被繼承的屬性 font size font family font weight font style line height color text align text indent 二 文字大小 屬性值為數值型,必須給屬性值加單位,屬性值為0時除外。單位可以是pt px em 9pt 1...

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...