CSS文字控制与文本控制属性介绍及应用示例
1. 字体属性（font）
1.1 font-family
font-family 用于设置文本的字体，多个字体之间用逗号隔开。如果第一个字体不存在，那么会使用下一个字体来代替它。
以下是一个示例：
p {
font-family: "Georgia", "Times New Roman", serif;
}
1.2 font-size
font-size 用于设置文本的大小，可以使用绝对大小或相对大小。
以下是一个示例：
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
p {
font-size: 14px;
}
1.3 font-weight
font-weight 用于设置文本的粗细。可以使用关键字 bold 或者数字表示。
以下是一个示例：
h1 {
font-weight: bold;
}
h2 {
font-weight: 700;
}
p {
font-weight: normal;
}
2. 文本属性（text）
2.1 text-align
text-align 用于设置文本的对齐方式，可以是左对齐、右对齐、居中对齐或者两端对齐。
以下是一个示例：
p {
text-align: center;
}
2.2 text-decoration
text-decoration 用于设置文本的修饰，可以是下划线、删除线、上划线或者无修饰。
以下是一个示例：
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
del {
text-decoration: line-through;
}
ins {
text-decoration: underline;
}
2.3 text-transform
text-transform 用于设置文本的大小写格式，可以是大写、小写、首字母大写或者不变。
以下是一个示例：
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
p.none {
text-transform: none;
}
示例说明
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例1</title>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
text-align: center;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
text-align: justify;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>
这是一段文本，用于示例说明。
这是一段文本，用于示例说明。
这是一段文本，用于示例说明。
这是一段文本，用于示例说明。
这是一段文本，用于示例说明。
</p>
</body>
</html>
此示例中演示了如何使用字体属性和文本属性来控制文本。对于标题使用了 Arial 字体，并进行了加粗和居中对齐；对于正文使用了 Times New Roman 字体，并进行了文本两端对齐。
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例2</title>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
text-decoration: underline;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>
这是一段文本，用于示例说明。
这是一段文本，用于示例说明。
这是一段文本，用于示例说明。
这是一段文本，用于示例说明。
这是一段文本，用于示例说明。
</p>
</body>
</html>
此示例中演示了如何使用字体属性和文本属性来控制文本。对于标题使用了 Arial 字体，并进行了加粗；对于正文使用了 Times New Roman 字体，并进行了下划线、大写格式转换。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS文字控制与文本控制属性介绍及应用示例 - Python技术站
微信扫一扫 
支付宝扫一扫 