网页基础（十）CSS字体样式

最新推荐文章于 2024-04-30 06:47:19 发布

@大娱乐家

最新推荐文章于 2024-04-30 06:47:19 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104512491

版权

一.span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>span</title>
		<style>
			#span1{
				color: red;
				font-weight: bold;
				
			}
			#span2{
				color: blue;
			}
		</style>
	</head>
	<body>
		<p><span id="span1">span</span>标签是一个<span id="span2">行内元素</span></p>
	</body>
</html>

二.字体类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置字体类型</title>
		<!--
        	作者：770267939@qq.com
        	时间：2020-02-26
        	描述：font-family: 设置字体类型
        -->
        <style>
        	.f1{
        		font-family: "宋体";
        	}
        	.f2{
        		font-family: "微软雅黑";
        	}
        </style>
	</head>
	<body>
		<p class="f1">宋体</p>
		<p class="f2">微软雅黑</p>
	</body>
</html>

三.字体大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体大小</title>
		<!--
        	作者：770267939@qq.com
        	时间：2020-02-26
        	描述：font-size：设置字体大小
        	px:默认16像素
        <-->
        
        <style>
        	.p1{
        		font-size: 16px;
        	}
        	.p2{
        		font-size: 50%;
        	}
        	.p3{
        		font-size: 1.5em;
        	}
        </style>
	</head>
	<body>
		<p class="p1">唐僧</p>
		<p class="p2">孙悟空</p>
		<p class="p3">猪八戒</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体风格</title>
		<style>
			.p1{
				font-style: normal;
			}
			.p2{
				font-style: italic;
			}
			.p3{
				font-style: oblique;
			}
		</style>
	</head>
	<body>
		<p class="p1">普通字体</p>
		<p class="p2">斜体</p>
		<p class="p3">倾斜体</p>
	</body>
</html>

@大娱乐家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页基础（十）CSS字体样式

一.span<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>span</title> <style> #span1{ color: red; font-weight: bold; } ...
复制链接

扫一扫