CSS文本和字体属性的设置

最新推荐文章于 2023-03-18 17:34:42 发布

墨汁霜

最新推荐文章于 2023-03-18 17:34:42 发布

阅读量187

点赞数 1

分类专栏： Html5网页前端设计

本文链接：https://blog.csdn.net/weixin_44614751/article/details/102480475

版权

Html5网页前端设计专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		.divFontkUse{
				border: 3px solid;
				margin: 5px;
				width: 200px;
				background:bisque;
			}
			.divTextUse{
				border: 3px solid;
				margin: 5px;
				width: 200px;
				background:magenta;
			}
			
			.fontStyle01{
				font-family: "ms serif";
				font-style: normal;
				font-variant: normal;
				font-weight: normal;
				font-size: 30px;
			}
			.fontStyle02{
				font-family: "french script mt";
				font-style: italic;
				font-variant: small-caps;
				font-weight: bold;
				
			}
			.fontStyle03{
				font-family: "ms sans serif";
				font-style: oblique;
				font-weight: 900;
			}
			.fontStyle04{
				/* 简写 */
				font: italic bold 20px;
			}
			
			.textProSetting{
				text-indent: 30px;
				text-align: center;
				text-decoration: underline;
				letter-spacing: 4px;
				
			}
			/* /* /* / */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */
			.titleForFunction{
				color: red;
			}
	</head>
	<body>
		<div class="divFontkUse">
			<h3 class="titleForFunction">CSS字体</h3>
			<h3>各种属性的设置</h3>
			<!-- fontFamily fontStyle fontVariant fontWeight  fontSize-->
			<div>
				<p class="fontStyle01">
					Hello world!
				</p>
				<p class="fontStyle02">
					Hello world!
				</p>
				<p class="fontStyle03">
					Hello world!
				</p>
				<p class="fontStyle04">
					加油！I can do it!
				</p>
			</div>
			<div class="divTextUse">
				<h3 class="titleForFunction">CSS字体</h3>
				<h3>文本各种属性的设置</h3>
				<!-- text-indent  text-alin text-decoration text-transform letter-spacing的使用 -->
				<div>
					<p class="textProSetting">
						励志名言：没有收拾残局的能力，就别放纵善变的绪　
						1、有时候，我们活得累，并非生活过于刻薄，而是们
						太容易被外界的氛围所感染，被他人的情绪所左右。　
						2、身材不好就去锻炼，没钱就努力去赚。别把窘境怒
						于别人，唯一可以抱怨的，只是不够努力的自己
					</p>
				</div>

	</body>
</html>

效果图：
在这里插入图片描述

墨汁霜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS文本和字体属性的设置

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> .divFontkUse{ border: 3px solid; margin: 5px; width: 200px; background:b...
复制链接

扫一扫

专栏目录