尧图网站建设 
我们前端写样式天天跟CSS里的字体、文本、排版打交道但说实话大多数时候都是“能用就行”。真遇到那种设计稿里很细节的排版需求——比如文字垂直居中、图片和文本对齐、省略号后面的“查看详情”、字体渐变、流光边框就发现脑子里那点CSS知识不够用了。这篇我把自己这些年折腾CSS文本样式和文本布局的经验整理一下重点放在那些平时容易忽略、但一碰到就卡壳的细节上顺带把几个网上问得特别多的小技巧比如涟漪光圈、数字倒计时、鼠标移入效果怎么实现也一并讲清楚适合刚入门的前端新手也适合写了两三年但一直靠复制粘贴混日子的同学。1. 字体与字号先搞清楚文本的“基因”1.1 font-family一套稳定的写法font-family是CSS里最基础的属性但很多人第一关就栽了——不是字体不生效就是不同系统下显示效果完全不一样。我推荐的稳妥写法是带后备字体栈font stack比如body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif; }这串看着长其实逻辑很清楚优先用苹果系统的字体没有就用Windows的再没有就用中文字体最后保底用系统默认无衬线字体。这样能保证在Mac、Windows、Android、iOS上都不会出现乱码或者明显的风格崩坏。有个坑font-family中的中文字体名称一定要加引号比如Microsoft YaHei、PingFang SC字体名中有空格或数字的也要加引号。不加引号在某些浏览器里会被解析成多个关键字导致完全不生效。另外中文字体不要放在英文字体前面否则会拖慢渲染速度也容易让英文和数字显示得很难看。1.2 em和rem别再傻傻分不清em这个单位计算规则是相对当前元素的字体大小。比如.parent { font-size: 20px; } .child { font-size: 0.8em; /* 实际 16px相对父元素 */ }这里有个非常绕的地方如果父子元素层层嵌套都用em实际字号会累乘。比如父元素1.2em子元素又是1.2em孙子又继承再乘一次……很容易算着算着就懵了。实际项目里我很少用em做字号它更适合用来做margin、padding这类与字号联动的间距。rem相对的是根元素html的字体大小不受嵌套影响计算起来更可控html { font-size: 16px; /* 浏览器默认 */ } .title { font-size: 2rem; /* 固定 32px */ }如果做移动端适配有些人喜欢在html上用JavaScript动态改字体大小配合rem。但我觉得对绝大多数场景rem写死就够了没必要搞那么复杂。1.3 font-weight和font-style的两个细节font-weight用数字写法更精确普通文本是400加粗是700中等是500。但有个前提——字体本身必须支持对应的字重否则浏览器会强行用算法模拟加粗效果其实挺假的。比如你用了font-weight: 300但系统里没有细体字体那浏览器会找最近的可用字重替代。font-style: italic这个也容易出问题。很多前端以为italic就是把文字倾斜其实严格来说italic是“斜体字”oblique才是“倾斜”。对于大多数系统字体两者表现差不多但有些字体专门设计了真正的斜体字形italic调用的是那个字形而oblique只是把普通字旋转。所以如果你想强调但又不破坏字体原有设计可以用font-style: oblique不过实际工作中两者混用也没太大问题知道这个区别就行。实操心得中文字体基本没有真正的italic斜体都是浏览器硬拉出来的。所以中文环境下想强调文字我更推荐用颜色、字重、下划线来区分而不是用斜体。2. 文本布局与方向真正决定“好不好看”的细节2.1 text-align与text-indent的正确用法text-align是水平对齐方式left、right、center、justify四个值都很常用。但justify有个体验问题中文两端对齐效果还行英文单词会被拉伸出大空隙很难看。所以英文内容尽量别用justify。text-indent控制首行缩进单位常用em。比如text-indent: 2em就是缩进两个字宽的位置中文段落的传统排版用这个很舒服。但要留意text-indent对inline-block元素也有效对inline元素无效而且它会把第一行整个往右推如果第一行前面有图片或者别的元素效果就不太对。2.2 line-height不只是行距行高我们天天用但它其实是文本布局里最容易被低估的属性。line-height的值有三种写法固定值line-height: 24px纯数字line-height: 1.6百分比line-height: 160%纯数字是最推荐的因为它会相对当前字号重新计算继承时也不会出问题。百分比的坑在于如果父元素设置line-height: 160%子元素继承的是计算后的固定px值而不是这个比例后续子元素字号变大行高却还是按之前的字号算的看起来就会很挤。单行文本垂直居中是最常用的技巧给容器设置height且line-height与之一致即可。多行文本垂直居中就不要用line-height硬撑了应该用flex或者padding。我还遇到过一个诡异情况容器里只有一个英文单词明明line-height设得比height小文字还是上下不对称。这是因为行高会被上面的半行距half-leading机制影响英文的基线也在作怪。解决办法是给容器加overflow: hidden或者稍微调一下line-height。2.3 letter-spacing与word-spacing中英文间距的取舍letter-spacing是字符间距对英文和中文都有用。中文排版里适当加一点letter-spacing比如0.05em到0.1em会让标题显得更透气但正文千万别加太多否则读起来像字跟字在打架。word-spacing是单词间距主要对英文生效中文不加空格基本没意义。还有个小细节给段落text-align: justify时调整letter-spacing和word-spacing会影响两端对齐的观感调试时要注意配合。2.4 writing-mode与direction文字方向的冷门但实用知识writing-mode可以改变文字排列方向像“竖排”这样的效果它就派上用场了.vertical-text { writing-mode: vertical-rl; /* 从右往左竖排传统中文排版 */ }这个属性在实现古风页面、对联、海报竖排标题时特别好用。配合text-orientation: upright还能控制竖排时西文字符的方向。direction是LTR/RTL方向控制。阿拉伯语、希伯来语页面会用到direction: rtl。一般情况下我们用不到但有时候页面上需要做一个从右往左的滑动切换效果也可以用direction搭配flex改变主轴方向。注意writing-mode: vertical-rl在竖排状态下text-align: center依然有效但text-indent的方向会跟着变化这块容易判断失误建议实际改完样式后多预览一下。2.5 white-space、word-break与文本溢出这一组属性专门解决“文字怎么断行”的问题日常开发中非常高频。white-space: nowrap禁止换行white-space: pre-wrap保留空格并正常换行word-break: break-all单词内强行断行overflow-wrap: break-word只在必要的时候断行一般软换行在单词边界断行推荐overflow-wrap: break-word硬换行推荐word-break: break-all。中文用word-break: break-all基本没差英文就尽量不要会破坏单词的可读性。单行文本省略三件套是经典中的经典.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }多行省略在旧浏览器里只能靠-webkit-line-clamp现在稍微新一点的浏览器基本都支持了.multiline-ellipsis { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }三行以上就显示省略号的场景这个方案最省事。3. 文本修饰与进阶视觉效果文字也可以“玩出花”3.1 text-decoration删除线下的小心思text-decoration除了最常见的text-decoration: underline之外还能实现删除线line-through。HTML里有一个del标签语义上是删除内容但很多设计场景下比如价格划线、任务完成状态直接用CSS样式更灵活.price-original { text-decoration: line-through; text-decoration-color: #999; text-decoration-thickness: 2px; }这里我特别想提text-decoration-thickness和text-decoration-color。这两个属性在其他元素上即使设置了可能也看不出太大差别但一旦你用下划线做导航菜单的hover效果就能感受到控制了。注意事项text-decoration的下划线是从文字基线下面画过去的英文和中文的显示位置不一样。如果要求下划线跟文字间距非常精确不如用border-bottom模拟.under-line { border-bottom: 2px solid #333; padding-bottom: 4px; display: inline-block; }用border模拟的好处是控制颜色、粗细、与文字的距离更自由缺点是宽度不会自动贴合文字需要配合inline-block。3.2 字体渐变一行CSS让标题变“高级”网上经常看到文字渐变效果原理是background-clip: text把背景裁剪成文字的形状再把文字颜色设成透明露出的就是背景渐变.gradient-text { background: linear-gradient(90deg, #f7971e, #ffd200); -webkit-background-clip: text; background-clip: text; color: transparent; }这个效果的兼容性已经非常好了但有两个隐藏问题。一是如果元素内有其他子元素也可能被背景裁剪影响最好把渐变文字单独用一个span包起来二是text-shadow在这里会失效因为文字本身颜色是透明的阴影显示的是透明文字的阴影看起来怪怪的。想给渐变文字加阴影可以用filter: drop-shadow()替代。3.3 流光边框与涟漪光圈扩散的实现思路这个标题在搜索热词里出现频率越来越高具体就是鼠标移入按钮时产生一圈扩散波纹或者边框发光的动态效果。流光边框的核心是渐变动画先用border或者伪元素做边框再让background-position不断变化。常见的做法是用padding伪造边框.btn-flow { position: relative; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #f00, #ff0, #0ff, #f00) border-box; background-size: 100% 100%, 200% 100%; animation: flow 3s linear infinite; } keyframes flow { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 0, -200% 0; } }涟漪光圈扩散其实就是“伪元素scale变大 透明度降为0”的动画。比如按钮上做一个圆环.btn-ripple::after { content: ; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); animation: ripple 1.5s ease-out infinite; } keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }这个思路可以延伸到很多场景直播间的点赞动画、地图定位点、loading提示等。原理一句话总结用伪元素做扩散体用动画控制scale和opacity。3.4 数字加载动画与CSS倒计时的实现方案搜索热词里还出现了“数字加载动画效果css”“js css倒计时”这俩其实是一对配合CSS管视觉JS管逻辑。比如做数字从0滚动到100的加载效果最简单的方案是CSS的counter配合property但这个属性兼容性有限。更通用的是JS驱动div classcounter>.counter { font-size: 4rem; font-weight: 700; transition: all 0.2s; }const counter document.querySelector(.counter); const target counter.dataset.target; let current 0; const timer setInterval(() { current 1; counter.textContent current; if (current target) clearInterval(timer); }, 20);光这样数字变化太生硬。加一点动画可以这样让数字在变化时配合一个轻微scale缩放造成“弹跳”感.counter.bounce { animation: bounce 0.2s; } keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }JS在更新文本前先移除class再强制重绘最后加回来。这个“移除-强制重绘-添加”的套路在动画类需求里很常用可以记一下。倒计时则是另一类需求先定目标时间再用setInterval每秒更新剩余时间。核心逻辑不难但要注意setInterval不够精确长时间运行会积累误差。严谨一点的做法是每次更新时用当前时间戳重新计算差值而不是简单地在旧值上减1。3.5 鼠标移入事件hover不仅能用还能配合过渡搜索热词里有“css鼠标移入事件”其实就是:hover伪类。它算是CSS里最常用的“事件”了.card { transform: translateY(0); transition: transform 0.3s ease; } .card:hover { transform: translateY(-6px); }需要注意hover能触发子元素、兄弟元素的变化但不能“触发父元素”。如果想鼠标悬停子元素时让父元素变化就要用:has().card:has(.btn:hover) { border-color: #333; }:has()现在主流浏览器都支持了可以放心用。还有一个容易忽略的点在移动端hover会被点击行为模拟操作体验跟桌面完全不同所以移动端不要依赖hover做交互要用点击事件或者媒体查询专门处理。3.6 屏幕穿出效果CSS能不能做“穿出屏幕”热词里有个“css能实现屏幕穿出来的效果吗”。这里要泼个冷水纯CSS在浏览器里很难实现字面意义上的“穿出屏幕、悬浮在页面上方”因为浏览器渲染是平面化的。但视觉上有“穿出感”是可以仿的立体阴影text-shadow多层堆叠制造深度3D变换transform: perspective() rotateX() translateZ()让文字在Z轴方向上“出来”视差滚动配合JS滚动事件控制位移产生层叠穿越感如果想做那种手机壳、贴纸叠加在页面上的“伪3D”效果本质是多个图层位移错开加上光照阴影。CSS能实现一部分但真要三维立体效果建议还是上Canvas/SVG或者图片素材。4. 容器内文本位置与图文混排最磨人的“对齐问题”4.1 图片和文字一行怎么对齐“图片和文字一行”是搜索引擎里常年长青的问题。图片和文字在默认状态下基线baseline对齐所以图片下面会空出一截。三个常规解法解法一vertical-align.img-text img { vertical-align: middle; }这是最省事的方案。vertical-align可以取baseline、middle、top、bottom等值。它的作用是控制行内元素在父级基线上下移动的位置所以只对inline或inline-block元素有效。解法二Flexbox.img-text { display: flex; align-items: center; }这也是我非常推荐的方案因为flex的align-items: center能保证子元素的主轴方向居中不管图片高矮、文字多少都能稳妥对齐。注意gap属性控制间距非常舒服兼容性也没问题了。解法三line-height如果文字只有一行可以给父容器设置固定line-height图片再vertical-align: middle也能获得接近垂直居中的效果。但这种方法对文字行数有要求一旦变成两行就露馅。实际项目里推荐优先用flex如果必须用行内结构注意图片要用display: inline-block避免inline元素默认基线问题带来的底部空隙。4.2 怎么调整CSS容器里的文本位置这个问题可以拆成“水平居中”“垂直居中”“水平垂直居中”三种情况。水平居中最简单.text-center { text-align: center; }垂直居中如果是单行文本就用line-height等于容器高度.box { height: 60px; line-height: 60px; }如果是多行文本或未知高度文本flex是正解.box { display: flex; align-items: center; justify-content: center; }还有一个冷门方案使用display: table-cell和vertical-align: middle本质上模拟表格单元格的垂直居中老项目里很常见。现在基本被flex替代了但老代码维护时还会碰到建议至少能看懂。注意absolute定位配合top: 50%; transform: translateY(-50%)也能垂直居中但transform会创建新的层叠上下文在某些场景下会影响定位和overflow裁剪能不用就不用。4.3 查看详情的省略号与更多按钮热词里有一条“在文章末尾或者两行中的最后展示查看详情css怎么写”。这种需求在卡片列表、新闻摘要里太常见了文字显示两行超出部分省略但最后要跟一个“查看详情”链接。先说结论纯CSS做“省略号后跟按钮”比较棘手因为text-overflow只能控制省略号不能控制后面的内容。最靠谱的做法有两种做法一只对文字做省略按钮放在文字外面div classnews-item p classdesc这是一段非常长的摘要……/p a hrefdetail.html classmore查看详情/a /div.desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }按钮单独一行或跟在旁边用flex排列保证不挤压文字。做法二用伪元素覆盖省略号如果想实现真正的“两行文字最后显示查看详情”可以借助伪元素遮挡.desc { position: relative; -webkit-line-clamp: 2; overflow: hidden; } .desc::after { content: 查看详情; position: absolute; right: 0; bottom: 0; background: linear-gradient(to right, transparent, #fff 60%); padding-left: 30px; }伪元素盖在右下角底色做渐变过渡看起来就像“文字戛然而止后面跟着查看详情”。缺点是无法点击如果a标签要可点击需要额外处理而且背景色依赖容器背景不能动态适配页面底色。所以实际项目中我多数情况下用做法一简单实在。5. 样式引入方式、选择器与原子性CSS小知识串讲5.1 CSS文件里需要写style吗这个热词应该误导了一部分纯CSS学习者。回答非常明确.css文件里不能写style标签那是HTML里的东西。CSS文件里的内容应该直接是规则body { margin: 0; }写style的是HTML内嵌样式表的方式主要是写在HTML文件的head里style body { margin: 0; } /style引入CSS有三种方式外部样式表推荐用link relstylesheet hrefstyle.css复用性和缓存性最好。内部样式表HTML里写style适合单页原型或临时调试。内联样式在标签上写style属性优先级很高但完全不可复用只在特殊场景使用。优先级排序是内联样式 ID选择器 类/属性/伪类选择器 元素/伪元素选择器 通配符。这个顺序直接决定了覆盖规则写项目时遇到样式不生效先别怀疑“是不是写法有问题”可以先按优先级推一遍。5.2 元素选择器从“第1关”到优先级搜索热词里有一条“第1关css元素选择器”这估计是某教程的关卡。元素选择器就是直接选HTML标签p { color: red; }它能选到页面上所有p标签。但这个选择器有个特点容易“误伤”。一套肤色清爽的页面里如果所有p都统一字号颜色还好但如果要精确改某一个段落就得用类选择器.highlight { color: #ff6b6b; }类选择器是CSS里用得最多的选择器因为它可复用、语义清晰、优先级也比较适中。ID选择器尽量少用一个是因为ID在页面里唯一无复用性另一个是ID优先极高后面想覆盖得用!important或者更卑鄙的手段非常被动。还有一个组合选择器要注意后代选择器 vs 子代选择器。后代选择器.list .item选所有层级下的item子代选择器.list .item只选直接子集两个跨度大的嵌套结构里用后代选择器容易造成样式扩散能写子代选择器的地方就写子代选择器这是减少CSS副作用最简单的方法。5.3 原子性CSS到底值不值得学技术圈近期很流行原子性CSSAtomic CSS什么text-center、mt-4、flex这种“一个类名只干一件事”的写法。Tailwind CSS就是典型代表。它最大的卖点减少重复代码让样式可持续维护。比如以前要写.btn { padding: 12px 24px; border-radius: 8px; background: #333; color: #fff; }用原子性写法就是直接在HTML上堆类名button classpx-6 py-3 rounded-lg bg-gray-800 text-white按钮/button好处是改样式不用去翻CSS文件坏处是HTML会变得很长阅读性下降。但你必须明白原子性CSS本质上是把“样式规则”抽成唯一职责的类名而不是说“不用写CSS了”。项目里你可以自己定义一组常用原子类比如.text-ellipsis、.flex-center、.clearfix把高频样式抽出来写起来事半功倍。这个思路比无脑上Tailwind更实用。5.4 那些一眼惊艳的“植物大战僵尸HTML完整代码”是怎么回事最近热词里有“植物大战僵尸 html 完整代码适配你开头写的css宽1440px高810px直接复制保”。很多人想直接复制一份完整源码运行一个网页游戏。我的建议是可以玩但别只会玩。这类完整代码通常包括HTML骨架、CSS样式、JS逻辑、还有素材图片。你复制过来看一遍第一眼会感觉很爽但真正让你进步的是去拆它它用了哪些选择器去定位植物、僵尸动画是靠CSS的animation还是JS的requestAnimationFrame宽高为什么定1440x810其实是16:9的比例方便固定画布。CSS本身就是为了组织这类视觉表现而存在的。你把这套页面里的CSS单独拎出来看会发现无非就是文本定位、布局、动画、背景处理的组合。所以“直接复制保存”没错但复制完记得逐行读一读遇到不认识的属性就查一遍这个过程比代码本身值钱。5.5 一个完整的迷你示例把今天讲的串起来最后写一个完整的实例把CSS文本样式、文本布局、按钮涟漪、省略号、hover效果全部揉在一起。场景就是常见的“文章卡片”约300字说明。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title文章卡片示例/title style .card { width: 360px; border: 1px solid #eee; border-radius: 16px; padding: 20px; font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; } .card-title { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 12px; } .card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; color: #666; font-size: 0.95rem; } .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } .btn { position: relative; padding: 8px 20px; border: none; border-radius: 999px; background: #333; color: #fff; cursor: pointer; overflow: hidden; } .btn::after { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.7); opacity: 0; } .btn:hover { transform: translateY(-2px); transition: transform 0.2s ease; } .btn:hover::after { animation: ripple 0.8s ease-out forwards; } keyframes ripple { from { transform: scale(0.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } } /style /head body div classcard h2 classcard-title一文理解CSS文本样式/h2 p classcard-desc这是一段很长很长的文章摘要用来演示两行省略号的效果。同时这里加入了一些文字细节比如不同的字体、行高、字间距等。/p div classcard-footer span classdate2024-12-30/span button classbtn查看详情/button /div /div /body /html这个例子麻雀虽小但把flex对齐、两端对齐、省略号、按钮涟漪、hover动画都覆盖了。你把它复制到本地跑一遍再把每个属性删掉看看会发生什么就能直观理解每个属性在布局里扮演的角色。我自己在实际操作中的体会是排文本样式先把布局骨架搭对再抠字体和行高最后再加动画修饰顺序乱了效率会低很多。很多时候不是CSS不够用而是没把最基础的line-height、vertical-align、display理解透就开始瞎调试。遇到样式不对先打开开发者工具看它到底渲染成了什么高度、什么对齐方式比盲目改10行代码都管用。这套文本样式和布局的“地基”打牢之后再去玩那些渐变、动画、花哨效果你会发现自己已经能看懂别人代码里七八成的套路了。 CSS文本样式与布局实战：从字体对齐到省略号动画
我们前端写样式天天跟CSS里的字体、文本、排版打交道但说实话大多数时候都是“能用就行”。真遇到那种设计稿里很细节的排版需求——比如文字垂直居中、图片和文本对齐、省略号后面的“查看详情”、字体渐变、流光边框就发现脑子里那点CSS知识不够用了。这篇我把自己这些年折腾CSS文本样式和文本布局的经验整理一下重点放在那些平时容易忽略、但一碰到就卡壳的细节上顺带把几个网上问得特别多的小技巧比如涟漪光圈、数字倒计时、鼠标移入效果怎么实现也一并讲清楚适合刚入门的前端新手也适合写了两三年但一直靠复制粘贴混日子的同学。1. 字体与字号先搞清楚文本的“基因”1.1 font-family一套稳定的写法font-family是CSS里最基础的属性但很多人第一关就栽了——不是字体不生效就是不同系统下显示效果完全不一样。我推荐的稳妥写法是带后备字体栈font stack比如body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif; }这串看着长其实逻辑很清楚优先用苹果系统的字体没有就用Windows的再没有就用中文字体最后保底用系统默认无衬线字体。这样能保证在Mac、Windows、Android、iOS上都不会出现乱码或者明显的风格崩坏。有个坑font-family中的中文字体名称一定要加引号比如Microsoft YaHei、PingFang SC字体名中有空格或数字的也要加引号。不加引号在某些浏览器里会被解析成多个关键字导致完全不生效。另外中文字体不要放在英文字体前面否则会拖慢渲染速度也容易让英文和数字显示得很难看。1.2 em和rem别再傻傻分不清em这个单位计算规则是相对当前元素的字体大小。比如.parent { font-size: 20px; } .child { font-size: 0.8em; /* 实际 16px相对父元素 */ }这里有个非常绕的地方如果父子元素层层嵌套都用em实际字号会累乘。比如父元素1.2em子元素又是1.2em孙子又继承再乘一次……很容易算着算着就懵了。实际项目里我很少用em做字号它更适合用来做margin、padding这类与字号联动的间距。rem相对的是根元素html的字体大小不受嵌套影响计算起来更可控html { font-size: 16px; /* 浏览器默认 */ } .title { font-size: 2rem; /* 固定 32px */ }如果做移动端适配有些人喜欢在html上用JavaScript动态改字体大小配合rem。但我觉得对绝大多数场景rem写死就够了没必要搞那么复杂。1.3 font-weight和font-style的两个细节font-weight用数字写法更精确普通文本是400加粗是700中等是500。但有个前提——字体本身必须支持对应的字重否则浏览器会强行用算法模拟加粗效果其实挺假的。比如你用了font-weight: 300但系统里没有细体字体那浏览器会找最近的可用字重替代。font-style: italic这个也容易出问题。很多前端以为italic就是把文字倾斜其实严格来说italic是“斜体字”oblique才是“倾斜”。对于大多数系统字体两者表现差不多但有些字体专门设计了真正的斜体字形italic调用的是那个字形而oblique只是把普通字旋转。所以如果你想强调但又不破坏字体原有设计可以用font-style: oblique不过实际工作中两者混用也没太大问题知道这个区别就行。实操心得中文字体基本没有真正的italic斜体都是浏览器硬拉出来的。所以中文环境下想强调文字我更推荐用颜色、字重、下划线来区分而不是用斜体。2. 文本布局与方向真正决定“好不好看”的细节2.1 text-align与text-indent的正确用法text-align是水平对齐方式left、right、center、justify四个值都很常用。但justify有个体验问题中文两端对齐效果还行英文单词会被拉伸出大空隙很难看。所以英文内容尽量别用justify。text-indent控制首行缩进单位常用em。比如text-indent: 2em就是缩进两个字宽的位置中文段落的传统排版用这个很舒服。但要留意text-indent对inline-block元素也有效对inline元素无效而且它会把第一行整个往右推如果第一行前面有图片或者别的元素效果就不太对。2.2 line-height不只是行距行高我们天天用但它其实是文本布局里最容易被低估的属性。line-height的值有三种写法固定值line-height: 24px纯数字line-height: 1.6百分比line-height: 160%纯数字是最推荐的因为它会相对当前字号重新计算继承时也不会出问题。百分比的坑在于如果父元素设置line-height: 160%子元素继承的是计算后的固定px值而不是这个比例后续子元素字号变大行高却还是按之前的字号算的看起来就会很挤。单行文本垂直居中是最常用的技巧给容器设置height且line-height与之一致即可。多行文本垂直居中就不要用line-height硬撑了应该用flex或者padding。我还遇到过一个诡异情况容器里只有一个英文单词明明line-height设得比height小文字还是上下不对称。这是因为行高会被上面的半行距half-leading机制影响英文的基线也在作怪。解决办法是给容器加overflow: hidden或者稍微调一下line-height。2.3 letter-spacing与word-spacing中英文间距的取舍letter-spacing是字符间距对英文和中文都有用。中文排版里适当加一点letter-spacing比如0.05em到0.1em会让标题显得更透气但正文千万别加太多否则读起来像字跟字在打架。word-spacing是单词间距主要对英文生效中文不加空格基本没意义。还有个小细节给段落text-align: justify时调整letter-spacing和word-spacing会影响两端对齐的观感调试时要注意配合。2.4 writing-mode与direction文字方向的冷门但实用知识writing-mode可以改变文字排列方向像“竖排”这样的效果它就派上用场了.vertical-text { writing-mode: vertical-rl; /* 从右往左竖排传统中文排版 */ }这个属性在实现古风页面、对联、海报竖排标题时特别好用。配合text-orientation: upright还能控制竖排时西文字符的方向。direction是LTR/RTL方向控制。阿拉伯语、希伯来语页面会用到direction: rtl。一般情况下我们用不到但有时候页面上需要做一个从右往左的滑动切换效果也可以用direction搭配flex改变主轴方向。注意writing-mode: vertical-rl在竖排状态下text-align: center依然有效但text-indent的方向会跟着变化这块容易判断失误建议实际改完样式后多预览一下。2.5 white-space、word-break与文本溢出这一组属性专门解决“文字怎么断行”的问题日常开发中非常高频。white-space: nowrap禁止换行white-space: pre-wrap保留空格并正常换行word-break: break-all单词内强行断行overflow-wrap: break-word只在必要的时候断行一般软换行在单词边界断行推荐overflow-wrap: break-word硬换行推荐word-break: break-all。中文用word-break: break-all基本没差英文就尽量不要会破坏单词的可读性。单行文本省略三件套是经典中的经典.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }多行省略在旧浏览器里只能靠-webkit-line-clamp现在稍微新一点的浏览器基本都支持了.multiline-ellipsis { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }三行以上就显示省略号的场景这个方案最省事。3. 文本修饰与进阶视觉效果文字也可以“玩出花”3.1 text-decoration删除线下的小心思text-decoration除了最常见的text-decoration: underline之外还能实现删除线line-through。HTML里有一个del标签语义上是删除内容但很多设计场景下比如价格划线、任务完成状态直接用CSS样式更灵活.price-original { text-decoration: line-through; text-decoration-color: #999; text-decoration-thickness: 2px; }这里我特别想提text-decoration-thickness和text-decoration-color。这两个属性在其他元素上即使设置了可能也看不出太大差别但一旦你用下划线做导航菜单的hover效果就能感受到控制了。注意事项text-decoration的下划线是从文字基线下面画过去的英文和中文的显示位置不一样。如果要求下划线跟文字间距非常精确不如用border-bottom模拟.under-line { border-bottom: 2px solid #333; padding-bottom: 4px; display: inline-block; }用border模拟的好处是控制颜色、粗细、与文字的距离更自由缺点是宽度不会自动贴合文字需要配合inline-block。3.2 字体渐变一行CSS让标题变“高级”网上经常看到文字渐变效果原理是background-clip: text把背景裁剪成文字的形状再把文字颜色设成透明露出的就是背景渐变.gradient-text { background: linear-gradient(90deg, #f7971e, #ffd200); -webkit-background-clip: text; background-clip: text; color: transparent; }这个效果的兼容性已经非常好了但有两个隐藏问题。一是如果元素内有其他子元素也可能被背景裁剪影响最好把渐变文字单独用一个span包起来二是text-shadow在这里会失效因为文字本身颜色是透明的阴影显示的是透明文字的阴影看起来怪怪的。想给渐变文字加阴影可以用filter: drop-shadow()替代。3.3 流光边框与涟漪光圈扩散的实现思路这个标题在搜索热词里出现频率越来越高具体就是鼠标移入按钮时产生一圈扩散波纹或者边框发光的动态效果。流光边框的核心是渐变动画先用border或者伪元素做边框再让background-position不断变化。常见的做法是用padding伪造边框.btn-flow { position: relative; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #f00, #ff0, #0ff, #f00) border-box; background-size: 100% 100%, 200% 100%; animation: flow 3s linear infinite; } keyframes flow { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 0, -200% 0; } }涟漪光圈扩散其实就是“伪元素scale变大 透明度降为0”的动画。比如按钮上做一个圆环.btn-ripple::after { content: ; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); animation: ripple 1.5s ease-out infinite; } keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }这个思路可以延伸到很多场景直播间的点赞动画、地图定位点、loading提示等。原理一句话总结用伪元素做扩散体用动画控制scale和opacity。3.4 数字加载动画与CSS倒计时的实现方案搜索热词里还出现了“数字加载动画效果css”“js css倒计时”这俩其实是一对配合CSS管视觉JS管逻辑。比如做数字从0滚动到100的加载效果最简单的方案是CSS的counter配合property但这个属性兼容性有限。更通用的是JS驱动div classcounter>.counter { font-size: 4rem; font-weight: 700; transition: all 0.2s; }const counter document.querySelector(.counter); const target counter.dataset.target; let current 0; const timer setInterval(() { current 1; counter.textContent current; if (current target) clearInterval(timer); }, 20);光这样数字变化太生硬。加一点动画可以这样让数字在变化时配合一个轻微scale缩放造成“弹跳”感.counter.bounce { animation: bounce 0.2s; } keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }JS在更新文本前先移除class再强制重绘最后加回来。这个“移除-强制重绘-添加”的套路在动画类需求里很常用可以记一下。倒计时则是另一类需求先定目标时间再用setInterval每秒更新剩余时间。核心逻辑不难但要注意setInterval不够精确长时间运行会积累误差。严谨一点的做法是每次更新时用当前时间戳重新计算差值而不是简单地在旧值上减1。3.5 鼠标移入事件hover不仅能用还能配合过渡搜索热词里有“css鼠标移入事件”其实就是:hover伪类。它算是CSS里最常用的“事件”了.card { transform: translateY(0); transition: transform 0.3s ease; } .card:hover { transform: translateY(-6px); }需要注意hover能触发子元素、兄弟元素的变化但不能“触发父元素”。如果想鼠标悬停子元素时让父元素变化就要用:has().card:has(.btn:hover) { border-color: #333; }:has()现在主流浏览器都支持了可以放心用。还有一个容易忽略的点在移动端hover会被点击行为模拟操作体验跟桌面完全不同所以移动端不要依赖hover做交互要用点击事件或者媒体查询专门处理。3.6 屏幕穿出效果CSS能不能做“穿出屏幕”热词里有个“css能实现屏幕穿出来的效果吗”。这里要泼个冷水纯CSS在浏览器里很难实现字面意义上的“穿出屏幕、悬浮在页面上方”因为浏览器渲染是平面化的。但视觉上有“穿出感”是可以仿的立体阴影text-shadow多层堆叠制造深度3D变换transform: perspective() rotateX() translateZ()让文字在Z轴方向上“出来”视差滚动配合JS滚动事件控制位移产生层叠穿越感如果想做那种手机壳、贴纸叠加在页面上的“伪3D”效果本质是多个图层位移错开加上光照阴影。CSS能实现一部分但真要三维立体效果建议还是上Canvas/SVG或者图片素材。4. 容器内文本位置与图文混排最磨人的“对齐问题”4.1 图片和文字一行怎么对齐“图片和文字一行”是搜索引擎里常年长青的问题。图片和文字在默认状态下基线baseline对齐所以图片下面会空出一截。三个常规解法解法一vertical-align.img-text img { vertical-align: middle; }这是最省事的方案。vertical-align可以取baseline、middle、top、bottom等值。它的作用是控制行内元素在父级基线上下移动的位置所以只对inline或inline-block元素有效。解法二Flexbox.img-text { display: flex; align-items: center; }这也是我非常推荐的方案因为flex的align-items: center能保证子元素的主轴方向居中不管图片高矮、文字多少都能稳妥对齐。注意gap属性控制间距非常舒服兼容性也没问题了。解法三line-height如果文字只有一行可以给父容器设置固定line-height图片再vertical-align: middle也能获得接近垂直居中的效果。但这种方法对文字行数有要求一旦变成两行就露馅。实际项目里推荐优先用flex如果必须用行内结构注意图片要用display: inline-block避免inline元素默认基线问题带来的底部空隙。4.2 怎么调整CSS容器里的文本位置这个问题可以拆成“水平居中”“垂直居中”“水平垂直居中”三种情况。水平居中最简单.text-center { text-align: center; }垂直居中如果是单行文本就用line-height等于容器高度.box { height: 60px; line-height: 60px; }如果是多行文本或未知高度文本flex是正解.box { display: flex; align-items: center; justify-content: center; }还有一个冷门方案使用display: table-cell和vertical-align: middle本质上模拟表格单元格的垂直居中老项目里很常见。现在基本被flex替代了但老代码维护时还会碰到建议至少能看懂。注意absolute定位配合top: 50%; transform: translateY(-50%)也能垂直居中但transform会创建新的层叠上下文在某些场景下会影响定位和overflow裁剪能不用就不用。4.3 查看详情的省略号与更多按钮热词里有一条“在文章末尾或者两行中的最后展示查看详情css怎么写”。这种需求在卡片列表、新闻摘要里太常见了文字显示两行超出部分省略但最后要跟一个“查看详情”链接。先说结论纯CSS做“省略号后跟按钮”比较棘手因为text-overflow只能控制省略号不能控制后面的内容。最靠谱的做法有两种做法一只对文字做省略按钮放在文字外面div classnews-item p classdesc这是一段非常长的摘要……/p a hrefdetail.html classmore查看详情/a /div.desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }按钮单独一行或跟在旁边用flex排列保证不挤压文字。做法二用伪元素覆盖省略号如果想实现真正的“两行文字最后显示查看详情”可以借助伪元素遮挡.desc { position: relative; -webkit-line-clamp: 2; overflow: hidden; } .desc::after { content: 查看详情; position: absolute; right: 0; bottom: 0; background: linear-gradient(to right, transparent, #fff 60%); padding-left: 30px; }伪元素盖在右下角底色做渐变过渡看起来就像“文字戛然而止后面跟着查看详情”。缺点是无法点击如果a标签要可点击需要额外处理而且背景色依赖容器背景不能动态适配页面底色。所以实际项目中我多数情况下用做法一简单实在。5. 样式引入方式、选择器与原子性CSS小知识串讲5.1 CSS文件里需要写style吗这个热词应该误导了一部分纯CSS学习者。回答非常明确.css文件里不能写style标签那是HTML里的东西。CSS文件里的内容应该直接是规则body { margin: 0; }写style的是HTML内嵌样式表的方式主要是写在HTML文件的head里style body { margin: 0; } /style引入CSS有三种方式外部样式表推荐用link relstylesheet hrefstyle.css复用性和缓存性最好。内部样式表HTML里写style适合单页原型或临时调试。内联样式在标签上写style属性优先级很高但完全不可复用只在特殊场景使用。优先级排序是内联样式 ID选择器 类/属性/伪类选择器 元素/伪元素选择器 通配符。这个顺序直接决定了覆盖规则写项目时遇到样式不生效先别怀疑“是不是写法有问题”可以先按优先级推一遍。5.2 元素选择器从“第1关”到优先级搜索热词里有一条“第1关css元素选择器”这估计是某教程的关卡。元素选择器就是直接选HTML标签p { color: red; }它能选到页面上所有p标签。但这个选择器有个特点容易“误伤”。一套肤色清爽的页面里如果所有p都统一字号颜色还好但如果要精确改某一个段落就得用类选择器.highlight { color: #ff6b6b; }类选择器是CSS里用得最多的选择器因为它可复用、语义清晰、优先级也比较适中。ID选择器尽量少用一个是因为ID在页面里唯一无复用性另一个是ID优先极高后面想覆盖得用!important或者更卑鄙的手段非常被动。还有一个组合选择器要注意后代选择器 vs 子代选择器。后代选择器.list .item选所有层级下的item子代选择器.list .item只选直接子集两个跨度大的嵌套结构里用后代选择器容易造成样式扩散能写子代选择器的地方就写子代选择器这是减少CSS副作用最简单的方法。5.3 原子性CSS到底值不值得学技术圈近期很流行原子性CSSAtomic CSS什么text-center、mt-4、flex这种“一个类名只干一件事”的写法。Tailwind CSS就是典型代表。它最大的卖点减少重复代码让样式可持续维护。比如以前要写.btn { padding: 12px 24px; border-radius: 8px; background: #333; color: #fff; }用原子性写法就是直接在HTML上堆类名button classpx-6 py-3 rounded-lg bg-gray-800 text-white按钮/button好处是改样式不用去翻CSS文件坏处是HTML会变得很长阅读性下降。但你必须明白原子性CSS本质上是把“样式规则”抽成唯一职责的类名而不是说“不用写CSS了”。项目里你可以自己定义一组常用原子类比如.text-ellipsis、.flex-center、.clearfix把高频样式抽出来写起来事半功倍。这个思路比无脑上Tailwind更实用。5.4 那些一眼惊艳的“植物大战僵尸HTML完整代码”是怎么回事最近热词里有“植物大战僵尸 html 完整代码适配你开头写的css宽1440px高810px直接复制保”。很多人想直接复制一份完整源码运行一个网页游戏。我的建议是可以玩但别只会玩。这类完整代码通常包括HTML骨架、CSS样式、JS逻辑、还有素材图片。你复制过来看一遍第一眼会感觉很爽但真正让你进步的是去拆它它用了哪些选择器去定位植物、僵尸动画是靠CSS的animation还是JS的requestAnimationFrame宽高为什么定1440x810其实是16:9的比例方便固定画布。CSS本身就是为了组织这类视觉表现而存在的。你把这套页面里的CSS单独拎出来看会发现无非就是文本定位、布局、动画、背景处理的组合。所以“直接复制保存”没错但复制完记得逐行读一读遇到不认识的属性就查一遍这个过程比代码本身值钱。5.5 一个完整的迷你示例把今天讲的串起来最后写一个完整的实例把CSS文本样式、文本布局、按钮涟漪、省略号、hover效果全部揉在一起。场景就是常见的“文章卡片”约300字说明。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title文章卡片示例/title style .card { width: 360px; border: 1px solid #eee; border-radius: 16px; padding: 20px; font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; } .card-title { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 12px; } .card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; color: #666; font-size: 0.95rem; } .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } .btn { position: relative; padding: 8px 20px; border: none; border-radius: 999px; background: #333; color: #fff; cursor: pointer; overflow: hidden; } .btn::after { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.7); opacity: 0; } .btn:hover { transform: translateY(-2px); transition: transform 0.2s ease; } .btn:hover::after { animation: ripple 0.8s ease-out forwards; } keyframes ripple { from { transform: scale(0.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } } /style /head body div classcard h2 classcard-title一文理解CSS文本样式/h2 p classcard-desc这是一段很长很长的文章摘要用来演示两行省略号的效果。同时这里加入了一些文字细节比如不同的字体、行高、字间距等。/p div classcard-footer span classdate2024-12-30/span button classbtn查看详情/button /div /div /body /html这个例子麻雀虽小但把flex对齐、两端对齐、省略号、按钮涟漪、hover动画都覆盖了。你把它复制到本地跑一遍再把每个属性删掉看看会发生什么就能直观理解每个属性在布局里扮演的角色。我自己在实际操作中的体会是排文本样式先把布局骨架搭对再抠字体和行高最后再加动画修饰顺序乱了效率会低很多。很多时候不是CSS不够用而是没把最基础的line-height、vertical-align、display理解透就开始瞎调试。遇到样式不对先打开开发者工具看它到底渲染成了什么高度、什么对齐方式比盲目改10行代码都管用。这套文本样式和布局的“地基”打牢之后再去玩那些渐变、动画、花哨效果你会发现自己已经能看懂别人代码里七八成的套路了。