CSS文本样式

最新推荐文章于 2022-09-29 18:40:53 发布

aA_a_a_a_a_Aa

最新推荐文章于 2022-09-29 18:40:53 发布

阅读量263

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/aA_a_a_a_a_Aa/article/details/124343865

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

本章主要展示HTML5中CSS文本样式中的字体设置，和文本样式设置的属性值和属性说明及部分展示，可直接看红色字体的属性说明。

一、字体设置

1.字体总汇

属性名	属性说明
font-size	设置字体的大小
font-variant	设置英文字体是否转换为小型大写
font-style	设置字体是否倾斜
font-weight	设置字体是否加粗
font-family	设置font字体
font	设置字体样式复写法
@font-face	设置Web字体

2.字体设置,对应属性值及演示（p标签为例）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size:50px
			}
			p{
				/*代码展示区域*/
			}
		</style>
	</head>
	<body>
        我是对比大小观察字体（50px）
		<p>html，HTML，我是p标签里的内容</p>
	</body>
</html>

2.1 属性名：font-size

属性值总汇

值	说明
xx-small	设置字体大小。每个值从小到大的固定值。
x-small
small
medium
large
x-large
xx-large
smaller	设置字体相对于父元素字体的大小
larger	设置字体相对于父元素字体的大小
数字+px	使用 CSS 像素长度设置字体大小
数字+%	使用相对于父元素字体的百分比大小

属性值	xx-small	x-small	small	medium	large	x-large	xx-large
说明	设置字体大小。每个值从小到大的固定值。（只展示最小和最大两者的对比）
代码展示	`p{font-size: xx-small;}` `p{font-size: xx-large;}`
效果展示

属性值	smaller	larger
说明	设置字体相对于父元素字体的大小
代码展示	`p{font-size: smaller;}` `p{font-size: larger;}`
效果展示

属性值	数字+px
说明	使用 CSS 像素长度设置字体大小
代码展示	`p{font-size: 50px;}`
效果展示

属性值	数字+%
说明	使用相对于父元素字体的百分比大小
代码展示	`p{font-size: 50%;}`
效果展示

2.2 属性名：font-variant

属性值总汇

值	说明
normal	表示如果以小型大写状态，让它恢复小写状态。
small-caps	让小写字母以小型大写字母显示。

属性值	normal
说明	表示如果以小型大写状态，让它恢复小写状态。
代码展示	`p{font-variant: normal;}`
效果展示	不做展示

属性值	small-caps
说明	让小写字母以小型大写字母显示。
代码展示	`p{font-variant: small-caps;}`
效果展示

2.3 属性名：font-style

属性值总汇

值	说明
normal	表示让倾斜状态恢复到正常状态。
italic	表示使用斜体。
oblique	表示让文字倾斜。区别在没有斜体时使用

属性值	normal
说明	表示让倾斜状态恢复到正常状态。
代码展示	`p{font-style: normal;}`
效果展示	不做展示

属性值	italic
说明	表示使用斜体。
代码展示	`p{font-style: italic;}`
效果展示

属性值	oblique
说明	表示让文字倾斜。区别在没有斜体时使用。
代码展示	`p{font-style: oblique;}`
效果展示

2.4 属性名：font-weight

属性值总汇

值	说明
normal	表示让加粗的字体恢复正常。
bold	粗体
bolder	更粗的字体
lighter	轻细的字体
100 ~ 900 之间的数字	600 及之后是加粗，之前不加粗

属性值	normal
说明	表示让加粗状态恢复到正常状态。
代码展示	`p{font-weight: normal;}`
效果展示	不做展示

属性值	bold
说明	加粗
代码展示	`p{font-weight: bold;}`
效果展示

属性值	bolder
说明	更粗的字体
代码展示	`p{font-weight: bolder;}`
效果展示	不做展示

属性值	lighter
说明	轻型的字体
代码展示	`p{font-weight: lighter;}`
效果展示

属性值	100 ~ 900 之间的数字
说明	600及之后是加粗
代码展示	`p{font-weight: 600;}`
效果展示	不做展示

2.5 属性名：font-family

属性值	楷体 , 微软雅黑 , 宋体等
说明	使用指定字体名称
代码展示	`p { font-family: 微软雅黑; }`
效果展示	不做展示

2.6 属性名：font

属性值	特殊
说明	字体设置简写组合方式。格式如下： [ 是否倾斜 \| 是否加粗 ] 字体大小字体名称；
代码展示	`p{font:italic bold 30px 微软雅黑;}`
效果展示

2.6 属性名：Web 字体

服务器提供字体

@font-face { 
    font-family: abc; 
    src: url('BrushScriptStd.otf'); 
}

p { 
    font-size: 50px; 
    font-family: abc; 
}

效果展示

二、字本内容设置

1.文本总汇

属性名	说明
text-decoration	装饰文本出现各种划线。
text-transform	将英文文本转换大小写。
text-shadow	给文本添加阴影
text-align	设置文本对齐方式
white-space	排版中的空白处理方式
letter-spacing	设置字母之间的间距
word-spacing	设置单词之间的间距
line-height	设置行高
word-wrap	控制段词
text-indent	设置文本首行的缩进

2.文本内容设置,对应属性值

2.1 属性名：text-decoration

属性值总汇：

值	说明
none	让本身有划线装饰的文本取消掉
underline	让文本的底部出现一条下划线
overline	让文本的头部出现一条上划线
line-through	让文本的中部出现一条删除划线
blink	让文本进行闪烁，基本不支持了（不展示）

2.2 属性名：text-transform（不做展示）

属性值总汇：

值	说明
none	将已被转换大小写的值恢复到默认状态
capitalize	将英文单词首字母大写
uppercase	将英文转换为大写字母
lowercase	将英文转换为小写字母

2.3 属性名：text-shadow

属性值	特殊
说明	给文本添加阴影其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。
代码展示	`p{text-shadow : 5px 5px 3px black;}`
效果展示

2.4 属性名：text-align（不全做展示）

属性值总汇：

值	说明
left	靠左对齐，默认
right	靠右对齐
center	居中对齐
justify	内容两端对齐
start	让文本处于开始的边界
end	让文本处于结束的边界

属性值	center
说明	居中对齐
代码展示	`p { text-align: center; }`
效果展示

2.5 属性名：white-space（不做展示）

属性值总汇：

值	说明
normal	默认值，空白符被压缩，文本自动换行
nowrap	空白符被压缩，文本不换行
pre	空白符被保留，遇到换行符则换行
pre-line	空白符被压缩，文本会在排满或遇换行符换行
pre-wrap	空白符被保留，文本会在排满或遇换行符换行

2.6 属性名：letter-spacing（不全做展示）

属性值总汇：

值	说明
normal	设置默认间距
长度值	数字+"px"

属性值	长度值
说明	数字+"px" 设置文本之间的间距
代码展示	`p { letter-spacing: 20px; }`
效果展示

2.7 属性名：word-spacing（不做展示）

属性值总汇：

值	说明
normal	设置默认间距
长度值	数字+"px"

2.8 属性名：line-height（不做展示）

属性值总汇：

值	说明
normal	设置默认间距
长度值	数字+"px"
数值	比如：1,2,3
%%	比如：200%

提示：当line-height值与height值一致时，文本垂直居中

2.9 属性名：word-wrap（不做展示）

属性值总汇：

值	说明
normal	单词不断开
长度值	断开单词

2.10 属性名：text-indent

属性值总汇：

值	说明
normal	设置默认间距
长度值	数字+"px"

属性值	长度值
说明	数字+"px" 设置文本首行的缩进
代码展示	`p { text-indent: 20px; }`
效果展示

aA_a_a_a_a_Aa

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS文本样式

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言本章主要展示HTML5中CSS文本样式一、字体设置1.字体总汇属性名属性说明 font-size 设置字体的大小 font-variant 设置英文字体是否转换为小型大写 font-style 设置字体是否倾斜.
复制链接

扫一扫