CSS格式化排版

一、文字排版--字體

我們可以使用css樣式爲網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子,下面代碼實現:爲網頁中的文字設置字體爲宋體。

body{font-family:"宋體";}

這裏注意不要設置不常用的字體,因爲如果用戶本地電腦上如果沒有安裝你設置的字體,就會顯示瀏覽器默認的字體。(因爲用戶是否可以看到你設置的字體樣式取決於用戶本地電腦上是否安裝你設置的字體。)
現在一般網頁喜歡設置“微軟雅黑”,如下代碼:

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

body{font-family:"微軟雅黑";}

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

因爲這種字體即美觀又可以在客戶端安全的顯示出來(用戶本地一般都是默認安裝的)

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

可以使用下面代碼設置網頁中文字的字號爲12像素,並把字體顏色設置爲#666(灰色):

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

[顏色可以找RGB顏色查詢對照表]


三、文字排版--文字樣式

1.粗體

我們還可以使用css樣式來改變文字的樣式:粗體、斜體、下劃線、刪除線。

可以使用下面代碼實現設置文字以粗體樣式顯示出來:

p span{font-weight:bold;}

在這裏大家可以看到,如果想爲文字設置粗體是有單獨的css樣式來實現的,再不用爲了實現粗體樣式而使用h1-h6或strong標籤了。

2.斜體

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

p a{font-style:italic;}

<p>我是一個<a>喜歡編程</a>的小女孩。</p>

3.下劃線

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

p a{text-decoration:underline;}

<p>我是一個<a>喜歡編程</a>的小女孩。</p>

4.刪除線

如果想在網頁上設置刪除線怎麼辦,比如在電商網站上常會見到的劃掉原價。

使用下面代碼就可以實現:

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


四、段落排版

1.縮進

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

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

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

2.行間距(行高)

行間距(行高)屬性(line-height),如下代碼實現設置段落行間距爲1.5倍。

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

3.中文字間距、字母間距

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

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

h1{
    letter-spacing:50px;
}
...
<h1>我愛CSS</h1>

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

單詞間距設置

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

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

4.對齊

想爲塊狀元素中的文本、圖片設置居中樣式嗎?可以使用text-align樣式代碼,如下代碼可實現文本居中顯示。(那麼什麼是塊狀元素呢?在後面的博文中會講到。)

h1{
    text-align:center;
}
<h1>我愛CSS</h1>

同樣可以設置居左:

h1{
    text-align:left;
}
<h1>我愛CSS</h1>

還可以設置居右:

h1{
    text-align:right;
}
<h1>我愛CSS</h1>



<!--此內容爲學習筆記,包括課程中的知識點和我自己的理解,轉載請註明-->

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章