CSS 文字例項

2022-06-07 22:21:08 字數 1036 閱讀 1571

1、設定文字的顏色

color:red;

color:#00ff00

color:rgb(0,0,255)

2、增加或減少字元間距

letter-spacing:-0.5em

letter-spacing:20px

3、使用百分比值來設定段落中的行間距。

line-height:90%

line-height: 30px

line-height: 2

4、對齊文字

text-align: center

5、向文字新增修飾

text-decoration:overline;

text-decoration:line-through;

text-decoration:underline;

text-decoration:blink;

text-decoration:none

6、縮排文字首行

注意:一般來說,可以為所有塊級元素應用 text-indent,但無法將該屬性應用於行內元素,影象之類的替換元素上也無法應用 text-indent 屬性。不過,如果乙個塊級元素(比如段落)的首行中有乙個影象,它會隨該行的其餘文字移動。

提示:如果想把乙個行內元素的第一行「縮排」,可以用左內邊距或外邊距創造這種效果。

text-indent: 1cm

7、控制文字中的字母

text-transform:uppercase

text-transform:lowercase

text-transform:capitalize

8、禁止在元素中的文字折行,控制不換行

white-space: nowrap

9、增加段落中單詞間的距離

word-spacing: 30px;

CSS文字例項

普通段落,請注意,綠色 該段落定義了 class ex 該段落中得文字是藍色得 2.設定文字的背景顏色 本例顏色如何設定部分文字的背景顏色。這是文字 這是文字 這是文字 3.規定字元間距 本例演示如何增加或減少字元間距。this is header 4 4.使用百分比設定行間距 本例演示如何使用百分...

CSS 例項之文字的凸起與凹陷

一些頁面會有一些凹凸文字效果,這個主要是設定背景 文字陰影來達成這個效果的。文字陰影使用方法如下 text shadow 水平位置 垂直位置 模糊距離 陰影顏色 具體 如下 body div div first child div last child body div 凸起 div div 凹陷 ...

css文字屬性 文字轉換(CSS屬性)

css文字屬性 text transform 文字轉換 繼承 this property controls if and how an element s text content is capitalized.此屬性控制是否以及如何大寫元素的文字內容。these style rules makeh...