只對段落p內文字設置字間距,段落<p>是html段落標簽,以<p>開始,以</p>結束,通常文章分段使用p標簽,而有時小局部布局也可以使用p來布局。通過css設置其樣式實現排版目的。
這里針對p設置字間距,使用letter-spacing《css 字間距》屬性實現,其屬性單詞值為具體數字+單位(整數)。
一、網頁全局定義設置p的字間距
p{letter-spacing:2px}
設置p段落內文字間隔間距為2px。
p{letter-spacing:5px}
設置p段落內文字間隔間距為5px。
兩者選其一。
以上兩種值對p內文本(無論中文漢字、英文單詞字母、數字、符號都適用生效)設置字與字之間間距。
根據布局切圖重構經驗很少遇到對整個網頁p初始化全局設置字間距樣式,一般小局部小布局,或需要地方才設置文字之間需要間隔距離。
二、給指定p段落標簽布局內文字設置字間距
方法一:
CSS代碼:
.abc{letter-spacing:5px}
大家都可以使用class=abc均生效,如div、span、li、h1、h2、h3都能生效。
p.abc{letter-spacing:5px}
指定p標簽使用class=abc此生效
關鍵html示例代碼:
<p class=”abc”>指定給p使用class=abc生效的</p>
解釋:
.abc{... ...}和p.abc{... ...}
都是定義選擇器,但p.abc代表只有p標簽才能使用,其它標簽使用不能生效。而只有.abc{}的定義后任何標簽都可以使用,也包括p標簽。
方法二:
給p父級設置字間距,p會繼承父級字間距。
css代碼:
.bbb{ letter-spacing:5px}
關鍵的html代碼:
<div class="bbb"> <p>我們之間距離為5px</p> </div>
效果:
解釋:這里雖然p沒有被直接設置字間距letter-spacing css,但對其父級設置,而p繼承了父級設置字體內容排版樣式,依然是成功的。
以上兩種方法,均能對p段落設置文字之間間距,都看div css布局時候選擇適合的,平時也都使用使用,熟能生巧自然會快速選擇適合項目的css布局方式。
?