CSS格式化排版

1、css格式化排版文字排版1，文字排版-字體我們可以用法css樣式為網(wǎng)頁(yè)中的文字設(shè)置字體、字號(hào)、色彩等樣式屬性。下面我們來(lái)看一個(gè)例子，下面代碼實(shí)現(xiàn)：為網(wǎng)頁(yè)中的文字設(shè)置字體為宋體。bodyfont-family:"宋體"這里注重不要設(shè)置不常用的字體，由于假如用戶本地電腦上假如沒有安裝你設(shè)置的字體，就會(huì)顯示掃瞄器默認(rèn)的字體。（由于用戶是否可以看到你設(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體。）2，文字排版-字號(hào)、色彩可以用法下面代碼設(shè)置網(wǎng)頁(yè)中文字的字號(hào)為12像素，并把字體色彩設(shè)置為666(灰色)：bodyfont-size:12px;color:666

2、3，文字排版-粗體我們還可以用法css樣式來(lái)轉(zhuǎn)變文字的樣式：粗體、斜體、下劃線、刪除線，可以用法下面代碼實(shí)現(xiàn)設(shè)置文字以粗體樣式顯示出來(lái)。p spanfont-weight:bold;4，文字排版-斜體以下代碼可以實(shí)現(xiàn)文字以斜體樣式在掃瞄器中顯示：p afont-style:italic;三班級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。5，文字排版-下劃線有些狀況下想為文字設(shè)置為下劃線樣式，這樣可以在視覺上強(qiáng)調(diào)文字，可以用法下面代碼來(lái)實(shí)現(xiàn)：p atext-decoration:underline;三班級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。刪除線，在電商網(wǎng)站上常常見。p atext-decoration:lin

3、e-through;段落排版1，段落排版-縮進(jìn)中文文字中的段前習(xí)慣空兩個(gè)文字的空白，這個(gè)特別的樣式可以用下面代碼來(lái)實(shí)現(xiàn)：ptext-indent:2em;注重：2em的意思就是文字的2倍大小。2，段落排版-行間距這一小節(jié)我們來(lái)學(xué)習(xí)一下另一個(gè)在段落排版中起重要作用的行間距屬性（line-height），如下代碼實(shí)現(xiàn)設(shè)置段落行間距為1.5倍。pline-height:1.5em;3，段落排版-字間距、字母間距文字間隔、字母間隔設(shè)置：假如想在網(wǎng)頁(yè)排版中設(shè)置文字間隔或者字母間隔就可以用法 letter-spacing來(lái)實(shí)現(xiàn)，如下面代碼：h1letter-spacing:50px;.了不得的蓋茨比注重：

4、這個(gè)樣式用法在英文單詞時(shí)，是設(shè)置字母與字母之間的間距。單詞間距設(shè)置：假如我想設(shè)置英文單詞之間的間距呢？可以用法word-spacing來(lái)實(shí)現(xiàn)。如下代碼：h1word-spacing:50px;.welcome to imooc!九，css盒模型元素分類在講解css布局之前，我們需要提前知道一些學(xué)問(wèn)，在css中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素和內(nèi)聯(lián)塊狀元素。常用的塊狀元素有：、.、 、常用的內(nèi)聯(lián)元素有：、常用的內(nèi)聯(lián)塊狀元素有：、元素分類-塊級(jí)元素什么是塊級(jí)元素？在html中、 、 和 就是塊級(jí)元素。設(shè)置display:block就是將元素顯示為塊級(jí)元素。如下代碼

5、就是將行內(nèi)元素a轉(zhuǎn)換為塊狀元素，從頁(yè)用法a元素具有塊狀元素特點(diǎn)。adisplay:block;塊級(jí)元素特點(diǎn)：1、每個(gè)塊級(jí)元素都從新的一行開頭，并且其后的元素也另起一行。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。3、元素寬度在不設(shè)置的狀況下，是它本身父容器的100%（和父元素的寬度全都），除非設(shè)定一個(gè)寬度。元素分類-行內(nèi)元素在html中，、 、 和就是典型的行內(nèi)元素（inline）元素。固然塊狀元素也可以通過(guò)代碼display:inline將元素設(shè)置為行內(nèi)元素。行內(nèi)元素特點(diǎn)：1、和其他元素都在一行上；2、元素的高度、寬度、行高及頂部和底部邊距不行設(shè)置；3、

6、元素的寬度就是它包含的文字或的寬度，不行轉(zhuǎn)變。元素分類-內(nèi)聯(lián)塊狀元素內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。(css2.1新增)，、標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽。inline-block元素特點(diǎn)：1、和其他元素都在一行上；2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。盒模型-邊框（一）盒子模型的邊框就是圍圍著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和色彩(邊框三個(gè)屬性)。如下面代碼為div來(lái)設(shè)置邊框粗細(xì)為2px、樣式為實(shí)心的、色彩為紅色的邊框：divborder:2px sol

7、id red;上面是border代碼的縮寫形式，可以分開寫：divborder-width:2px;border-style:solid;border-color:red;1、border-style（邊框樣式）常見樣式有：dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。2、border-color（邊框色彩）中的色彩可設(shè)置為十六進(jìn)制色彩，如:border-color:888;/前面的井號(hào)不要忘掉。盒模型-邊框（二）現(xiàn)在有一個(gè)問(wèn)題，假如有想為p標(biāo)簽單獨(dú)設(shè)置下邊框，而其它三邊都不設(shè)置邊框樣式怎么辦呢？css樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：divborder-bottom

8、:1px solid red;同樣可以用法下面代碼實(shí)現(xiàn)其它三邊上、右、左邊框的設(shè)置：border-top:1px solid red;border-right:1px solid red;border-left:1px solid red;盒模型-邊界元素與其它元素之間的距離可以用法邊界（margin）來(lái)設(shè)置。邊界也是可分為上、右、下、左。如下代碼：divmargin:20px 10px 15px 30px;也可以分開寫：divmargin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px;假如上下左右的邊界都為10p

9、x;可以這么寫：div margin:10px;假如上下邊界一樣為10px，左右一樣為20px，可以這么寫：div margin:10px 20px;總結(jié)一下：padding和margin的區(qū)分，padding在邊框里，margin在邊框外。盒模型-填充元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為填充。填充也可分為上、右、下、左。如下代碼：divpadding:20px 10px15px 30px;挨次一定不要搞混?？梢苑珠_寫上面代碼：divpadding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px;假如上、

10、右、下、左的填充都為10px;可以這么寫divpadding:10px;假如上下填充一樣為10px，左右一樣為20px，可以這么寫：divpadding:10px 20px;盒模型代碼簡(jiǎn)寫還記得在講盒模型時(shí)外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個(gè)方向的邊距是根據(jù)順時(shí)針?lè)较蛟O(shè)置的：上右下左。詳細(xì)應(yīng)用在margin和padding的例子如下：margin:10px 15px 12px 14px;/*上設(shè)置為10px、右設(shè)置為15px、下設(shè)置為12px、左設(shè)置為14px*/通常有下面三種縮寫辦法:1、假如top、right、bottom、left的值相同，如下面代碼：margin:10px 10px 10px 10px;可縮寫為：margin:10px;2、假如top和bottom值相同、left和 right的值相同，如下面代碼：margin:10px 20px 10px 20px;可縮寫為：margin:10px 20px;3、假如left和right的值相同，如下面代碼：margin:10px 20px 30px 20px;可縮寫為：margin:10px 20px 30px;注重：padding