CSS 設定文字樣式

admin發表於2018-10-07
CSS

文字在頁面中通常用於給瀏覽者提供各種各樣的資訊。

所以文字的外觀不僅影響著使用者體驗，也會給使用者傳遞不同的資訊：

（1）.美觀與協排程會影響瀏覽器者對網站的評價，進而影響網站流量。

（2）.不同的樣式賦予內容不同的含義，比如加粗或者紅色字型可能意味著著重強調等等。

下面通過程式碼例項介紹一下CSS中常見的文字屬性。

一.text-align屬性：

通過此屬性可以設定文字的水平對齊方式。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  background-color:#ccc;
  width:300px;
  height:30px;
  margin-top:5px;
}
li:nth-child(1){
  text-align:center;
}
li:nth-child(2){
  text-align:right;
}
li:nth-child(3){
  text-align:left;
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/07/215844olrar1aqvibh56qm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

text-align屬性值有如下幾種：

（1）.left、center和right：設定元素中文字左、中和右對齊。

（2）.justify：設定文字兩端對齊。

（3）.start：預設值，內容對齊開始邊界（CSS3）。

（4）.end：內容對齊結束邊界（CSS3）。

關於後面三個屬性值詳細介紹可以參閱如下兩篇文章：

（1）.text-align:justify一章節。

（2）.text-align:start與text-align:end一章節。

二.line-height屬性：

通過此屬性可以設定文字在元素中垂直居中。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  background-color:#ccc;
  width:200px;
  height:100px;
  margin-top:5px;
  text-align:center;
  line-height:100px;
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/07/215922e836blbby7zyivcl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

只要將元素的line-height屬性值與height屬性值設定為相同即可實現垂直居中。

三.text-indent屬性:

indent翻譯成中文具有"縮排"的意思。

那麼很明顯text-indent屬性是用來設定文字的縮排效果。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  background-color:#ccc;
  width:200px;
  height:100px;
  margin-top:5px;
  text-indent:20px;
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/07/215955ta9gnfsg22mii9ak.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

設定文字的縮排尺寸是20排序。

四.text-decoration屬性：

此屬性可以給文字新增中劃線、下劃線或者上劃線等。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  width:300px;
  height:20px;
  margin-top:5px;
}
li:nth-child(1){
  text-decoration:underline;
}
li:nth-child(2){
  text-decoration:overline;
}
li:nth-child(3){
  text-decoration:line-through;
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ul>
</body>
</html>

程式碼執行效果截圖：

a:3:{s:3:\"pic\";s:43:\"portal/201810/07/220025c8jiqsqpcvn0xvpc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼可以分別設定為本的下劃線、上劃線和中劃線。

五.letter-spacing與word-spacing屬性：

這兩個屬性的區別在於letter與word的區別。

letter是字母或者字元的意思，word是單詞或者字的意思。

比如antzone是一個word，而a是一個字母。

它們之間的粒度不一樣。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.letter{
  letter-spacing:20px;
}
.word{
  word-spacing:20px;
}
</style>
</head>
<body>
<div class="letter">I am a good boy</div>
<div class="word">I am a good boy</div>
</body>
</html>

程式碼執行效果截圖：

a:3:{s:3:\"pic\";s:43:\"portal/201810/07/220100ylxp3iit9illzldl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

一個空格算作一個字元，連續的空格看做一個單詞。

相關文章