標籤：css基礎
CSS提供強大的針對文本控制能力，可以控制文本顏色上變化，文本的對齊，文本的縮排等一系內容。這一節課我們主要學習CSS如何控制文本
文字大小的設定font-size通過這個屬性我們可以設定文字的大小，可能取的值%，具體的像素也可以是EM
樣本
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.divcss8.com文字大小font-size</title>
<style type="text/css">
h1 {font-size:14px; }
</style>
</head>
<body>
<h1>十六進位樣本</h1>
</body>
</html>
控制文字字型屬性：font-family<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.divcss8.com字型屬性font-family</title>
<style type="text/css">
h1 {font-family:"黑體","宋體"; }
</style>
</head>
<body>
<h1>設定字型</h1>
</body>
</html>
PS:對H1文字應用字型，如果使用者電腦上安裝的有黑體，就是顯示黑體，如果沒有就顯示宋體。
字型粗細font-weight<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.divcss8.com字型粗細 font-weight</title>
<style type="text/css">
h1 {font-family:"黑體","宋體"; font-weight:normal;}
</style>
</head>
<body>
<h1>設定字型</h1>
</body>
</html>
Ps：通過這個屬性我們可以為一些想重點呈現的文字實現加粗，當然就像我們這個例子h1在瀏覽器中預設顯示的是加粗的，我們可以通過上邊的文字設定其為不加粗，當然也可以取值 100-900，越來越粗，也可以是bold等於900
字型顏色設定 color:顏色值；
文本修飾屬性text-decoration<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.divcss8.com文本修飾text-decoration</title>
<style type="text/css">
h1 a{font-family:"黑體","宋體"; font-weight:bold;text-decoration:none;}
h1 a:hover{text-decoration:underline;}
</style>
</head>
<body>
<h1><a href="#">設定字型</a></h1>
</body>
</html>
PS：我們通過這個屬性經常性設定連結是否帶底線，當取值為NONE時表示不要底線。滑鼠移至上方時可以加上底線，取值overline是上劃線，取值line-through為刪除線
文本縮排text-indent<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8文本縮排</title>
<style type="text/css">
p{width:200px;text-indent:2em;}
</style>
</head>
<body>
<p>divcss8網站是專註於提供CSS教程，分享一些CSS精彩的執行個體，並且自己寫一些供初學者學習的文章，同時也提供一個CSS學習免費答疑的地方t</p>
</body>
</html>
PS：該屬性經常用於在段落中為文字進行首行縮排，以及以圖換字的時候也可以取負值。
行高屬性：line-height<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8行高屬性lin-height</title>
<style type="text/css">
p{width:200px;text-indent:2em;line-height:22px;}
</style>
</head>
<body>
<p>divcss8網站是專註於提供CSS教程，分享一些CSS精彩的執行個體，並且自己寫一些供初學者學習的文章，同時也提供一個CSS學習免費答疑的地方t</p>
</body>
</html>
PS：通過該屬性可以設定段落的行與行高度，而且如果只有一行時，我們還可以讓內容垂直置中。一般設定方法為 height:22px;line-height:22px;
字間距屬性:letter-spacing<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8字距letter-spacing</title>
<style type="text/css">
p{width:200px;text-indent:2em;line-height:22px;}
pspan{letter-spacing:4px;}
</style>
</head>
<body>
<p><span>divcss8.com</span>網站是專註於提供CSS教程，分享一些CSS精彩的執行個體，並且自己寫一些供初學者學習的文章，同時也提供一個CSS學習免費答疑的地方t</p>
</body>
</html>
本文出自 “石景山電腦培訓” 部落格，請務必保留此出處http://jiefei.blog.51cto.com/6994042/1589370
css基礎系列教程4:文字屬性
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
