CSS语法

CSS 语法

一个CSS规则集合由一个选择器和声明块组成：

选择定位你想使用样式的HTML元素。

明块包含一个或多个声明用分号分隔。

每个声明包括CSS属性名称和值，中间用冒号分隔。

一个CSS声明总是以分号结束，并且声明块由大括号包围。

在下面的示例中，所有<p>元素将居中对齐，带有红色文本颜色：

p {
    color: red;
    text-align: center;
}

CSS选择器是用来“发现”（或选择）HTML元素，根据其元素名称、ID、类、属性等。

元素选择器根据元素名称选择元素。

你可以像这样在页面上选择所有的元素（在这种情况下，所有的元素都是居中对齐的，带有红色的文本颜色）：

p {
    text-align: center;
    color: red;
}

ID选择器使用HTML元素的ID属性来选择一个特定的元素。

元素的ID在页面中是唯一的，所以id选择器用来选择一个唯一的元素.！

要选择特定id标识的元素, 前面加一个井号 (#), 后面跟元素的id。

下面的样式规则将应用于id="para1" 的HTML元素

#para1 {
    text-align: center;
    color: red;
}

注意: id 名称不能以数字开头！

类选择器选择具有特定类属性的元素.

选择具有特定类的元素, 前面写一个点 (.), 其次是类的名称.

在下面的例子中，所有class="center"的HTML元素将红色和居中对齐：

.center {
    text-align: center;
    color: red;
}

你也可以仅指定由某个类修饰的元素

在下面的例子中, 只有 class="center" 的 <p> 元素居中显示:

p.center {
    text-align: center;
    color: red;
}

HTML元素，也可以参考多个类。

在下面的例子中, <p> 元素将同时应用class="center" 和 class="large"的样式：

<p class="center large">段落红色居中显示，并且是大字体</p>

注意: 类名不能以数字开头.！

如果你有相同样式定义的元素，像这样：

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

这样最好使用分组选择器，从而减少代码量

分组选择器，用逗号分隔每个选择器。

在下面的例子中，我们将上面的代码使用分组选择器选择：

h1, h2, p {
    text-align: center;
    color: red;
}

注释用于解释说明代码，在以后编辑源代码时可能会有所帮助。

览器忽略注释。

一个CSS注释用/* 开头用 */ 注释也可以是多行：

p {
    color: red;
    /* 这个是单行注释 */
    text-align: center;
}

/*
这个是
多行
注释*/