CSS如何使用文字格式?代码示例

2021年3月23日14:39:32 发表评论 630 次浏览

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:

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: