CSS 声明

Mr.Hope ... 2019-09-05 CSS
  • 快速上手
大约 1 分钟

# 值的专一性

CSS 每个属性都会有且仅有一个值。

  • 如果您设置了多个值,最终优先级最高的值会被应用、
  • 如果您没有设置值,则会应用默认值。默认值可以是 unset(未设置), inherit (继承父属性值), initial (初始值)。

提示

如果属性未知或某个值对给定属性无效,则声明被视为无效,并被浏览器的 CSS 引擎完全忽略。

# 函数

虽然大多数值是相对简单的关键字或数值,但也有一些可能的值以函数的形式出现。一个函数由函数名和一些括号组成,其中放置了该函数的允许值。

案例: calc() 函数允许您在 CSS 中进行简单的计算:

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}
1
2
3
4
5
6

案例: url() 允许您引入外部资源:

.logo {
  background-image: url(/logo.png);
}
1
2
3

# 速记属性

一些属性,如 font, background, padding, border, margin 等属性称为速记属性--这是因为它们允许您在一行中设置多个属性值,从而节省时间并使代码更整洁。

案例: 以下两个 CSS 是完全等价的

.box {
  padding: 10px 15px 15px 5px;
  background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
}
1
2
3
4
.box {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
  background-color: red;
  background-image: url(bg-graphic.png);
  background-position: 10px 10px;
  background-repeat: repeat-x;
  background-attachment: fixed;
}
1
2
3
4
5
6
7
8
9
10
11