溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Css基本樣式————文本

發布時間:2020-07-09 16:48:28 來源:網絡 閱讀:418 作者:yeleven 欄目:開發技術

一、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"這個屬性不會把當前的文字拆開(這個效果非常不錯)







向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女