常用文本样式汇总一

最新推荐文章于 2023-05-06 06:30:00 发布

VIP文章 m0_67846661

最新推荐文章于 2023-05-06 06:30:00 发布

阅读量776

点赞数

分类专栏： HTML css 文章标签： html linq 前端 css3

本文链接：https://blog.csdn.net/m0_67846661/article/details/125115547

版权

一、文本格式标签

标签	描述
<b></b>	定义粗体文本
<strong></strong>	定义特别强调、粗体
<em></em>	定义斜体字
<i></i>	定义斜体字
<cite></cite>	定义斜体字
<big></big>	定义大字号
<small></small>	定义小号字
<sub></sub>	定义下标字
<sup></sup>	定义上标字
<ins></ins>	定义插入字
<del></del>	定义删除字
<s></s>	定义中划线
<u></u>	定义下划线
<code></code>	定义等宽效果
`<tt></tt>`	定义固定宽度字体

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body {color:red;}
</style>
</head>

<body>
    <b>文字以粗体方式显示</b><br>
	<strong>文字以加强强调粗体方式显示</strong><br>
	<em>文字以斜体方式显示1</em><br>
	<i>文字以斜体方式显示2</i><br>
	<cite>文字以斜体方式显示3</cite><br>
	<big>文字以放大方式显示</big><br>
	<small>文字以缩小方式显示</small><br>
	文字以下标方式显示<sub>2</sub><br>
	文字以上标方式显示<sup>2</sup><br>
	<ins>文字以缩小方式显示</ins><br>
	<del>文字以删除方式显示</del><br>
	<s>文字以中线删除方式显示</s><br>
	<u>文字以加下划线方式显示</u>

</body>
</html>

二、设置文本颜色

值	描述	实例
颜色的名称	颜色的名称，比如red, blue, brown, lightseagreen等，不区分大小写。	color:red; /* 红色 / color:black; / 黑色 / color:gray; / 灰色 / color:white; / 白色 / color:purple; / 紫色 */
十六进制	十六进制符号 #RRGGBB 和 #RGB（比如 #ff0000）。"#" 后跟 6 位或者 3 位十六进制字符（0-9, A-F）。	#f03 #F03 #ff0033 #FF0033 rgb(255,0,51) rgb(255, 0, 51)
RGB，红-绿-蓝（red-green-blue (RGB)）	规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，取值可以是 0-255 的整数或百分比。	rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%)
RGBA，红-绿-蓝-阿尔法（RGBa）	RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。a 表示透明度：0=透明；1=不透明。	rgba(255,0,0,0.1) /* 10% 不透明 / rgba(255,0,0,0.4) / 40% 不透明 / rgba(255,0,0,0.7) / 70% 不透明 / rgba(255,0,0, 1) / 不透明，即红色 */
HSL，色相-饱和度-明度（Hue-saturation-lightness）	色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。饱和度和明度由百分数来表示。 100% 是满饱和度，而 0% 是一种灰度。 100% 明度是白色， 0% 明度是黑色，而 50% 明度是"一般的"。	hsl(120,100%,25%) /* 深绿色 / hsl(120,100%,50%) / 绿色 / hsl(120,100%,75%) / 浅绿色 */
HSLA，色相-饱和度-明度-阿尔法（HSLa）	HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色的透明度。 a 表示透明度：0=透明；1=不透明。	hsla(240,100%,50%,0.05) /* 5% 不透明 / hsla(240,100%,50%, 0.4) / 40% 不透明 / hsla(240,100%,50%, 0.7) / 70% 不透明 / hsla(240,100%,50%, 1) / 完全不透明 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p style="color: red;">使用颜色名称</p>
		<p style="color: #006699;">使用十六进制</p>
		<p style="color: rgb(0,0,0);">使用十六进制</p>
		<p style="color: rgba(0,0,0,1);">rgba透明度为1</p>
		<p style="color: rgba(0,0,0,0);">rgba透明度为0</p>
	</body>
</html>

三、设置元素水平对齐方式

属性值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p style="text-align: left;">文字对齐方向 left</p>
		<p style="text-align: right;">文字对齐方向 right</p>
		<p style="text-align: center;">文字对齐方向 center</p>
	</body>
</html>