HTML(9)——字体修饰

常用的字体修饰属性

属性 描述
font-size 字体大小 单位:数字+px
font-weight 字体粗细 单位:数字
font-style 字体倾斜
line-height 行高 单位:数字+px/数字(当前size的倍数)
font-family 字体族
font 字体复合属性
text-indent 文本缩进
text-align 文本对齐
text-decoration 修饰线
color 颜色

事项

行高

行高实际由上间距+文本高度+下间距

测量方法:从一行文字的最顶端到下一行文字的最顶端。

单行文字想要垂直居中时,可以设置行高属性值与盒子高度属性值一致。

字体族

font-family属性值可以书写多个字体名用逗号隔开,依次从左到右查找。

复合属性

属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格 隔开。(必须按顺序书写)

font:是否倾斜 是否加粗 字号/行高 字体

注:字号和字体必须书写,否则font不生效

文本缩进

属性名:text-indent

属性值:

  • 数字+px
  • 数字+em (1em表示当前标签的字号大小)

文本对齐方式

作用:控制内容水平对齐方式

属性名:text-align

属性值 效果
left 左对齐(默认)
center 居中对齐
right 右对齐

想让图片居中,可以给图片加一个父级标签例如<div>设置居中

修饰线

属性名:text-decoration

属性值 效果
none
underline 下划线
line-through 删除线
overline 上划线

color文字颜色

写法:

颜色表示方法 属性值 说明
颜色关键字 颜色的英文单词
rgb表示法 rgb(r,g,b) r,g,b表示红绿蓝,取值0-255
rgba表示法 rgba(r,g,b,a) a表示透明度,取值0-1
十六进制表示法 #RRGGBB 两两一组表示红绿蓝

如果一组当中两个数是一样的,可以简写为一位数:例如#00ffcc简写为#0fc

相关推荐
Ticnix4 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人4 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl4 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅4 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人4 小时前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼5 小时前
shadcn/ui,给你一个真正可控的UI组件库
前端
布列瑟农的星空5 小时前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_5 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus5 小时前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空5 小时前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范