Dreamweaver MX简体中文版入门教程三Word格式文档下载.docx

Dreamweaver MX简体中文版入门教程三Word格式文档下载.docx

《Dreamweaver MX简体中文版入门教程三Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《Dreamweaver MX简体中文版入门教程三Word格式文档下载.docx（20页珍藏版）》请在冰点文库上搜索。

CSS样式表的应用

接上次课：

先建立站点，并打开index.htm主页。

为index.htm主页中加入CSS层叠样式表，具体步骤如下：

打开样式面板。

打开后如图：

在弹出窗口中，按如下说明选择：

在“类型”中，选择“重定义HTML”标签，选择“仅对该文档”：

选择td标签。

Td标签代表单元格。

选择分类中的“类型”。

选择字体如下图：

按“确定”按钮后，一个应用了CSS的网页就做好了。

CTRL+S保存。

接下来对比一下两个网页：

明白了CSS层叠样式表的功能了吧？

？

想想为什么？

原因是：

刚才我们重新定义了td标签，也就是方格的标签。

因为上图的文字是放在方格里面的也就是td里面，所以就显示出标签所定义的样式。

如果发现刚才的样式表不好看，可以进一步编辑：

接下来，我们为网页添加边框：

将样式表应用到网页中：

首先点击选择图片，然后如下图操作：

在代码视图中，我们看到选中的表格（table）的代码是用黑色显示的：

将光标放于一下位置，并按空格键：

接下来，选中class属性：

选中刚才的样式表：

切换到设计视图，发现有什么变化？

如果还不够明显，按CTRL+S保存网页，然后按F12预览效果更好。

再为其他表格添加边框：

接下来，将样式表应用到表格：

上述操作选好后，如图：

切换到代码视图：

选择的表格代码是黑色显示的。

将光标放在标签table后面，并按空格键：

接下来，双击选择class属性：

选择需要的样式表：

接下来，为一个小表格制作样式表：

黑色显示部分为刚才选择的表格。

将光标放在标签table后面，并按空格键：

然后：

CTRL+S保存，按F12预览。

效果图：

在上面的预览图中，我们可以看到刚刚弄好的you样式表的效果，很好！

但是有一点不足：

最上面的表格边框突出来了一点，请注意观察！

要解决这个问题，请切换到设计视图：

点击选择图片：

改变宽度大小：

上图：

更改数字之后，按回车键。

一切都很完美！

！