CSS如何使用文字格式（代码示例） _前端开发

CSS文本格式设置属性用于格式化文本和样式文本。
CSS文本格式包括以下属性：
1.文字颜色
2.文字对齐
3, 文字装饰
4, 文字转换
5, 文字缩进
6.字母间距
7.线高
8, 文字方向
9, 文字阴影
【CSS如何使用文字格式（代码示例）】10.字距
1.文字颜色
文本颜色属性用于设置文本的颜色。
可以使用名称" red", 十六进制值"＃ff0000"或其RGB值" rgb(255, 0, 0)"设置文本颜色。

Syntax:body{color:color name; }

例子：

< !DOCTYPE html> < html > < head > < style > h1 { color:red; } h2 { color:green; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > TEXT FORMATTING < / h2 > < / body > < / html >

OUTPUT:

2.文字对齐
文本对齐方式属性用于设置文本的水平对齐方式。
可以将文本设置为左, 右, 居中和对齐对齐。
在对齐对齐中, 线会被拉伸, 使得左右边距是直的。

Syntax:body{text-align:alignment type; }

例子：

< !DOCTYPE html> < html > < head > < style > h1 { color:red; text-align:center; } h2 { color:green; text-align:left; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > TEXT FORMATTING < / h2 > < / body > < / html >

OUTPUT:

3.文字装饰
文本修饰用于添加或删除文本修饰。
文字修饰可以是下划线, 上划线, 直行或无。

Syntax:body{text-decoration:decoration type; }

例子：

< !DOCTYPE html> < html > < head > < style > h1 { color:red; text-decoration:underline; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > TEXT FORMATTING < / h2 > < / body > < / html >

OUTPUT:

4, 文本转换
文本转换属性用于更改文本的大小写, 大写或小写。
文本转换可以是大写, 小写或大写。
大写用于将每个单词的首字母更改为大写。

Syntax:body{text-transform:type; }

例子：

< !DOCTYPE html> < html > < head > < style > h2 { text-transform:lowercase; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > TEXT FORMATTING < / h2 > < / body > < / html >

OUTPUT:

5, 文字提示
文本缩进属性用于缩进段落的第一行。
大小可以是px, cm, pt。

Syntax:body{text-indent:size; }

例子：

< !DOCTYPE html> < html > < head > < style > h2 { text-indent:80px; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > This is text formatting properties.< br > Text indentation property is used to indent the first line of the paragraph. < / h2 > < / body > < / html >

OUTPUT:

6.字母间距
此属性用于指定文本字符之间的空格。
大小可以以像素为单位。

Syntax:body{letter-spacing:size; }

例子：

< !DOCTYPE html> < html > < head > < style > h2 { letter-spacing:4px; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > This is text formatting properties. < / h2 > < / body > < / html >

OUTPUT:

7.行高
此属性用于设置行之间的间隔。

Syntax:body{line-height:size; }

例子：

< !DOCTYPE html> < html > < head > < style > h2 { line-height:40px; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > This is text formatting properties.< br > This property is used to set the space between the lines. < / h2 > < / body > < / html >

OUTPUT:

8, 文字方向
文本方向属性用于设置文本的方向。
可以使用rtl设置方向：从右到左。
从左到右是文本的默认方向。

Syntax:body{direction:rtl; }

例子：

< !DOCTYPE html> < html > < head > < style > h2 { direction: rtl; text-align:center; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > < bdo dir = "rtl" > This is text formatting properties. < / bdo > < / h2 > < / body > < / html >

OUTPUT:

9.文字阴影
文本阴影属性用于向文本添加阴影。
你可以为文本指定水平尺寸, 垂直尺寸和阴影颜色。

Syntax:body{text-shadow:horizontal size vertical size color name; }

例子：

< !DOCTYPE html> < html > < head > < style > h1 { text-shadow:3px 1px blue; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > This is text formatting properties. < / h2 > < / body > < / html >

OUTPUT:

10.单词间距
单词间距用于指定行中单词之间的间隔。
大小可以以像素为单位。

Syntax:body{word-spacing:size; }

例子：

< !DOCTYPE html> < html > < head > < style > h2 { word-spacing:15px; } < / style > < / head > < body > < h1 > GEEKS FOR GEEKS < / h1 > < h2 > This is text formatting properties. < / h2 > < / body > < / html >