CSS 文本

2018-10-27 17:53 更新

通過(guò)使用CSS,我們可以控制文本樣式。例如,我們可以更改文本顏色,我們可以控制文本對(duì)齊,縮進(jìn),字母間距等。

文本顏色

color 屬性設(shè)置文本的顏色。

我們可以使用以下方式指定顏色。

  • HEX值 - 如“#ff00ee”
  • RGB值 - 如“rgb(255,0,255)”
  • 顏色名稱 - 如“紅色”

以下代碼將標(biāo)題1設(shè)置為紅色。

h1 {
    color: red;
}

文本對(duì)齊

text-align指定文本塊的對(duì)齊方式

它的可能值是:start end left right center justify。

以下代碼顯示應(yīng)用于文本塊的 text-align 屬性。

p#left {
    text-align: left;
}
p#center {
    text-align: center;
}
p#right {
    text-align: right;
}
p#justify {
    text-align: justify;
}

文本修飾

text-decoration 對(duì)文本塊應(yīng)用修飾,如下劃線。

其可能的值為: none underline overline line-through blink 。

默認(rèn)值為none,不應(yīng)用修飾。

以下代碼顯示如何使用text-decoration和text-transform屬性。

p  {
    text-decoration: line-through;
    text-transform:  uppercase;
}
p.one {
    text-decoration: underline;
}
p.two {
    text-decoration: overline;
}
p.three {
    text-decoration: line-through;
}
p.four {
    text-decoration: underline overline line-through;
}

文本變換

text-transform 將變換應(yīng)用于文本塊。

其可能的值為: none capitalize uppercase lowercase。

默認(rèn)值為none。

以下代碼顯示如何使用text-decoration和text-transform屬性。

span.lower {
    text-transform: lowercase;
}
span.upper {
    text-transform: uppercase;
}
span.capitalize {
    text-transform: capitalize;
}
span.example {
    background: pink;
}
屬性 描述 CSS
letter-spacing設(shè)置文本中字符之間的間距1
tab-size設(shè)置制表符char大小3
word-break為非CJK腳本設(shè)置換行規(guī)則3
word-spacing設(shè)置文本中單詞之間的空格1
word-wrap允許長(zhǎng)的內(nèi)容可以自動(dòng)換行3
text-align-last最后一行如何對(duì)齊3
text-align文本的水平對(duì)齊1
text-decoration-color設(shè)置文本修飾的顏色3
text-decoration-line設(shè)置文本修飾的線條樣式3
text-decoration-style集修飾樣式3
text-decoration修飾簡(jiǎn)寫(xiě)屬性3
text-indent設(shè)置文本縮進(jìn)大小1
text-justify設(shè)置對(duì)齊方法3
text-overflow設(shè)置溢出內(nèi)容的操作3
text-shadow將陰影添加到文本3
text-transform設(shè)置文本的大小寫(xiě)1


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)