HTML5+CSS3+移动web——CSS 文字控制属性

系列文章目录

HTML5+CSS3+移动web------HTML 基础-CSDN博客https://blog.csdn.net/ymxk2876721452/article/details/136070953?spm=1001.2014.3001.5502HTML5+CSS3+移动web------列表、表格、表单-CSDN博客https://blog.csdn.net/ymxk2876721452/article/details/136221443?spm=1001.2014.3001.5502HTML5+CSS3+移动web------CSS基础-CSDN博客https://blog.csdn.net/ymxk2876721452/article/details/136465434?spm=1001.2014.3001.5502


目录

系列文章目录

一、字体大小

二、字体样式(倾斜)

三、行高

四、设置字体

五、font复合属性

六、文本缩进

七、文本对齐方式

八、文本修饰线


一、字体大小

  • 属性名:font-size

  • 属性值:文字尺寸,PC 端网页最常用的单位 px

p {

font-size: 30px;

}

二、字体样式(倾斜)

作用:清除文字默认的倾斜效果

属性名:font-style

属性值

  • 正常(不倾斜):normal

  • 倾斜:italic

三、行高

作用:设置多行文本的间距

属性名:line-height

属性值:数字 + px

四、设置字体

属性名:font-family

属性值:字体名

font-family: 楷体;

font-family属性值可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次查找

五、font复合属性

用于设置网页文字公共样式,其中字号和字体值必须书写,否则 font 属性不生效 。

复合属性:属性的简写方式,一个属性对应多个值的写法 ,各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

div {

font: italic 700 30px/2 楷体;

}

六、文本缩进

属性名:text-indent

属性值:

  • 数字 + px

  • 数字 + em (推荐:1em = 当前标签的字号大小

p {

text-indent: 4em;

}

七、文本对齐方式

用于控制内容水平对齐方式

属性名: text-align

属性值:

  • left 左对齐
  • center 居中对齐
  • right 右对齐

text-align: center;

八、文本修饰线

属性名: text-decoration

属性值:

  • none 无
  • underline 下划线
  • line-through 删除线
  • overline 上划线
相关推荐
愚公搬代码1 小时前
【愚公系列】《Android应用案例开发大全》016-LBS类应用掌上杭州(辅助工具类的开发)
android·前端
CodeSheep1 小时前
又一个华为天才少年,离职了!
前端·后端·程序员
kyriewen2 小时前
面试官说"打开你的AI工具"——我才发现,他考的根本不是写代码
前端·人工智能·面试
IT_陈寒3 小时前
Vue的双向绑定把我坑惨了,原来这个场景不能用
前端·人工智能·后端
hunterandroid3 小时前
[Android 从零到一] Compose LazyColumn 性能优化:key、稳定性与重组治理
android·前端
lichenyang4533 小时前
从一次团队邀请开始:用 React、NestJS 与 Socket.IO 做可靠的实时通知
前端
vtian3 小时前
一篇文章吃透 Monorepo:pnpm + Turborepo + Changesets 全流程实战(含 8 个踩坑)
前端
默_笙3 小时前
❗ 点击计数按钮,为什么"峨眉队"也跟着重新渲染?React.memo 说:我记住了
前端·javascript
31535669134 小时前
DeepSeek Harness 发布后,我没急着跑 Demo,先把 `.agents/` 翻了一遍
前端·后端·github
名字还没想好☜4 小时前
Next.js 用 Server Components 直连数据库:去掉 API 层的边界,和三条别踩的安全红线
前端·javascript·数据库·安全·react·next.js