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

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 Veroudd>
	
	<dt>Email:dt>
	<dd>[email protected]dd>
	<dd>[email protected]dd>
	
	<dt>Location:dt>
	<dd>Earthdd>
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;