div+css之04超链接伪类.pptx

阜和教育

PhotoshopCS4

网页设计

超链接伪类超链接伪类知识点链接的四种样式将链接转换为块状用css制作按钮首字下沉

超链接伪类超链接的四种样式a:link{color:#FF0000}/*未访问的链接*/

a:visited{color:#00FF00}/*已访问的链接*/

a:hover{color:#FF00FF}/*鼠标移动到链接上*/

a:active{color:#0000FF}/*选定的链接*/四种状态的顺序一定不能颠倒，否那么有些不生效

超链接伪类伪类不是一个真实的类，正常的类是以点开始，后边跟一个名称，而它是以a开始后边跟个冒号，再跟个状态限定字符；比方第三个a:hover的样式，只有当鼠标移动到该链接上时它才生效，而a:visited只对已访问过的链接生效。伪类使得用户体验大大提高，比方我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了

超链接伪类练习：做一个默认状态下是蓝色，鼠标放上是红色加下划线，选定〔按下〕时为紫色，已访问过为灰色加删除线

超链接伪类将链接转换为块级元素链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。CSS代码：a{display:block;height:30px;width:100px;line-height:30px;text-align:center;background:#CCC;}这样设置的结果是全局a都执行这个样式显示

超链接伪类视图操作：

超链接伪类

超链接伪类

超链接伪类

超链接伪类为块化的A加上触发样式：a:hover{color:#FFF;text-decoration:none;background:#333;}

超链接伪类视图操作：

超链接伪类

超链接伪类用css制作按钮同理，用背景图片替换掉背景颜色的属性，就可以作出用css制作的按钮。首先，准备好按纽的两张图片Css代码：a{display:block;height:34px;width:107px;line-height:2;text-align:center;background:url(images/btn_bg.gif)no-repeat0px0px;color:#d84700;font-size:14px;font-weight:bold;text-decoration:none;padding-top:3px;}a:hover{background:url(images/btn_bg_hover.gif)no-repeat0px0px;}

超链接伪类视图操作：

超链接伪类

超链接伪类

超链接伪类

超链接伪类

超链接伪类首字下沉首字下沉是css伪类上的又一个运用，它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式，而不需要把首字添加一个标签或通过程序来实现，今天以制作word里的首字下沉为例来讲解，应用如下伪元素：:first-letter

超链接伪类在页面中添加如下一段内容：p时尚，我写日记，还有衣服拍照片，你们喜欢我的搭配，对你们有帮助，我会讲中文一点点，我住在上海。我是lily,我来自法国，我拍很多照片^_^/p设置p的样式：p{width:400px;line-height:1.5;font-size:14px;}然后设置p:first-letter的样式

超链接伪类

超链接伪类Css代码：styletype=text/cssp{width:400px;line-height:1.5;font-size:14px;}p:first-letter{font-family:microsoftyahei;font-size:40px;float:left;padding-right:10px;line-height:1;}/style

ThankYou!