CSS字体文本样式

2401_709仧

已于 2024-06-14 13:33:20 修改

阅读量494

点赞数 13

文章标签： css 前端

于 2024-06-14 13:31:26 首次发布

本文链接：https://blog.csdn.net/2301_76880434/article/details/139678573

版权

字体样式：

1. 字体大小

属性名：font - size

取值：数字 + px

注意点：

谷歌浏览器默认文字大小是16px
单位需要设置，否则无效

2. 字体粗细

属性名：font - weight

取值：

. 关键字

正常	normal
加粗	bold

. 纯数字：100~900的整百数

正常	400
加粗	700

注意点：

不是所有字体都提供了九种粗细，因此部分取值无变化
实际开发中以正常，加粗两种取值使用最多

3. 字体样式

属性名：font - style

取值： . 正常（默认值）：normal .倾斜：italic

em标签是斜体字

sans - serif 无衬线（网页中常用）

4. 类型：font-family

文本样式：

line-height ：行高

5. 字体类型

字体font相关属性的连写

属性名：font（复合属性）

取值：font ：style weight size family；

一个属性冒号后面书写多个值的写法——复合属性

文本缩进

属性名：text - indent

取值 : 数字 + px 数字 + em(推荐：1em=当前font-size的大小)

文本水平对齐方式

属性名：text - align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐
justify	每一行宽度相等左右对齐(如杂志和报纸)

text - alight：center 能让哪些元素水平居中？

① 文本

② span标签，a标签

③ input标签，img标签

注意点：如果需要让以上元素水平居中，taxt - align：center；需要给以上元素的父元素（<body>）设置

文本修饰

属性名：text - decoration

取值：

属性值	效果
underline	下划线（常用）
line - through	删除线
overline	上划线
none	无装饰线（常用）

注意点：开发中会使用 text - decoration：none;清除a标签默认的下划线

字体和文本样式（行高）

属性名：line - height（控制一行的上下间距）

取值：数字 + px .倍数（当前标签font-size的倍数）

应用:

① 让单行文本垂直居中可设置line-height：文字父元素高度

② 网页精准布局时，会设置line-height可以取消上下间距行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题

font : style weight size/line-height fomily;

标签水平居中方法总结 margin ：0 auto

如果需要让 div ，p ，h（大盒子）水平居中？
可以通过 margin ：0 auto; 实现

注意点：

① 如果需要让div ，p，h水平居中，直接给当前元素本身

② margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度