商务网页设计与制作（第2版）课件 第18课 用CSS设置超链接伪类及伪元素_第1页
商务网页设计与制作（第2版）课件 第18课 用CSS设置超链接伪类及伪元素_第2页
商务网页设计与制作（第2版）课件 第18课 用CSS设置超链接伪类及伪元素_第3页
商务网页设计与制作（第2版）课件 第18课 用CSS设置超链接伪类及伪元素_第4页
商务网页设计与制作（第2版）课件 第18课 用CSS设置超链接伪类及伪元素_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章 CSS网页式样制作技术4.5用CSS设置超链接伪类及伪元素4.5.1设置超链接伪类4.5.2设置伪元素4.5用CSS设置超链接伪类及伪元素在HTML及CSS中，有一些类或元素，它们不是实际存在的实体元素或类，是对实体元素进行修饰和说明的，我们把这些元素或类称之为伪元素、伪类。什么是伪类？伪类通常都是指某个元素的某个状态。例如，超链接元素有未访问过的链接接、已访问过的链接、鼠标指针经过时的链接和鼠标单击时的链接4种状态。什么是伪元素？伪元素通常是指某个对象中某个元素的状态。例如，一行文字中第1个字符的样式。4.5.1设置超链接伪类伪类的概念始于超链接。超链接的伪类从最初的3个增加到4个，分别是link、visited、hover、active，分别代表未访问过的超链接、已访问过的超链接、鼠标指针经过超链接、正在单击的超链接这4个伪类状态。使用超链接伪类需要使用超链接标签<a>、伪类标识符“:”和伪类状态，以及伪类状态的属性，设置方法为a:伪类状态{属性1:属性1值;属性2:属性2值;……}超链接伪类通常在CSS中定义，超链接伪类的顺序必须是link、visited、hover、active。<html><head><title>超链接伪类示例</title><basetarget="_blank"><styletype="text/css">a:link{color:#000099}a:visited{color:#666666}a:hover{color:#FF00FF}a:active{color:#FF9900}</style></head><body><ahref="/">人民邮电出版社</a><br><ahref="/">人民邮电出版社</a><br><ahref="/">人邮学院</a><br><ahref="/">人邮教育社区</a></body></html>4.5.2设置伪元素伪元素与伪类的定义和使用方法类似，对文档中虚构的元素进行显示设置。常用的伪元素有first-letter和first-line两个，作用于文字的首字符和首行。使用伪元素需要使用标签名称（如<p>）、伪元素标识符“::”和伪元素名称，通常也在CSS中设置，设置方式为标签名称::伪元素名称｛属性1:属性1值;属2:属性2值;……｝<html><head><title>超链接伪元素示例</title><styletype="text/css">P::first-letter{font-size:150％;}</style></head><body><p>伪元素与伪类的定义和使用方法类似，对文档中虚构的元素进行显示设置。常用的伪元素有first-letter和first-line两个，作用于文字的首字符和首行。</p></body></html>练习：制作一个采用CSS设置超链接状态的网页，写出完整的HTML及CSS代码，具体要求如下：（1）采用内部样式制作。（2）分别

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论