CSS文本格式设置属性用于格式化文本和样式文本。
CSS文本格式包括以下属性:
1.文字颜色
2.文字对齐
3, 文字装饰
4, 文字转换
5, 文字缩进
6.字母间距
7.线高
8, 文字方向
9, 文字阴影
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 >
OUTPUT: