CSS文本控制

2020 年 7 月 12 日
筆記
CSS3

CSS文本控制

文本基礎設置

字體設置

　　font-family可定義多個字體，系統會以從左至右的順序進行查找，如左側字體不存在，就往右側找。

　　為什麼要這麼做呢？如果你只用了一種字體，而恰好人家電腦上沒裝，那麼對不起了，他的顯示肯定是有問題的。

<style>
    div {
        /* 多設置幾種字體屬性  font-family 文字家族，就是字體的意思 */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       
    }
</style>

字體設置

自定義字體

　　可以進行自定義字體，使用方式也非常簡單。當自定義字體不存在時將通過src進行下載。注意導入字體後一定要使用format來說明字體的格式。

字體	格式
.otf	opentype
.woff	woff
.ttf	truetype
.eot	Embedded-opentype

　　不建議使用中文字體，因為文件太大且大部分是商業字體。

    <style>
        /* 導入該字體，可以多指定幾個地址 */
        @font-face { 
            font-family: "ALLEGRO";
            src: url("./ALLEGRO.TTF") format("truetype"),
                 url("./ALLEGRO.TTF") format("truetype");
        }
        div {
            /* 多設置幾種字體屬性  font-family 文字家族，就是字體的意思 */
            font-family: 'ALLEGRO', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
       
        }
    </style>

自定義字體

字體粗細

　　定義字體粗細為font-weight，它可以指定數字，也可以指定字母，數字可指定範圍為100-900。

font-weight值設定
lighter（細）
normal（正常）	400與normal相同
bold（粗體）	700與bold相同
bolder（特粗）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body>:nth-child(1){
            font-weight: lighter;
        }
        body>:nth-child(2){
            font-weight: normal;
        }
        body>:nth-child(3){
            font-weight: bold;
        }
        body>:nth-child(4){
            font-weight: bolder;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <p>字體設置: lighter</p>
    <p>字體設置：normal</p>
    <p>字體設置：bold</p>
    <p>字體設置：bolder</p>
</body>

</html>

字體粗細

字型大小大小

　　設置字型大小大小用font-size，可以設置的方式較多。有英文單詞，px，%，em，rem等等常用方式。

單詞

　　我們可以使用單詞來控制字型大小的大小，如下：

font-size單詞設置字型大小大小
xx-small	最小
x-small	較小
small	小
medium	中等
large	大
x-large	較大
xx-large	最大

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body>:nth-child(1){
            font-size: xx-small;
        }
        body>:nth-child(2){
            font-size: x-small;
        }
        body>:nth-child(3){
            font-size: small;
        }
        body>:nth-child(4){
            font-size: medium;
        }
        body>:nth-child(5){
            font-size: large;
        }
        body>:nth-child(6){
            font-size: x-large;
        }
        body>:nth-child(7){
            font-size: xx-large;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <p>字型大小設置: xx-small</p>
    <p>字型大小設置：x-small</p>
    <p>字型大小設置：small</p>
    <p>字型大小設置：medium</p>
    <p>字型大小設置：large</p>
    <p>字型大小設置：x-large</p>
    <p>字型大小設置：xx-large</p>
</body>

</html>

字型大小設置-單詞

px

　　px是固定的像素單位，如果你的網頁要在移動端使用，那麼盡量的少使用它，它不會自動的進行變化。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body>:nth-child(1){
            font-size: 10px;
        }
        body>:nth-child(2){
            font-size: 20px;
        }

    </style>
    <title>Document</title>
</head>

<body>
    <p>字型大小設置: 10px</p>
    <p>字型大小設置：20px</p>
</body>

</html>

字型大小設置-px

百分數

　　百分數是子元素相對於父元素設置的該屬性大小，如父元素的font-size是20px，子元素設置為 200%即為父元素的兩倍大小。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            font-size: 20px;
        }
        body>:nth-child(1){
            font-size: 100%;
        }
        body>:nth-child(2){
            font-size: 50%;
        }

    </style>
    <title>Document</title>
</head>

<body>
    <p>父元素字型大小：20px 字型大小設置: 100%</p>
    <p>父元素字型大小：20px 字型大小設置：50%</p>
</body>

</html>

字型大小設置-百分號

em

　　em與百分號類似，子元素的font-size:1em相當於父元素設置的font-size的100%，而0.5em則相當於父元素設置的font-size的50%。注意，對於0.多少來說，可以直接簡寫。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            font-size: 20px;
        }
        body>:nth-child(1){
            font-size: 1em;
        }
        body>:nth-child(2){
            font-size: .5em;
        }

    </style>
    <title>Document</title>
</head>

<body>
    <p>父元素字型大小：20px 字型大小設置: 1em</p>
    <p>父元素字型大小：20px 字型大小設置：.5em</p>
</body>

</html>

字型大小設置-em

rem

　　rem作為em的升級版，是目前使用較多的一種方式。它不會根據父元素的該屬性值進行變化，而是根據HTML的值，比如chorme是默認字體大小如果為16px，那麼使用1rem就相當於16px。

　　注意：有的是16px，有的是12px。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body>:nth-child(1){
            font-size: 1rem;
        }
        body>:nth-child(2){
            font-size: .5rem;
        }
        
        span{
            font-size: 16px;
        }

    </style>
    <title>Document</title>
</head>

<body>
    <p>字型大小設置: 1rem</p>
    <p>字型大小設置：5rem</p>
    <span>我是16px</span>
</body>

</html>

字型大小設置-rem

文本顏色

　　文本顏色使用color屬性來進行設定，可用單詞，rbg，rgba，#16進位色。

單詞

　　直接使用單詞，可以設定文本顏色。如color:red;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p{
            color: red;
        }
    </style>
    <title>Document</title>
</head>

<body>
    
    <p>文本顏色：red</p>

</body>

</html>

文本顏色-單詞

rgb

　　rgb是三原色，紅綠藍。格式為color:rbg(0-255,0-255,0-255)，當然也可以使用單詞在裡面。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p{
            color:rgb(255, 0, 0);
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>文本顏色：rgb(255, 0, 0)</p>

</body>

</html>

文本顏色-rgb

rgba

　　rgba相較於rgb來說，括弧中多了第4位數值，數值範圍為0-1，可用於指定透明度。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p{
            color:rgba(255, 0, 0,.5);
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>文本顏色：rgba(255, 0, 0,.5)</p>

</body>

</html>

文本顏色-rgba

#16進位數

　　格式為#xxxxxx，其中x為16進位數。如果所有x都相同，可簡寫為#xxx。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p{
            color:#FF0000;
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>文本顏色：#FF0000</p>

</body>

</html>

文本顏色-#16進位

文本行高

　　我們看一下圖，當一段文本放在一個塊級標籤或內聯塊級標籤中，那麼默認它是以標籤左上角為起始的。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>
        這是一段文本...
    </p>

</body>

</html>

文本行高默認

　　如果我們想讓他垂直居中，則使用line-height:標籤高度即可。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p{
            width: 200px;
            height: 200px;
            background-color: green;
            line-height: 200px;
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>
        這是一段文本...
    </p>

</body>

</html>

文本行高設置

文本傾斜

　　使用font-style即可，可以設定的值為italic傾斜，normal無傾斜。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body>:nth-child(1){
            font-style: italic;
        }
        body>p>:nth-child(1){
            font-style: normal;
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>我是p，我傾斜了</p>
    <p><em>我是em，我沒傾斜了</em></p>

</body>

</html>

文本傾斜

文本組合定義

一個一個寫是不是太麻煩了？我們可以使用font進行組合定義。但是使用組合定義必須注意以下幾點：

必須有字體規則

必須有字元大小規則

顏色不能進入組合定義

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            font: italic bold 1em/1.5 'Courier New', Courier, monospace;
            color: rgba(255, 0, 0, .5);
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>傾斜：italic 粗細：bold  字型大小：1em/行高:1.5 字體：'Courier New', Courier, monospace 顏色：rgba(255,0,0,.5)</p>


</body>

</html>

文本組合定義

文本樣式

大小轉換

　　如果想讓一段文本的字體與大小寫看起來不太一樣，可使用font-variant進行操作。

值	描述
normal	默認值。瀏覽器會顯示一個標準的字體。
small-caps	瀏覽器會顯示小型大寫字母的字體。
inherit	規定應該從父元素繼承 font-variant 屬性的值。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body :nth-child(1){
            font-variant:normal ;
        }
        body :nth-child(2){
            font-variant: small-caps;
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>normal</p>
    <p>small-caps</p>

</body>

</html>

文本樣式-大小轉換

字母大小寫

　　如果想對一段文本的字母做大小寫轉換，可使用text-transform。

值	描述
capitalize	首字母大寫
uppercase	全部大寫
lowercase	全部小寫

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body :nth-child(1){
            text-transform: capitalize;
        }
        body :nth-child(2){
            text-transform: uppercase;
        }
        body :nth-child(3){
            text-transform: lowercase;
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>capitalize</p>
    <p>uppercase</p>
    <p>lowercase</p>

</body>

</html>

字母大小寫

文本線條

　　我們可以用text-decoration來清除<a>標籤自帶的下劃線，當然它還有其他的很多值。

值	描述
none	默認。定義標準的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
blink	定義閃爍的文本。
inherit	規定應該從父元素繼承 text-decoration 屬性的值。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body :nth-child(1){
            text-decoration: underline;
        }
        body :nth-child(2){
            text-decoration: overline;
        }
        body :nth-child(3){
            text-decoration: line-through;
        }
        body :nth-child(4){
            text-decoration: none;
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>underline</p>
    <p>overline</p>
    <p>line-through</p>
    <a>a標籤 none</a>


</body>

</html>

文本線條

文本陰影

　　如果想讓一段文本具有陰影的效果，可使用text-shadow來進行設置，它的參數順序如下：

　　顏色，水平偏移，垂直偏移，模糊度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body :nth-child(1){
            text-shadow:#ddd 5px 5px 0.4px;
        }

    </style>
    <title>Document</title>
</head>

<body>

    <h1>歡迎來到部落格園</h1>


</body>

</html>

文本陰影

空白處理

　　如果文本中有許多空白，那麼是顯示不出我們想要的效果的，除非你在<pre>標籤中。我們可以使用white-space來控制文本中的空白顯示。它的值如下：

值	描述
pre	保留文本中的所有空白，類似使用 pre 標籤
nowrap	禁止文本換行
pre-wrap	保留空白，保留換行符
pre-line	空白合併，保留換行符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body :nth-child(1){
            white-space: pre;
        }
        body :nth-child(2){
            white-space: nowrap;
        }
        body :nth-child(3){
            white-space: pre-wrap;
        }
        body :nth-child(4){
            white-space: pre-line;
        }
    </style>
    <title>Document</title>
</head>

<body>

    <p>歡迎  來到  
        部落格  園  pre</p>

    <p>歡迎  來到  
        部落格  園  nowrap</p>

    <p>歡迎  來到  
        部落格  園  pre-wrap</p>

    <p>歡迎  來到  
        部落格  園  pre-line</p>


</body>

</html>

空白處理

文本溢出

　　如果一個容器里的文本太長，那麼它不會自動換行而是溢出。我們可以使用overflow-wrap: break-word;讓它自動換行。

　　如果你不想讓它換行，而是在結尾顯示...，我們需要用到2個組合的屬性，overflow: hidden;代表溢出部分隱藏，text-overflow: ellipsis;代表後面加上...。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        
        body :nth-child(1){
            width: 50px;
        }

    </style>
    <title>Document</title>
</head>

<body>

    <p>11111111111111111111111111111111</p>


</body>

</html>

文本溢出-未設置

　　設置了overflow-wrap: break-word;

　　設置了overflow: hidden; text-overflow: ellipsis;

段落控制

文本縮進

　　文本縮進使用text-indent，跟上單位。可以是px，em，或者rem。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        body :nth-child(1){
            border: #ddd 1px solid;
            text-indent: 2rem;
        }

    </style>
    <title>Document</title>
</head>

<body>

    <p>你好我是小淘氣</p>

</body>

</html>

文本縮進

水平對齊

　　我們可以使用text-align來進行文本的對齊方式。

值	描述
left	左對齊
right	右對齊
center	居中對齊

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        p{
            width: 200px;
            height: 200px;
            border: #ddd 1px solid;
            display: inline-block;
        }

        body :nth-child(1){
            text-align: left;
        }
        body :nth-child(2){
            text-align: right;
        }
        body :nth-child(3){
            text-align: center;
        }

    </style>
    <title>Document</title>
</head>

<body>

    <p>left</p>
    <p>right</p>
    <p>center</p>
    
</body>

</html>

水平對齊

垂直對齊

　　垂直對齊一副影像請使用vertical-align。

值	描述
baseline	默認。元素放置在父元素的基準線上。
sub	垂直對齊文本的下標。
super	垂直對齊文本的上標
top	把元素的頂端與行中最高元素的頂端對齊
text-top	把元素的頂端與父元素字體的頂端對齊
middle	把此元素放置在父元素的中部。
bottom	把元素的頂端與行中最低的元素的頂端對齊。
text-bottom	把元素的底端與父元素字體的底端對齊。
%	使用 “line-height” 屬性的百分比值來排列此元素。允許使用負值。
inherit	規定應該從父元素繼承 vertical-align 屬性的值。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        img{
            width: 100px;
            height: 100px;
            
        }
        body :nth-child(1) img{
            vertical-align: top;
        }
        body :nth-child(3) img{
            vertical-align: middle;
        }
        body :nth-child(5) img{
            vertical-align: bottom;
        }
    </style>
    <title>Document</title>
</head>

<body>

    <div>
        <img src="../th.jpg" alt="">你好，我是小豬佩奇
    </div>
    <hr>
    <div>
        <img src="../th.jpg" alt="">你好，我是小豬佩奇
    </div>
    <hr>
    <div>
        <img src="../th.jpg" alt="">你好，我是小豬佩奇
    </div>
    
</body>

</html>

垂直對齊

單詞間距

　　請使用word-spacing來控制單詞與單詞之間的間距。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            word-spacing: 2rem;
        }

    </style>
    <title>Document</title>
</head>

<body>

    <div>hello world</div>
    
</body>

</html>

單詞間距

字元間距

　　請使用letter-spacing來控制字元與字元之間的間距。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            letter-spacing: 2rem;
        }

    </style>
    <title>Document</title>
</head>

<body>

    <div>老夫聊發少年狂，錦帽貂裘千騎卷平崗</div>
    
</body>

</html>

字元間距

排版模式

　　如果想對文本進行排版，可使用writing-mode。

模式	說明
horizontal-tb	水平方向自上而下的書寫方式
vertical-rl	垂直方向自右而左的書寫方式
vertical-lr	垂直方向內內容從上到下，水平方向從左到右

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            writing-mode: vertical-rl;
            width: 8rem;
            height: 8rem;
            overflow-wrap: break-word;
        }

    </style>
    <title>Document</title>
</head>

<body>

    <div>日照香爐生紫煙，遙看瀑布掛前川，飛流直下三千尺，疑似銀河落九天。</div>
    
</body>

</html>

排版模式

Tags: CSS3