溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、CSS文本屬性可定義文本外觀
二、通過文本屬性，可以改變文本的顏色、字符間距、對齊文本、裝飾文本、對文本縮進
三、常用屬性：
color 文本顏色
body{
color: aqua;
}
<body>
<p>查看顏色</p>
</body>這里給body設置color,在p標簽中可以看到效果
說明color這個屬性是可以繼承的
direction 文本方向
line-height 行高
letter-spacing 字符間距
text-align 對齊元素中的文本
p{
color: red;
text-align: right;
}
<body>
<p>Hello World</p>
</body> text-decoration 向文本中添加修飾
text-indent 縮進元素中文本的首行
h4{
text-indent: 2em;
}
<body>
<div>
<h4>靜夜思</h4>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>舉頭望明月</p>
<p>低頭思故鄉</p>
</div>
</body>也可以按百分比縮進
text-transform 元素中的字母
p{
text-transform: capitalize;
}
<body>
<div>
<p>there is a beautiful girl</p>
<p>a so lovely girl</p>
<p>i always tell myself "never give up,never give up, never give up!"</p>
</div>
</body>capitalize:把所有單詞的首字母大寫
lowercase：全部變小寫
uppercase：全部變大寫
inherit(中文意思為“繼承”):默認方式（不改變原文內容）
unicode-bidi 設置文本方向
white-sapce 元素中空白的處理方式
word-spacing 字間距
四、CSS3文本效果：
text-shadow:向文本添加陰影
p{
text-shadow: 5px 5px 5px #FF0000;
}
<body>
<div>
<p>there is a beautiful girl</p>
<p>a so lovely girl</p>
<p>i always tell myself "never give up,never give up, never give up!"</p>
</div>
</body>text-shadow需要設置4個值
第一個值：相對于原本文字距左的距離
第二個值：距當前文本上方的位置
第三個值：清晰度
第四個值：背景顏色
word-wrpa:規定文本的換行規則
p{
width: 100px;
text-wrap: normal;
}width:100px; 設置p元素整體寬度為100
text-wrap:normal; 自動換行
此外還有一個功能
如果<p></p>內寫的是英文，"text-wrap"這個屬性不會把當前的文字拆開（這個效果非常不錯）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
