开头
今天来总结的依然是CSS知识点。具体是什么呢?CSS的字体属性以及属性的层叠。
CSS字体的属性
主要来介绍总结一下常见的字体的属性。
font-size
它是用来决定文字的的大小,常用的设置:具体数值+单位:1.比如100px(默认浏览器是16px)。2.也可以使用em单位(不是很推荐):1em代表100%,2em代表200%,0.5em代表50%。3.百分比,一般都是基于父元素的font-size计算,比如50%表示等于父元素font-size的一半用。百分比比较不好理解,也比较难记忆,小伙伴你们如果想要知道的话,可以去查官方文档哦,这里就不再叙述了哦!
font-family
这个属性也比较重要,但需要注意的是,据我所知,它一般只设置一次。它是用于设置文字的字体名称。有几点需要注意一下:可以设置一个或多个字体名称(多个字体用“,”隔开);浏览器会选择列表中第一个该计算机上有安装的字体;或者可以通过@font-face指定的可以直接下载的字体;而编码用单引号(宋体:‘\5b8b\4f53’),字体有多个单词时用单引号(‘Hiragino Sans GB’)。
font-weight
用于设置文字的粗细。常见的取值有:100|200|300|400|500|600|700|800|900:每一个数字表示一个重量;normal:等于400(默认);bold:等于700。具体什么表现呢?比如string、b、h1~h6等标签的font-weight默认就是bold。
line-height
用于设置文本的行高。可以先理解为一行文字所占据的高度,而行高的严格定义可以是这样的:两行文字基线(baseline)之间的距离。基线又是什么呢?基线(baseline):与小写字母x最底部对齐的线。注意,height与line-height是不一样的,一个是元素的整体高度,而另一个是元素中每一行文字所占据的高度。
CSS属性的层叠
层叠是指对于一个元素来说,相同一个属性我们可以通过不同的选择器给它进行多次设置,那么属性会被一层层覆盖上去,但是最终只有一个会生效;怎么判断呢?首先是选择器的权重,权重大的生效,根据权重可以判断优先级;也可以根据先后顺序,权重相同时,后面设置的生效;
选择器权重
- !important:最大
- 内联样式:其次
- id选择器:在其次之后
- 类选择器、属性选择器、伪类:比较小
- 元素选择器、伪元素:小
- 通配符:最小
结尾
今天的总结就到这里啦!