目录
1. 术语解释:
声明:
以下是CSS中的一行。它被称作一个声明。该声明由一个属性(color)和一个值(black)组成。
color:blank;
声明块:
包含在大括号内的一组声明被称作一个声明块。声明块前面有一个选择器(如下面的body)。
body{
color:blank;
font-size:12px;
}
规则集:
选择器和声明块一起组成了规则集(ruleset)。一个规则集也简称一个规则
@规则:
@规则(at-rules)是指用“@”符号开头的语法。比如@import规则或者@media查询。
2.样式表的来源
用户代理样式(即浏览器默认样式)
作者样式表
! important声明
3.选择器优先级
优先级的准确规则如下。
❑ 如果选择器的ID数量更多,则它会胜出(即它更明确)。
❑ 如果ID数量一致,那么拥有最多类的选择器胜出。
❑ 如果以上两次比较都一致,那么拥有最多标签名的选择器胜出。
说明:
伪类选择器(如:hover)和属性选择器(如[type="input"])与一个类选择器的优先级相同。通用选择器(*)和组合器(>、+、~)对优先级没有影响。
4.优先级标记
一个常用的表示优先级的方式是用数值形式来标记,通常用逗号隔开每个数。比如,“1,2,2”表示选择器由1个ID、2个类、2个标签组成。优先级最高的ID列为第一位,紧接着是类,最后是标签。
注:通常最好让优先级尽可能低,这样当需要覆盖一些样式时,才能有选择空间。
a标签 链接样式顺序:
a:link < a:visited < a:hover < a:actived
顺序的记忆口诀是“LoVe/HAte”(“爱/恨”),即link(链接)、visited(访问)、hover(悬停)、active(激活)
5.相对单位
像素单位(px)。它是绝对单位,即5px放在哪里都一样大。
而其他单位,如em和rem,就是相对单位。相对单位的值会根据外部因素发生变化
浏览器会根据相对单位的值计算出绝对值,称作计算值(computed value)
em和rem都是相对于font-size定义的
em:【em是相对于当前元素的单位】
1. 字号和字体的变化都会导致padding、height、width、border-radius等属性会跟着元素均匀的变化
2. 当前元素的字号决定了em 比如 body的font-size:16px, 那么1em = 16px
3. 继承父元素
4.em的复杂之处在于同时用它指定一个元素的字号和其他属性。这时,浏览器必须先计算字号,然后使用这个计算值去算出其余的属性值。这两类属性可以拥有一样的声明值,但是计算值不一样。
举例:使用em定义font-size和padding
在这个例子里,padding的声明值为1.2em,乘以19.2px(当前元素的字号),得到计算值为23.04px。尽管font-size和padding的声明值相同,计算值却不一样
⚠️注意:
如果不小心使用em不当的话,em就会变得难以驾驭。em用在内边距、外边距以及元素大小上很好,但是用在字号上就会很复杂。值得庆幸的是,我们有更好的选择:rem。
rem:(推荐使用)【rem是相对于根元素的单位】
不管在文档的什么位置使用rem,1.2rem都会有相同的计算值:1.2乘以根元素的字号
rem是root em的缩写
在文档中,根节点是所有其他元素的祖先节点。
<html>元素是顶级(根)节点
根节点有一个伪类选择器(:root),可以用来选中它自己。
这等价于类型选择器html,但是html的优先级相当于一个类名,而不是一个标签
提示:拿不准的时候,用rem设置字号,用px设置边框,用em设置其他大部分属性
响应式:
响应式——在CSS中指的是样式能够根据浏览器窗口的大小有不同的“响应”。这要求有意地考虑任何尺寸的手机、平板设备,或者桌面屏幕
像素是一个具有误导性的名称,CSS像素并不严格等于显示器的像素,尤其在高清屏(视网膜屏)下
6.视口的相对单位
相对于浏览器视口定义长度的视口的相对单位
视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。
❑ vh:视口高度的1/100。
❑ vw:视口宽度的1/100。
❑ vmin:视口宽、高中较小的一方的1/100(IE9中叫vm,而不是vmin)。
❑ vmax:视口宽、高中较大的一方的1/100(本书写作时IE和Edge均不支持vmax)[插图]。
vmin取决于宽和高中较小的一方,这可以保证元素在屏幕方向变化时适应屏幕。在横屏时,vmin取决于高度;在竖屏时,则取决于宽度。
6.1 使用vw定义字号
6.2 使用calc()定义字号
calc()函数内可以对两个及其以上的值进行基本运算。当要结合不同单位的值时,calc()特别实用。它支持的运算包括:加(+)、减(−)、乘(×)、除(÷)。加号和减号两边必须有空白,因此建议大家养成在每个操作符前后都加上一个空格的习惯,比如calc(1em + 10px)。
现在打开网页,慢慢缩放浏览器,字体会平滑地缩放。0.5em保证了最小字号,1vw则确保了字体会随着视口缩放。这段代码保证基础字号从iPhone 6里的11.75px一直过渡到1200px的浏览器窗口里的20px。可以按照自己的喜好调整这个值。
7.无单位的数值和行高
line-height属性比较特殊,它的值既可以有单位也可以无单位。通常我们应该使用无单位的数值
使用无单位的数值时,继承的是声明值,即在每个继承子元素上会重新算它的计算值。这样得到的结果几乎总是我们想要的。我们可以用一个无单位的数值给body设置行高,之后就不用修改了,除非有些地方想要不一样的行高。
8. 自定义属性(即CSS变量)
层叠变量的自定义属性
这个规范给CSS引进了变量的概念,开启了一种全新的基于上下文的动态样式。你可以声明一个变量,为它赋一个值,然后在样式表的其他地方引用这个值
自定义属性它真正的意义在于,自定义属性的声明能够层叠和继承:可以在多个选择器中定义相同的变量,这个变量在网页的不同地方有不同的值。
举例:
:root{
--main-font: 'sans-serif'
}
1.变量名前面必须有两个连字符(--),用来跟CSS属性区分,剩下的部分可以随意命名
2.变量必须在一个声明块内声明。这里使用了:root选择器,因此该变量可以在整个网页使用
在声名块内的范围内使用该变量
上面的举例是在根root下设置的,所以变量 --main-font可以在网页内任意模块内使用!
3.调用函数var()就能使用该变量
p:{
font-family: var(--main-font);
}