css3中text屬性有哪些
css3中text屬性有：1、顏色屬性color；2、文字對齊屬性【text-align】；3、字元間距屬性【letter-spacing】；4.文字行高屬性【line-height 】；5、文字修飾屬性【text-decoration】。
本教學操作環境：windows10系統、css3版，此方法適用於所有品牌電腦。
（學習影片分享：css影片教學）
css3中text屬性有：
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>相關推薦：CSS教學
以上是css3中text屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在Python中取得整數位面量屬性而不是SyntaxError？
Aug 20, 2023 pm 07:13 PM
要獲得intliteral屬性而不是語法錯誤，請使用空格或括號。intliteral是Python中NumericLiterals的一部分。NumericLiterals還包括以下四種不同的數字類型-int（有符號整數） - 它們通常被稱為整數或整數，是正數
如何在Java中使用Gson重命名JSON的屬性？
Aug 27, 2023 pm 02:01 PM
Gson@SerializedName註解可以序列化為JSON，並將提供的名稱值作為其欄位名稱。此註解可以覆寫任何FieldNamingPolicy，包括可能已在Gson實例上設定的預設欄位命名策略。可以使用GsonBuilder類別來設定不同的命名策略。語法@Retention(value=RUNTIME)@Target(value={FIELD,METHOD})public@interfaceSerializedName範例importcom.google.gson.annotations.*;
Python的dir()函數：查看物件的屬性和方法
Nov 18, 2023 pm 01:45 PM
Python的dir()函數：查看物件的屬性和方法，需要具體程式碼範例摘要：Python是一種強大而靈活的程式語言，其內建函數和工具為開發人員提供了許多方便的功能。其中一個非常有用的函數是dir()函數，它允許我們查看一個物件的屬性和方法。本文將介紹dir()函數的用法，並透過具體的程式碼範例來示範其功能和用途。正文：Python的dir()函數是一個內建函數，
css3怎麼實現花邊邊框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。
Win11磁碟屬性未知怎麼辦
Jul 03, 2023 pm 04:17 PM
Win11磁碟屬性未知怎麼辦？近期Win11用戶在電腦的使用中，發現系統出現提示磁碟錯誤的情況，這是怎麼回事？而且該如何解決呢？很多小夥伴不知道怎麼詳細操作，小編下面整理了Win11磁碟出錯的解決步驟，如果你有興趣的話，跟著小編一起往下看看吧！ Win11磁碟出錯的解決步驟1、首先，按鍵盤上的Win+E組合鍵，或點選工作列上的檔案總管； 2、檔案總管的右側邊欄，找到邊右鍵點選本機磁碟（C ：），在開啟的選單項目中，選擇屬性； 3、本機磁碟（C：）屬性窗口，切換到工具選
CSS中bottom屬性語法
Feb 21, 2024 pm 03:30 PM
CSS中bottom屬性語法及程式碼範例在CSS中，bottom屬性用於指定一個元素與容器底部之間的距離。它可以控制一個元素相對於其父元素底部的位置。 bottom屬性的語法如下：element{bottom:value;}其中，element表示要套用該樣式的元素，value表示要設定的bottom值。 value可以是一個具體的長度值，例如像素
pageXOffset屬性在JavaScript中的作用是什麼？
Sep 16, 2023 am 09:17 AM
如果您想要取得文件從視窗左上角捲動到的像素，請使用pageXoffset和pageYoffset屬性。對水平像素使用pageXoffset。範例您可以嘗試執行以下程式碼來了解如何在JavaScript中使用pageXOffset屬性-現場示範<!DOCTYPEhtml><html> <head> <style> &
爐石戰記絕望線縷屬性介紹
Mar 20, 2024 pm 10:36 PM
絕望線縷是暴雪娛樂旗下佳作《爐石戰記》中的一張稀有卡牌，在「威茲班的工坊」卡包中有機會獲得。可消耗100/400點奧術之塵合成普通/金色版本。爐石戰記絕望線縷屬性介紹答：在威茲班的工坊卡包中有幾率獲得，也可以透過奧術之塵合成。稀有度：稀有類型：法術職業：死亡騎士法力值：1效果：使所有隨從獲得亡語：對所有隨從造成1點傷害
