CSS 3之文字样式

最新推荐文章于 2023-10-29 22:23:49 发布

菇毒

最新推荐文章于 2023-10-29 22:23:49 发布

阅读量383

点赞数

分类专栏： web 前端学习 # CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125228766

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

文字样式

1. 定义文字颜色
3. 定义文字的字号

1. 定义文字颜色

在 css 样式中，多使用 color属性定义颜色；
20220430
例子1 ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3-1</title>
		<style type="text/css">
			body {color: blue;}
			h1{color: #ff6600;}
			p.c2{color: hsl(0, 0%, 0%);}
			p.c3{color: hsla(250, 50%, 50%, 1);}
			p.c4{color: rgba(255, 10, 45, 0.5);}
		</style>
	</head>
	<body>
		<h1>标题1的效果</h1>
		<p>这是一段普通的段落效果。显示的默认颜色为蓝色。</p>
		<p class="c1">这段落定义了 class="c1"。该段落中的文本颜色是蓝色。</p>
		<p class="c2">此处使用了 HSL 函数，构建颜色。</p>
		<p class="c3">此处使用了 HSLA 函数，构建颜色。</p>
		<p class="c3">此处使用了 RGBA 函数，构建颜色。</p>
	</body>
</html>

20220430 # 2. 定义文字的字体
font-family 属性用于指定文字字体类型，即在网页中展示字体不同的形状；
语法如下所示：

{font-family:name}
{font-family:cursice | fantasy | monspace | serif | sans-serif}

font-family有两种声明方式；第一种为使用 name字体名称，按优先顺序排列，以逗号隔开，若字体名称包含空格，则应使用引号括起；
第二种声明方式使用所列出的字体序列名称，若使用 fantasy序列，将提供默认字体序列；
CSS 3 中常使用使用第一种声明方式；

例子2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{font-family: 宋体;font-size: 40px;}
		</style>
	</head>
	<body>
		<p align=center>不积跬步无以至千里。</p>
	</body>
</html>

20220430
注意： 在字体显示时，若指定一种特殊字体类型，而在浏览器或操作系统中该类型不能正确获取，可通过 font-faily预设多种字体类型；
font-faily属性能预置多个供页面使用的字体类型，其中每种字形之间使用逗号隔开；
若前的字体类型不能正确显示，则系统自动选择后一种字体类型，依此类推；

p{
font-family:华文楷体，华文彩云，黑体，仿宋;
}

3. 定义文字的字号

在 CSS 3 中，常使用 font-size设置文字大小；
语法格式如下：

{font-size:数值 | inherit | xx-small | x-small | small 

| medium | large | x-large | xx-large | largr | smller | length}

20220430
例子 3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体大小</title>
	</head>
	<body>
		<div style="font-size: 50px;">上级标记大小
		<p style="font-size: small;">小字体效果</p>
		<p style="font-size: larger;">大字体效果</p>
		<p style="font-size: x-small;">小字体效果</p>
		<p style="font-size: x-large;">大字体效果</p>
		<p style="font-size: 80%;">标记效果</p>
		<p style="font-size:25pt ;">标记效果</p>
		</div>
	</body>
</html>

20220430

菇毒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 3之文字样式

在 css 样式中，多使用 color属性定义颜色；例子1 ：# 2. 定义文字的字体属性用于指定文字字体类型，即在网页中展示字体不同的形状；语法如下所示：有两种声明方式；第一种为使用 name字体名称，按优先顺序排列，以逗号隔开，若字体名称包含空格，则应使用引号括起；第二种声明方式使用所列出的字体序列名称，若使用 fantasy序列，将提供默认字体序列；CSS 3 中常使用使用第一种声明方式；例子2：注意：在字体显示时，若指定一种特殊字体类型，而在浏览器或操作系统中该类型不能正确获
复制链接

扫一扫

专栏目录