整个结构称为规则集（规则集通常简称规则），注意各个部分的名称：
- 选择器（Selector）
-
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是
<p>元素）。要给不同元素添加样式，只需要更改选择器。 - 声明（Declaration）
-
一个单独的规则，如
color: red;用来指定添加样式元素的属性。 - 属性（Properties）
-
改变 HTML 元素样式的途径（本例中
color就是<p>元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则。 - 属性的值（Property value）
-
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了
red之外还有很多属性值可以用于color）。
注意其他重要的语法：
- 除了选择器部分，每个规则集都应该包含在成对的大括号里（
{}）。 - 在每个声明里要用冒号（
:）将属性与属性值分隔开。 - 在每个规则集里要用分号（
;）将各个声明分隔开。
1 p {
2 color: red;
3 width: 500px;
4 border: 1px solid black;
5 }
CSS 布局主要是基于盒子模型。在你的页面上占用空间的每个盒子都有类似的属性：
padding（内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。border（边框）：是紧接着内边距的线。margin（外边距）：是围绕元素边界外侧的空间。
1 body {
2 width: 600px;
3 margin: 0 auto;
4 background-color: #ff9500;
5 padding: 0 20px 20px 20px;
6 border: 5px solid black;
7 }
width: 600px;强制页面永远保持 600 像素宽。margin: 0 auto;当你在margin或padding这样的属性上设置两个值时，第一个值影响元素的上下方向（在这个例子中设置为0）；第二个值影响左右方向。(这里，auto是一个特殊的值，它将可用的水平空间平均分配给左和右）。如 Margin 语法中所记载的那样，你也可以使用一个、两个、三个或四个值。如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的<html>元素形成反差，你也可以尝试其他颜色。padding: 0 20px 20px 20px;我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。与margin一样，你也可以像 Padding 语法中所记载的那样，使用一个、两个、三个或四个值。border: 5px solid black;这是为边框的宽度、样式和颜色设置的值。在本例中，它是一个在主体的所有侧面的 5 像素宽的纯黑色边框。