一篇文章精通CSS文本的問題，值得一看。

時間 2021-02-19

標籤 css html 前端 api spa 設計 code orm htm 欄目 CSS 简体版

原文原文鏈接

CSS 文本格式

代碼演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水香木魚的博客</title>
    <style>
        .demo-wrap {
            width: 96.5%;
            border: 1px solid gray;
            padding: 8px;
            --darkreader-inline-border-top: #4c4c4c;
            --darkreader-inline-border-right: #4c4c4c;
            --darkreader-inline-border-bottom: #4c4c4c;
            --darkreader-inline-border-left: #4c4c4c;
        }

        .demo-h1 {
            text-align: center;
            color: rgb(167, 201, 66);
            --darkreader-inline-color: #bdd772;
        }

        .demo-p {
            text-indent: 50px;
            text-align: justify;
            letter-spacing: 3px
        }
    </style>
</head>

<body>

    <div class="demo-wrap">
        <h1 class="demo-h1">水香木魚的博客</h1>
        <p class="demo-p">
            這是一個專一大前端領域技術探索的博客， 裏面包括HTML/CSS—Nodejs等全部前端方面的技術整理。
        </p>
    </div>
</body>

</html>

效果演示：

1.文本顏色

顏色屬性被用來設置文字的顏色。css

顏色是經過CSS最常常的指定：html

十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red

一個網頁的背景顏色是指在主體內的選擇：前端

    body {color:red;}
    h1 {color:#00ff00;}
    h2 {color:rgb(255,0,0);}

2.文本的對齊方式

文本排列屬性是用來設置文本的水平對齊方式。api

文本可居中或對齊到左或右,兩端對齊.ui

當text-align設置爲」justify」，每一行被展開爲寬度相等，左，右外邊距是對齊（如雜誌和報紙）。spa

    h1 {text-align:center;}
    p.date {text-align:right;}
    p.main {text-align:justify;}

3.文本修飾

text-decoration 屬性用來設置或刪除文本的裝飾。設計

從設計的角度看 text-decoration屬性主要是用來刪除連接的下劃線：code

    a {text-decoration:none;}

也能夠這樣裝飾文字：orm

    h1 {text-decoration:overline;}
    h2 {text-decoration:line-through;}
    h3 {text-decoration:underline;}

4.文本轉換

文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。htm

可用於全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫。

    p.uppercase {text-transform:uppercase;}
    p.lowercase {text-transform:lowercase;}
    p.capitalize {text-transform:capitalize;}

5.文本縮進

文本縮進屬性是用來指定文本的第一行的縮進。

    p {text-indent:50px;}

CSS文本屬性

屬性	描述
color	設置文本顏色
direction	設置文本方向
letter-spacing	設置字符間距
line-height	設置行高
text-align	對齊元素中的文本
text-decoration	向文本添加修飾
text-indent	縮進元素中文本的首行
text-shadow	設置文本陰影
text-transform	控制元素中的字母
unicode-bidi	設置或返回文本是否被重寫
vertical-align	設置元素的垂直對齊
white-space	設置元素中的空白處理方式
word-spacing	設置字間距

相關標籤/搜索

每日一句

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