了解CSS(3) | 青训营笔记

83 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第4天

接上一篇笔记,继续对CSS中字体的知识进行补充。

font-size

font-size 属性设置文本的大小。字体大小的值可以是绝对或相对的大小。

绝对大小:

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小:

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小

关键字:small,medium,large 长度:px,em 百分数:相对于父元素字体大小

white space

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的
 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

CSS 特异度、继承

image.png

1. #nav .list li a:link

2. .hd ul .links a
  • 在代码1中,id 选择器有 1个(#nav),类与伪类共有 2个(.list 与 :link),元素与伪元素共有 2个(li 与 a)。所以在 1 中的特异度为 122。 在 2 中,id 选择器有 0个,类与伪类共有 2个(.hd 与 .links),元素与伪元素共有 2个(ul 与 a)。所以在 2 中的特异度为 22。

① 某些属性会⾃动继承其⽗元素的计算值,除⾮显式指定⼀个值。

② 一般文字、字体相关属性都可以继承,盒模型宽度、高度、边距等都不可以继承。

  • 一般情况与文字相关的是可以继承的,但是有些属性是不可继承的,这时可以使用显示继承。通过一个容器来改变整个容器内的元素样式。
  • 如果一个元素是不可继承的且没有设置值或者一层一层往上找并没有找到父元素,此时可以根据初始值来设置。在CSS中,每个属性都会有一个初始值,例如bachground-color的初始值为transparent;margin-left的初值为0 。 可以使用initial关键字显示重置为初始值,例如background-color: initial。