CSS规则集详解

整个结构称为规则集（规则集通常简称规则），注意各个部分的名称：

选择器（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 像素宽的纯黑色边框。
posted @ 2024-01-31 11:02  v_c  阅读(106)  评论(0)    收藏  举报