CSS文本樣式屬性


1 line-height 行間距

語法:line-height:長度值|百分比;

line-height屬性用於設置行間距,就是行與行之間的距離(一行文字的高度),即字符的垂直間距,一般稱為行高。

line-height常用的屬性值單位有三種,分別為像素px,相對值em和百分比%,實際工作中使用最多的是像素px

一般情況下,行距比字號大7.8像素左右就可以了。

2 text-align 水平對齊方式

語法:text-align:left | right | center | justify

 text-align屬性用於設置元素內文本內容的水平對齊,相當於html中的align對齊屬性。該屬性對塊元素設置有效。其可用屬性值如下:

left:左對齊(默認值)

right:右對齊

center:居中對齊

justify:自適應(相當於兩端對齊)

   

3 vertical-align 垂直對齊方式

語法:vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom

4 text-indent 首行縮進

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

1em 就是一個字的寬度 如果是漢字的段落, 1em 就是一個漢字的寬度

5 letter-spacing 字間距

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

6 word-spacing 單詞間距

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

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

7 text-transform 文本字母大小寫

設置元素內文本的大小寫。

語法:text-transform:capitalize | uppercase | lowercase | none

首字母大寫 | 全部大寫 | 全部小寫 | 不改變

8 text-decoration 文本裝飾

設置元素內文本的裝飾。

語法:text-decoration:underline | overline | line-through | blink | none

下划線 | 上划線 | 貫穿線 | 閃爍 | 不改變

9 文本顏色半透明(css3)

文字顏色到了CSS3我們可以采取半透明的格式了語法格式如下:     

color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范圍 0~1之間    color: rgba(0,0,0,0.3)  

10 text-shadow 文本陰影(CSS3)

以后我們可以給我們的文字添加陰影效果了 Shadow 影子 

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

模糊不允許負值。

11 text-outline 文本輪廓(CSS3)

規定文本的輪廓。

 

 

12 換行(CSS3)

1)word-break

 規定文本自動換行的處理方法。

 屬性值:

normal:左對齊

break-all:結尾單詞斷開。中文效果與normal一致

keep-all:英文空格或連字符換行。中文離結尾最近標點符號后換行。

          

2)word-wrap 

允許長單詞URL地址換行到下一行。

 

13 text-align-last(CSS3)

 

     

14 text-overflow(CSS3)

 

 需要overflow屬性設置為"hidden"時才起作用。否則都是溢出的效果。

15 text-empahsis(CSS3)

 

16 text-justify(CSS3)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM