【CSS筆記五】CSS格式化排版

一、文字排版：字體 
我們可以使用css樣式為網頁中的文字設定字體、字號、顏色等樣式屬性。下面我們來看一個例子，下面程式碼實作：為網頁中的文字設定字體為宋體。

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

這裡注意不要設定不常用的字體，因為如果用戶本地電腦上如果沒有安裝你設定的字體，就會顯示瀏覽器預設的字體。 （因為用戶是否可以看到你設定的字體樣式取決於用戶本地電腦上是否安裝你設定的字體。） 
現在一般網頁喜歡設定“微軟雅黑”，如下代碼：

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

或

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

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

或

p span{font-weight:bold;}

p a{font-style:italic;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

或

p a{text-decoration:underline;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

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

或

p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。
那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

p{line-height:1.5em;} <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，
其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

或

h1{ letter-spacing:50px; } ... <h1>了不起的盖茨比</h1>

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

或

h1{ text-align:center; } <h1>了不起的盖茨比</h1>

h1{ text-align:left; } <h1>了不起的盖茨比</h1>

或

h1{ text-align:right; } <h1>了不起的盖茨比</h1>

rrreee

或

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

因為這種字體即美觀又可以在客戶端安全的顯示出來（用戶本地一般都是預設安裝的）。

二、文字排版：字號、顏色 
可以使用下面程式​​碼設定網頁中文字的字號為12像素，並把字體顏色設定為#666(灰色)：

rrreee

三、文字排版：粗體 

我們還可以使用css樣式來改變文字的樣式：粗體、斜體、底線、刪除線，可以使用下面程式​​碼實現設定文字以粗體樣式顯示出來。

rrreee

如果想為文字設定粗體是有單獨的css樣式來實現的，再不用為了實現粗體樣式而使用h1-h6或strong標籤了。

四、文字排版：斜體 

以下程式碼可以實現文字以斜體樣式在瀏覽器中顯示：
rrreee

五、文字排版：下劃線 

有些情況下想為文字設定為下劃線樣式，這樣可以在視覺上劃線樣式強調文字，可以使用下面程式​​碼來實現：

rrreee

六、文字排版：刪除線 
刪除線使用下面程式​​碼就可以實現：

rrreee
七、段落排版：縮排 

中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面程式​​碼來實現：🎜🎜rrreee🎜注意：2em的意思是文字的2倍大小。 🎜🎜🎜八、段落排版：行間距（行高） 🎜在段落排版中扮演重要角色的行間距（行高）屬性（line-height），如下程式碼實現設定段落行間距為1.5倍。 🎜rrreee🎜九、段落排版：中文字間距、字母間距 🎜如果想在網頁排版中設定文字間隔或字母間隔就可以使用letter-spacing 來實現，如下面代碼：🎜rrreee🎜注意：這個樣式使用在英文單字時，是設定字母與字母之間的間距。 🎜🎜🎜單字間距設定：🎜🎜如果我想設定英文單字之間的間距呢？可以使用 word-spacing 來實現。如下碼：🎜rrreee🎜十、段落排版：對齊 🎜想為塊狀元素中的文字、圖片設定居中樣式嗎？可以使用text-align樣式程式碼，如下程式碼可實現文字居中顯示。 🎜🎜rrreee🎜同樣可以設定居左：🎜🎜rrreee🎜還可以設定居右：🎜🎜rrreee🎜 以上就是【CSS筆記五】CSS格式化排版的內容，更多相關內容請追蹤PHPwww. .cn）！ 🎜🎜🎜🎜🎜