CSS 菜鳥教程

CSS 盒子模型

CSS3菜鳥教程

CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS Text(文本)

CSS文本屬性使您可以非常有效地輕松定義幾種文本樣式,例如顏色,對(duì)齊方式,間距,裝飾,變換等。

使用CSS格式化文本

CSS具有幾個(gè)用于定義文本樣式的屬性。這些屬性使您可以精確控制字符,空格,單詞,段落等的視覺外觀。

您可以設(shè)置元素的以下文本屬性:

文字顏色

文本顏色由CSS color屬性定義。了解更多關(guān)于color。

h1 {
    color: #ff0000;
}
p {
    color: green;
}
測(cè)試看看?/?

注意:盡管文本的顏色看起來像是CSS文本的一部分,但實(shí)際上是CSS中的獨(dú)立屬性。

文字對(duì)齊

text-align屬性用于設(shè)置文本的水平對(duì)齊方式。

此屬性可能的值有:left,right,center,justify,和inherit。

h1 {
    text-align: center;
}
p {
    text-align: justify;
}
測(cè)試看看?/?

注意:當(dāng)將text-align設(shè)置成justify時(shí),可以將內(nèi)容分散對(duì)齊,但是此屬性只能對(duì)齊非最后一行的內(nèi)容。。

文字修飾

text-decoration屬性用于設(shè)置或刪除文本裝飾。

此屬性的可能值有:none,underline,overline,line-through,blink和inherit。您應(yīng)避免在非鏈接的下劃線文本,否則可能會(huì)使訪問者感到困惑。

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}
測(cè)試看看?/?

警告:大多數(shù)瀏覽器都不支持blinkCSS text-decoration屬性的值。您應(yīng)該避免使用此值。

刪除鏈接默認(rèn)下劃線

該text-decoration屬性通常用于從超鏈接中刪除默認(rèn)下劃線。完全刪除下劃線可能會(huì)使訪問者感到困惑。除非您提供其他視覺提示以使其脫穎而出,同時(shí)還要設(shè)計(jì)鏈接的樣式。

例如,您可以使用點(diǎn)而不是實(shí)線在鏈接下劃線。

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}
測(cè)試看看?/?

注意:創(chuàng)建HTML鏈接時(shí),內(nèi)置在樣式表中的瀏覽器會(huì)自動(dòng)在其下劃線,以便讀者可以看到可單擊的文本。

文字轉(zhuǎn)換

該text-transform屬性用于設(shè)置文本的大小寫。

它可用于將元素的文本內(nèi)容設(shè)置為大寫或小寫字母,或?qū)⒚總€(gè)單詞的首字母大寫。對(duì)于可能的值text-transform屬性有:none,capitalize,uppercase,lowercase和inherit。

p.up {
    text-transform: uppercase;
}
p.cap {
    text-transform: capitalize;
}
p.low {
    text-transform: lowercase;
}
測(cè)試看看?/?

文字縮進(jìn)

該text-indent屬性用于設(shè)置元素的第一行文本的縮進(jìn)。該text-indent屬性的可能值為:百分比(%),長(zhǎng)度(指定縮進(jìn)空間)或inherit。

下面的示例演示如何縮進(jìn)段落的第一行。

p {
    text-indent: 100px;
}
測(cè)試看看?/?

注意:文本是從左側(cè)還是從右側(cè)縮進(jìn)取決于CSS direction屬性定義的元素內(nèi)文本的方向。

單詞間距

word-spacing用于設(shè)置單詞之間間距的屬性。

  • 字間距可能會(huì)受到文本對(duì)齊方式的影響。查看text-align屬性。

  • 保留空白時(shí),所有空格字符均受單詞間距的影響。請(qǐng)參閱CSS white-space屬性。

該word-spacing屬性的可能值為:length(指定單詞之間要插入的空格)normal和inherit。

p.one {
    word-spacing: 20px;
}
p.two {
    word-spacing: 20px;
    text-align: justify;
}
p.three {
    word-spacing: 20px;
    white-space: pre;
}
測(cè)試看看?/?

字符間距

letter-spacing屬性用于設(shè)置文本字符之間的額外間距。

此屬性的可能值為:length(指定默認(rèn)字符間空格normal以及字符之間要插入的額外空格)和inherit。

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}
測(cè)試看看?/?

行間距

line-height屬性定義一行文本的高度(也稱為Lead)。

此屬性可能的值是:百分比(%),長(zhǎng)度,數(shù)量,normal和inherit。

p {
    line-height: 1.2;
}
測(cè)試看看?/?

當(dāng)值為數(shù)字時(shí),通過將元素的字體大小乘以數(shù)字來計(jì)算行高。而百分比值則相對(duì)于元素的字體大小。

注意:不允許該屬性的負(fù)值。此屬性也是字體簡(jiǎn)寫屬性的組成部分。

如果line-height屬性的值大于font-size元素的值,則此差異(稱為“領(lǐng)先”)將切成兩半(稱為“半領(lǐng)先”),并均勻分布在in的頂部和底部行框。

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}
測(cè)試看看?/?

要了解有關(guān)文本樣式的更多信息,請(qǐng)參見字體文本相關(guān)屬性。

丰满人妻一级特黄a大片,午夜无码免费福利一级,欧美亚洲精品在线,国产婷婷成人久久Av免费高清