4.0锐奇学堂 - 样式表编辑

CSS样式表

下面我们一起建立一个CSS样式表。CSS全称Cascading Styles Sheet，译为层叠样式表，是由W3C（World Wide Web Consortium）组织所拟定的，主要用来指定文字、段落、版面等网页素材的格式。在DW中，我们不需要熟悉CSS的语法，就可以很轻松地设计出很美妙的网页效果。

　　（1）建立简单的样式表

　　　　单击快速启动栏中的“CSS样式，因为是第一次编辑CSS，弹出“CSS样式”对话框，“用CSS样式”表示CSS样式表作用的区域，下面列表中显示显示已经定义的CSS样式，这里显示“无”，表示我们还没有定义样式表。让我们开始编辑第一个CSS标识符吧！单击最下面的“新建样式”图标，就会弹出“新建样式”对话框，里面有几个选项。

　　第一项表示制作一个新的样式表示符，可以任意命名，以．开头，如．title ,．h等等；

　　第二项表示重新定义一个HTML标签，如、等等；

　　第三项表示使用CSS选择器，如a:hover、a:link等等。

　　我们选择第一项，并在下面的“Name”框中输入所要建立的CSS名字，“.mycss”，单击“确定”，进入此样式表定义窗口。我们先选择一种字体列表，设置字号，字体颜色，接下来设置行距，在“行高”框中输入“20”，后面单位为“像系”，表示行高为20 像素。接下来在“分类”列表中选择“背景”，设置一种背景颜色。再从“分类”列表中选择“区块”，设置字间距为2像素，文字对齐方式为左对齐。单击“确定”，这种样式就定义好了。

图1 打开CSS样式

图2 建立新的样式
　　接下来我们使用此样式。在网页中选中要使用样式的文字，单击鼠标右键，选择“CSS样式”项，从子菜单中选择“mycss”，看，刚定义好的样式被应用到所选文字上了。

　　我们也可以在某一段落中应用此样式，先将光标定位在此段中，调出“CSS样式”对话框，在应用样式后面的列表中选择样式表的作用区域，这里选择，表示在段落中应用此样式，再点击列表中的“mycss”，光标所在段落就应用了此样式。

　　（2）定义链接文字的样式

　　接下来我们再设计一个样式表，以控制超链接的形式、颜色变化。要达到的目标为：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。

图1 显示“CSS样式”面板

　　在窗口/样式菜单点调出“CSS样式”面板（图1），点“新建”按钮建立一个新样式。在对话框中选择“使用CSS选择器”，点下面的下拉列表框，可以看到里面有四个选项（图2）：

　　　a:link 指正常的未被访问过的链接；
　　　a:active 指正在点的链接；
　　　a:hover 指鼠标在链接上；
　　　a:visited 指已经访问过的链接；

图2 “使用CSS选择器”下拉列表框

　　选“a:link”，弹出对话框，定义正常的未被访问过的链接形式。在颜色框中选择蓝色，在“修饰”栏中，有五个选项：

　　　上划线：参数表示超链接的文字有下划线；
　　　下划线：则给超链接文字加上划线；
　　　删除线：给超链接文字加上删除线；
　　　闪烁：则使文字闪烁。
　　　无：参数表示超链接文字不显示下划线；

图3 设置a:link的样式

　　我们勾选“无”项，表示让超链接的下划线消失。单击“确定”，a:link设计完毕。用同样方法，我们可以设计a:hover、a:visited等的形式。

图4 加入样式表后的源代码

　　下面这行文字就是我们刚才做的效果。

图5 加入上面的样式表后的效果

　　关于样式表，我们这里就简单讲到这里。

公司地址：深圳市福田区福民路12号知本大厦706 邮编：518000
客服热线：0755-61192828 传真：0755-82915763
客服的服务质量投诉::service@51rich.net(如果您觉得哪位客服的服务不好或者服务得超级好,都可以发EM通知我们,并写上原因,谢谢您的监督)
网站管理