文本格式
該文本樣式與一些文本格式屬性。 標題使用text-align, text-transform和color屬性。 段落縮進,對齊,並指定字符間距。 下劃線從該有色刪除“試一試”的鏈接。
文字顏色
該color
屬性用來設置文本的顏色。
使用CSS,顏色是最經常被指定:
- 色彩的名字-像"red"
- 一個十六進制值-象"#ff0000"
- 一個RGB值-像"rgb(255,0,0)"
看看CSS顏色值可能的顏色值的完整列表。
對於一個頁面默認的文本顏色在體內選擇限定。
注意:對於符合W3C CSS:如果定義color 屬性,還必須定義background-color 屬性。 |
文本對齊
該text-align
屬性用於設置文本的水平對齊方式。
文本可以向左或右對齊,居中還是有道理的。
下面的示例演示中心對齊,左,右對齊文本(左對齊是默認的,如果文本方向是左到右,右對齊是默認的,如果文本方向是從右到左):
當text-align
屬性被設置為"justify" ,每行被拉伸,使得每行具有等於寬度,和左,右邊緣是直的(如在雜誌和報紙):
文本修飾
該text-decoration
屬性用來設置或從文本中刪除裝飾。
該值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
屬性用於指定文本的第一行的縮進:
字母間距
該letter-spacing
屬性用於指定文本字符之間的空間。
下面的例子演示了如何增加或減少字符之間的空間:
行高
該line-height
屬性用於指定線之間的空間:
文字方向
該direction
屬性用於更改元素的文本方向:
字間距
的word-spacing
屬性用於在文本來指定字之間的空間。
下面的例子演示了如何增加或減少單詞之間的空格:
更多示例
禁用元素中文字環繞
這個例子演示了如何禁用元素中文字換行。
圖像的垂直對齊
這個例子演示了如何設置圖像的垂直對齊文本。
添加陰影文本
這個例子演示了如何將陰影添加到文本。
自測練習用!
所有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 | 增加或減少的話之間的空間中的文本 |