前言
《css 揭秘》这本书以案例的形式，介绍了 47 个网页设计经典难题的解决方案，我在学习之余将其一一记录下来，方便以后回顾；本篇介绍下半部分 20-47 的案例效果及代码。
上一篇：《css揭秘》- 47个不可不知的 css 技巧(上篇0-19)
在线预览 play.csssecrets.io
20-连字符断行
介绍：连字符断行可以解决两端对齐时单词间距异常的 bug, 也就是 单词孤岛现象，css3 中引入了一个属性 hyphens，将其设置为 auto 可以达到我们想要的效果。
/** * Hyphenation */ width: 8.7em; font: 180%/1.4 Baskerville, serif; text-align: justify; hyphens: auto;
21-插入换行
介绍：当基于结构与样式分离原则，使用语义化 ‘定义列表’ 标签来做样式时候，通常会遇到换行问题，下面介绍一种友好的解决方案。
<dl> <dt>Name:</dt> <dd>Lea Verou</dd> <dt>Email:</dt> <dd>lea@verou.me</dd> <dd>leaverou@mit.edu</dd> <dt>Location:</dt> <dd>Earth</dd> </dl> /** * Inserting line breaks */ dt, dd { display: inline; margin: 0; } dd { font-weight: 600; } dd + dt::before { content: "\A"; white-space: pre; } dd + dd::before { content: ', '; font-weight: normal; margin-left: -.25em; } body { font: 150%/1.6 Baskerville, Palatino, serif; }
22-文本行的斑马条纹
背景知识：css 渐变、background-size、‘条纹背景’、‘灵活的背景定位’。
介绍：斑马线效果经常用在 table 里，其实文本行中也很适合，这里使用渐变背景来实现。
<pre> <code>while (true) { var d = new Date(); if (d.getDate()==1 && d.getMonth()==3) { alert("TROLOLOL"); } }</code> </pre> /** * Zebra striped text lines */ pre { padding: .5em; line-height: 1.5; background: hsl(20, 50%, 95%); background-image: linear-gradient( rgba(120,0,0,.1) 50%, transparent 0); background-size: auto 3em; background-origin: content-box; font-family: Consolas, Monaco, monospace; } code { font: inherit }
23-调整 tab 的宽度
介绍：当在网页中显示大量代码时候，默认的tab 锁进8个字符会显的过宽不好看，这里使用 css3 新的 tab-size 属性来改变 tab 锁进的字符数。
<pre><code>// Default tab size while (true) { var d = new Date(); if (d.getDate()==1 && d.getMonth()==3) { alert("TROLOLOL"); } }</code></pre> /** * Adjusting tabs */ pre { padding: .5em; line-height: 1.5; background: hsl(20, 50%, 95%); font-family: Consolas, Monaco, monospace; } pre:nth-of-type(2) { tab-size: 2 } pre:nth-of-type(3) { tab-size: 4 } pre:nth-of-type(4) { tab-size: 0 } code { font: inherit; }
24-连字
介绍：英文字体中默认情况下有些字形之间会发生冲突，导致显示不清楚 比如大多数衬线字体中的 f 和 i, 这里介绍 css3 中引入的 font-variant-ligatures 来解决。
/** * Ligatures */ body { font: 200%/1.6 "Adobe Caslon Pro", Baskerville, serif; font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; }
25-华丽的 & 符号
背景知识：通过 @font-face 规则实现基本的字体嵌入。
介绍：一种不通过额外的 dom 包裹，来单独对 & 符号进行美化的方案
<h1>HTML & CSS</h1> /** * Fancy Ampersands */ @font-face { font-family: Ampersand; src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Garamond-Italic'), local('Palatino-Italic'); unicode-range: U+26; } h1 { font-family: Ampersand, Helvetica, sans-serif; }
