最新的Web開發教程
 

CSS文本


文本格式

該文本樣式與一些文本格式屬性。 標題使用text-align, text-transformcolor屬性。 段落縮進,對齊,並指定字符間距。 下劃線從該有色刪除“試一試”的鏈接。


文字顏色

color屬性用來設置文本的顏色。

使用CSS,顏色是最經常被指定:

  • 色彩的名字-像"red"
  • 一個十六進制值-象"#ff0000"
  • 一個RGB值-像"rgb(255,0,0)"

看看CSS顏色值可能的顏色值的完整列表。

對於一個頁面默認的文本顏色在體內選擇限定。

body {
    color: blue;
}

h1 {
    color: green;
}
試一試»
注意注意:對於符合W3C CSS:如果定義color屬性,還必須定義background-color屬性。

文本對齊

text-align屬性用於設置文本的水平對齊方式。

文本可以向左或右對齊,居中還是有道理的。

下面的示例演示中心對齊,左,右對齊文本(左對齊是默認的,如果文本方向是左到右,右對齊是默認的,如果文本方向是從右到左):

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
試一試»

text-align屬性被設置為"justify" ,每行被拉伸,使得每行具有等於寬度,和左,右邊緣是直的(如在雜誌和報紙):

div {
    text-align: justify;
}
試一試»

文本修飾

text-decoration屬性用來設置或從文本中刪除裝飾。

該值text-decoration: none;經常被用來從鏈接中刪除下劃線:

a {
    text-decoration: none;
}
試一試»

其他text-decoration值用來裝飾的文字:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
試一試»
注意注意:不建議強調文本不是一個鏈接,因為這往往混淆了讀者。

文本轉換

text-transform屬性用於指定文本大寫和小寫字母。

它可以用來把一切都變成大寫或小寫字母,大寫或每個單詞的第一個字母:

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
試一試»

文本縮進

text-indent屬性用於指定文本的第一行的縮進:

p {
    text-indent: 50px;
}
試一試»

字母間距

letter-spacing屬性用於指定文本字符之間的空間。

下面的例子演示了如何增加或減少字符之間的空間:

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}
試一試»

行高

line-height屬性用於指定線之間的空間:

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}
試一試»

文字方向

direction屬性用於更改元素的文本方向:

div {
    direction: rtl;
}
試一試»

字間距

word-spacing屬性用於在文本來指定字之間的空間。

下面的例子演示了如何增加或減少單詞之間的空格:

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}
試一試»

例子

更多示例

禁用元素中文字環繞
這個例子演示了如何禁用元素中文字換行。

圖像的垂直對齊
這個例子演示了如何設置圖像的垂直對齊文本。

添加陰影文本
這個例子演示了如何將陰影添加到文本。


自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5»


所有CSS文本屬性

屬性 描述
color 設置文本的顏色
direction 指定文本的方向/書寫方向
letter-spacing 增加或減少的字符之間的空間中的文本
line-height 設置行高度
text-align 指定文本的水平對齊方式
text-decoration 指定裝飾添加到文本
text-indent 指定一個文本塊中的第一行的縮進
text-shadow 指定添加到文本的陰影效果
text-transform 控制文字的資本
unicode-bidi 與一起使用方向屬性來設置或返回文本是否應該重寫以支持多種語言在同一文件中
vertical-align 設置元素的垂直取向
white-space 指定元素中空白的處理方式
word-spacing 增加或減少的話之間的空間中的文本