当前位置:首页> 正文

Dreamweaver教程: 定义CSS样式链接状态(1)

Dreamweaver教程: 定义CSS样式链接状态(1)

 

 

在CSS样式中,定义链接的各种状态,也是必须掌握的。绝大多数站点的CSS中定义了链接的各种状态。定义链接的各种状态,可以理解成定义锚标签a的各种状态。

a:link  没有接触过的链接

a:visited  访问过的链接。

a:hover 鼠标放在链接上的状态。

a:active 在链接上按下鼠标时的状态。

在接下来,将通过实例,让大家了解各种链接的状态,还有创建的方法。

1.       没有定义链接样式的网页。采用默认蓝色,下划线,文字也很大。

个人认为,设计精良的网站,都没采用这种默认的蓝色。下划线是为了容易分辨链接,但是如果链接很多,下划线反而不利于阅读。有一个好的导航就够了,所以也没必要使用下划线。

2.点击“CSS样式”面板右下角的“新建CSS样式”按钮。

3.在“类型“中选择“使用CSS选择器”。定义在“仅对该文档”。

4.点击“选择器”旁边的下拉按钮。弹出各种状态的锚标签。

 5.选择“a:link”标签。a:link是指没有接触过的链接。a:link表现的是链接的常规状态。

定义字体为宋体,修饰选择“无”就可以去掉下划线,行高为20像素,颜色为#333333灰色,以和文本默认的黑色有差别。

定义“a:link”标签样式后的网页。

6.选择a:hover标签。a:hover是指鼠标放在链接上的状态。

 

定义字体为宋体,大小为12像素,颜色为红色#FF3300。

在浏览器中,鼠标放在链接上面,链接变成红色。

 

             

 

展开全文阅读

相关内容