CSS语法
一个CSS规则集由一个选择器和一个声明块组成:
选择器指向的HTML元素要的风格。
声明块包含用分号分隔的一个或多个声明。
每个声明包含一个CSS属性的名称和值,以冒号分隔。
一个CSS声明总是以分号结束,声明块是用大括号包围。
在下面的例子中,所有<p>元素将是中心对齐,用红色文字颜色:
CSS选择
CSS选择器是用来"find" (或选择)根据自己的元素名称,ID,等级,属性,更多的HTML元素,。
元素选择
元素选择器选择基于元素名称元素。
可以选择所有<p>这样的页面上的元素(在此情况下,所有的<p>元素将是中心对齐,用红色文字颜色):
ID选择
ID选择使用HTML元素的id属性选择一个特定的元素。
元素的ID应该是一个页面内唯一的,所以ID选择用来选择一个独特的元素!
要选择具有特定ID的元素,写一个哈希(#)字符,其次是元素的ID。
样式规则下面将被应用到HTML元素id="para1"
注:一个ID名称不能以数字开头! |
类选择
类选择选择与特定的类属性的元素。
选择具有特定的类元素,写一个period (.)的字符,随后是类的名称。
在下面的例子中,所有的HTML元素class="center"将是红色的中心对齐:
您还可以指定只有特定的HTML元素应该由类的影响。
在下面的例子中,只<p>的元素class="center"将成为中央对齐:
HTML元素也可以指一个以上的类。
在下面的例子中, <p>元素将根据其样式class="center"和class="large" :
注:一类名称不能以数字开头! |
分组选择器
如果你有相同的样式定义的元素,就像这样:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
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 */
试一试»