CSS格式 排版

2021-09-26 05:07:59 字數 2107 閱讀 3941

我們可以使用css樣式為網頁中的文字設定字型、字型大小、顏色等樣式屬性。

body

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

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

body

body

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

body

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

p span

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

p a

>

三年級時,我還是乙個

>

膽小如鼠a

>

的小女孩。p

>

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

p a

>

三年級時,我還是乙個

>

膽小如鼠a

>

的小女孩。p

>

如果想在網頁上設定刪除線怎麼辦,這個樣式在電商**上常會見到:

上圖中的原價上的刪除線使用下面**就可以實現:

.oldprice

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

p

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

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

p

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

h1

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

單詞間距設定:

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

h1

...

>

welcome to imooc!h1

>

想為塊狀元素中的文字、設定居中樣式嗎?可以使用text-align樣式**,如下**可實現文字居中顯示。

h1

>

了不起的蓋茨比h1

>

同樣可以設定居左:

h1

>

了不起的蓋茨比h1

>

還可以設定居右:

h1

>

了不起的蓋茨比h1

>

CSS格式化排版

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

css格式化排版

1,文字排版 字型 語法 body 這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝了你設定的字型 2,文字排版 字型大小 顏色 語法 body 3,文字排版 粗體 語法 標...

css格式化排版

css格式化排版 1.文字排版 字型 我們可以使用css樣式為網頁中的文字設定字型 字型大小 顏色等樣式屬性。如 body 2.文字排版 字型大小 顏色可 以使用下面 設定網頁中文字的字型大小為12畫素,並把字型顏色設定為 666 灰色 body 3.文字排版 粗體 我們還可以使用css樣式來改變文...