CSS文字排版

2022-05-29 00:57:17 字數 1450 閱讀 3640

1.文字排版--字型

我們可以使用css樣式為網頁中的文字設定字型、字型大小、顏色等樣式屬性。下面我們來看乙個例子,下面**實現:為網頁中的文字設定字型為宋體。

body

這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。(因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝你設定的字型。)

現在一般網頁喜歡設定「微軟雅黑」,如下**:

body

body

注意:第一種方法比第二種方法相容性更好一些。

2.文字排版--字型大小、顏色

可以使用下面**設定網頁中文字的字型大小為12畫素,並把字型顏色設定為#666(灰色):

body

3.文字排版--粗體

我們還可以使用css樣式來改變文字的樣式:粗體、斜體、下劃線、刪除線,可以使用下面**實現設定文字以粗體樣式顯示出來。

p span

4.文字排版--斜體

以下**可以實現文字以斜體樣式在瀏覽器中顯示:

p a

5.文字排版--下劃線

有些情況下想為文字設定為下劃線樣式,這樣可以在視覺上強調文字,可以使用下面**來實現:

p a

6.文字排版--刪除線

.oldprice

7.段落排版--縮排

中文文字中的段前習慣空兩個文字的空白,這個特殊的樣式可以用下面**來實現:

p

8.段落排版--行間距(行高)

這一小節我們來學習一下另乙個在段落排版中起重要作用的行間距(行高)屬性(line-height),如下**實現設定段落行間距為1.5倍。

p

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

中文字間隔、字母間隔設定:

如果想在網頁排版中設定文字間隔或者字母間隔就可以使用    letter-spacing 來實現,如下面**:

h1

...

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

單詞間距設定:

如果我想設定英文單詞之間的間距呢?可以使用 word-spacing 來實現。如下**:

h1

...

10.段落排版--對齊

想為塊狀元素中的文字、設定居中樣式嗎?可以使用text-align樣式**,如下**可實現文字居中顯示。(那麼什麼是塊狀元素呢?在後面的11-1、11-2小節中會講到。)

h1

同樣可以設定居左:

h1

還可以設定居右:

h1

CSS 文字排版

字型 我們可以使用css樣式為網頁中的文字設定字型 字型大小 顏色等樣式屬性。下面 實現 為網頁中的文字設定字型為宋體。body 這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定的字型樣式取決於使用者本地 電腦上是...

CSS 文字排版

在乙個table,div或input中,文字過長,一般都會擷取處理,然後後面拼接省略號,以前我是這麼做的,後端或者js擷取,今天看到css自身屬性就可以做到,內心無數省略號 效果圖 素胚勾勒出青花筆鋒濃轉淡 瓶身描繪的牡丹一如你初妝 冉冉檀香透過窗心事我了然 宣紙上走筆至此擱一半 釉色渲染仕女圖韻味...

css控制文字排版

b 一 如何設定文字字型 顏色 大小 使用font b font style設定斜體,比如font style italic font weight設定文字粗細,比如font weight bold font size設定文字大小,比如font size 12px 或者9pt,不同單位顯示問題參考c...