Dreamweaver 教程-CSS样式表的3种关联方法

时间：2014-07-14 17:59
来源：下载吧
编辑：xfront

下面我们来讲讲如何为一个网页添加CSS样式。

内部样式表

内部样式表需要在网页的<head>部分定义，格式如下：

<head>
     <style type="text/css">
      /*符合CSS语法结构的CSS语句，例如*/   body { background-color: blue; }
     </style>
      </head>

行内样式表(内嵌样式表)

它的使用方法我们在前两节也已经使用过了。行内样式表直接在标签内部定义，使用style属性，格式如下：

<标签 style="符合CSS语法结构的CSS语句">

例如：

<p style="text-indent:24px;">段落内容</p>

外部样式表

使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的<head>部分插入以下内容：

<head>
      <link rel="stylesheet" type="text/css"   href="文件位置/你的CSS文件名.css" />
     /*文件位置就是所处在的文件夹相对与当前网页的相对路径*/
   </head>

下面我们以一个实例来看看如何使用外部样式表：

link标签为网页链入了一个CSS样式表文件“waibu.css”，HTML文档和CSS文件的源代码分别如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>我真惨!被用来演示CSS!</title>
      <meta http-equiv="Content-Type"  content="text/html; charset=gb2312" />  <link rel="stylesheet" type="text/css" href="waibu.css">
      </head>
      <body>
      <h1>我是页面最上端的标题1</h1>
      <h1 id="daohang">我是页面左侧的标题1，用来导航</h1>
      <h1>我是页面新闻的标题1</h1>
      <p>我是新闻的内容。</p>
      </body>
   </html>

提示：此例中，HTML文档和外部CSS文件要保存在同一个文件夹。

h1.dabiaoti {
            font-weight: bolder;
            text-align: center;
            }
            h1#daohang {
            font-size: 12px;
            font-weight: bolder;
            text-align: left;
            }
            .xinwen {
            font-size: 16px;
            font-weight:bold;
            text-align: center;
            color:green;
            }
            p {
            text-align: center;
            }

层叠的意义

当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样式表中为p定义了如下样式：