今天学习的几个字体css属性

最新推荐文章于 2024-09-27 21:11:14 发布

yhawaii

最新推荐文章于 2024-09-27 21:11:14 发布

阅读量709

点赞数

分类专栏： web前端文章标签： css border class html 测试

本文链接：https://blog.csdn.net/yhawaii/article/details/7182516

版权

web前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1、font-variant，设置或检索对象中的文本是否为小型的大写字母。

默认属性值为normal，为正常的字体

属性值为small-caps，为小型的大写字母字体

下面为一个测试例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title> New Document </title>
</head>
<style type="text/css">
	.dv{
		font-variant:small-caps;
	}
</style>
<body>
<div class='dv'>
	My Name is John!
</div>
</body>
</html>

2、text-decoration属性，用于设置文字的装饰，

默认属性值为none,表示没有装饰；

属性值为underline的时候，文字下面有下划线；

属性值为overline的时候，文字上面面有上划线；

属性值为line-through的时候，文字中间有贯穿线；

下面是一个关于text-decoration的一个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title> New Document </title>
</head>
<style type="text/css">
	.underlineDv{
		border:1px solid red;
		text-decoration:underline;
	}
	.overlineDv{
		border:1px solid red;
		text-decoration:overline;
	}
	.lineThroughDv{
		border:1px solid red;
		text-decoration:line-through;
	}
</style>
<body>
<div class='underlineDv'>
	下划线,下划线,下划线,下划线,下划线,下划线
</div>
<br />
<div class="lineThroughDv">
	贯穿线,贯穿线,贯穿线,贯穿线,贯穿线,贯穿线,
</div>
<br />
<div class='overlineDv'>
	闪烁,闪烁,闪烁,闪烁,闪烁,闪烁,闪烁,闪烁,
</div>
</body>
</html>