专注Java教育14年 全国咨询/投诉热线:444-1124-454
赢咖4LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 CSS文本格式

CSS文本格式

更新时间:2022-02-17 10:25:13 来源:赢咖4 浏览826次

CSS 文本格式属性用于格式化文本和样式文本。

CSS文本格式包括以下属性:

1.Text-color

2.Text-alignment

3.Text-decoration

4.Text-transformation

5.Text-indentation

6.Letter间距

7.Line height

8.Text-direction

9.Text-shadow

10.字间距

TEXT COLOR

Text-color 属性用于设置文本的颜色。

文本颜色可以通过名称“red”、十六进制值“#ff0000”或RGB值“rgb(255, 0, 0)来设置。

句法:
身体
{
颜色:颜色名称;
}

例子:

<!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>

TEXT ALIGNMENT

文本对齐属性用于设置文本的水平对齐方式。

文本可以设置为左对齐、右对齐、居中对齐和两端对齐。

在对齐对齐中,线条被拉伸以使左右边距笔直。

句法:
身体
{
文本对齐:对齐类型;
}

例子:

<!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>

TEXT DECORATION

文本装饰用于在文本中添加或删除装饰。

文本装饰可以是下划线、上划线、直通或无。

句法:
身体
{
text-decoration:装饰类型;
}

例子:

<!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>

4.TEXT TRANSFORMATION

文本转换属性用于改变文本的大小写,大写或小写。

文本转换可以是大写、小写或大写。

大写用于将每个单词的首字母变为大写。

句法:
身体
{
文本转换:类型;
}

例子:

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

5.TEXT INDENTATION

文本缩进属性用于缩进段落的第一行。

大小可以是 px、cm、pt。

句法:
身体
{
文本缩进:大小;
}

例子:

<!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>

LETTER SPACING

该属性用于指定文本字符之间的空格。

大小可以以 px 为单位。

句法:
身体
{
字母间距:大小;
}

例子:

<!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>

LINE HEIGHT

该属性用于设置行间距。

句法:
身体
{
行高:大小;
}

例子:

<!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>

TEXT DIRECTION

文字方向属性用于设置文字的方向。

可以使用 rtl 设置方向:从右到左。

从左到右是文本的默认方向。

句法:
身体
{
方向: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>

TEXT SHADOW

文字阴影属性用于给文字添加阴影。

您可以指定文本的水平尺寸、垂直尺寸和阴影颜色。

句法:
身体
{
text-shadow:水平尺寸垂直尺寸颜色名称;
}

例子:

<!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>

WORD SPACING

字间距用于指定行的字之间的间距。

大小可以以 px 为单位。

句法:
身体
{
字间距:大小;
}

例子:

<!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>

支持的浏览器:

谷歌浏览器

IE浏览器

火狐

歌剧

苹果浏览器

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>