使用CSS的基础实例

王朝网络·html/css/js·作者佚名  2006-12-16
宽屏版  字体: |||超大  

我们现在设计网页都要使用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的定义,在什么地方起作用等问题。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有