CSS文字樣式

text-indent屬性

text-indent屬性可以為特定選項的文字進行首行縮排，取值可以是長度值或百分比，它的屬性值通常使用em作為單位，text-indent: 2em;表示首行縮排兩個字元。另外要注意的是text-indent屬性只在塊級元素其作用，在行內元素或行內塊級元素不起作用，同時它也會被繼承。

text-align屬性

text-align屬性值分別有：center | left | right | justify | inherit

* {margin: 0;padding: 0;}
   div {width: 400px;margin-bottom
 
: 20px;border: 1px solid #eee;margin-left: 100px;}
   div:nth-child(1) {text-align: center;border-color: black;}
   div:nth-child(2) {text-align: right;border-color: red;}
   div:nth-child(3) {text-align: left;border-color: orange;}
   div:nth-child(4) {text-align: justify;border-color: green;}
   div:nth-child(5)
 
 {text-align: right;border-color: blue;}
   p {text-align: inherit;}

<div>center文字對齊</div>
  <div>right文字對齊</div>
  <div>left文字對齊</div>
  <div>justify文字對齊</div>
  <div>
    <p>inherit文字對齊</p>
  </div>

word-spacing屬性和letter-spacing屬性

word-spacing屬性改變的是單詞間的間距
letter-spacing屬性改變的字元間或字母間的間距

p:nth-child(1) {word-spacing: 10px;}
p:nth-child(2) {letter-spacing: 10px}

<p>我是word spacing</p>
<p>我是letter spacing</p>

text-transform(字元轉換）屬性

text-transform屬性可以進行字母間的大小寫轉換
text-transform: uppercase;轉換為大寫
text-transform: lowercase;轉換為小寫
text-transform: capitalize;每個單詞首字母大寫
text-transform: none;預設不轉換

text-decoration(文字修飾）屬性

text-decoration 有 5 個值：
none：去掉文字修飾
underline：新增下劃線
overline：新增上劃線
line-through：文字中間新增貫穿線
blink：文字閃爍，有爭議（很少用）

span:nth-child(1) {text-decoration: none;}
span:nth-child(2) {text-decoration: underline;}
span:nth-child(3) {text-decoration: overline;}
span:nth-child(4) {text-decoration: line-through;}
span:nth-child(5) {text-decoration: blink;}

<span>none</span>
<span>underline</span>
<span>overline</span>
<span>line-through</span>
<span>blink</span>

white-spacing(處理空白符）屬性

white-spacing屬性值有：

 * {margin: 0;padding: 0;}
    p {width: 200px;border: 1px solid #000;margin-bottom: 20px;}
    p:nth-child(1) {white-space: pre;}
    p:nth-child(2) {white-space: pre-line;}
    p:nth-child(3) {white-space: pre-wrap;}
    p:nth-child(4) {white-space: nowrap;}
    p:nth-child(5) {white-space: normal;}

  <p>
    This     paragraph has    many
    spaces           in it.
  </p>
  pre-line屬性
  <p>
    This     paragraph has    many
    spaces           in it.
  </p>
  pre-wrap屬性
  <p>
    This     paragraph has    many
    spaces           in it.
  </p>
  nowrap屬性
  <p>
    This     paragraph has    many
    spaces           in it.
  </p>
  normal屬性
  <p>
    This     paragraph has    many
    spaces           in it.
  </p>

direction(文字方向)屬性

direction: rtl; /*文字從左到右排版*/
direction: ltr; /*文字從右到左排版*/
direction: inherit; /*從父元素繼承 direction 屬性的值*/

☆CSS3新增文字效果

text-shadow(文字陰影）屬性

可以規定水平陰影，垂直陰影，模糊距離以及陰影的顏色

h1 {text-shadow: 10px(水平距離） 10px(垂直距離） 10px(模糊距離) rgba(0,0,0,0.7)(模糊顏色);}

word-break和word-wrap屬性

word-break

word-break: break-all | keep-all | normal;
break-all屬性值：允許在單詞內換行
keep-all屬性值：只能在半形空格或連字元處換行

 p:nth-of-type(1) {word-break: break-all;}
 p:nth-0f-type(2) {word-break: keep-all;}

<p>This is veryveryveryvery long paragraph.</p>
<p>This is veryveryveryvery long paragraph.</p>

word-wrap: 在長單詞或 URL 地址內部進行換行

p{
    width:11em; 
    border:1px solid #000000;
    word-wrap:break-word;
}

<p>This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next </p>

background(背景）

background-size:設定背景大小，可以用長度，百分比表示.
background-option:背景定位，大小可以用長度，百分比和單詞(left cente right | top center bottom)表示
background-attachment: scroll | fixed;背景設定為是否滾動或者固定
background-image: url();背景圖片連結地址
background-repeat: repeat(預設水平和垂直方向平鋪） | repeat-x | repeat-y | no-reprat;
background-color: 背景顏色
background-origin border-box | padding-box | content-box; 規定背景的起點
重點理解下background-origin屬性，border-box屬性值是以邊框為界限，背景圖片會和邊框重疊；當屬性值為border-padding時，背景圖片會緊貼邊框線；同理，當屬性值為content-box時，背景圖片緊貼padding內邊距。

 * {margin: 0;padding: 0;}
 div {width: 220px;height: 180px; margin:20px;border: 10px dashed red;padding: 20px; background: #3c3c3c url(圖片路徑)  no-repeat;float: left;color: red;font-size: 30px;font-weight: 700;}
 div:nth-child(1) {background-origin: border-box; }
 div:nth-child(2) {background-origin: padding-box; }
 div:nth-child(3) {background-origin: content-box; }

<div>background-origin:border-box;</div>
<div>background-origin:padding-box;</div>
<div>background-origin:content-box;</div>