W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 语法&选择器



CSS 语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

CSS selector

选择器通常是您需要改变样式的 HTML 元素。

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

每个声明包括一个CSS属性名称和一个值,并用冒号分隔。

一个CSS声明总是以分号结束,声明块是用大括号包围。

在下面的实例中,所有 <p> 元素将以中心对齐,文本颜色显示为红色:

Example

p {
    color: red;
    text-align: center;
}
尝试一下 »

CSS 选择器

CSS选择器用于根据元素name,id,class,属性等来“查找”(或选择)HTML元素。


元素选择器

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

你可以在页面上选择所有<p>元素(在这种情况下,所有<p>元素将以中心对齐,文本颜色显示为红色):

Example

p {
    text-align: center;
    color: red;
}
尝试一下 »

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

元素的ID在页面中是唯一的,因此id选择器用于选择一个唯一元素!

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id = "para1":

Example

#para1 {
    text-align: center;
    color: red;
}
尝试一下 »
Note 注意: ID名称不能以数字开头!

class 选择器

class 选择器可以选择具有特定类属性的元素。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点 "." 号显示:

在下面的实例中,所有具有class="center"的HTML元素样式将是红色和中心对齐的:

Example

.center {
    text-align: center;
    color: red;
}
尝试一下 »

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class = "center" 让该元素的文本居中:

Example

p.center {
    text-align: center;
    color: red;
}
尝试一下 »

HTML元素也可以引用多个类。

在下面的实例中,<p> 元素将根据class="center"和class="large"的类去设置样式:

Example

<p class="center large">This paragraph refers to two classes.</p>
尝试一下 »
Note 注意: 类名不能以数字开头!

分组选择器

如果你有相同样式的元素需要定义,像这样:

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

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

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

最好使用分组选择器,以减少代码。

要使用分组选择器,请用逗号分隔每个选择器。

在下面的实例中,我们将上面代码重新使用分组选择器来重写样式:

Example

h1, h2, p {
    text-align: center;
    color: red;
}
尝试一下 »

CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

浏览器是忽略注释的。

CSS注释以 "/*" 开始, 以 "*/" 结束, 注释还可以跨越多行:

Example

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */
尝试一下 »