當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS中的文本格式

發布時間：2023/12/1 CSS 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS中的文本格式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS文字格式 (CSS text formatting)

CSS text properties allow you to style your text in various ways very easily. Such as color, alignment, spacing, direction, etc.

CSS文本屬性使您可以輕松地以各種方式設置文本樣式。例如顏色，對齊方式，間距，方向等。

文字顏色(顏色屬性) (Text Color (color property))

The color property is defined by the CSS. We can either write the name of the color or the color code to use our color on the site.

color屬性由CSS定義。我們可以在網站上寫下顏色的名稱或顏色代碼以使用我們的顏色。

Syntax:

句法：

Element{color:white; //#000000}

Example:

例：

<!DOCTYPE html><head><style>h1 {color: red;}p {color: green;}</style> </head> <html><body><p>HELLO WORLD!</p><h1>HEADING</h1> </body></html>

Output

輸出量

文本對齊(text-align屬性) (Text Alignment (text-align property))

text-align property is used to align text horizontally. The possible values of this property could be: left, right, center, justify and inherit.

text-align屬性用于水平對齊文本。該屬性的可能值為： left ， right ， center ， justify和Inherit 。

Syntax:

句法：

Element{text-align:right;}

Example:

例：

<!DOCTYPE html><head><style>h1 {Text-align: center;}p {Text-align: right}</style> </head> <html><body><p>HELLO WORLD!</p><h1>HEADING</h1> </body></html>

Output

輸出量

文字修飾(文字裝飾屬性) (Text Decoration (text-decoration property))

The text-decoration property is used to remove or set decorations from the text. The possible values of this property could be: none, underline, overline, blink, line-through and inherit.

文本裝飾屬性用于從文本中刪除或設置裝飾。該屬性的可能值為： none ，下劃線， overline ， blink ， line-through和Inherit 。

Syntax:

句法：

Element{text-decoration: overline;}

Example:

例：

<!DOCTYPE html><head><style>h1 {text-decoration: none;}h2 {text-decoration: overline;}</style> </head> <html><body><h1>HELLO WORLD!</h1><h2>HEADING</h2> </body></html>

Output

輸出量

文本轉換(text-transform屬性) (Text Transformation (text-transform property))

The text-transform property is used to change the cases of the text for example, it sets the case to lowercase or uppercase or just makes the initial letter capital. Possible values could be: none, capitalize, lowercase, uppercase and inherit.

text-transform屬性用于更改文本的大小寫，例如，將大小寫設置為小寫或大寫，或者僅使首字母大寫。可能的值可以是： none ，大寫，小寫，大寫和Inherit 。

Syntax:

句法：

Element{text-transform: none;}

Example:

例：

<!DOCTYPE html><head><style>p {text-transform: uppercase;}</style> </head> <html><body><p> Some content</p> </body></html>

Output

輸出量

文字縮進(text-indent屬性) (Text Indentation (text-indent property))

The text-indent property comes in use when we have to indent the first line of text of any element. This property comes with the following values: percentage, length (specifying space) and inherit.

當我們必須縮進任何元素的第一行文本時，將使用text-indent屬性。此屬性具有以下值： percent ， length (指定空間)和Inherit 。

Syntax:

句法：

Element{text-indent: 50%;}

Example:

例：

<!DOCTYPE html><head><style>p {text-indent: 100px;}</style> </head> <html><body><p> Some content</p> </body></html>

Output

輸出量

字間距(字間距屬性) (Word Spacing (word-spacing property))

The word-spacing property deals with the spacing between the words. Possible values are: length, normal and inherit.

單詞間距屬性處理單詞之間的間距。可能的值為： length ， normal和Inherit 。

Syntax:

句法：

Element{word-spacing: 20px;}

Example:

例：

<!DOCTYPE html><head><style>p {word-spacing: 50px;}</style> </head> <html><body><p> Some content</p> </body></html>

Output

輸出量

字母間距(字母間距屬性) (Letter Spacing (letter-spacing property))

The letter-spacing is a very useful property when it comes to putting spaces between the letters of the words. This can also have negative values as well. Its values are the same as word-spacing: normal, length and inherit.

當在單詞的字母之間放置空格時，字母間距是非常有用的屬性。這也可以具有負值。它的值與單詞間距相同： normal ， length和Inherit 。

Syntax:

句法：

Element{letter-spacing: 10px;}

Example:

例：

<!DOCTYPE html><head><style>h1 {letter-spacing: -3px;}</style> </head> <html><body><h1>Some content</h1> </body></html>

Output

輸出量

線高(線高屬性) (Line Height (line-height property))

The line-height or leading property defines the height of a line of a text. Its possible values are length, percentage, inherit, number and normal.

line-height或Leading屬性定義文本行的高度。它的可能值是長度，百分比，繼承，數字和正常。

Syntax:

句法：

Element{line-height:50%;}

Example:

例：

<!DOCTYPE html><head><style>p {letter-spacing: 3px;}</style> </head> <html><body><h1>Test page</h1><p>IncludeHelp site is specially designed to provide help to students, working professionals and job seekers. We are fully dedicated to make each tutorial very simple to learn and understand. This site is not created for business purpose, but for spreading education about programming languages and to help the concerned learners out who are enthusiastic to learn new technologies.</p> </body></html>

Output

輸出量

翻譯自: https://www.includehelp.com/code-snippets/text-formatting-in-css.aspx

總結

以上是生活随笔為你收集整理的CSS中的文本格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。