CSS文字段落排版

1、文字排版--字體

body{font-family:"Microsoft Yahei";}

2、文字排版--字號、顏色

body{font-size:12px;color:#666}

3、文字排版--粗體

p span{font-weight:bold;}

4、文字排版--斜體

p a{font-style:italic;}

<p>三年級時，我仍是一個<a>膽小如鼠</a>的小女孩。</p>

5、文字排版--下劃線

p a{text-decoration:underline;}

<p>三年級時，我仍是一個<a>膽小如鼠</a>的小女孩。</p>

6、文字排版--刪除線

 .oldPrice{text-decoration:line-through;}

7、段落排版--縮進

p{text-indent:2em;}
<p>1922年的春天，一個想要成名名叫尼克卡拉威（託比?馬奎爾Tobey Maguire 飾）的做家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私爲王，股票飛漲的時代。爲了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>

注意：2em的意思就是文字的2倍大小。

8、段落排版--行間距（行高）

p{line-height:1.5em;}
<p>菲茨傑拉德，二十世紀美國文學巨擘之一，兼具做家和編劇雙重身份。他以詩人的敏感和戲劇家的想象爲"爵士樂時代"吟唱華麗輓歌，其詩人和夢想家的氣質亦爲那個奢靡年代的不二註解。</p>

9、段落排版--中文字間距、字母間距

中文字間隔、字母間隔設置：

若是想在網頁排版中設置文字間隔或者字母間隔就可使用    letter-spacing 來實現，以下面代碼：

h1{
    letter-spacing:50px;
}
...
<h1>了不得的蓋茨比</h1>

注意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距。

單詞間距設置：

若是我想設置英文單詞之間的間距呢？可使用 word-spacing 來實現。以下代碼：

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

10、段落排版--對齊

想爲塊狀元素中的文本、圖片設置居中樣式嗎？可使用text-align樣式代碼，以下代碼可實現文本居中顯示。

h1{
    text-align:center;
    //text-align:left;
    //text-align:right;
}
<h1>了不得的蓋茨比</h1>

11、文本格式縮寫

網頁中的字體css樣式代碼也有他本身的縮寫方式，下面是給網頁設置字體的代碼：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋體",sans-serif;
}

這麼多行的代碼其實能夠縮寫爲一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;
}

注意：

一、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其餘的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動使用默認值。

二、在縮寫時 font-size 與 line-height 中間要加入「/」斜扛。

通常狀況下由於對於中文網站，英文仍是比較少的，因此下面縮寫代碼比較經常使用：

body{
    font:12px/1.5em  "宋體",sans-serif;
    //font:italic small-caps bold 12px/1.6em "微軟雅黑",sans-serif;
}

只是有字號、行間距、中文字體、英文字體設置。

12、配色表

顏色值

在網頁中的顏色設置是很是重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設置顏色的方法也有不少種：

一、英文命令顏色

前面幾個小節中常常用到的就是這種設置方法：

p{color:red;}

二、RGB顏色

這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。

p{color:rgb(133,45,200);}

每一項的值能夠是 0~255 之間的整數，也能夠是 0%~100% 的百分數。如：

p{color:rgb(20%,33%,25%);}

三、十六進制顏色

這種顏色設置方法是如今比較廣泛使用的方法，其原理其實也是 RGB 設置，可是其每一項的值由 0-255 變成了十六進制 00-ff。

p{color:#00ffff;}

12、長度值

長度單位總結一下，目前比較經常使用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。

一、像素

像素爲何是相對單位呢？由於像素指的是顯示器上的小點（CSS規範中假設「90像素=1英寸」）。實際狀況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向於使用像素（px）做爲單位。

二、em

就是本元素給定字體的 font-size 值，若是元素的 font-size 爲 14px ，那麼 1em = 14px；若是 font-size 爲 18px，那麼 1em = 18px。以下代碼：

p{font-size:12px;text-indent:2em;}

上面代碼就是能夠實現段落首行縮進 24px（也就是兩個字體大小的距離）。

下面注意一個特殊狀況：

但當給 font-size 設置單位爲 em 時，此時計算的標準以 p 的父元素的 font-size 爲基礎。以下代碼：

html:

<p>以這個<span>例子</span>爲例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

結果 span 中的字體「例子」字體大小就爲 11.2px（14 * 0.8 = 11.2px）。

三、百分比

p{font-size:12px;line-height:130%}

設置行高（行間距）爲字體的130%（12 * 1.3 = 15.6px）。