字体与文本相关属性

最新推荐文章于 2022-09-12 15:52:11 发布

枫林晚。

最新推荐文章于 2022-09-12 15:52:11 发布

阅读量334

点赞数

分类专栏： CSS3.0 文章标签：字体属性文本属性

本文链接：https://blog.csdn.net/qq_40315045/article/details/95034662

版权

CSS3.0 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

字体与文本相关属性

1.字体相关属性

font：复合属性，可控制文字的样式、字体的粗体、字体的大小、字体等属性
color：控制文字颜色
font-family：设置文字字体

font-size：设置字体大小

 	> xx-small：最小字体
 	> x-small：较小字体
 	> small：小字体
 	> medium：正常大小字体，这是默认值
 	> x-large：较大字体
 	> xx-large：最大字体
 	> larger：比父元素字体稍大
 	> smaller：比父元素字体稍小
 	> length：直接设置字体大小，设置为百分比：是父元素字体大小的百分之多少；
 			  设为数值+长度单位，如：11pt,14px

font-size-adjust:用于控制对不同字体的字体尺寸进行微调，可以设为none（不调整），
也可用一个数值代表调整比例,最大1，最小0，font-size-adjust:0.41
font-stretch：用于改变文字横向的伸展，默认值为normal（不伸展），
narrower（横向压缩），wider（横向拉伸）
font-style：设置文字风格，normal（正常），italic(斜体)，oblique(倾斜字体)
font-weight：设置字体是否加粗，lighter（更细），normal（正常），bold(加粗)，
bolder(更粗)，还可以使用具体数值来控制，如：100 200 300 400 …900
text-decoration:控制文字是否有修饰线，none（无修饰），blink(闪烁)，
underline（下划线），line-through（中划线），overline（上划线）
font-variant：设置文字的大写字母的格式，normal（正常），small-caps（小型的大写字母）
text-shadow：设置文字是否有阴影效果
text-transform：设置文字的大小写，none（不转换），capitalize(首字母大写)，uppercase（全部大写），lowercase(全部小写)
line-height：设置字体行高
letter-spacing：设置字符之间的距离，为字母不受影响，normal，数值+长度单位
word-spacing：设置单词之间的间隔，normal，数值+长度单位
代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>字体相关属性</title>
	</head>
	<body>
		color:#888888;
		<span style="color:#888888">我是一个程序员</span><br/>
		color:red:
		<span style="color:red">我是一个程序员</span><br/>
		font-family:隶书：
		<span style="font-family:'隶书'">我是一个程序员</span><br/>
		font-size:20pt:
		<span style="font-size:20pt">我是一个程序员</span><br/>
		font-size:xx-large:
		<span style="font-size:xx-large:">我是一个程序员</span><br/>
		font-stretch:narrower:
		<span style="font-stretch:narrower">我是一个程序员</span><br/>
		font-stretch:wider:
		<span style="font-stretch:wider">我是一个程序员</span><br/>
		font-style:italic:
		<span style="font-style:italic">我是一个程序员</span><br/>
		font-weight:bold:
		<span style="font-weight:bold">我是一个程序员</span><br/>
		font-weight:900:
		<span style="font-weight:900">我是一个程序员</span><br/>
		text-decoration:blink:
		<span style="text-decoration:blink">我是一个程序员</span><br/>
		text-decoration:underline:
		<span style="text-decoration:underline">我是一个程序员</span><br/>
		text-decoration:line-through:
		<span style="text-decoration:line-through">我是一个程序员</span><br/>
		font-variant:small-caps:
		<span style="font-variant:small-caps">hello word</span><br/>
		text-transform:uppercase：
		<span style="text-transform:uppercase">hello word</span><br/>
		text-transform:capitalize:
		<span style="text-transform:capitalize">hello word</span><br/>
		line-height:30pt:
		<span style="line-height:30pt">我是一个程序员</span><br/>
		letter-spacing:5pt:
		<span style="letter-spacing:5pt">hello word</span><br/>
		letter-spacing:15pt:
		<span style="letter-spacing:15pt">hello word</span><br/>
		word-spacing:20pt:
		<span style="word-spacing:20pt">hello word</span><br/>
		word-spacing:60pt:
		<span style="word-spacing:60pt">hello word</span><br/>
	</body>
</html>

程序运行结果：
在这里插入图片描述

1.1使用text-shadow添加阴影

text-shadow属性值：

color：指定阴影的颜色
xoffset:指定阴影在横向上的偏移
yoffset:指定阴影在纵向上的偏移
radius：指定阴影的模糊半径，半径越大越模糊
注意：偏移量向左负，向上负
例：<p style="line-shadow:-5px -5px 2px gray">我是一个程序员</p>
添加多个阴影，例：

<span style="text-shadow:5px 5px 2px #222,30px 30px 2px #555,50px 50px 2px #888;">我是一个程序员</span>

2.颜色表示方法

用颜色名称，例如：white，blue，greenyellow等
用十六进制的颜色值表示，#FF0000(红)，#00FF00(绿)，#0000FF（蓝）
用rgb(r,g,b)函数表示，例：grb(255,255,0)
hsl(H,S,L)函数标志:H色调（0红色，120绿色，240蓝色），S饱和度（百分数），L亮度（百分数）例：hsl(120,100%,100%)绿色
rgba(r,g,b,a)：a代表透明度，0~1之间的任意数，0代表完全透明
hsla(h,s,l,a)：a代表透明度，0~1之间的任意数，0代表完全透明

3.文本相关属性

text-indent：设置段落文本的缩进，默认值为0，被另一个元素（<br…/>）断开的元素不能使用本属性

text-overflow:控制溢出文本的处理方法：

 > clip:直接裁掉溢出部分
 > ellipsis：裁掉溢出部分，并显示（...）

text-align:文本的水平对齐方式，left（左对齐），right（右对齐），center（居中），justify（两端对齐）
white-space：文本内容中的空白处理方式
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文件相关属性</title>
		<style>
			div{
				border:1px solid #000000;
				height:30px;
				width:200px;
			}
		</style>
	</head>
	<body>
		<div style="text-align:center">我是一个程序员</div>
		<div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">
		我是一个程序员我是一个程序员我是一个程序员我是一个程序员</div>
		<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
		我是一个程序员我是一个程序员我是一个程序员我是一个程序员</div>
	</body>
</html>

运行结果如下：
在这里插入图片描述