CSS 揭秘(5)--文本样式

Posted by liveipool on February 8, 2017

文本样式

文本行的斑马条纹

在:nth-child()和:nth-of-type()伪类出现之后,经常用其来实现”斑马条纹“。如表格的斑马条纹由下面三行代码就可以实现:

tr:nth-child(even) {
	background: rgba(0,0,0,.2);
}

但是,要想给文本添加斑马条纹,这种方式还是有点力不从心。
想要给文本添加斑马条纹,我们的思路应该是:对整个元素设置统一的背景图像,一次性加上所有的斑马条纹。

我们需要运用”条纹背景“只是,将background-size设置为line-height的两倍,因为每个背景贴片需要覆盖两行代码。并且我们使用em作单位,这样背景会根据字体大小的变动而变动。

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

22.1.png
但是这样会看到一个问题,我们的代码和条纹之间有偏差,不够美观,这是因为content部分之外是有padding的,而背景是默认padding-box的,因此我们还需要将background-origin设为content-box:

.code {
	//...
	background-origin: content-box;
}

22.2.png
最后就可以形成这样良好的效果了。

调整tab的宽度

在使用< pre >来表示段落或代码时,由于< pre >会保留如tab和空格,但在浏览器中,默认的tab是8个字符,非常难看:
23.1.png

CSS3中有一个tab-size属性,可以设置tab的宽度,当下最流行的宽度是两个字符:

pre {
	tab-size: 2;
}

23.2.png

自定义下划线

最基本的下划线:

text-decoration: underline;

26.1.png
使用border-bottom模拟:

a {
	border-bottom: 1px solid black;
	text-decoration: none;
}

26.2.png
使用border-bottom模拟可能会有很多问题,如有padding,有时会阻止正常换行等。

使用background-image及其属性:

div {
	background: linear-gradient(gray, gray) no-repeat;
	background-size: 100% 1px;
	background-position: 0 1.15em;
}

这种方法也比较优雅。
26.3.png
还可以通过text-shadow来使下划线不要穿过字母,遇到它们时会自动避让,下面为代码和效果:

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

26.4.png
以上两个效果是在Firefox中看的,Chrome的下划线和字母都有一定的距离。

用渐变来实现下划线的高明之处在于,这些线条即为灵活,还可以作成虚线:

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

26.5.png
时刻注意,在使用了这些特性之后,一定要在各主流浏览器上试试效果,因为不同浏览器的支持是大相径庭的。