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;
posted on 2010-01-13 13:58  诡计的不老歌  阅读(425)  评论(0编辑  收藏  举报