碼上快樂

相關內容    簡體    繁體

css筆記——文本樣式

本文轉載自   查看原文   2017-10-18 11:41   1077    css/ 前端筆記

聊聊text-decoration、text-indent、text-transform、letter-spacing、word-spacing、vertical-align。下面是一些常用設置文本樣式的css樣式：

text-decoration: underline;                  /* 設置文字下划線 */

text-indent: 35px;                                /* 設置縮進 */

text-transform: uppercase;                 /* 設置英文字母轉大寫 */

letter-spacing: 3px;                             /* 設置字間距 */

word-spacing: 10px;                            /* 設置詞間距 */

 vertical-align: -20px;                          /* 設置垂直對齊 */

目錄：

1.text-decoration

2.text-indent

3.text-transform

4.letter-spacing

5.word-spacing

6.vertical-align

7.white-space

1.text-decoration

定義什么請移步：w3school

說明

這個屬性允許對文本設置某種效果，如加下划線。如果后代元素沒有自己的裝飾，祖先元素上設置的裝飾會“延伸”到后代元素中。不要求用戶代理支持 blink。

默認值： none
繼承性： no
版本： CSS1
JavaScript 語法： object.style.textDecoration="overline"

可能的值

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

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本實例-設置文本字體效果</title>
    <style type="text/css">
    h2 {
        text-decoration: underline;
    }

    .p1 {
        text-decoration: overline;
    }

    .p2 {
        text-decoration: line-through;
    }

    .sp1 {
        text-decoration: blink;
    }

    .decoration {
        text-decoration: underline;
        padding: 10px;
    }
    </style>
</head>

<body>
    <h1>none默認。定義標准的文本</h1>
    <h2>underline定義文本下的一條線。</h2>
    <p class="p1">overline定義文本上的一條線。</p>
    <p class="p2">line-through定義穿過文本下的一條線。</p>
    <span class="sp1">blink定義閃爍的文本。</span>
    <div class="decoration">
        <span class="sp2">inherit規定應該從父元素繼承 text-decoration 屬性的值。</span>
    </div>
</body>

</html>

注釋：IE、Chrome 或 Safari 不支持 "blink" 屬性值。

效果圖

2.text-indent

 定義什么請移步：w3school

說明

用於定義塊級元素中第一個內容行的縮進。這最常用於建立一個“標簽頁”效果。允許指定負值，這會產生一種“懸掛縮進”的效果。

默認值： not specified
繼承性： yes
版本： CSS1
JavaScript 語法： object.style.textIndent="50px"

可能的值

值 描述
length 定義固定的縮進。默認值：0。
% 定義基於父元素寬度的百分比的縮進。
inherit 規定應該從父元素繼承 text-indent 屬性的值。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .indent{
            width: 300px;
            margin: 0 auto;
        }
        .text1{
            text-indent: 20px;
        }
        .text2{
            text-indent: 20%;
        }
    </style>
</head>
<body>
<div class="indent">
    <div class="text1">測試測試測試</div>
    <div class="text2">測試測試測試</div>
</div>
</body>
</html>

效果圖

3.text-transform

 定義什么請移步：w3school

說明

這個屬性會改變元素中的字母大小寫，而不論源文檔中文本的大小寫。如果值為 capitalize，則要對某些字母大寫，但是並沒有明確定義如何確定哪些字母要大寫，這取決於用戶代理如何識別出各個“詞”。

默認值： none
繼承性： yes
版本： CSS1
JavaScript 語法： object.style.textTransform="uppercase"

可能的值

值 描述
none 默認。定義帶有小寫字母和大寫字母的標准的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，僅有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .uppercase1 {
        text-transform: uppercase;
    }

    p.uppercase2 {
        text-transform: uppercase;
    }

    .uppercase2 input {
        text-transform: uppercase;
    }

    p.lowercase {
        text-transform: lowercase;
    }

    p.capitalize {
        text-transform: capitalize;
    }

    .text_transform {
        text-transform: uppercase;
    }

    p.inherit {
        text-transform: inherit;
    }
    </style>
</head>

<body>
    <h1 class="uppercase1">This Is An H1 Element</h1>
    <p class="uppercase2">This is some text in a paragraph.
        <input type="text" placeholder="This is some text in a paragraph.">
    </p>
    <p class="lowercase">This is some text in a paragraph.</p>
    <p class="capitalize">This is some text in a paragraph.</p>
    <div class="text_transform">
        dddd
        <p class="inherit">This is some text in a paragraph.</p>
    </div>
</body>

</html>

效果圖

在input框中輸入： wet

顯示結果：

然后分別執行以下代碼：

document.getElementsByClassName('uppercase1')[0].innerHTML;
document.getElementsByClassName('uppercase1')[0].innerText;
document.getElementsByClassName('uppercase2')[0].innerHTML;
document.getElementsByClassName('uppercase2')[0].innerText;
document.getElementsByTagName('input')[0].value;

 

從上圖可以看出，雖然個input添加了 text-transform: uppercase;  但是，css只是改變了頁面顯示的文本樣式，但真實的value值並沒有發生改變

4.letter-spacing

 定義什么請移步：w3school

說明

默認值： normal
繼承性： yes
版本： CSS1
JavaScript 語法： object.style.letterSpacing="3px"

可能的值

值 描述
normal 默認。規定字符間沒有額外的空間。
length 定義字符間的固定空間（允許使用負值）。
inherit 規定應該從父元素繼承 letter-spacing 屬性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .text_letter_spacing {
        width: 500px;
        margin: 20px auto;
    }

    .p1 {
        letter-spacing: -0.5em;
    }

    .p2 {
        letter-spacing: 20px;
    }
    </style>
</head>

<body>
    <div class="text_letter_spacing">
        <p class="p1">This is text 1</p>
        <p class="p2">This is text 2</p>
    </div>
</body>

</html>

效果圖

 

5.word-spacing

 定義什么請移步：w3school

說明

默認值： normal
繼承性： yes
版本： CSS1
JavaScript 語法： object.style.wordSpacing="10px"

可能的值

值 描述
normal 默認。定義單詞間的標准空間。
length 定義單詞間的固定空間。
inherit 規定應該從父元素繼承 word-spacing 屬性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>增加或減少單詞間距（字間隔）</title>
    <style type="text/css">
    p.spread {
        word-spacing: 30px;
    }

    p.tight {
        word-spacing: -0.5em;
    }
    </style>
</head>

<body>
    <div>
        <p class="spread">This is some text. This is some text.</p>
        <p class="tight">This is some text. This is some text.</p>
    </div>
</body>

</html>

效果圖

6.vertical-align

定義什么請移步：w3school

說明

默認值： baseline
繼承性： no
版本： CSS1
JavaScript 語法： object.style.verticalAlign="bottom"

可能的值

值 描述
baseline 默認。元素放置在父元素的基線上。
sub 垂直對齊文本的下標。
super 垂直對齊文本的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字體的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字體的底端對齊。
length 通過距離升高（正值）或降低（負值）元素。'0cm'等同於'baseline'
% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit 規定應該從父元素繼承 vertical-align 屬性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vertical-align</title>
    <style type="text/css">
    div {
        color: pink;
        font-size: 25px;
    }

    div span {
        color: #000;
        font-size: 15px;
    }

    .test1 {
        vertical-align: baseline;
    }

    .test2 {
        vertical-align: sub;
    }

    .test3 {
        vertical-align: super;
    }

    .test4 {
        vertical-align: top;
    }

    .test5 {
        vertical-align: text-top;
    }

    .test6 {
        vertical-align: middle;
    }

    .test7 {
        vertical-align: bottom;
    }

    .test8 {
        vertical-align: text-bottom;
    }

    .test9 {
        vertical-align: 22px;
    }

    .test10 {
        vertical-align: 30%;
    }
    </style>
</head>

<body>
    <div>father<span class="test1">vertical-align: baseline默認。元素放置在父元素的基線上</span></div>
    <div>father<span class="test2">vertical-align: sub垂直對齊文本的下標。</span></div>
    <div>father<span class="test3">vertical-align: super垂直對齊文本的上標</span></div>
    <div>father<span class="test4">vertical-align: top把元素的頂端與行中最高元素的頂端對齊</span></div>
    <div>father<span class="test5">vertical-align: text-top把元素的頂端與父元素字體的頂端對齊</span></div>
    <div>father<span class="test6">vertical-align: middle把此元素放置在父元素的中部。</span></div>
    <div>father<span class="test7">vertical-align: bottom把元素的頂端與行中最低的元素的頂端對齊。</span></div>
    <div>father<span class="test8">vertical-align: text-bottom把元素的底端與父元素字體的底端對齊。</span></div>
    <div>father<span class="test9">vertical-align: 22px上移22px</span></div>
    <div>father<span class="test10">vertical-align: 30%上移30%</span></div>
</body>

</html>

效果圖

7.white-space

定義什么請移步：w3school

說明

white-space 屬性設置如何處理元素內的空白。

這個屬性聲明建立布局過程中如何處理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默認值： normal
繼承性： yes
版本： CSS1
JavaScript 語法： object.style.whiteSpace="pre"

可能的值

值 描述
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽；文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合並空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .white-space-demo {
        width: 170px;
        background-color: pink;
    }

    p {
        font-size: 18px;
    }

    .p1 {
        white-space: pre;
    }

    .p2 {
        white-space: nowrap;
    }

    .p3 {
        white-space: pre-wrap;
    }

    .p4 {
        white-space: pre-line;
    }
    </style>
</head>

<body>
    <div class="white-space-demo">
        <p>the     latest  update  of  oracle solaris</p>
        <p>使用white-space pre效果</p>
        <p class="p1">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
        <p>使用white-space nowrap效果</p>
        <p class="p2">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
        <p>使用white-space pre-wrap效果</p>
        <p class="p3">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
        <p>使用white-space pre-line效果</p>
        <p class="p4">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
    </div>
</body>

</html>

效果圖

 

 

推薦：

我對CSS vertical-align的一些理解與認識（一）

CSS vertical-align的深入理解(二)之text-top篇

CSS深入理解vertical-align和line-height的基友關系


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 css字體樣式+文本樣式 （3）css文本樣式 css文本樣式，空格 CSS 文本樣式 CSS文本樣式屬性 css文本樣式 CSS樣式更改——文本Content css文本樣式text、字體樣式font CSS中的字體樣式和文本樣式 CSS(2)---css字體、文本樣式屬性
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM