百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

使用字体与文本属性时的一点小技巧

作者张正全课程第三天:让简历有点色彩2732次浏览1042018-04-27 02:56

先推荐一本书——CSS权威指南(第三版)

想了半天都没想好要写啥,另外工作有点多,于是一直到晚上10点多才开始码字。

今天的课题主要是选择器和字体、文本属性。全部都写的话,时间不太够,所以主要就说一两个字体、文本属性的使用技巧吧。


1. <font>

前阵子有学妹问我前端的东西,并发来了一个 .html 文件,我打开一看,发现很多像下面示例那样的代码

<font>blablabla……</font>
<center>balbalbal……</center>
<img src="……" align="middle" />

我倒吸了一口凉气,问她为什么这样写,她说:“老师教的”

现在很多学校都开了前端的课程,像什么 “HTML5 & CSS3” 之类的,但是经过这件事之后,我明白了一个道理,很多时候只有我们这些在一线上的前端er 才会去关注标准啊、规范啊、新技术啊之类的东西,而高校的老师,大概有一部分还在为新开了一门自己不熟悉的课而烦恼吧。

换句话来说,既然大家都是一名前端er,那至少应该多留意前端的标准和规范。写出 BUG 的原因,很可能就是因为当时的一句:“随意啦”。

好吧,回到正题,先来一个坑。

2. 无法修改颜色的 <a> 标签

有一天,我想重新定义 <a> 标签的样式,因为 HTML5 里 href 不再是必要属性,所以我想让有 href 和没有 href 的元素使用不同的样式,于是写了下面一段代码

<style>
  a {
    color: #333;
    text-decoration: none;
  }
  a[href] {
    color: #00cccc;
    text-decoration: underline;
  }
</style>

<a href="baidu.com">这是一个有 href 的 &lt;a&gt; 标签</a>
<a>这是一个没有 href 的 &lt;a&gt; 标签</a>

测试下,没啥问题,然后我就很开心的用它来初始化 a 标签了。

直到有一天,我想把某个链接中的文字改成红色,然后我加了一段代码

<style>
  .red {
    color: red;
  }
</style>

<a href="baidu.com" class="red">这是一个应该显示成红色的 &lt;a&gt; 标签</a>

但是它居然没有任何变化!!!demo在此,大家有看出来问题吗?

答案放在文末了,大家可以先思考一下。这个问题和字体、文本没啥关系,但我觉得这个坑是有必要提一下的。

3. 字体图标

如果大家有去了解过字体属性,那么就会知道 font-family 可以修改字体,例如改成宋体、黑体、楷体等。再进一步,如果我们的客户端上没有这种字体,那么我们还可以用 @font-face 引入一个 .ttf 之类字体库的文件,然后就可以在客户端上使用这种字体了。

那么,如果我们引入的字库中,既没有中英文,也没有标点符号,取而代之的是各种各样的图案呢?

恭喜你,你使用了一种叫字体图标的技术,例如 Font Awesome 就是一套字体图标库,demo在此

使用字体图标的好处如下:

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影者其它任何支持的效果。

4. 无法紧密包裹的图片

<style>
  div, img {
    border: 1px solid #333;
  }
</style>

<div>
  <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="百度一下" height="100" />
</div>

只看代码的话,大家觉得包裹图片的 div 高度应该是多少呢?是 100px(哎我忘了算 border102px 吗?

然而并不是,在实际效果中,img 和 div 的底部会多出一条缝隙,那是因为文本的垂直对齐方式在作怪,可以看 demo

示例图

默认时,文本是按照基线进行对齐的,图片和 div 底部的空隙则是为了留出空间放置文本基线以下的一截。因此换一种对齐方式就可以解决这个问题了。

当然,还有很多方法可以解决这个问题,其中一种就是 line-height: 0;,但是 line-height 能牵扯出来的问题实在太多了,有兴趣的同学可以读一下这篇文章:css行高line-height的一些深入理解及应用。当然,能够把权威指南第7章,基本视觉格式化中,行内元素的那一节看一遍就更好了。有能力的同学还可以看看 W3C 中关于行高和垂直对齐的计算

5. 杂项

  • 首行缩进 2 字符
    使用 text-indent 并利用单位 em 即可实现按字符数进行缩进。(段落缩进应该用 margin-leftpadding-left
  • 镂空字体等效果
    使用 text-shadow 时,字体颜色和阴影颜色可以不同,还可以设置成透明 transparent,还能用 , 隔开多个阴影效果,是个创造力非常强的属性。
  • 禁止文本换行
    使用 white-space: nowrap; 可以防止文本换行,不仅如此,white-space 还能让 HTML 代码中的空格与换行按原样显示,因为 white-space 可以控制空白符换行符自动换行的表现方式。另外,展示代码的时候记得使用等宽字体,例如 font-family: Consolas;
  • 字母的大小写
    text-transformfont-variant 是一对有趣的属性,text-transform 可以转换文本的大小写,而 font-variant 在转换大小写的同时,根据原来大小写来调整字母的大小。

后记

虽然还想介绍更多的东西,但能扩展的地方实在太多了,今天就到此为止吧。

最后回答下最开始的问题,这跟选择器的特殊性有关,参考选择器特殊性的计算方法
选择器中的每个元素增加的特殊性为 0, 0, 0, 1
而每个类和每个属性选择增加的特殊性都是 0, 0, 1, 0

因此选择器 a 的特殊性为 0, 0, 0, 1
选择器 a[href] 的特殊性为 0, 0, 1, 1
而选择器 .red 的特殊性只有 0, 0, 1, 0
.red 的特殊性并没有超过 a[href],因此无法把 a[href] 的样式覆盖掉。

12条评论