CSS 揭秘阅读笔记:（Ch5-Ch6）

CSS 揭秘阅读笔记:（Ch5-Ch6）
- Ch5 字体排印
- - 5.20 连字符断行
  - 5.21 插入换行
  - 5.22 文本行的斑马条纹
  - 5.23 调整tab 的宽度
  - 5.24 连字
  - 5.25 华丽的& 符号
  - 5.26 自定义下划线
  - 5.27 现实中的文字效果
  - - 凸版印刷效果
    - 空心字效果
    - 文字外发光效果
    - 文字凸起效果
  - 5.28 环形文字
- Ch6 用户体验
- - 6.29 选用合适的鼠标光标
  - 6.30 扩大可点击区域
  - 6.31 自定义复选框
  - - 开关式按钮
  - 6.32 通过阴影来弱化背景
  - - 伪元素方案
    - box-shadow 方案
  - 6.33 通过模糊来弱化背景
  - 6.34 滚动提示
  - 6.35 交互式的图片对比控件
  - - CSS resize 方案
    - 范围输入控件方案

CSS 揭秘阅读笔记:（Ch5-Ch6）

DRY Don’t Repact Youself
WET We Enjoy Typing or Write Everything Twice

Ch5 字体排印

5.20 连字符断行

 hyphens: none | manual | auto

manual 是它的初始值，我们可以在任何时候手工插入软连字符，来实现断词折行的效果。

 hyphens: auto;

仅此一行足矣。当然，为了确保它奏效，你需要在HTML 标签的lang 属性中指定合适的语言。

5.21 插入换行

有一个Unicode 字符是专门代表换行符的：0x000A。在CSS 中，这个字符可以写作"\000A"，或简化"\A"。在HTML 代码中输入换行符，这些换行符会与相邻的其他空白符进行合并。有时候我们希望保留源代码中的这些空白符和换行，用到white-space: pre;。

<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>

在理想情况下，我们只想针对dt 之前的最后一个dd 来插入换行，一个想法就是换行符不用加在dd 的后面，而是加在dt 的前面。在理想情况下，我们希望能够告诉浏览器“只在后面还跟着一个dd 的dd 尾部插入逗号”，但我们又一次遇上了那个限制，眼下的CSS 选择符还表达不出这种需求。因此，我们再次调整思路，在每个前面有dd 的dd 头部插入逗号。

 dt, dd { display: inline; }dd {margin: 0;font-weight: bold;}dd + dt::before {content: '\A';white-space: pre;}dd + dd::before {content: ', ';margin-left: -.25em;font-weight: normal;}

5.22 文本行的斑马条纹

对整个元素设置统一的背景图像，一次性加上所有的斑马条纹。它的background-size 需要设置为line-height 的两倍，因为每个背景贴片需要覆盖两行代码。让背景自动跟着内边距的宽度走，background-origin 可以告诉浏览器在解析background-position 时以content box 的外沿作为基准，而不是默认的padding box 外沿。

 padding: .5em;line-height: 1.5;background: beige;background-size: auto 3em;background-origin: content-box;background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);

5.23 调整tab 的宽度

CSS 属性tab-size 可以控制缩进，这个属性接受一个数字（表示字符数）或者一个长度值。

 tab-size: 2;

5.24 连字

就像人与人一样，字形（glyph）与字形也不都是和睦相处的。为了缓解这个问题，字体设计师通常会在字体中包含一些额外的字形，称作连字（ligature）。这些字形被设计为双字形或三字形的单一组合体，专门提供给排版软件使用，代为显示特定的字符组合。
在CSS 字体（第三版）中，原有的font-variant 被升级成了一个简写属性，由很多新的展开式属性组合而成。其中之一叫作font-variant-ligatures，专门用来控制连字效果的开启和关闭。如果要启用所有可能的连字，需要同时指定这三个标识符：

 font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

如果要把font-variant-ligatures 属性复位为初始值，应该使用normal 而不是none。

5.25 华丽的& 符号

&：& amp;
unicode-range 描述符只在@font-face 规则内部生效，它可以把字体作用的字符范围限制在一个子集内。它对本地字体和远程字体都是有效的。unicode-range 在实践中非常实用，它的语法是基于“Unicode 码位”的，而不是基于字符的字面形态。

 "&".charCodeAt(0).toString(16); //查出指定字符的十六进制码位

5.26 自定义下划线

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。

 text-decoration: none;      /*没有文本装饰*/text-decoration: underline red;       /*红色下划线*/text-decoration: underline wavy red;   /*红色波浪形下划线*/text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

背景可以完美地跟随换行的文本，而且借助CSS 背景与边框（第三版）中与背景相关的新属性，我们已经拥有了细粒度控制背景的能力。我们甚至不需要用到额外的HTTP 请求来加载背景图片，因为可以通过CSS 渐变来凭空生成所需的图像。
请注意下划线会穿过某些字母（比如p 和y）的降部。下划线在遇到字母时会自动断开避让，假如背景是一片实色，就可以设置两层与背景色相同的text-shadow 来模拟这种效果。

 background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.15em;text-shadow: .05em 0 white, -.05em 0 white;

使用渐变来实现下划线的高明之处在于，这些线条极为灵活。可以通过色标的百分比位置值来微调虚线的虚实比例，还可以通过background-size 来改变虚线的疏密。

 background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;background-size: .2em 2px;background-position: 0 1em;
</