CSS的语法、类和id选择器

 　　　
　　　
　　　
一．CSS的语法

· 由三部分组成: 一个选择器，一个属性和一个值：

selector  {...} {property: value}

选择器是用来定义的HTML元素或标签改变属性，每个属性可以有一个值，属性和值由冒号区分开外面用大括号括起来：

例：body {color: black}

如果值为多个单词则用双引号括起来：

例：p {font-family: "sans serif"}

当指定多个属性，属性之间用分号隔开：

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

CSS代码可以分行写：

例：
p
{
text-align: center;
color: black;
font-family: arial
}

多个选择器有相同值，可同时进行定义，选择器之间用逗号分隔：

h1,h2,h3,h4,h5,h6 
{
color: green
}

二．选择器的类

· 选择器类可以将同一类型HTML元素定义出不同样式。

如：在的文档中有两种不同样式的段落，一种是右对齐，另外是居中的。CSS代码如下

p.right {text-align: right}
p.center {text-align: center}

如果要完成以上效果，需要对HTML代码也做相应的修改。HTML代码如下

<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

注：每个HTML元素只能有一个类属性

· 可以省略标签名称，只用.类名对所有带class="类名"的标签进行定义。例如

CSS代码：

.center {text-align: center}

HTML代码：

<h1 class="center">

This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p> 

以上代码使所有包含class="center"的标签进行同样设置。

注：不要用以数字开头为名称的类，在Mozilla/Firefox中不能正常运作。

三．id选择器

· id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器用#来定义。

如：下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注：id属性只能在每个HTML文档中出现一次。不要用数字开头。

附．注释

· CSS注释的开头为"/*"，结束符号为"*/"，浏览器会忽略注释。