溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css3中text屬性的使用示例的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
css3中text屬性有：1、顏色屬性color；2、文本對齊屬性text-align；3、字符間距屬性letter-spacing；4、文本行高屬性line-height；5、文本修飾屬性text-decoration。
1、color
作用：指定文本的顏色
說明：該屬性在塊、行內、行內塊的樣式表中都可以使用，改變被控制元素內部所有文本的顏色
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text屬性</title>
<style type="text/css">
#coDiv {
color: #00c6ff;
}
#coP {
color: #2b542c;
}
#coSpan {
color: palevioletred;
}
#coStrong {
color: blueviolet;
}
#colIn {
color: deeppink;
}
</style>
</head>
<body>
<div id="coDiv">
<p id="coP">
我是一名前端愛好者1
</p>
我是一名前端愛好者2
</div>
<span id="coSpan">
我是一名前端愛好者3
<strong id="coStrong">我是一名前端愛好者4</strong>
</span>
<input type="text" id="colIn" />
</body>
</html>2、text-align
作用：指定元素文本的水平對齊方式
說明：只在塊級元素中使用生效，直接用在內聯元素上不生效。如果使用該屬性，在塊元素中包含的文本、內聯元素將會對齊，其內的塊元素默認不設置此屬性的話也會對齊，是因為子塊元素繼承父塊元素的text-align的屬性
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3之font屬性</title>
<style type="text/css">
div {
border: 1px solid;
width: 1200px;
height: 150px;
}
#showdiv1 {
text-align: left;
}
#showdiv2 {
text-align: center;
}
#showdiv3 {
text-align: right;
}
#showdiv4 {
text-align: justify;
}
</style>
</head>
<body>
<div id="showdiv1">
大家好
</div>
<div id="showdiv2">
大家好
</div>
<div id="showdiv3">
大家好
</div>
<div id="showdiv4">
In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
</div>
</body>
</html>3、letter-spacing:
作用：增加或減少字符間的空白 （字符間距）
說明：負值過大時，字體會產生擠壓，但不會重疊
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text屬性</title>
<style type="text/css">
#lsSpan1 {
letter-spacing: normal;
}
#lsSpan2 {
letter-spacing: 10px;
}
#lsSpan3 {
letter-spacing: -4px;
}
</style>
</head>
<body>
<span id="lsSpan1">Hello World</span><br>
<span id="lsSpan2">Hello World</span><br>
<span id="lsSpan3">Hello World</span><br>
</body>
</html>4、line-height:
作用：設置文本的行高
說明：不允許使用負值
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text屬性</title>
<style type="text/css">
#lsSpan1 {
line-height: 16px;
border: 1px solid;
}
#lsSpan2 {
line-height: 2em;
border: 1px solid;
}
</style>
</head>
<body>
<p id="lsSpan1">Hello World</p><br>
<p id="lsSpan2">Hello World</p><br>
</body>
</html>5、text-decoration
作用：規定添加到文本的修飾，下劃線、上劃線、刪除線等
說明：該屬性有以下三種簡寫 text-decoration-line，text-decoration-color，text-decoration-style
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text屬性</title>
<style type="text/css">
#lsSpan1 {
text-decoration: none;
text-decoration-line: overline;
}
#lsSpan2 {
text-decoration: underline;
text-decoration-color: pink;
}
#lsSpan3 {
text-decoration: overline;
text-decoration-style: wavy;
}
#lsSpan4 {
text-decoration: line-through;
}
#lsSpan5 {
text-decoration: overline wavy palevioletred;
}
</style>
</head>
<body>
<a id="lsSpan1">這是超鏈接</a><br>
<p id="lsSpan2">Hello World</p><br>
<p id="lsSpan3">Hello World</p><br>
<p id="lsSpan4">Hello World</p><br>
<p id="lsSpan5">Hello World</p><br>
</body>
</html>感謝各位的閱讀！關于css3中text屬性的使用示例就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
