部落格CSS排版小技巧 2-首行縮排
本篇文章分為三個部分
其實我本來第一篇教學打算是要放這個的，但是要做到首行縮排，文章內就必須要有分段落，畢竟這是讓你的每個段落第一行進行縮排，如果你的文章沒有分段落的話，也沒有用，所以第一篇就先放上行與段落的說明
如果你的文章比較長，在排版上，除了分行和段落，每個段落第一行縮排個兩個字元也有助於你的版面文章的閱讀，拿上一個章節的範例來看看，就可以很明顯看出差異了
這是第一個段落，這裡是第一行
這是第一段裡的第二行
這是第一段裡的第三行
這是第二個段落，這裡是第一行
這是第二段裡的第二行
這是第二段裡的第三行
這是第三個段落，這裡是第一行
這是第三段裡的第二行
這是第三段裡的第三行
從上面可以明顯看出來，每個段落的第一行會往內縮兩個字的距離。
這當然可以自己手動排版，不過，如果文章長一點，每次都要手動按空白也是蠻累的，而且有時候會忘記，那不如就讓系統自動幫你做排版，也省時省力又不會漏掉，以下就來教大家怎麼用吧
再開始前，先確定你的文章有段落的分別，注意，我這邊說的是語法上的區別，不是你自己按兩次Enter去換行就叫做段落
如果不懂語法也懶的學，那請先把文章在Word上打好，在複製到部落格上
(PS.如果你在用的部落格，在編輯文字的時候，按Enter就是換段落不是換行，可以忽視這段)
- 語法：
- <div style="text-indent: 2em;">
文章內容
</div>
使用方法：
首先，必須要先把文字編輯的方式改為編輯HTML原始碼的方式，以PChome的新聞台為例，就是點最右上角的 <>來切換。如圖
之後將第一行的 <div style="text-indent: 2em;">貼在所有內容的最前面
再把</div>貼在最後一行，即可做到段落首行縮排兩個字元的效果
PS.如果你打算縮排的距離不是兩個字元的距離的話，請看下面的說明
其實如果真的要做到"詳細"說明的話，會牽扯到很多東西，所以我盡量挑重點來講，如果有不懂的地方可以在底下留言問我，只要我還有在經營這個部落格的話，就會回覆。若是牽扯的內容太多的話，我會考慮再發一篇教學文章來說明
首先，需要注意的是，此語法只針對每個"段落"的"第一行"會做動作，就是會進行縮排兩個字元，這邊先對HTML裡面的段落還有換行做一下說明
在HTML裡面，文章內容有分"段落"，而每個段落會使用<p>標籤標記起來，而換行則是<br />標籤，下面用個例子，會看得比較清楚
- 範例：
-
這是第一個段落，這裡是第一行
這是第一段裡的第二行
這是第一段裡的第三行這是第二個段落，這裡是第一行
這是第二段裡的第二行
這是第二段裡的第三行這是第三個段落，這裡是第一行
這是第三段裡的第二行
這是第三段裡的第三行 - HTML語法：
- <p>這是第一個段落，這裡是第一行<br \>
這是第一段裡的第二行<br \>
這是第一段裡的第三行</p>
<p>這是第二個段落，這裡是第一行<br \>
這是第二段裡的第二行<br \>
這是第二段裡的第三行</p>
<p>這是第三個段落，這裡是第一行<br \>
這是第三段裡的第二行<br \>
這是第三段裡的第三行</p>
在這個範例中，我把兩種標籤用不同的顏色標記出來，可以看得比較清楚
其中<p>和</p>就是段落的標籤，被這兩個標籤包覆住的內容，就是同一個段落的文章，正常情況下(沒有另外去做CSS的設定)，段落和段落之間會有一行的間隔，而用行<br \>換行就.......換行阿XD
而我們這邊要用到的CSS語法，就是指定每個段落的第一行進行縮排，不管你這個段落有幾行，都只有第一行會進行縮排(用<br \>進行換行，或者是文字過長自動換行都一樣)
使用的語法如下
- 語法：
- <div style="text-indent: 2em;">
文章內容
</div>
其中分為兩個部分，分別為Div標籤以及Style屬性
Div標籤的CSS預設值是區塊，我這邊就不做詳細說明了，真的想了解的人再留言問我吧，簡單的說，就是我們先用個Div標籤把所有的文章內容都先包覆起來，然後再針對整個Div標籤去做CSS的設定，就可以讓整編文章都能套用某個效果了
而做到縮排的關鍵就是利用Style屬性去做CSS的設定。 HTML標籤裡面的Style屬性是屬於行內樣式，直接針對該標籤去做CSS的設定
其實正常我們在做網頁，很少直接使用Style屬性去設定CSS效果，一般來說，都是會配合CSS選擇器使用，做外部連結，就算是不做外部連結，直接在網頁上定義CSS樣式，也是放在<head>裡的<style>標籤裡，而不會直接用Style屬性。
但在部落格上，有些部落格是不能直接去修改CSS設定的(PChome新聞台就是)，就算有些部落格可以讓你自定，如果你不會CSS，或者不熟，要設定起來也很麻煩，所以我們就用最簡單的方式來做設定，使用Style屬性來做CSS的設定
PS.有沒有哪個部落格可以自己定義CSS樣式，來設定部落格版面的?有的話麻煩推薦一下，阿輝想去玩玩看
而CSS語法的標準寫就是
(屬性):(值);
先寫屬性名稱，然後接冒號(:)，後面接屬性值，最後用分號(:)做為結尾
接下來就是重點了(廢話了這麼久總算到重點了)
首行縮排的效果，是利用CSS中的text-indent屬性來做到縮排的效果，該屬性的寫法如下
- 語法：
- text-indent: (屬性值);
這邊的"值"就是你要縮排的距離，記得要加上單位，例如em、px等
1em=1個字的寬度，而設定2em則就是縮排兩個字元了
或者要用px也可以，但一般中文排版，縮排以兩個字元為主，所以阿輝用2em來做排版
PS.若有人想知道px、em等單位的用法和差異，再另外留言告訴阿輝，阿輝會再找時間發一篇關於網頁用的單位的文章