blogbus模板系列教程9---css样式代码简介1 - 网海天涯

<< blogbus模板系列教程8---认识系统标签(封装代码) | 首页 | blogbus模板系列教程9---css样式代码简介2 >>

blogbus模板系列教程9---css样式代码简介1 - [博客大巴代码教程]

2008-04-26

css样式简单来讲，就是控制页面各元素的显示样式的。前面的教程中，我已经向大家介绍过一种调用css样式的方法（即style="width:200px"这种形式）。但在blogbus的模板代码中，使用了另外一种更为方便的（也是通用的）调用方法。下面就来介绍一下。

<html>
<head>
<title>css样式简介</title>
</head>
<body>
<div style="width:400px;height:500px;border:2px solid red;background:url(http://www.blogbus.com/images/site_v4/logo.gif) no-repeat;">这是一个宽为400px 高为500px，边框为 2px宽的红色实边，背景图片是：的层</div>
</body>
</html>

显示效果如图：

对于这样的代码，相信认真看过前面教程的人，都不难理解了吧。其中的style=""便是控制div这个元素的显示方式。请大家想想，如果把style=""这一段代码去掉的话，显示的效果会是什么样的呢？

如果去掉style=""这段代码，div这个元素会按照默认的样式显示出来，那样的话，div的宽度，高度，边框，背景图片等等都不是按照style=""里面规定的方式来显示了。