<style>
:root {
--size: 100px;
--comCol: #fff;
--align: center;
}
.title {
width: var(--size);
height: var(--size);
background-color: var(--background);
color: var(--comCol);
text-align: var(--align);
line-height: var(--size);
}
</style>CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括: 边距，边框，填充，和实际内容。
本文介绍 CSS 的一些最基本的概念: 层叠、优先级和继承。
本章节介绍 CSS 的最常见，也是最基础属性。
CSS 每个属性都会有且仅有一个值。
unset(未设置), inherit (继承父属性值), initial (初始值)。提示
如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的 CSS 引擎完全忽略。
有三种方式引入并应用 CSS。
外部样式表将样式写入 CSS 文件中，在 HTML 中使用 <link> 引用，可以根据实际需要放在 <head> 标签里或 <body> 标签的末尾。比如:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。
选择器所选择的元素，叫做“选择器的对象”。
background-color 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的颜色值。背景色扩展到元素的内容和内边距的下面。
background-image 属性允许在元素的背景中显示图像。
默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。
如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加一个 background-color 属性，看看效果如何。
在 CSS 中，所有的元素都被一个个的“盒子(box)”包围着。
元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者您想强制地手动造成换行的话，您可以使用 <br> 元素。
用于样式文本的 CSS 属性通常可以分为两类: