CSS文本，css教程

CSS文本，css教程
目錄[1]文字陰影 [2]首行縮排 [3]水平對齊 [4]垂直對齊 [5]字間隔 [6]字母間隔 [7]文本轉換 [8]文本修飾 [9]空白符 [10]文本換行 [11]文本溢出 [12]文本方向文字陰影(IE8-不支援)

text-shadow:none(預設)text-shadow:[顏色color] x軸位移(x-offset) y軸位移(y-offset) 模糊半徑(blur-radius),*

　　[注意]不要加太多層陰影，會有效能問題

【文字陰影代碼查看】

 

首行縮排

text-indent:0(預設值)text-indent:具體值(可以為負值)text-indent:x%(相對於包含塊的寬度)text-indent:2em(2個漢字的字型大小)

　　[注意]text-indent只可用於區塊層級元素，且可繼承

【首行凸排】

div{    width: 200px;    border: 1px solid black;    text-indent: -1em;//關鍵代碼    padding-left: 1em;//關鍵代碼}

 【首字下沉】

<style>div{    width: 200px;    border: 1px solid black;    text-indent: 0.5em;}div:first-letter{    font-size: 30px;    float: left;}  

水平對齊

text-align: left(靠左對齊)text-align: right(靠右對齊)text-align: center(置中對齊)text-align: justify(左右對齊)(IE瀏覽器無效)

　　[注意]text-align只應用於區塊層級元素，且可繼承

div:nth-child(1){text-align: left;}div:nth-child(2){text-align: right;}div:nth-child(3){text-align: center;}div:nth-child(4){text-align: justify;}

垂直對齊

【1】行高
　　line-height屬性是指文本行基準之間的距離
　　行間距 = line-height - font-size

line-height: normal;(預設) line-height: 100%/1em/16px;(%相對於元素的字型大小)line-height: 1;(1表示縮放因子，相對於當前元素的字型大小)

　　[注意]行高適用於任何元素，且可繼承

【2】垂直對齊文本

vertical-align:baseline(基準對齊)vertical-align:sub(下標)vertical-align:super(上標)vertical-align:bottom(底端)vertical-align:text-bottom(文本底端)vertical-align:top(頂端)vertical-align:text-top(文本頂端)vertical-align:middle(置中)vertical-align:(+-n)px(元素相對於基準上下位移npx)vertical-align:x%(相對於元素的line-height值)

　　[注意]vertical-align只用於行內元素和替換元素，且不可繼承

 

字間隔(單詞間距)

word-spacing:normal(預設normal=0)word-spacing:具體值(可為負值)

　　[注意]單詞之間用空格分開，單詞之間的間距 = word-spacing + 空格大小 

 

字母間隔(字元間距)

letter-spacing: normal(預設normal=0)letter-spacing: 具體值(可為負值)

　　[注意]word-spacing和letter-spacing都可用於所有元素，且可繼承

 

文本轉換

text-transform:none(預設)text-transform:uppercase(全大寫)text-transform:lowercase(全小寫)text-transform:capitalize(首字母大寫)

　　[注意]text-transform可用於所有元素，且可繼承

文本修飾

text-decoration: none(預設，無修飾)text-decoration: overline(上劃線)text-decoration: line-through(中劃線或刪除線)text-decoration: underline(底線)

　　[注意]text-decoration可用於所有元素，但不可繼承

 

空白符(IE7-不支援pre-wrap和pre-line)

　　空白符是指空格、定位字元和斷行符號；HTML預設會把所有空白符合并成一個空格

white-space:normal;(預設)white-space:pre;(保留空白符,且防止文本換行)white-space:nowrap;(防止文本換行)white-space:pre-wrap;(保留空白符，文本正常換行)white-space:pre-line;(合并空白符，但保留分行符號)

　　[注意]white-space可用於所有元素，但不可繼承

<div>They can stay 72-hours     within the Shandong      province after they have entered China via the Qingdao International Airport.</div>

文本換行

word-wrap:normal(預設)word-wrap:break-word(截斷單詞換行,長單詞從下一行開始)word-break:normal(預設)word-break:break-all(截斷單詞換行,長單詞佔據當前行剩餘空間)word-break:keep-all(不允許截斷單詞[包括漢語],長單詞從下一行開始)

文本溢出

text-overflow:clip(文本裁剪)text-overflow:ellipsis(顯示省略標誌)

　　【常用文本溢出代碼】

text-overflow:ellipsis;//顯示省略標誌 white-space:nowrap;//強制不換行overflow: hidden;//溢出隱藏

文本方向(IE8-不支援)

direction:ltr(normal,left to right)direction:rtl(right to left)unicode-bidi:normalunicode-bidi:embedunicode-bidi:bidi-override