CSS入门教程——样式表加入网页方式

春天没来 2012-05-20

展开全文

CSS入门教程——样式表加入网页方式

本节以实例的形式讲解如何为一个网页添加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>

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

请看下面这个网页文件，红色部分的内容为网页链入了一个CSS样式表文件“waibu.css”，网页和CSS文件的源代码分别如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www./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 class="dabiaoti">我是页面最上端的标题1</h1>
 <h1 id="daohang">我是页面左侧的标题1，用来导航</h1>
 <h1 class="xinwen">我是页面新闻的标题1</h1>
 <p>我是新闻的内容。</p>
 </body>
 </html>

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;
       }