jsp text边框_CSS设置DIV边框实例

相信大家都听说过CSS了，CSS是一种样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

它的作用可以达到：

①在几乎所有的浏览器上都可以使用。

②以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

③使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

④你可以轻松地控制页面的布局。

⑤你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

尽管CSS有着非常多的优点、容易学习；但是很多人对其望而却步，因为他们适应了Table方式的网页排版，而对CSS+DIV只是尝试性的做过简单的学习或仅仅只是了解，对其用法并非真正接触。

相信我，CSS+DIV比Table更加灵活，同时，非常容易学习，几乎是一学就会。下面，俺带您从最简单的最基本的实例开始学习，让您走出网页排版新方式的第一步。

下面，偶以最灵活最通用的方式来教您如何应用CSS+DIV，即代码分离模式，CSS是单独的代码，与DIV布局对象分离。

启动您的Dreamweaver，新建一个HTML基本页，之后，切换到“代码”编辑模式，然后，如下图一样，编写相应代码即可：

首先，在页面的Head区域，加入CSS代码，尽管这个时候您可能看不懂，不要紧，跟着做即可。

接着，在Body区域，加入一个DIV，将其ID设置为MyDiv；

最后，通过浏览器浏览您的页面，我们就可以看到如下图的一个具有边框的DIV对象了。

是不是呀，挺简单的，但是却非常灵活，由于使用了代码与对象分离模式，只要随便修改，整个效果即随之而改变。

以上的例子是设置DIV的边框线条颜色、类型，这是四条边都设置成同一种风格；如果要修改某个属性，我不知道属性的名称，怎么办呢，不要紧，Dreamweaver会帮助我们，我们要做的、要改的其实就是使用可视化的方式修改即可。

如下图！将某种属性删除，然后输入：(冒号)，这个时候，会弹出属性供我们进行选择。

看到了吧，在弹出的属性选项中进行选择，即可完成。

下面，我们继续研究部分属性；上面的例子是设置DIV边框成统一的风格，如果要修改某个边框为其它类型的，应该如何设置呢，比如设置上边框为虚线？

如下图，上边框就成为虚线了！

在此就不贴图了，直接帖出CSS代码：

好了，实例就介绍到这个地方。

至于CSS+DIV的灵活应用，方法还多着呢，当您有了一定的基础，要想得到提高，那也是一件容易的事情。