一、 CSS格式化排版
1.1、文字排版--字號、顏色
我們可以使用 css 樣式爲網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子，下面代碼實現：爲網頁中的文字設置字體爲宋體。
body{font-family:"宋體";}
注意：
不要設置不常用的字體，因爲如果用戶本地電腦上如果沒有安裝你設置的字體，就會顯示瀏覽器默認的字體。（因爲用戶是否可以看到你設置的字體樣式取決於用戶本地電腦上是否安裝你設置的字體。）
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標籤</title>
<style type="text/css">
body{
font-family:"Microsoft Yahei";
}
</style>
</head>
<body>
<h1>火影忍者</h1>
<p>我的夢想</p>
</body>
</html>
運行結果：
1.2、文字排版--字號、顏色
可以使用下面代碼設置網頁中文字的字號爲 12 像素，並把字體顏色設置爲 #666(灰色) ：
body{font-size:12px;color:#666}
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>字號、顏色</title>
<style type="text/css">
body{
font-size:12px;
color:#666;
}
.stress{
font-size:20px;
color:red;
}
</style>
</head>
<body>
<h1>我的夢想</h1>
<p>我的夢想<span class="stress">我的夢想</span>。</p>
</body>
</html>
運行結果：
1.3、文字排版--粗體
我們還可以使用 css 樣式來改變文字的樣式：粗體、斜體、下劃線、刪除線，可以使用下面代碼實現設置文字以粗體樣式顯示出來。
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>粗體籤</title>
<style type="text/css">
p span{
font-weight:bold;
}
a{
font-weight:bold;
}
</style>
</head>
<body>
<h1>火影忍者</h1>
<p>火影忍者<a>火影忍者</a></p>
</body>
</html>
運行結果：
1.4、文字排版--斜體
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>斜體樣式</title>
<style type="text/css">
a {
font-style:italic;
}
p{
font-style:italic;
}
</style>
</head>
<body>
<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>
</body>
</html>
運行結果：
1.5、文字排版--下劃線
代碼示例：<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下劃線樣式</title>
<style type="text/css">
a {
text-decoration:underline;
}
span{
text-decoration:underline;
}
</style>
</head>
<body>
<p><span>三年級</span>時，我還是一個<a>膽小如鼠</a>的小女孩。</p>
</body>
</html>
運行結果：
1.6、文字排版--刪除線
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>刪除樣式</title>
<style type="text/css">
.oldPrice{text-decoration:line-through;}
</style>
</head>
<body>
<p>原價：<span class="oldPrice">300</span>元 現價：230 元</p>
</body>
</html>
運行結果：
1.7、段落排版--縮進
中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現：
p{text-indent:2em;}
注意：2em 的意思就是文字的2倍大小。
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>縮進樣式</title>
<style type="text/css">
p{text-indent:2em;}
</style>
</head>
<body>
<h1>了不起的蓋茨比</h1>
<p>1922年的春天，一個想要成名名叫尼克?卡拉威（託比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私爲王，股票飛漲的時代。爲了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>
<p>菲茨傑拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象爲"爵士樂時代"吟唱華麗輓歌，其詩人和夢想家的氣質亦爲那個奢靡年代的不二註解。</p>
</body>
</html>
運行結果：
1.8、段落排版--行間距（行高）/h2>
我們來學習一下另一個在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實現設置段落行間距爲1.5倍。
p{line-height:1.5em;}
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>行間距</title>
<style type="text/css">
p{
line-height:2em;
}
</style>
</head>
<body>
<p>菲茨傑拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象爲"爵士樂時代"吟唱華麗輓歌，其詩人和夢想家的氣質亦爲那個奢靡年代的不二註解。</p>
</body>
</html>
運行結果：
1.9、段落排版 -- 中文字間距、字母間距/h2>
如果想在網頁排版中設置文字間隔或者字母間隔就可以使用 letter-spacing 來實現，如下面代碼：
h1{letter-spacing:50px;}
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>字間距</title>
<style type="text/css">
h1{
letter-spacing:20px;
}
</style>
</head>
<body>
<h1>hello world!你好！</h1>
</body>
</html>
運行結果：
1.10、段落排版--對齊
想爲塊狀元素中的文本、圖片設置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現文本居中顯示：
text-align:center;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>對齊</title>
<style type="text/css">
div{
text-align:center;
}
</style>
</head>
<body>
<div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div>
</body>
</html>
運行結果：
此篇博客代碼下載地址：CSS教程5代碼下載
博主的所有博客目錄如下：博客文章目錄彙總
Java面試部分的博客目錄如下：Java筆試面試目錄
轉載請標明出處，原文地址：https://blog.csdn.net/weixin_41835916 如果覺得本文對您有幫助，請點擊頂支持一下，您的支持是我寫作最大的動力，謝謝。
