|
///pc/homepage/dreamweaver/img/000.gif" width="100" height="20">
|
///pc/img/title_00.gif" width="13" height="20"> |
|
///pc/homepage/dreamweaver/img/002.gif" width="18" height="16" align="absmiddle">轻松掌握网页制作
///pc/homepage/dreamweaver/img/002.gif" width="18" height="16" align="absmiddle">深入学习和使用
///pc/homepage/dreamweaver/img/003.gif" width="18" height="16" align="absmiddle">高级使用和理解
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">站点管理
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">发布网页
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">样式表编辑
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">Timelines
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">Behaviors
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">Template
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">Library
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">HTML源代码编辑器
///pc/homepage/dreamweaver/img/004.gif" width="30" height="17" align="absmiddle">强大的查找替换功能
///pc/homepage/dreamweaver/img/001.gif" width="30" height="16" align="absmiddle">历史面板的应用
///pc/homepage/dreamweaver/img/002.gif" width="18" height="16" align="absmiddle">附录
///pc/homepage/dreamweaver/img/009.gif" width="30" height="16" align="absmiddle">常见问题汇总
///pc/homepage/dreamweaver/img/009.gif" width="30" height="16" align="absmiddle">快捷键分级介绍
///pc/homepage/dreamweaver/img/009.gif" width="30" height="16" align="absmiddle">一句话技巧集萃
///pc/homepage/dreamweaver/img/010.gif" width="30" height="16" align="absmiddle">功能快速索引
//www.shanghaigongsi.com.cn/pc/bin/softdown/softgsch.pl?key=dreamweaver">///pc/img/download.gif" width="90" height="45" border="0">
/pc/bin/msg.pl?file_id=k_dreamweaver target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法
|
///pc/img/blank.gif" width="1" height="1">
| |
| ///pc/homepage/dreamweaver/img/logo1.gif" width="194" height="64"> |
|
|
|
|
样式表编辑
（2）定义链接文字的样式
接下来我们再设计一个样式表，以控制超链接的形式、颜色变化。要达到的目标为：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。
///pc/homepage/dreamweaver/img/dwu049.gif" width="334" height="250">
图1 按下F7显示“CSS styles”面板
按下F7“CSS styles”面板（图1），点“New
Style”按钮建立一个新样式。在对话框中选择“Use CSS Selector”，点下面的下拉列表框，可以看到里面有四个选项（图2）：
a:link 指正常的未被访问过的链接；
a:active 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
///pc/homepage/dreamweaver/img/dwu050.gif" width="345" height="160">
图2 “Use CSS Selector”下拉列表框
选“a:link”，弹出对话框，定义正常的未被访问过的链接形式。在Color框中选择蓝色，在“Decoration”（修饰效果）栏中，有五个选项：
underline参数表示超链接的文字有下划线；
*overline则给超链接文字加上划线；
line-through给超链接文字加上删除线；
*blink则使文字闪烁。
none参数表示超链接文字不显示下划线；
///pc/homepage/dreamweaver/img/dwu051.gif" width="524" height="340">
图3 设置a:link的样式
我们勾选“None”项，表示让超链接的下划线消失。单击“OK”，a:link设计完毕。用同样方法，我们可以设计a:hover、a:visited等的形式。
///pc/homepage/dreamweaver/img/dwu053.gif" width="474" height="113">
图4 加入样式表后的源代码
下面这行文字就是我们刚才做的效果。
///pc/homepage/dreamweaver/img/dwu054.gif" width="342" height="100">
图5 加入上面的样式表后的效果
关于样式表，我们这里就简单讲到这里，如果想看更详细的教程，请参考“CSS使用详解”。
上一节
/pc/bin/msg.pl?file_id=k_dreamweaver target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法
|
| |
| |