P
Python私教
V1
2023/03/26阅读：40主题：默认主题
CSS文本样式14个示例
示例01：文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定： ● 十六进制值 - 如: ＃FF0000 ● 一个RGB值 - 如: RGB(255,0,0) ● 颜色的名称 - 如: red
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>
示例02：text-align文本对齐
文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐。当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.box {
background-color: red;
font-size: 40px;
color: whitesmoke;
/*居中*/
text-align: center;
}
</style>
</head>
<body>
<div class="box">需要居中显示</div>
</body>
</html>
示例03：text-decoration文本修饰
text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--a标签默认有下划线-->
<a href="#">百度一下</a>
<!--p可以通过css样式添加下划线-->
<p style="text-decoration: underline">百度一下2</p>
<!--可以在中间添加一条线-->
<p style="text-decoration: line-through">不要了</p>
<!--上划线-->
<p style="text-decoration: overline">顶部有一条线</p>
</body>
</html>
示例04：text-transform文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--首字母大写-->
<p style="text-transform: capitalize">hello world</p>
<!--全部大小-->
<p style="text-transform: uppercase">hello world</p>
<!--全部小写-->
<p style="text-transform: lowercase">hello world</p>
<!--取消效果-->
<p style="text-transform: none">Hello world</p>
</body>
</html>
```html
# 示例05：text-indent文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
示例代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--首行缩进两个字符-->
<p style="text-indent: 2em">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>
示例06：font-family字体系列
font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。多个字体系列是用一个逗号分隔指明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.box {
font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif;
}
</style>
</head>
<body>
<!--基本的用法-->
<p class="font-family: Arial, Helvetica, sans-serif;">这一段的字体是 Arial.</p>
<!--比较常规的字体-->
<p class="box">这一段的字体是 Arial.</p>
</body>
</html>
示例07：font-style字体样式
主要是用于指定斜体文字的字体样式属性。这个属性有三个值： ● normal - 正常显示文本 ● italic - 以斜体字显示的文字 ● oblique - 文字向一边倾斜（和斜体非常类似，但不太支持）
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<p style="font-style: normal">这是段落</p>
<!--斜体，更常用-->
<p style="font-style: italic">这是段落</p>
<!--倾斜-->
<p style="font-style: oblique">这是段落</p>
</body>
</html>
示例08：font-size字体大小
font-size可以设置文字的大小，支持的单位有px像素，百分比，em等。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--默认是16px-->
<p>你好世界</p>
<!--设置字体大小px-->
<p style="font-size: 22px">你好世界</p>
<!--设置字体大小em-->
<p style="font-size: 2em">你好世界</p>
<!--设置字体大小百分比-->
<p style="font-size: 300%">你好世界</p>
</body>
</html>
示例09：text-align图片居中
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.box {
background-color: red;
font-size: 40px;
color: whitesmoke;
/*居中*/
text-align: center;
}
img {
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<img src="test.jpg" alt="测试">
</div>
</body>
</html>
示例10：text-align让div居中
text-align居中只针对行内元素生效，而div是块级元素。如果要让div被text-align居中，需要将div转换为行内块元素。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.box {
background-color: red;
font-size: 40px;
color: whitesmoke;
/*居中*/
text-align: center;
}
.test {
width: 100px;
height: 100px;
background-color: goldenrod;
display: inline-block;
}
img {
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="test"></div>
</div>
</body>
</html>
示例11：letter-spacing字间距
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<p>你好世界</p>
<!--设置文字之间的距离-->
<p style="letter-spacing: 5px">你好世界</p>
<p style="letter-spacing: 15px">你好世界</p>
<p style="letter-spacing: 25px">你好世界</p>
</body>
</html>
示例12：font-weight字体粗细
font-wight可以设置字体的粗细，值是100-700的整百数，也可以bold表示加粗和normal表示普通。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.box {
font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif;
}
</style>
</head>
<body>
<p style="font-weight: bold">这是段落</p>
<p style="font-weight: normal">这是段落</p>
<p style="font-weight: 100">这是段落</p>
<p style="font-weight: 400">这是段落</p>
<p style="font-weight: 700">这是段落</p>
</body>
</html>
示例13：line-height行高
line-hight可以设置一行文本占据的高度。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<p style="border:1px solid #ccc;line-height: 16px">
这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
<!--行高变大-->
<p style="border:1px solid #ccc;line-height: 26px">
这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
<!--行高更大-->
<p style="border:1px solid #ccc;line-height: 36px">
这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</body>
</html>
示例14：line-height让文字垂直居中
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.box {
background-color: cadetblue;
/*行高和高度相同，文字就会垂直居中*/
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">这个文字需要垂直居中</div>
</body>
</html>
作者介绍
P
Python私教
V1