CSS常见的文本属性

CSS常见的文本属性

关于css中文本的属性可分为文字颜色、字体类型、文字大小、文字加粗、文字倾斜、首行缩进、对齐方式、行高、垂直居中、以及文字修饰。

例子如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.p1{color: #ff0000;	}/* 文字颜色 */
		.p2{font-family: "华文中宋";}/* 字体类型 */
		.p3{font-size: 26px;}/* 文字大小 */
		.p4{font-weight: bold;}/* 文字加粗 */
		.p5{font-style: italic;}/* 文字倾斜 */
		.p6{text-indent: 60px;}/* 首行缩进 */
		.p7{text-align: center;}/* 水平对齐方式 */
		.p8{line-height: 100px;}/* 行高 */
		.p9{height: 100px;background-color:gray ; line-height: 100px;}/* 垂直居中 */
		.p10{text-decoration: underline;}/* 文字修饰 */
	</style>
	<body>
		<p class="p1">这是一个关于CSS文本属性的小例子</p>
		<p class="p2">这是一个关于CSS文本属性的小例子</p>
		<p class="p3">这是一个关于CSS文本属性的小例子</p>
		<p class="p4">这是一个关于CSS文本属性的小例子</p>
		<p class="p5">这是一个关于CSS文本属性的小例子</p>
		<p class="p6">这是一个关于CSS文本属性的小例子</p>
		<p class="p7">这是一个关于CSS文本属性的小例子</p>
		<p class="p8">这是一个关于CSS文本属性的小例子</p>
		<p class="p9">这是一个关于CSS文本属性的小例子</p>
		<p class="p10">这是一个关于CSS文本属性的小例子</p>
	</body>
</html>

其中垂直居中显示的效果是p标签的高度和行高一起使用才得出的效果–当行高和p标签的高度相等时,文字就会垂直居中显示

效果如下图所示

CSS常见的文本属性_第1张图片

你可能感兴趣的:(CSS)