使用CSS的基础实例
日期：2014-04-02 浏览次数：20863 次
原创教程，转载请注明出处：网页教学网
我们现在设计网页都要使用CSS了，今天在这个教程中给大家以实例的形式教给大家如何使用CSS，通过四个例子来说明CSS的使用！通过这个教程中的四个实例让大家理解在HTML中加入CSS之后，CSS在什么时候起作用？以及不加CSS会如何显示。激起你学习CSS的兴趣。
首先我们先建立一个CSS文件，打开我们的记事本，然后输入下面的内容：
p
{
color: #ff0000;
background: transparent;
}
然后保存为style1.CSS(在这个CSS文件中我们定义p标签的的风格为红色、背景透明)
实例1：把下列文件保存为.htm文件，注意要和style1.CSS保存在同一目录中。
<HTML>
<head>
<title>网页教学网实例教程1</title>
<link href="../../style1.CSS" rel="stylesheet" type="text/CSS" />
<style type="text/CSS">
p
{
color:#00ff00;
background:transparent;
}
</style>
</head>
<body>
<p style="color:#0000ff;background:transparent;">兰色文本显示 </p>
</body>
</HTML>
实例2：
<HTML>
<head>
<title>网页教学网CSS实例2</title>
<link href="../../style1.CSS" rel="stylesheet" type="text/CSS" />
<style type="text/CSS">
p
{
color:#00ff00;
background:transparent;
}
</style>
</head>
<body>
<p>绿色文本显示</p>
</body>
</HTML>
实例3：
<HTML>
<head>
<title>网页教学网CSS实例3</title>
<link href="../../style1.CSS" rel="stylesheet" type="text/CSS" />
</head>
<body>
<p>红色文本显示</p>
</body>
</HTML>
实例4：
<HTML>
<head>
<title>网页教学网CSS实例4</title>
</head>
<body>
<p>默认的浏览器显示的文本</p>
</body>
</HTML>
通过以上四个实例大家理解CSS的定义，在什么地方起作用等问题。
