CSS设置文本、段落样式

一。CSS样式主要文本属性

font-family:设置文本的字体,可以设置一系列字体 

font-size:设置文本字体的大小(字号)

font-weight:设置文本字体的粗细

属性值含义
normal默认值,标准粗细    400
bold粗体文本(加粗)  700
lighter更细的文本
100,200,300,400,500定义由细到粗,

font-style:设置文本字体的样式

ltalic:文本样式为斜体

line-height:设置文本的行高,即行间距

text-transform:设置英文文本大、小写显示

text-decoration:设置文本的装饰效果

color:设置文本字体的颜色

文本属性缩写形式

属性顺序为"粗细>字体大小/行高>字体类型"

例:font:bold 12px/30px 宋体

二。文本字体修饰效果

使用text-decoration设置文本修饰效果

overline:顶划线

line-through:删除线

underline:下划线

none:标准文本显示效果(默认值)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.overline{
				text-decoration: overline;
			}
			.line-through{
				text-decoration: line-through;
			}
			.underline{
				text-decoration: underline;
			}
			.none{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<span class="overline">顶划线overline</span><br>
		<span class="line-through">删除线line-through</span><br>
		<span class="underline">下划线underline</span><br>
		<span class="none">标准文本显示效果(默认值)none</span><br>
	</body>
</html>

设置英文大、小写显示样式

使用text-transform属性设置英文显示样式

capitalize:每个单词大写字母开头

uppercase:大写显示

lowercase:小写显示

none:标准显示(默认值)

设置文本行高

使用line-height属性设置文本行高

默认属性为normal,即自动设置合理的行高

CSS样式主要段落属性

letter-spacing:设置字符间距

vertical-align:设置垂直方向对齐方式

  • top:顶端对齐
  • bottom:底端对齐
  • middle:中间对齐
  • 垂直方向移动的数值,单位为像素(px)

text-align:设置水平方向对齐方式

  • left:水平左对齐
  • right:水平右对齐
  • center:水平居中对齐

text-indent:设置文本首行缩进

white-space:设置文本是否自动折行


版权声明:本文为m0_72943141原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。