4 CSS文本屬性

時間 2020-05-28

標籤 css 文本屬性欄目 CSS 简体版

原文原文鏈接

CSStext（文本）屬性可定義文本外觀，好比文本顏色，對齊文本，裝飾文本，文本縮進，行間距等html

4.1文本顏色spa

color屬性用於定義文本顏色。code

div {htm

color: red;blog

}開發

顏色表示方法：it

表示	屬性值
預約義顏色值	red，green，blue，pink
十六進制	#FF0000,#FF6600,#29D794
RGB代碼	rgb(255,0,0)或rgb（100%，0%，0%）

開發中最經常使用的是16進制io

代碼示例：table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外觀屬性之顏色</title>
    <style>
        div {
            /* color: pink; */
            /* color: #ff0000; */
            color: rgb(200,0,0);
        }
    </style>
</head>
<body>
    <div>據說喜歡pink色的男生，都喜歡男人</div>
</body>
</html>

4.2 對齊文本class

text-align 屬性用於設置元素內文本內容的水平對齊方式。

div {

text-align: center;

}

屬性值	解釋
left	左對齊（默認值）
right	右對齊
center	居中對齊

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字對齊</title>
    <style>
        h1 {
            /* 本質是讓h1盒子裏面的文字水平居中對齊 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>文本對齊</h1>
</body>
</html>

4.3裝飾文本

text-decoration 屬性規定添加到文本的修飾，能夠給文本添加下劃線，刪除線，上劃線等

屬性值	描述
none	默認。沒有裝飾線（最經常使用）
underline	下劃線。連接a自帶下劃線（經常使用）
overline	上劃線（幾乎不用）
line-through	刪除線（不經常使用）

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本裝飾之裝飾文本</title>
    <style>
        div {
            /* 下劃線 */
            /* text-decoration: underline; */
            /* 刪除線 */
            text-decoration: line-through;
            /* 上劃線 */
            /* text-decoration: overline; */
        }
        a {
            /* 取消a默認的下劃線 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        粉紅色的回憶
    </div>

    <a href="#">粉紅色的回憶</a>
</body>
</html>

4.4文本縮進

text-indent屬性用來指定文本的第一行縮進，一般將段落的首行縮進

div {

text-indent： 10px;

}

經過設置該屬性，全部元素的第一行均可以所及一個給定的長度，甚至該長度能夠是負值

text-indent: 2em;

}

em 是一個相對單位，就是當前元素（front-size）1個文字的大小，若是當前元素沒有設置大小，則會按照父元素的1個文字大小

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本縮進</title>
    <style>
        p {
            /* 文本的第一行縮進多少距離 */
            text-indent: 20px;
        }
        h4 {
            /* 若是此時寫了2em 則是當前元素 2個文字大小的距離 */
            text-indent: 2em;
        }

    </style>
</head>
<body>
    <p>生活不易，可是千萬不能放棄</p>
    <p>必定不能頹廢，要努力</p>
    <p>還要自信</p>
    <h4>just learn---------------------------------------------------------------------------------------------------</h4>
</body>
</html>

4.5行間距

line-height屬性用於設置行間距裏（行高）。能夠控制文字行與行之間的距離

line-height: 26px;

}

上間距下間距共同構成line-height（行高）

代碼示範

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行間距</title>
    <style>
        div {
            line-height: 26px;
        }
    </style>
</head>
<body>
    <div>中國人</div>
</body>
</html>

4.6文本屬性總結

屬性	表示	注意點
color	文本顏色	咱們一般用16進制好比並且是簡寫模式 #ff
text-align	文本對齊	能夠設定文字水平的對齊方式
text-indent	文本縮進	一般咱們用於段落首行縮進2個字的距離 text-indent：2em;
text-decoration	文本修飾	記住添加下劃線 underline 取消下劃線none
line-height	行高	控制行與行之間的距離

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。