CSS - 文字樣式

上一頁
下一頁

CSS 文字樣式涉及透過設定合適的顏色、對齊方式、字母間距和縮排等來修改文字內容的外觀，使其更具視覺吸引力。本章演示如何使用 CSS 屬性來設定網頁中的文字樣式。

目錄


 

如何在 CSS 中設定文字樣式？

以下是 CSS 中設定文字樣式的常用方法。

  • 更改顏色：網頁中文字的預設顏色為黑色。您可以根據網頁主題使用 CSS 中的 color 屬性更改此顏色。
  • 設定對齊方式：您可以使用 css 中的 text-align 屬性指定容器內文字的對齊方式（居中、左對齊、右對齊）。
  • 文字修飾：CSS 中的 text-decoration 屬性可用於向文字新增下劃線、上劃線或刪除線等效果。
  • 陰影效果：如果您想在網頁文本週圍建立陰影，可以使用 CSS 中的 text-shadow 屬性。這可以為文字建立 3D 效果或細微的光暈。
  • 更改字型樣式：font-style 屬性允許您將文字樣式設定為普通、斜體或傾斜。

CSS 文字顏色屬性

如上所述，color 屬性用於設定文字的顏色。顏色可以使用顏色名稱、十六進位制值、rgb 值或 hsl 值指定。

示例

<!DOCTYPE html>
<html>

<body>
    <p style = "color: blueviolet;">
        Color Name: blueviolet;
    </p>

    <p style = "color:#ff00ff;">
        Hexadecimal value: #ff00ff;
    </p>

    <p style = "color: rgb(255,124,100);">
        RGB value: rgb(255, 124, 100);
    </p>
</body>

</html>

CSS 文字對齊屬性

網頁中的文字可以在容器內水平和垂直對齊。

  • text-align 屬性指定容器中文字的水平對齊方式。（左對齊、右對齊、居中、兩端對齊）
  • vertical-align 屬性用於將文字垂直對齊到頂部、底部、基線、中間。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        th{
            vertical-align: bottom;
            border: 2px solid; 
            width: 200px; 
            height: 150px;
        }
    </style>
</head>
<body>
   <h2>Text Alignment</h2>
        <p style="text-align: left;">Text Left Alignment.</p>
        <p style="text-align: right;">Text Right Alignment.</p>
        <p style="text-align: center;">Text Center Alignment.</p>

        <table>
            <th>This is vertical alignment</th>
        </table>
</body>
</html>

CSS 文字方向屬性

文字方向是指文件或元素中文字字元的方向。在 CSS 中，您可以使用 direction 屬性設定文字方向。此屬性接受兩個值

  • ltr（從左到右）：預設值，用於從左到右書寫的語言，例如英語。除非您要覆蓋繼承的從右到左方向，否則無需顯式指定此值。
  • rtl（從右到左）：用於從右到左書寫的語言，例如阿拉伯語或希伯來語。使用 rtl 時，文字預設情況下將右對齊。

此外，CSS 提供了一個簡寫屬性 unicode-bidi 來控制 雙向演算法，該演算法指定當不同書寫方向的字元出現在同一段落中時的顯示方式。

示例

<!DOCTYPE html>
<html>

<body>
    <p style = "direction: rtl;">
        Right to Left
    </p>

    <p style = "direction: ltr;">
        Left to Right
    </p>
</body>

</html>

CSS 文字修飾屬性

text-decoration 屬性有助於向文字新增額外的修飾，例如新增線條（下劃線、刪除線、上劃線）以及線條的顏色、樣式和粗細。

它是 text-decoration-line、text-decoration-style、text-decoration-color 和 text-decoration-thickness 的簡寫屬性。

text-decoration: [text-decoration-line] || [text-decoration-style] ||
                 [text-decoration-color] || [text-decoration-thickness];

示例

<!DOCTYPE html>
<html>

<body>
    <h2>Text Decoration</h2>
    <p style="text-decoration: overline solid red 5px;">
        Overline text decoration.
    </p>
    <p style="text-decoration: line-through solid green 1px;">
        Line-through text decoration.
    </p>
    <p style="text-decoration: underline dashed 2pt blue;">
        Underline text decoration.
    </p>
</body>

</html>

CSS 文字轉換屬性

text-transform 屬性用於透過多種方式轉換文字的外觀來更改文字的外觀。它可以用於將文字轉換為大寫、小寫、將每個單詞的首字母大寫，甚至將所有字母大寫。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p{
            font-family: arial, sans-serif;
            font-size: 1em;
        }
    </style>
</head>

<body>
    <h2>Text Transform</h2>
    <p style="text-transform: capitalize;">
        capitalizes the first character of each word.
    </p>

    <p style="text-transform: uppercase;">
        Transforms all text to uppercase.
    </p>

    <p style="text-transform: lowercase;">
        Transforms all text to Lowercase.
    </p>
</body>

</html>

CSS 文字強調屬性

CSS 的 text-emphasis 屬性用於在文字塊上應用強調標記。這些標記通常用於突出顯示特定內容或指示某些語言的發音或重音。

它是 text-emphasis-style 和 text-emphasis-color 的簡寫。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p{
            font-family: arial, sans-serif;
            font-size: 1em;
        }
    </style>
</head>

<body>
   <h2>Text Emphasis</h2>
        <p style="text-emphasis: dot;"> 
            The text is emphasized using dot.
        </p>

        <p style="text-emphasis: circle red;">
            The text is emphasized using red circle.
        </p>

        <p style="text-emphasis: triangle;"> 
            The text is emphasized using triangle.
        </p>
</body>

</html>

CSS 文字縮排屬性

css 中的 text-indent 屬性用於在頁邊距和文字第一行之間新增空格。適當的縮排可以增強頁面上文字的可讀性和清晰度。

您可以為此屬性使用長度（畫素、em 等）、百分比或 inherit 等關鍵字的值。

示例

<html>

<body>
    <h2>Text indentation</h2>
    <p style="text-indent: 2cm;">Text indentation: 2 cm.</p>
    <p style="text-indent: 2in;">Text indentation: 2 inches.</p>
    <p style="text-indent: 20%;">Text indentation: 20%.</p>
</body>

</html>

CSS 字母間距屬性

letter-spacing 屬性用於調整文字字母之間的間距。字母之間的間距可以增加或減少。

您可以為此屬性使用長度（畫素、em 等）、百分比或 inherit 等關鍵字的值。

示例

<!DOCTYPE html>
<html>

<body>
    <h2>Letter spacing</h2>
    <p style="letter-spacing: normal;">
        Letter spacing normal.
    </p>
    <p style="letter-spacing: 5px;">
        Letter spacing increased.
    </p>
    <p style="letter-spacing: -1px;">
        Letter spacing decreased.
    </p>
</body>

</html>

CSS 字間距屬性

與字母間距類似，word-spacing 屬性用於調整文字單詞之間的間距。單詞之間的間距可以增加或減少。

您可以為此屬性使用長度（畫素、em 等）、百分比或 inherit 等關鍵字的值。

示例

<!DOCTYPE html>
<html>

<body>
    <h2>Word spacing</h2>
    <p style="word-spacing: normal;">
        Word spacing normal.
    </p>
    <p style="word-spacing: 100px;">
        Word spacing increased.
    </p>
    <p style="word-spacing: -2px;">
        Word spacing decreased.
    </p>
</body>

</html>

CSS white-space 屬性

white-space 屬性控制如何處理元素內的空白。它允許您管理文字中空格、製表符和換行符的處理方式。

您可以為此屬性使用 normal、nowrap、pre、pre-wrap 和 pre-line 等值。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 2px solid;
            padding: 5px;
            width: 50%;
        }
    </style>
</head>

<body>
    <h2>White-space property</h2>
    <p style="white-space: normal;">
        This is a paragraph with the white-space property set 
        to normal. The text will wrap when necessary, and 
        extra    spaces and line breaks are    ignored.
    </p>

    <p style="white-space: nowrap;">
        This is a paragraph with the white-space property set
        to nowrap. The text will not wrap to the next line, even 
        if it overflows the container.
    </p>

    <p style="white-space: pre;">
        This is a paragraph with white-space property set to pre.
        The text will respect all   spaces and line breaks. Means,
        the   text will be displayed as it is in     HTML code.
    </p>

    <p style="white-space: pre-wrap;">
        This is a paragraph with the white-space property set to
        pre-wrap. The text will respect all spaces and line breaks,
        but will wrap when necessary.
    </p>

    <p style="white-space: pre-line;">
        This is a paragraph with the white-space property set 
        to pre-line. The text will collapse spaces and wrap when 
        necessary, but will respect line breaks.
    </p>
</body>

</html>

CSS line-break 屬性

line-break 屬性控制如何在文字中處理換行符。這對於處理日語、中文或韓語等語言中的換行符非常有用。

您可以為此屬性使用 auto、loose、normal、strict 和 anywhere 等值。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 2px solid;
            padding: 5px;
            width: 50%;
        }
    </style>
</head>

<body>
    <h2>Line-break property</h2>
    <p style="line-break: auto;">
        This paragraph uses the line-break property set to auto.
        Line breaking is determined based on the default rules.
    </p>

    <p style="line-break: loose;">
        This paragraph uses the line-break property set to loose.
        Line breaking is done more frequently, typically used in 
        CJK (Chinese, Japanese, Korean) text.
    </p>

    <p style="line-break: normal;">
        This paragraph uses the line-break property set to normal.
        Line breaking follows the standard rules for the language 
        being used.
    </p>

    <p style="line-break: strict;">
        This paragraph uses the line-break property set to strict.
        Line breaking is restricted, typically preventing breaks 
        between characters that are normally kept together.
    </p>
    <p style="line-break: anywhere;">
        This paragraph uses the line-break property set to anywhere.
        Line breaks can happen at any point, even if it means 
        breaking words in unconventional places.
    </p>
</body>

</html>

CSS word-break 屬性

屬性 **word-break** 控制文字中單詞換行和自動換行的行為。它對於管理過長的單詞如何在容器內顯示非常有用。

您可以為此屬性使用 `normal`、`break-all`、`keep-all` 和 `break-word` 等值。

示例

<!DOCTYPE html>
<html>

<body>
    <h2>Word-break property</h2>
    <p style="word-break: normal;">
        This paragraph uses the word-break property set to normal.
        Words will break only at normal word boundaries (such as 
        spaces or hyphens).
    </p>

    <p style="word-break: break-all;">
        This paragraph uses the word-break property set to break-all.
        Words will break at any character to prevent overflow, 
        even in the middle of a word.
    </p>

    <p style="word-break: keep-all;">
        This paragraph uses the word-break property set to keep-all.
        Words will only break at normal word boundaries, but CJK text 
        characters will not break unless necessary.
    </p>

    <p style="word-break: break-word;">
        This paragraph uses the word-break property set to break-word.
        Words will break at normal boundaries or wherever necessary 
        to prevent overflow.
    </p>
</body>

</html>

CSS text-shadow 屬性

屬性 **text-shadow** 用於向文字新增陰影效果。透過指定陰影的水平和垂直偏移量、模糊半徑和顏色，您可以建立文字後面的陰影。

您可以透過逗號分隔每個陰影來應用多個陰影。陰影的順序很重要，第一個陰影最靠近文字。

示例

<!DOCTYPE html>
<html>
<body>
    <h2>Text-shadow property</h2>
    <p style="text-shadow: 2px 2px 5px grey;">
        This text has a grey shadow with a blur radius of 5px.
    </p>

    <p style="text-shadow: -2px -2px 3px red;">
        This text has a red shadow with a blur radius of 3px 
        and offset to the top-left.
    </p>

    <p style="text-shadow: 3px 3px 0px blue, -3px -3px 0px yellow;">
        This text has two shadows: a blue shadow offset to the 
        bottom-right and a yellow shadow offset to the top-left.
    </p>
</body>

</html>

CSS 相關的文字屬性

以下是文字樣式的 CSS 屬性列表：

屬性 描述 示例
color 設定文字的顏色。
text-align 設定文字的對齊方式。
text-align-last 設定文字塊最後一行文字的對齊方式。
vertical-align 設定文字的垂直對齊方式。
direction 設定文字的方向。
text-indent 設定文字第一行的縮排。
letter-spacing 指定單詞字母之間的間距。
word-spacing 指定文字塊中單詞之間的間距。
white-space 控制元素中文字內的空白流。
text-decoration 設定文字裝飾的簡寫屬性。
text-transform 將文字轉換為大寫、小寫或首字母大寫。
text-emphasis 在文字中應用強調標記。
text-shadow 向文字新增陰影。
line-break 控制如何設定換行規則。
word-break 控制如何設定斷字規則。
text-combine-upright 將多個排版字元單元組合到單個排版字元單元的空間中。
text-orientation 設定一行中文字字元的方向。
text-underline-offset 向文字新增特殊的視覺效果。
text-overflow 控制如何向用戶顯示隱藏的溢位內容。
列印頁面
上一頁
下一頁
廣告