CSS文字屬性

2022-10-10 16:51:12 字數 3770 閱讀 6619

css文字:

屬性

描述

color

設定文字顏色

direction

設定文字方向。

line-height

設定行高。

letter-spacing

設定字元間距。

text-align

對齊元素中的文字。

text-decoration

向文字新增修飾。

text-indent

縮排元素中文字的首行。

text-shadow

設定文字陰影。

text-transform

控制元素中的字母。

unicode-bidi

設定文字方向。

white-space

設定元素中空白的處理方式。

word-spacing

設定字間距。

1.縮排文字:text-indent屬性;

(1)用法:text-indent 屬性規定文字塊中(塊級元素)首行文字的縮排。允許使用負值。如果使用負值,那麼首行會被縮排到左邊(懸掛縮排)。

(2)可能的值:

描述

length

定義固定的縮排。預設值:0。

%定義基於父元素寬度的百分比的縮排。

inherit

規定應該從父元素繼承 text-indent 屬性的值。

ps: text-indent 屬性可以繼承

2.水平對齊:text-align屬性

(1)用法:text-align 屬性規定元素中的文字的水平對齊方式。

(2)可能的值:

描述

left

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

right

把文字排列到右邊。

center

把文字排列到中間。

justify

實現兩端對齊文字效果。

inherit

規定應該從父元素繼承 text-align 屬性的值。

ps:將塊級元素或表元素居中,要通過在這些元素上適當地設定左、右外邊距來實現。

3.字間隔:word-spacing 屬性

(1)用法:word-spacing 屬性增加或減少單詞間的空白(即字間隔);

(2)關於「字」的定義:

css 把「字(word)」定義為任何非空白符字元組成的串,並由某種空白字元包圍。這個定義沒有實際的語義,它只是假設乙個文件包含由乙個或多個空白字元包圍的字。

(3)可能的值:(允許使用負值)

描述

normal

預設。定義單詞間的標準空間。

length

定義單詞間的固定空間。

inherit

規定應該從父元素繼承 word-spacing 屬性的值。

ps: 如果指定為長度值,會調整字之間的通常間隔;所以,normal 就等同於設定為 0。允許指定負長度值,這會讓字之間擠得更緊。

4.字母間隔:letter-spacing 屬性

(1)用法:字母間隔修改的是字元或字母之間的間隔;

(2)可能的值:(允許使用負值)

描述

normal

預設。規定字元間沒有額外的空間。

length

定義字元間的固定空間(允許使用負值)。

inherit

規定應該從父元素繼承 letter-spacing 屬性的值。

5. 字元轉換:text-transform屬性

(1)用法:處理文字的大小寫;

(2)可能的值:

描述

none

預設。定義帶有小寫字母和大寫字母的標準的文字。

capitalize

文字中的每個單詞以大寫字母開頭。

uppercase

定義僅有大寫字母。

lowercase

定義無大寫字母,僅有小寫字母。

inherit

規定應該從父元素繼承 text-transform 屬性的值。

6.文字裝飾:text-decoration屬性

(1)用法:text-decoration 屬性規定新增到文字的修飾;

(2)可能的值:

描述

none

預設。定義標準的文字。

underline

定義文字下的一條線。

overline

定義文字上的一條線。

line-through

定義穿過文字下的一條線。

blink

定義閃爍的文字。

inherit

規定應該從父元素繼承 text-decoration 屬性的值。

ps: ie、chrome 或 safari 不支援 "blink" 屬性值。且text-decoration 值會替換而不是累積起來。

7.處理空白符:white-space屬性:

(1)用法:white-space 屬性設定如何處理元素內的空白。

(2)可能的值:

描述

normal

預設。空白會被瀏覽器忽略。

pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。

nowrap

文字不會換行,直到遇到

標籤為止。

pre-wrap

保留空白符序列,但是正常地進行換行。

pre-line

合併空白符序列,但是保留換行符。

inherit

規定應該從父元素繼承 white-space 屬性的值。

(3)小結:

空白符

換行符

自動換行

pre-line

合併保留

允許normal

合併忽略

允許nowrap

合併忽略

不允許pre

保留保留

不允許pre-wrap

保留保留

允許

8.文字方向:direction屬性:

(1)用法:direction 屬性規定文字的方向 / 書寫方向,影響塊級元素中文字的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最後一行的位置。

(2)可能的值:

描述

ltr預設。文字方向從左到右。

rtl文字方向從右到左。

inherit

規定應該從父元素繼承 direction 屬性的值。

ps: 對於行內元素,只有當 unicode-bidi 屬性設定為 embed 或 bidi-override 時才會應用 direction 屬性。

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