CSS快速入门学习二

一、外部样式表：适用于很多页面都需要用到样式表时

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

用文本编辑器进行编辑，里面不能包含任何HTML的标签并以CSS为后缀保存就是一个样式表文件，如下内容

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

需要注意的是在属性值和单位间不要有空间，否则只有IE6有效，在Mozilla/Firefox/Netscape中无效。

应该用

p {margin-left: 20px;} 而不是 p {margin-left: 20 px;}

二、内部样式表：

当某个文档需要特殊样式时，就可以用内部样式表，可以用<style>包在里面

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

三、内联样式表

只对当前元素使用，只要在相关标签内使用样式(style)，可以包含CSS属性

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

四、多重样式表

某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

如，外部样式表针对h3选择器的三个属性

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而外部样式表拥有针对h3选择器的两个属性

h3 {
  text-align: right; 
  font-size: 20pt;
  }

假如拥有样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：

color: red; 
text-align: right; 
font-size: 20pt;