一篇文章精通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最經常的指定：

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

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

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

2.文本的對齊方式

文本排列屬性是用來設定文本的水平對齊方式，

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

當text-align設定為”justify”，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙），

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

3.文本修飾

text-decoration 屬性用來設定或洗掉文本的裝飾，

從設計的角度看 text-decoration屬性主要是用來洗掉鏈接的下劃線：

    a {text-decoration:none;}

也可以這樣裝飾文字：

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

4.文本轉換

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

可用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫，

    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	設定字間距

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/260905.html

標籤：Html/Css

上一篇：如何玩轉CSS的Id 和 Class選擇器？

下一篇：教你玩轉CSS Overflow