伪类--动态链接

2016-02-19 17:23 15 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享伪类--动态链接,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

  伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

  1. 语法

  伪类的语法是在原有的语法里加上一个伪类(pseudo-class):

  selector:pseudo-class {property: value}

  (选择符:伪类 {属性: 值})

  伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式。

  类选择符及其他选择符也同样可以和伪类混用:

  selector.class:pseudo-class {property: value}

  (选择符.类:伪类 {属性: 值})

  2. 锚的伪类

  我们最常用的是4种a(锚)元素的伪类,它表示动态链接在4种不同的状态:link、visited、active、hover(未访问的链接、已访问的链接、激活链接和鼠标停留在链接上)。我们把它们分别定义不同的效果:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

  (上面这个例子中,这个链接未访问时的颜色是红色并无下划线,访问后是绿色并无下划线,激活链接时为蓝色并有下划线,鼠标在链接上时为紫色并有下划线)

  注意:有时这个链接访问前鼠标指向链接时有效果,而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面,这样的话由于后面的优先级高,当访问链接后就忽略了a:hover的效果。所以根据叠层顺序,我们在定义这些链接样式时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。

  3. 伪类和类选择符

  将伪类和类组合起来用,就可以在同一个页面中做几组不同的链接效果了,例如,我们定义一组链接为红色,访问后为蓝色;另一组为绿色,访问后为黄色:

a.red:link {color: #FF0000}a.red:visited {color: #0000FF}a.blue:link {color: #00FF00}a.blue:visited {color: #FF00FF}

  现在应用在不同的链接上:

a class="red" href="..."这是第一组链接/aa class="blue" href="..."这是第二组链接/a

  4. 其他伪类

  此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。

  下面看这个例子,我们在段落标记里定义文本首字尺寸为默认大小的3倍:

style type=text/cssp:first-letter {font-size: 300%}/stylep这是一个段落,这个段落的首字被放大了。/p

  我们再定义一个首行样式的例子:

style type=text/cssdiv p:first-line {color: red}/styledivp这是段落的第一行这是段落的第二行这是段落的第三行/p/div

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  (上例中段落的第一行为红色,第二、三行为默认颜色)

  注意:首字和首行的伪类需要IE5.5以上的版本支持。

来源:http://www.tulaoshi.com/n/20160219/1615085.html

延伸阅读
动态链接库(DLL,即 Dynamic-Link Library)是可执行的模块,但它没有自己的堆栈,必须在调用动态链接库函数的程序环境下运行。动态链接库不仅可以作为一个运行模块,包括函数代码,而且可以包含程序以外的任何数据或资源(位图、图标等等)。动态链接库就是给应用程序提供函数或者资源。 动态链接与静态链接是相对立的。静态链接...
在CSS2.1中的选择符语法见下图,由语法形成了各种选择符。 在CSS2.1中的选择符语法见下图,由语法形成了各种选择符。 欢迎PR值大于3的网站与本站交换链接 类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属...
方法一:windows提供了一套函数,用于加载动态链接库中的符号(函数和变量),调用这些函数去加载: 1. HINSTANCE LoadLibrary( LPCTSTR lpLibFileName); 2. FARPROC GetProcAddress( HMODULE hModule,  LPCWSTR lpProcName); 3. BOOL FreeLibrary(  HMODULE hLibModule); 这最直观的一种方法,同时也是最麻烦的一种办法。 方法...
标签: Web开发
OL定义有序列表的时候,除非指定list-style-position:inside;,否则文字和前导符是有缩进的。 但有的时候,OL定义的列表类型有限制,比如不能定义汉字的一、二、三,我们只好手动来输入这些字符,但这下文字和字符连在一起。 运行代码框 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o...
标签: Web开发
伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class): selector:pseudo-class {property: value} (选择符:伪类 {属性: 值}) 伪类和类不同,是CSS已经定义好的,不能象类...

经验教程

891

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部