使用 CSS 设置文本格式

cssweb developmentfront end technology更新于 2024/11/4 5:00:17

要使用 CSS 设置文本格式，您可以更改文本颜色、文本修饰、行高、文本方向、文本对齐方式等。

让我们看一些示例 −

文本对齐

要使用 CSS 设置文本对齐方式，请使用 text-align 属性。以下是可能的属性值 −

text-align: left|right|center|justify|initial|inherit;

示例

让我们看一个设置文本对齐的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   -webkit-columns: auto auto; /* Chrome, Safari, Opera */
   -moz-columns: auto auto; /* Firefox */
   columns: auto auto;
   text-align: justify;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

输出

行高

要设置行高，请使用 line-height 属性。以下是属性值 −

line-height: normal|number|length|initial|inherit;

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   line-height: 1.9;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>

输出

文本装饰

对于 CSS 中的文本装饰，请使用 text-decoration 属性作为以下属性的简写属性 −

text-decoration-line
text-decoration-color
text-decoration-style

示例

让我们看一个 CSS 文本装饰的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>