【30天-从前端入门到前端开发工程师Day10】CSS 文本样式全解：字体 / 行高 / 缩进 / 对齐，搞定页面文字排版美化，让网页文字更专业易读 + 高频面试题

专栏 30 天从入门到前端开发工程师每日精进实战指南 日更 知识点 代码 面试真题前言为什么你的页面文字总显得 “糙”文字排版好不好直接决定页面的质感。其实页面的质感很多时候都藏在细节里。文字是网页里占比最高的内容字体、字号、行高、间距、对齐方式任何一个参数没调对整体观感就会打折扣。很多新手只会改color 和 font-size连行高、首行缩进都不会用写出来的页面自然显得 “业余”。网页里绝大多数信息都是靠文字传递的文本样式是页面质感的基础。本篇把CSS 里所有常用的文本样式属性一次性讲透从字体基础到排版细节从行高原理到对齐规则每个属性都讲清用法、取值、适用场景和常见坑。最后用完整的博客文章排版案例把所有属性串起来实战落地。看完这篇你写出来的文字页面排版质感会有很明显的提升。一、CSS文本样式属性总览与解析核心知识点掌握字体类、排版类两大类文本属性理解行高的底层逻辑能够独立完成规范的文章、产品介绍类文本排版规避常见的字体、间距、对齐类问题。文本样式属性大致可以分成三类一类是控制字体本身的比如字号、字体、粗细另一类是控制排版布局的比如对齐、缩进、行高一类是装饰文本。下面逐个讲透实际开发中真正高频用到的属性。分类常用属性核心作用字体类font-size设置字体大小字体类font-family设置字体类型字体类font-weight设置字体粗细字体类font-style设置文字是否倾斜颜色类color设置文字颜色排版类text-align设置文本水平对齐方式排版类line-height设置行高行间距排版类text-indent设置首行缩进排版类letter-spacing设置字间距装饰类text-decoration设置文本装饰下划线、删除线等1.1 字体类属性控制文字本身的基础样式① 字体大小 font-size作用设置文字的大小基础单位是 px像素浏览器默认字号是 16px。常用字号规范○ 大标题20—28px○ 小标题16—18px○ 正文14—16px○ 辅助说明、备注12—13px说明○ 入门阶段最常用的单位是px像素固定大小好控制○ 浏览器默认的字体大小是 16px也就是你不写这个属性默认就是 16px○ 实际开发常用字号正文 14-16px小标题 18-20px大标题 24-32px○ 不要用太小的字号比如 12px 以下阅读起来很费劲不友好注意尽量用偶数字号奇数字号在部分浏览器下渲染会发虚这是前端开发的不成文规范。语法p { font-size: 16px; }② 字体类型 font-family作用设置文字用什么字体显示比如宋体、微软雅黑、黑体等。核心概念字体栈不能只写一个字体名因为用户电脑不一定装了这个字体。要按优先级写多个字体浏览器从左到右依次查找找到第一个能用的就用都找不到就用最后兜底的通用字体。语法body { /* 英文字体在前中文字体在后最后加通用字体族兜底 */ font-family: Arial, PingFang SC, Microsoft YaHei, sans-serif; } body { font-family: 微软雅黑, Microsoft YaHei, sans-serif; }规则字体名中间有空格、或者是中文字体必须加双引号英文字体放前面中文字体放后面这样英文和数字会优先用更好看的英文字体末尾必须加通用字体族兜底sans-serit无衬线字体网页最常用、serit衬线字体适合文章、monspace等宽字体适合代码。注意事项多字体备选字体名称之间用逗号隔开浏览器会从左到右依次找用户电脑上有第一个字体就用第一个没有就用第二个都没有就用最后面的通用字体兜底。通用字体族最后一定要加一个通用字体族兜底比如 sans-serit无衬线字体、serit衬线字体保证任何设备都能正常显示。中文字体加引号字体名是中文或者中间有空格的要用双引号包起来比如 Microsoft YaHei。③ 字体粗细 font-weight作用设置文字的粗细比如加粗、常规、细体。常用取值normal正常粗细对应数字值 400默认值bold加粗对应数字值 700最常用、和 HTML 里的 b 标签效果一样也可以直接写数字100-900间隔 100。注意不是所有字体都支持全部字重大部分中文字体只有 normal 和 bold 两种粗细写其他数字也不会生效。实际开发基本只用 normal 和 bold 就够了。语法.title { font-weight: bold; }小经验实际开发里正文用 normal标题用 bold 就够了不要到处都加粗重点太多等于没有重点。④ 字体倾斜 font-style作用设置文字是否倾斜用得不多主要用来重置默认样式。取值normal 正常、italic斜体常用场景重置 em、i 标签的默认斜体因为这两个标签现在更多用来放图标、做语义强调不需要倾斜样式。⑤ 文字颜色 color作用设置文字的颜色是最基础也最常用的属性。常见取值用法颜色名比如 red 、 blue仅用于调试实际开发基本不用十六进制比如 #333、 #666666 、#ff4400是开发最常用的写法两位重复可以缩写比如 #333333 写成 #333rgb/rgba比如rgb(0,0,0)rgba 多了一个透明度通道取值 0-1比如rgba(0,0,0,0.5)代表半透明黑色语法p { color: #333; }开发小经验正文文字不要用纯黑 #000用 #333、#666 这类深灰色阅读起来更柔和是行业通用做法。次要文字用 #666说明文字用 #999是很通用的配色规范。1.2 排版类属性控制文字排列与阅读体验这部分属性是拉开排版差距的关键很多新手只改字号和颜色忽略了行高和缩进页面就永远像 “半成品”。① 水平对齐 text-align作用设置元素内文字的水平对齐方式注意这个属性要加在父级块元素上直接给行内元素加不生效。取值left左对齐默认值正文都用这个center居中对齐适合标题、按钮文字、提示语right右对齐适合价格、日期类数据justify两端对齐英文大段文章常用中文尽量少用容易出现字间距忽大忽小的情况观感很差。语法h1 { text-align: center; }很多人会给sapn、a种行内元素本身加text-aligncenter发现不生效。 记住text-align 是给块级父元素加的控制它里面的行内内容对齐。想让文字居中要给文字外面的块级盒子加这个属性不是给文字本身加。② 首行缩进 text-indent作用设置段落第一行的缩进距离中文排版里很常用就是我们写作文开头空两格的效果。最佳实践单位用em写text-indent: 2em正好缩进两个汉字的宽度。为什么用emem是相对当前字号的单位字号改了缩进会自动跟着等比例变不用手动调整适配性更强。语法p { text-indent: 2em; }说明em是相对单位1em等于当前元素的一个字号大小2em就正好是缩进两个字符完美适配中文排版习惯只对第一行生效后面的行不受影响③ 行高 line-height【⭐️⭐️⭐️⭐️⭐️】作用设置一行文字的高度通俗说就是行与行之间的距离。是决定排版疏密度的核心属性也是新手最容易用错的属性。行高是提升阅读体验最有效的属性没有之一。取值像素值——比如 line-height: 24px固定死行高子元素会继承这个固定像素百分比——比如 line-height: 150%相对于当前字号计算子元素继承计算后的像素值无单位数字(倍数)比如 line-height: 1.6代表行高是当前字号的 1.6 倍子元素继承这个比例会根据自己的字号重新计算normal 默认值大概 1.2 左右不同浏览器有差异不推荐业务中直接用。语法body { line-height: 1.6; }开发推荐统一用无单位数字。正文一般设 1.5-1.6阅读舒适度最高标题可以设 1.2-1.3更紧凑。经典技巧单行文字垂直居中给容器设置相同的 height 和 line-height就能实现单行文字垂直居中。这是按钮、导航栏、标题栏最常用的写法兼容性拉满。.btn { height: 40px; line-height: 40px; }④ 字间距 letter-spacing作用设置每个字符之间的距离中文、英文都生效。语法h2 { letter-spacing: 2px; }适用场景一般正文不用调字间距默认的就刚好。标题有时候会适当加一点字间距显得更舒展、更高级。不要加太大不然字散得太开反而不好看。适合用在标题、logo、大写英文上提升精致感正文一般不用会影响阅读速度。1.3 装饰类属性下划线、删除线等特殊效果① 文本装饰 text-decoration作用给文字加装饰线比如下划线、删除线或者去掉默认的装饰线。最常用的是去掉 a 标签的默认下划线。取值none 无装饰最常用用来重置 a 标签下划线underline 下划线和 u 标签效果一样line-through 删除线和 s 标签效果一样语法/* 全局去掉a标签默认下划线悬浮时再显示 */ a { text-decoration: none; color: #333; } a:hover { text-decoration: underline; color: #ff4400; } /* 去掉a标签默认的下划线 */ a { text-decoration: none; color: #333; } /* 给原价加删除线 */ .old-price { text-decoration: line-through; color: #999; }高频用法超链接 a 标签默认自带蓝色下划线实际开发里 99% 的场景都会用 text-decoration: none 把下划线去掉再自己改颜色和 hover 效果。这个属性虽然简单但用得非常多。二、实战代码——博客文章详情页完整排版将所有属性整合起来写一个真实场景的博客文章详情页包含标题、发布信息、正文段落、引用块、底部备注完全还原企业开发中的文章排版规范。复制代码保存为article.html双击即可运行预览。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleDay10-博客文章排版实战/title style /* 全局基础样式 */ body { font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif; color: #333; font-size: 16px; line-height: 1.6; background-color: #f9f9f9; } /* 文章容器 */ .article-box { width: 700px; margin: 30px auto; padding: 30px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* 文章标题 */ .article-title { font-size: 24px; font-weight: bold; text-align: center; line-height: 1.3; margin-bottom: 10px; } /* 发布信息 */ .article-meta { font-size: 13px; color: #999; text-align: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; } /* 正文段落 */ .article-content p { text-indent: 2em; margin-bottom: 15px; color: #444; } /* 二级小标题 */ .article-content h3 { font-size: 18px; font-weight: bold; margin: 25px 0 10px 0; color: #222; } /* 引用块 */ .quote { margin: 20px 0; padding: 15px 20px; border-left: 4px solid #ff4400; background-color: #fff5f0; color: #666; font-size: 14px; } /* 底部备注 */ .article-footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid #eee; font-size: 12px; color: #999; text-align: right; } /style /head body div classarticle-box h1 classarticle-title30天前端入门为什么要先打好HTML和CSS基础/h1 div classarticle-meta 发布时间2024-06-25 · 阅读量1234 · 作者前端学习笔记 /div div classarticle-content p很多刚入门前端的同学都喜欢上来就学框架觉得HTML和CSS太简单不值得花时间。但实际开发中80%的页面问题本质都是基础不扎实导致的。/p h3基础不牢地动山摇/h3 pHTML是页面的骨架CSS是页面的外观这两个是前端的根基。骨架搭得不对后面写JS、写框架都会出问题样式理解不深遇到布局错乱、样式冲突就只能瞎试效率极低。/p div classquote 前端开发不是会写几个标签、几个样式就够了要懂原理、懂规范、懂最佳实践才能写出可维护、兼容性好的代码。 /div p比如很多人写页面只会用div堆不会用语义化标签写CSS只会用行内样式、id选择器不知道权重规则。这些问题在小Demo里看不出来到了真实项目里就是维护灾难。/p h3慢就是快/h3 p花一两周时间把HTML、CSS基础打扎实后面学JS、学框架都会快很多。因为你不用再分心去调基础的布局、样式问题可以专注在逻辑上。看似慢了几天实际上整体效率反而更高。/p p尤其是对于零基础转行的同学不要急于求成一步一步把每个知识点吃透配套写实战案例比囫囵吞枣学一堆框架有用得多。/p /div div classarticle-footer 本文为30天前端入门专栏持续更新中 /div /div /body /html排版亮点说明全局基础统一body 上统一设置字体、字号、行高、文字颜色所有内容继承基础样式不用每个标签重复写层级清晰标题、正文、辅助信息用不同字号、不同颜色区分阅读有节奏感阅读友好正文行高 1.6、首行缩进 2em符合中文阅读习惯细节到位引用块用左边框 浅背景突出底部备注弱化处理排版有重点、有层次。三、实在代码——优化个人简历的文本排版细节继续优化个人简历页面把今天学的所有文本属性都用上优化文字的细节质感。代码可直接复制运行。!DOCTYPE html html head meta charsetutf-8 title张三的个人简历 - 文本优化版/title style /* 通配重置 */ * { margin: 0; padding: 0; } /* 全局文本基础样式利用继承减少重复代码 */ body { font-family: Microsoft YaHei, 微软雅黑, sans-serif; font-size: 15px; color: #333; line-height: 1.6; background-color: #f5f7fa; } /* 页面头部 */ #header { text-align: center; padding: 35px 0; background-color: #2c3e50; color: white; } #header h1 { font-size: 28px; font-weight: bold; letter-spacing: 3px; } #header p { font-size: 14px; color: #bdc3c7; margin-top: 8px; } /* 内容卡片 */ .content-card { width: 760px; margin: 20px auto; background-color: white; padding: 25px 30px; border-radius: 8px; } .section-title { font-size: 20px; font-weight: bold; color: #2c3e50; border-left: 4px solid #3498db; padding-left: 12px; margin-bottom: 18px; } /* 段落首行缩进 */ .intro-text p { text-indent: 2em; margin-bottom: 10px; } /* 高亮文字 */ .highlight { color: #e74c3c; font-weight: bold; } /* 技能列表 */ .skill-list { list-style: none; padding-left: 0; } .skill-list li { padding: 5px 0; } /* 表格文本样式 */ table { width: 100%; border-collapse: collapse; text-align: center; } th { background-color: #f0f2f5; font-weight: bold; padding: 10px; } td { padding: 10px; border: 1px solid #e4e7ed; } /* 链接样式去掉默认下划线改颜色 */ a { color: #3498db; text-decoration: none; } a:hover { text-decoration: underline; } /style /head body div idheader h1张 三/h1 p前端开发工程师 | 期望薪资6-8K | 可随时到岗/p /div div classcontent-card h2 classsection-title个人简介/h2 div classintro-text p本科学历计算机科学与技术专业3个月系统前端学习经验熟练掌握HTML、CSS、JavaScript基础具备独立开发静态页面的能力。/p p热爱前端技术有较强的学习能力和问题排查能力熟悉浏览器开发者工具的基础使用。希望加入有技术氛围的团队在实战中快速成长。/p p核心优势span classhighlight代码规范意识强/spanspan classhighlight注重细节与用户体验/span。/p /div /div div classcontent-card h2 classsection-title教育经历/h2 table tr th时间/th th院校/th th专业/th th学历/th th绩点/th /tr tr td2020.09 - 2024.06/td td某某大学/td td计算机科学与技术/td td本科/td td3.8/4.0/td /tr tr td2017.09 - 2020.06/td td某某高级中学/td td理科/td td高中/td td-/td /tr /table /div div classcontent-card h2 classsection-title专业技能/h2 ul classskill-list liHTML/CSS熟练掌握标签语义化、CSS选择器、盒子模型、浮动与定位/li liJavaScript掌握基础语法、函数、事件处理、DOM基础操作/li li开发工具熟练使用VS Code、浏览器开发者工具了解Git基础操作/li li其他具备良好的代码规范意识能阅读英文技术文档/li /ul p stylemargin-top: 15px;个人博客a hrefhttps://blog.csdn.net target_blank点击访问我的CSDN主页/a/p /div /body /html代码说明全局继承把字体、字号、行高、文字颜色都写在 body 上所有子元素自动继承不用重复写代码更简洁层级分明主标题、二级标题、正文、次要文字用不同的字号和颜色信息层级清晰排版优化个人简介段落加了首行缩进符合中文阅读习惯全局 1.6 倍行高读起来不费劲细节处理去掉了 a 标签默认的下划线鼠标悬停才显示下划线交互更细腻标题加了字间距更舒展表格优化表格文字居中表头加粗加背景数据更易读四、企业开发规范与新手常见踩坑点4.1 企业开发通用规范全局基础样式统一在 body 上设置默认字体、字号、行高、颜色所有子元素继承保证全站风格统一字体必须写字体栈末尾一定要加通用字体族兜底避免用户缺字体导致排版错乱行高用无单位值正文统一 1.5-1.6标题 1.2-1.3用比例值适配性更强维护成本更低正文左对齐大段正文一律左对齐不要居中严重影响阅读速度。居中只适合短标题、提示语首行缩进用 em中文段落首行缩进统一用2em不要用空格、不要用固定像素。4.2 新手高频踩坑点坑 1给行内元素加 text-align 不生效text-align是给父级块元素加的控制内部的行内内容对齐。直接给 span、a 标签加是没用的要给它们的父盒子加。坑 2line-height 写死像素子元素继承后错乱比如父元素字号 16px行高 24px1.5 倍子元素字号 24px继承了 24px 的行高文字就会叠在一起。用无单位的 1.5 就不会有这个问题子元素会自己算。坑 3font-family 只写一个字体很多新手直接写font-family: 微软雅黑苹果电脑上没有微软雅黑直接显示默认宋体排版全崩。一定要写字体栈 兜底。坑 4用 空格凑缩进、凑间距写出来的代码又乱又难维护缩进用text-indent间距用margin、padding专业且好改。坑 5大段中文用两端对齐中文词语长短不一text-align: justify会导致字间距忽大忽小出现大片空白非常难看。中文正文老老实实左对齐就好。五、高频面试考点5.1 如何实现单行文字垂直居中原理是什么回答最基础、兼容性最好的方法是让容器的height和line-height设置为相同的值。原理行高的本质是两行文字基线之间的距离当行高等于容器高度时文字的上下半行距会均分容器的剩余空间视觉上就实现了垂直居中。 这个方法只适用于单行文字多行文字不适用。如果是多行一般用内边距、flex 布局来实现行高法是初级面试最常考的基础方案。5.2 line-height 有哪几种取值方式各有什么区别开发推荐用哪种回答line-height 主要有四种取值方式核心区别在于计算方式和继承规则不同像素值比如24px是固定的行高值写多少就是多少。子元素会直接继承这个固定像素值不会随自身字号变化百分比比如150%是相对于当前元素的字号计算出最终像素值。子元素继承的是计算完成后的像素值同样不会随自身字号重新计算无单位数字比如1.6代表行高是当前字号的倍数。子元素继承的是这个倍数比例会根据自己的字号重新计算行高normal浏览器默认值大概在 1.2 左右不同浏览器有细微差异不推荐业务中直接使用。开发中推荐使用无单位数字。因为它是比例继承适配性更强子元素字号变化时行高会自动适配不会出现固定像素值导致的文字重叠、排版错乱问题维护成本也更低。5.3 设置 font-family 时为什么要写多个字体什么是字体栈最后面的sans-serif是什么意思回答因为不同操作系统、不同用户的电脑上安装的字体是不一样的。如果只写一个字体用户电脑上没有安装的话就会 fallback 到浏览器的默认字体原本的排版效果就会完全走样。按优先级顺序写多个字体的写法就叫做字体栈。浏览器会从左到右依次查找字体找到第一个系统中存在的字体就使用都找不到的话就用最后面的通用字体族兜底。行业通用的写法是英文字体放前面中文字体放后面末尾加通用字体族。比如font-family: Arial, PingFang SC, Microsoft YaHei, sans-serif;这样英文和数字优先用更美观的 Arial中文用苹方或微软雅黑极端情况也有无衬线字体兜底保证基本的排版效果。sans-serif是通用无衬线字体族不是具体某一个字体而是告诉浏览器用系统默认的无衬线字体来显示保证在任何设备上都能正常显示不会因为找不到字体而出错。5.4 如何去掉 a 标签默认的下划线回答给 a 标签设置text-decoration: none;就可以去掉默认的下划线。通常还会配合修改文字颜色让链接样式更符合页面整体设计。一般还会加上:hover伪类鼠标悬停的时候再显示下划线提升交互反馈。六、练习把上面的简历代码跑起来自己动手调整行高、字号、颜色感受不同参数带来的视觉差异给你自己的个人简历页面做一次完整的文本优化统一字体、设置合适的行高、段落首行缩进、去掉链接下划线试着做一个高度 40px 的按钮用今天学的技巧让按钮里的文字水平 垂直都居中七、总结文本样式看起来都是零散的小属性但恰恰是这些细节决定了页面的精致度。很多时候页面显得 “糙”不是因为少了什么复杂特效就是行高没调对、字体没选好、间距乱。核心要掌握的几个点字体必须写字体栈加兜底这是开发的基本素养行高优先用无单位数字正文 1.5-1.6 是舒适区间text-align、text-indent 这些排版属性要用对场景不要乱用单行垂直居中的行高法是必须记牢的基础技巧。把这些基础的文本排版练熟后面写表单、写卡片、写页面模块文字部分就不会拖后腿整体质感会提升一大截。核心知识点回顾字体类font-size 字号、font-family 字体、font-weight 字重、color 颜色排版类text-align 对齐、line-height 行高、text-indent 首行缩进、letter-spacing 字间距装饰类text-decoration 文本装饰最常用去掉 a 标签下划线利用好 CSS 的继承特性全局样式写在 body 上减少重复代码✨ 给大家一个小建议平时逛网站的时候可以多留意一下别人的文字排版比如字号多大、行高多少、颜色用的什么灰看得多了自己写的时候自然就有感觉了。 学习进度 CSS 文本修饰距离成为初级前端工程师还有 20 天 如果你觉得这篇文章对你有帮助欢迎点赞 收藏⭐ 关注我后续会持续更新 30 天前端入门系列文章。有任何问题都可以在评论区留言我会一一回复。 专栏导航30 天从入门到前端开发工程师每日精进实战指南 海漫浩浩我亦苦作舟大家一起学习一起进步