CSS选择器与非布局样式：字体、行高

CSS学习 本文总阅读量次

基本规则

1
2
3
4
选择器{
    属性：值；
    属性：值；
}

这里的;并不是 语句结束符号 ，只是 分隔符。

选择器

可参考笔记CSS选择器、派生选择器、伪类选择器、伪元素、组合选择器、选择器的优先级、概览

  • 用于匹配HTML元素
  • 有不同的匹配规则
  • 多个选择器可叠加
  • 分类和权重(不进位计算)要知道

选择器分类

  • 元素选择器：div{}指定元素的名字
  • 伪元素选择器：::before{}不会出现在HTML中，也不会出现在DOM树中，但它是真实存在的元素，它可以在页面上显示内容、设置样式等等。
  • 类选择器：.className{}class
  • 属性选择器：[type=radio]{}根据HTML元素的属性进行选择
  • 伪类选择器：:hover{}是已有元素的一种状态下的样式，它不是真实存在的元素（和伪元素要区分开）
  • ID选择器：#idName{}
  • 组合选择器：[type=checkbox]+label{}有很多组合方法，例子是属性选择器的兄弟元素label
  • 否定选择器:not(.className){}用()将选择器括起来再在前面加上not表示括起来的都不要
  • 通用选择器:*{}

选择器权重

更详细可参考笔记 特异性

分值 范围
100 ID选择器：#idName{}
10 类选择器：.className{}、属性选择器：[type=radio]{}、伪类选择器：:hover{}
1 元素选择器：div{}、伪元素选择器：::before{}
0 其他选择器

注意：

  • 选择器权重的计算是不进位的（可看下面的例子，特别注意例子2：十位到了11个还是不进位！）
  • 只有选择器才计算权重，如果样式的声明位于元素的style属性内，这样的声明没有选择器，所以 内联样式 始终是1000分。
  • !important优先级永远是最高的。（可参考笔记 特异性）
  • 相同权重的选择器，后写的生效。（可参考笔记 源顺序）
    注意事项的例子

权重计算的例子

计算例子1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
    <style type="text/css">
        #id .link a[href] {
            color: red;
        }

        #id .link .active {
            color: green;
        }
    </style>
</head>
<body>
    <div id="id">
        <div class="link">
            <a href="https://huanglizhu.github.io/" class="active">zzz</a>
        </div>
    </div>
</body>

结果
计算
[href]作用于所有具有 href 属性的元素
当一个元素同时有左右两个选择器时，则左边的选择器优先级高。

计算例子2：
例子2
十位就算有11也是不进位的！

面试：伪类选择器和伪元素选择器的区别

  • 伪元素选择器：不会出现在HTML中，也不会出现在DOM树中，但它是真实存在的元素，它可以在页面上显示内容、设置样式等等。
  • 伪类选择器：是已有元素的一种状态下的样式，它不是真实存在的元素（和伪元素要区分开）
  • 补充：很久以前 伪元素选择器 刚出现时也是和 伪类选择器 一样使用单冒号的，所以去兼容一些老旧的IE时也有可能需要使用单冒号来写伪元素选择器，否则可能显示不出来，这是历史遗留问题。

面试：浏览器如何解析CSS

浏览器的解析方式是从右往左的，这样比较节省性能
例子
浏览器的解析方式是从右往左的，浏览器看到.body div .hello这个选择器后会先去找.hello,找到这个标签后再去进行验证，看看他有没有一个祖先是<div>,再去看有没有一个class是body。
原因:这样比较节省性能,可以减少很多工作。这样可以，加快浏览器对CSS的解析速度，可以更快匹配到对应元素。

CSS非布局样式

  • 文字相关的：字体、字重、颜色、大小、行高
  • 盒子相关的：背景、边框
  • 页面相关的：滚动、换行
  • 装饰性的：粗体、斜体、下划线
  • 其他重要的非布局样式

字体

  • 可参考笔记CSS文本1、CSS文本2
  • font-family属性，多个属性值之间使用,分隔。
  • 在样式中，使用具体字体需要引号，如：Microsoft Yahei，但使用 字体族 时不要用引号！

字体族

可参考笔记 字体栈

  • 衬线字体（serif）：有装饰的，比如：宋体
  • 无衬线字体（sans-serif）：比如：黑体
  • 等宽字体（monospace）：每一个字母占的空间是一样的，编程的时候常用
  • 手写体（cursive）：比如：方正静蕾体）
  • 花体（fantasy）：英文中有一些华丽的写法

注意：在样式中使用字体族时不要用引号
注意

多字体 fallback机制

  • 多字体fallback机制：顾名思义是“应急计划”，可以指定多个字体，当第一种找不到时就会往后找，依次寻找可用的字体。
  • 作用：适配不同的平台（苹果、微软等）
  • 要将只有一个平台有的字体样式写在前面。比如例子中PingFang就只有苹果有，有的苹果用户也会下载 微软雅黑 ，但是 微软雅黑 在苹果中的效果没有PingFang好，所以我们还是应该把PingFang放在前面，以免部分苹果用户识别到了 微软雅黑。
  • 将 字体族 写在最后。（或者说，将 网页安全字体 放在最后）

例子：
例子
解析：找不到 苹果系统 中的PingFang就去找 微软雅黑 ，微软雅黑也找不到时就去找 等宽字体monospace中找一个拿来用。

网络字体、自定义字体

  • 从 远程/本地 引用字体。
  • CSS3 @font-face 规则(可以参考菜鸟教程)来引用 远程/本地 字体。
  • 如果字体文件不在工程文件夹下的位置，请使用完整的URL：src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')
  • 也可以直接连接别的网站的css样式表然后使用font-family属性进行网络字体的引用。（例子2）
  • 如果远程的字体有问题，可能是跨域的问题。如果跨域，必须要求对方服务器出具cois的头，允许跨域。

例子1：
自定义字体

  • 可以参考菜鸟教程
  • 如果字体文件不在工程文件夹下的位置，请使用完整的URL：src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

例子2：
例子2

  • 也可以直接连接别的css样式表然后使用font-family属性进行网络字体的引用。
  • 样式表中已经有对字体的定义，也就可以直接使用了。

iconfont 字体做图标

  • 可以在“**阿里巴巴矢量图标库：https://www.iconfont.cn/**”找到各种图标。
  • 加入购物车 - 统一 “添加至项目” - 得到一套图标
  • 下载好后里面会有 使用demo：
    使用demo
  • 本质上，这些图标都是字体，使用的是标签<i>（后来改为<span>），但**实际上我们调用的是加到CSS中的伪元素::before**：
    使用伪元素`::before`

行高（line-height属性）

  • 行高指一行文字的高度（两行文字间基线的距离）就像英文本子里的 倒数第二条线。
  • css中起着高度作用的是heigh以及line-height，如果一个标签没有定义height属性，那么最终表现的高度一定是line-height起作用。
  • 单行文字垂直：一个空的<div></div>没有设置高度，但在元素内添加文字，这个div就有了高度，并不是文字把div撑起来了，真正撑起高度的是line-height，所以直接把line-height当做区块高度来设置，那么其中高于文字的部分就会平均分布在文字上下，可以实现单行文字垂直。

行高的构成

  • line-height的高度是由组成这一行的众多元素（例子中的inline box ）中的最高高度决定的。（行高是由line box决定的，而line box是由很多inline box组成的）
  • line-height会撑起行内元素的高度，但只改变元素上下多余的高度，不会改变它本身布局（显示）的高度。
  • <span>元素中字体显示的背景区域高度是由字体大小决定的。

例子
在上图中可以给同一行中的4个<span>元素设置不同的line-height（第三个inline box没有使用<span>），并给<span>红色背景。
结果：在网页上渲染出来的高度是一样的，而行高最终是第三个<span>元素的高度，也及时最高元素的高度。

行高相关的现象和方案

不能用于图片垂直

1，图片的line-height只能根据继承得到，写在内联里会被覆盖。
2，给图片设置line-height并不能使其居中。表现为图片底部向上总是距离行高中垂线6px。

图片垂直的方法：
将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

单行文字垂直居中

<span>元素中文字的背景高度由文字大小撑起，当line-height>文字高度时，多余的空间就会分布在上下两端。所以可以通过设置line-height实现单行文字垂直居中。
例子
以前我们记文本居中的方法是 设置height与line-height等高，但其实直接设置line-height就可以实现单行文字垂直居中，不需要额外给div设置height。

多行文字垂直居中

使用line-height和display:inline-block可实现多行文字的垂直居中

vertical-align属性

  • CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。【不作用于span元素】
  • 默认值是 baseline，也就是根据基线对齐。（基线相当于英文中倒数第二条线）【注意：区分基线baseline和底线bottom】
  • vertical-align属性可被用于两种环境：
  1. 使 行内元素盒模型 与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片<img>.
  2. 垂直对齐表格单元内容.

vertical-align不作用于span元素

原因：
事实上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。如果把 vertical-align:middle放到一个单元格元素，即table的td元素中，它的垂直居中显示是没任何问题的，因为它表示相对于该行的垂直高度居中显示。
一个 span定义了一个60px的高度，但是这个Box行中存在很多个span，这段文本并不能对齐到span的垂直中央。希望这段文本对齐span的中行需要给它定义一个line-height的属性，让line-height为60px，作用于一行的vertical-align就会按你的想法工作了。

面试题

问题：
img图片下方有空隙是为什么，怎么去除？
例子
原因：

  • 因为img实际上也是一个行内元素，而行内元素的属性vertical-align默认值为baseline，所以他是默认基于基线（baseline）对齐的，但baseline和底线之间是有偏差的。
  • 图片偏差的大小是由同一行的文字大小决定的，如果文字是12px的，那么图片下方空隙就是3px左右。

解决方法：

  1. 通过设置vertical-align: bottom;将img设置为底线对齐。
  2. 通过设置display:block;将img改为块，也就不会基于底线对齐了。（当然也无法同一行显示了）
CSS学习