六、文字排版--刪除線 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>刪除樣式</title> 6 <style ...
六、文字排版--刪除線
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>刪除樣式</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <p>原價：<span class="oldPrice">300</span>元 現價：230 元</p> 12 </body> 13 </html>文字排版--刪除線
如果想在網頁上設置刪除線怎麼辦，這個樣式在電商網站上常會見到：
上圖中的原價上的刪除線使用下麵代碼就可以實現：
.oldPrice{text-decoration:line-through;}
來試試，為原價設置刪除線
在編輯器的第7行，輸入下麵代碼：
.oldPrice{text-decoration:line-through;}
文本修飾
h1{text-decoration:overline}
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
blink 定義閃爍的文本。
直接寫<del>300</del> 和
<s>123456ddsjvnv</s>也可以弄刪除線
註意類名稱的大小寫
一個小技巧：規定好class的名稱後，在以後寫這個樣式的時候，建議直接複製名稱來寫，又省事又能夠減少錯誤。
代碼寫的時候一定要註意 對類選擇器進行樣式設置名稱一定要一致 其中一個字母大小寫沒有區分都是不能實現的
七、段落排版--縮進
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>縮進樣式</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <h1>了不起的蓋茨比</h1> 12 <p>1922年的春天，一個想要成名名叫尼克?卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p> 13 <p>菲茨傑拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗輓歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二註解。</p> 14 </body> 15 </html>段落排版--縮進
中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下麵代碼來實現：
p{text-indent:2em;}
<p>1922年的春天，一個想要成名名叫尼克卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>
註意：2em的意思就是文字的2倍大小。
來試試，為文本段設置2個空格縮進
在編輯器的第7行，輸入下麵代碼：
p{text-indent:2em;}
第一、em與px之間怎麼換算？
*任意瀏覽器的預設字體高度16px（16像素）。
*所有未經調整的瀏覽器都符合:1em=16px。
*那麼12px=0.75em,10px=0.625em。
為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變為16px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。
註：建議不要使用em作為中文站點的文字單位，會導致文字變形十分嚴重的。
em和px換算？
從中文輸入的角度理解 em ，就簡單多了！
在中文里，文字輸入分為全形和半形，
(中文輸入法里，按shift+空格 切換全形半形狀態）
全形，段落中所有字元（包括文字和其它符號：逗號、頓號、句號等），
都是占用一個字的位置，這樣排版的時候，上下文字能對齊；
半形，段落中所有除文字外的符號，只占用半個字的位置；
打字時，預設是半形，按空格最明顯，只有前一個字的一半寬度；
切換全形後，空格剛好是一個字寬度（段落中最明顯，上下對齊）
em 就是一個全形占位符；
2em 就是2個全形位置；
body{font-size:62.5%;}
p{text-indent:40px;}
indent 動詞 縮進，訂貨
八、段落排版--行間距（行高）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>行間距</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <p>菲茨傑拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗輓歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二註解。</p> 12 </body> 13 </html>段落排版--行間距（行高）
這一小節我們來學習一下另一個在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實現設置段落行間距為1.5倍。
p{line-height:1.5em;}
<p>菲茨傑拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗輓歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二註解。</p>
來試試，為右側段落設置行間距（行高）為2em，使用文本顯示更加美觀
1.在編輯器的第7行，輸入下麵代碼：
p{line-height:2em;}
九、段落排版--中文字間距、字母間距
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>字間距</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <h1>hello world!你好！</h1> 12 </body> 13 </html>段落排版--中文字間距、字母間距
中文字間隔、字母間隔設置：
如果想在網頁排版中設置文字間隔或者字母間隔就可以使用 letter-spacing 來實現，如下麵代碼：
h1{
letter-spacing:50px;
}
...
<h1>了不起的蓋茨比</h1>
註意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距。
單詞間距設置：
如果我想設置英文單詞之間的間距呢？可以使用 word-spacing來實現。如下代碼：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
任務
我也來試試，為標題設置字母間距為20像素
1.在右邊編輯器的第7行，輸入：
h1{letter-spacing:20px;}
十、段落排版--對齊
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>對齊</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div> 12 </body> 13 </html>段落排版--對齊
想為塊狀元素中的文本、圖片設置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現文本居中顯示。(那麼什麼是塊狀元素呢？在後面的11-1、11-2小節中會講到。)
h1{
text-align:center;
}
<h1>了不起的蓋茨比</h1>
同樣可以設置居左：
h1{
text-align:left;
}
<h1>了不起的蓋茨比</h1>
還可以設置居右：
h1{
text-align:right;
}
<h1>了不起的蓋茨比</h1>
任務
我也來試試，為圖片設置水平居中顯示
在編輯器的第7行，輸入下麵代碼：
div{text-align:center;}
圖片居中，不能直接對img標簽使用text-align:center;而是對該img標簽所在的div或者其他塊級元素使用才會達到這種效果。
複習一下：
1.字體：
family：對應字體。
2.顏色字型大小：
font-size:20px;color;red;
size:字體大小
color：字體顏色
3.粗體：
font-weight:bold
weigth:文字排版
bold:加粗
4.斜體：
font-style:italic
italic：斜體
5.下劃線：
text-decoration:underline;
加下劃線
6.刪除線：
.oldPrice{text-decoration:line-through;}
line-through：文字中橫線
7.縮進：
p{text-indent:2em;}
首行縮進2字元。
8.行間距：
p{line-height:2em;}
行間距2字元（1.5倍）
9.字母間距，單詞間距：
letter-spacing:50px
設置字母與字母之間的間距
word-spacing:50px
單詞間距設置
10.對齊：
text-align:left;
居左
text-align:center;
居中
text-align:right;
居右
letter-spacing:20px;設置中文字大小
word-spacing:20px;設置字母大小
text-input:2em;段落的前兩個空格
text-align:left(左)center（居中）right(右);文本對齊
text-decoration:值underline(下劃線)none（去掉下劃線） line-through(刪除線)
font-family:微軟雅黑;多個字體用逗號隔開
font-style:normal(標準) italic(斜體)oblique;
background:url(圖片地址);
text-indent:2em：縮進；（註意：2em的意思就是文字的2倍大小。）
line-height:2em：行高；
word-spacing:50px：單詞間距；
letter-spacing:20px:字母間距；
text-align:center：水平居中對齊；
text-align:center 段落排版對齊方式left，right
display：將元素變為塊級元素，如2個span會換行
p{text-indent: 2em}--留倆個空格
p{line-height: 2em}--行高
.olgPrice{text-decoration: line-through;}--刪除線
p{letter-spacing:50px;}--字母間隔或文字
p{word-spacing:50px;}--單詞間隔
p{text-align: center(居中)/left(居左)/right(居右)；}
