文本

Table of Contents generated with DocToc

• 文本
• 字體
• 改變字號(hào)
• 改變字體
• 加粗字體
• 傾斜字體
• 更改行距
• font shorthand
• 改變文字顏色
• 對(duì)齊方式
• 文字居中
• 文本垂直對(duì)齊
• 文本縮進(jìn)
• 格式處理
• 保留空格格式
• 文字換行
• 文本裝飾
• 文字陰影
• 文本裝飾（下劃線(xiàn)等）
• 高級(jí)設(shè)置
• 省略字符
• 更換鼠標(biāo)形狀
• 強(qiáng)制繼承

文本

字體

改變字號(hào)

font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

• <absolute-size> 有 small large medium
• <relative-size> 有 smaller larger

div
  font-size 12px
  p#sample0
    font-size 16px
  p#sample1
    font-size 2em
  p#sample2
    font-size 200%

NOTE：以上兩值在開(kāi)發(fā)中并不常用。2em 與 200% 都為父元素默認(rèn)大小的兩倍（參照物為父元素的字體大小 12px）。

改變字體

font-family: [ <family-name> | <generic-family> ]#

<generic-family> 可選選項(xiàng)，但具體使用字體由瀏覽器決定

• serif
• sans-serif
• cursive
• fantasy
• monospace

font-family: arial, Verdana, sans-serif;

NOTE：優(yōu)先使用靠前的字體

加粗字體

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight: normal;
font-weight: bold;

傾斜字體

font-style: normal | italic | oblique | inherit

italic 使用字體中的斜體，而 oblique 在沒(méi)有斜體字體時(shí)強(qiáng)制傾斜字體。

更改行距

line-height: normal | <number> | <length> | <percentage>

normal 值為瀏覽器決定，在1.1至1.2之間（通常設(shè)置值為1.14左右）

/* length 類(lèi)型 */
line-height: 40px;
line-height: 3em;
/* percentage 類(lèi)型 */
line-height: 300%;
/* number 類(lèi)型 */
line-height: 3;

NOTE：當(dāng)line-height為 number 類(lèi)型時(shí)，子類(lèi)直接繼承其數(shù)值（不計(jì)算直接繼承）。 而當(dāng)為 percentage 類(lèi)型時(shí)，子類(lèi)則會(huì)先計(jì)算再顯示（先計(jì)算后繼承）。

字間距（字母間距）

letter-spacing: normal | <length>

其用于設(shè)置字間距或者字母間距，此屬性適用于中文或西文中的字母。 如果需要設(shè)置西文中詞與詞的間距或標(biāo)簽直接的距離則需要使用 word-spacing。

word-spacing: normal | <length>

font shorthand

font: [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar

font: 30px/2 "Consolas", monospace;
font: italic bold 20px/1.5 arial, serif;
font: 20px arial, serif;

NOTE：當(dāng)其他值為空時(shí)，均被設(shè)置為默認(rèn)值。

改變文字顏色

color: <color>

element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255,0,0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); }
element { color: hsla(0, 100%, 50%, 0.5); }

/* 全透明 */
element { color: transparent' }
element { color: rgba(0, 0, 0, 0); }

對(duì)齊方式

文字居中

text-align: start | end | left | right | center | justify | match-parent | start end

NOTE：默認(rèn)為文本左對(duì)齊。

文本垂直對(duì)齊

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

NOTE：<percentage>的參照物為line-height

文本縮進(jìn)

text-indent: <length> | <percentage> && [ hanging || each-line ]

NOTE：縮進(jìn)兩個(gè)字可使用 text-indent: 2em;

格式處理

保留空格格式

white-space: normal | pre | nowrap | pre-wrap | pre-line

pre 行為同 <pre> 一致。

文字換行

word-wrap: normal | break-word

NOTE：允許長(zhǎng)單詞自動(dòng)換行。

word-break: normal | break-all | keep-all

NOTE：break-all 單詞中的任意字母間都可以換行。

文本裝飾

文字陰影

text-shadow:none | <shadow-t># 或 text-shadow:none | [<length>{2,3}&&<color>?]#

p {
  text-shadow: 1px 1px 1px #000,
               3px 3px 5px blue;
}

1. value = The X-coordinate X 軸偏移像素
2. value = The Y-coordinate Y 軸偏移像素
3. value = The blur radius 陰影模糊半徑
4. value = The color of the shadow 陰影顏色（默認(rèn)為文字顏色）

文本裝飾（下劃線(xiàn)等）

text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

高級(jí)設(shè)置

省略字符

text-overflow: [ clip | ellipsis | <string> ]{1,2}

/* 常用配合 */
text-overflow: ellipsis;
overflow: hidden; /* 溢出截取 */
white-space: nowrap; /* 禁止換行 */

更換鼠標(biāo)形狀

cursor: [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit

常用屬性

cursor: [<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]

• <uri> 圖片資源地址代替鼠標(biāo)默認(rèn)形狀
• <default> 默認(rèn)光標(biāo)
• <none> 隱藏光標(biāo)
• <pointer> 手型光標(biāo)
• <zoom-in>
• <zoom-out>
• <move>

cursor: pointer;
cursor: url(image-name.cur), pointer;
/* 當(dāng) uri 失效時(shí)或者則會(huì)起作用 */

強(qiáng)制繼承

inherit 會(huì)強(qiáng)制繼承父元素的屬性值。

font-size: inherit;
font-family: inherit;
font-weight: inherit;
...
word-wrap: inherit;
work-break: inherit
text-showdow: inherit

NOTE：具體在使用時(shí)可查詢(xún)文檔