CSS语法简介
加在head部分的<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束。而注释标签<!– –>则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。
上面的内容并没有定义任何样式,它的任务只是告诉浏览器CSS代码的位置。下面的内容是重点,正是下面这一部分的内容使得页面的外观发生了明显的变化,它也就是CSS的描述部分(定义部分):
复制代码
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
……
<h3 style=”display:none”>是大傻瓜!傻瓜</h3>
通常情况下,CSS的描述部分是由三部分组成的,分别是选择器、属性和属性值。写法如下:
选择器 { 属性: 属性值; }
例如:
复制代码
h1 {font-size: 12px;}
本例中选择器也就是你想要描述的HTML标签,其它选择器将在后面的教程中讲解。上面例子的选择器就是h1标签。属性和属性值则是说明你想要描述h1的哪一个属性,该属性的值为多少,例如上面例子中将h1字体大小属性为12像素,写成font-size: 12px。属性和属性值之间用一个冒号“:”分开,以一个分号“;”结束,最后别忘记用一对大括号“{}”括起来。
我们也可以为一个选择器同时定义多个样式,样式之间用分号“;”隔开。也可以同时为几个标签同时定义一组样式,标签之间用逗号“,”隔开。也许这两句话比较绕嘴,不过事实上上面例子的第二行代码就用到了CSS的这个特性。语句“h2,h4 {font-size: 12px; display:inline;} ”同时为h2和,h4两个标签定义了两个样式。当然了,为了使你的CSS代码更容易阅读和维护,你可以分行书写这些属性:
复制代码
h2,h4 {
font-size: 12px;
display:inline;
}
注意1:现在讲解上面代码的最后一行,在<h3 style="display:none">中,我们没有看到选择器,这是因为插入CSS的位置不同,它将直接作用与当前标签之内的元素。关于CSS不同的插入方式将在随后的教程中讨论。
注意2:CSS的书写方式请大家根据自己的喜好决定,不过最终的目的都很明确,提高维护CSS代码的效率。
CSS注释
我们以一个例子介绍在CSS中插入注释的方法:
复制代码
<style type=”text/css”>
<!–
h1 {font-size: 12px;}
/* 把标题的大小都定义为12个像素 */
h2,h4 {font-size: 12px; display:inline;}
–>
</style>
在CSS中,注释以“/*”开始,以“*/”结束,注释里面的内容对于浏览器来说是没有意义的。










