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

相关推荐
memeflyfly3 分钟前
Vercel 自动部署完全指南:从配置到问题排查
前端·前端工程化
星辰徐哥8 分钟前
C语言Web开发:CGI、FastCGI、Nginx深度解析
c语言·前端·nginx
暗不需求15 分钟前
JavaScript 面向对象探秘:从构造函数到原型链的优雅继承
前端·javascript
圣光SG18 分钟前
奶茶店网页(纯HTML和CSS)
前端·css·html
kyriewen18 分钟前
你还在给每个图片父元素加类名?CSS :has() 让选择器“逆天改命”
前端·css·面试
漫天黄叶远飞21 分钟前
async/await 到底怎么工作的?
前端
ai_xiaogui29 分钟前
PanelAI前端全面升级!私有化部署AI面板控制台+生态市场一键管理详解
前端·人工智能·comfyui一键部署·生态市场算力共享·ai面板控制台·panelai私有化部署·大模型前端管理
Jelena1577958579231 分钟前
1688.item_get_app接口:包装尺寸重量信息深度解析
开发语言·前端·python
酉鬼女又兒39 分钟前
零基础快速入门前端DOM核心知识点详解与蓝桥杯Web赛道备考指南(可用于备赛蓝桥杯Web应用开发)
前端·职场和发展·蓝桥杯
daols881 小时前
vue甘特图vxe-gantt实现点击任务条弹出编辑表单
前端·vue.js·甘特图·vxe-gantt