最新的Web开发教程
 

CSS语法和选择


CSS语法

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

CSS选择器

选择器指向的HTML元素要的风格。

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

每个声明包含一个CSS属性的名称和值,以冒号分隔。

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

在下面的例子中,所有<p>元素将是中心对齐,用红色文字颜色:

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

CSS选择

CSS选择器是用来"find" (或选择)根据自己的元素名称,ID,等级,属性,更多的HTML元素,。


元素选择

元素选择器选择基于元素名称元素。

可以选择所有<p>这样的页面上的元素(在此情况下,所有的<p>元素将是中心对齐,用红色文字颜色):

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

ID选择

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

元素的ID应该是一个页面内唯一的,所以ID选择用来选择一个独特的元素!

要选择具有特定ID的元素,写一个哈希(#)字符,其次是元素的ID。

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

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

类选择

类选择选择与特定的类属性的元素。

选择具有特定的类元素,写一个period (.)的字符,随后是类的名称。

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

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

您还可以指定只有特定的HTML元素应该由类的影响。

在下面的例子中,只<p>的元素class="center"将成为中央对齐:

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

HTML元素也可以指一个以上的类。

在下面的例子中, <p>元素将根据其样式class="center"class="large"

<p class="center large">This paragraph refers to two classes.</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评论

注释用于解释代码,并可能有助于当你在以后的日子编辑源代码。

注释由浏览器忽略。

一个CSS注释以/* and ends with */ 。 评论还可以跨越多行:

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

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

自测练习用!

练习1» 练习2» 练习3» 练习4»