来谈谈：CSS属性挑选器制造本性化链接款式

在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
网页制造poluoluo文章简介：明天我们经由过程制造本性化链接款式来先容一下CSS的属性选择器。
我们在计划网站的时分，有的时分必要依据页面元素的属性来制造分歧的款式，好比，关于分歧的链接范例，显现分歧的链接图标。CSS的选择器是个很有效的手艺，经由过程它们，我们能够很简单的完成某些效果。明天我们经由过程制造本性化链接款式来先容一下CSS的属性选择器。

先看一下演示吧：

登录/注册后可看大图

正如上图中看到的那样，我们为每种链接界说了分歧的款式：当链接a的href属性的值为"mailto"邮件链接的时分，在该链接前面显现一个邮件的图标；当链接为word文件时，前面显现word文档图标；当链接地点为mp3的时分，显现音乐播放图标；当链接地点包括"qianduan.net"的时分，就显现一个首页图标……
实在完成如许的功效十分简单，我们先来看看CSS的属性选择器的语法：
语法用法css版本[att=val]属性"att"值为"val"的元素css2.1[att]包括"att"属性的元素css2.1[att|=val]婚配一切att属性具有多个连字号分开（hyphen-separated）的值、个中一个值以“val”开首的E元素，次要用于lang属性，好比“en”、“en-us”、“en-gb”css2.1[att~=val]婚配一切att属性具有多个空格分开的值、个中一个值即是“val”的E元素css2.1[ns|attr]名字空间下的"attr"属性的元素，不经常使用css3[att^=val]属性att的值以"val"开首的元素css3[att*=val]属性att的值包括"val"字符串的元素css3[att$=val]属性att的值以"val"开头的元素css3必要注重的是，CSS选择器不管CSS２.１版本仍是CSS3版本，IE7和IE8都撑持，webkit、Gecko中心及Opera也都撑持，只要IE6以下扫瞄器才不撑持。
好了，让我们来完成这些款式吧：
1.链接的基本款式

起首我们筹办了一个CSSSprites的图片，我们将一切的图标都整合到这一个a.gif中。

1. 123456

复制代码

1. a{background:url(a.gif)no-repeatright4px;padding-right:18px;color:#369;line-height:24px;}

复制代码

如许，我们就为一切的链接界说了默许的款式了，一切的链接右边城市显现一个白色的小箭头图标。
2.界说本性化款式

如今我们来为各类范例的链接界说各自的款式，实在这个时分我们必要做的仅仅是界说分歧的背景图片地位(background-position)：
mailto

mailto邮件链接是形如href=”mailto:abc@abc.com”的款式，它们的href属性的值以mailto开首，那末我们利用[att^=val]这类格局：

1. 123

复制代码

1. a[href^="mailto:"]{background-position:right-242px;}

复制代码

word文档

我们一样平常以为，一切的doc文件链接都是href=”abc.doc”这类格局，也就是链接地点一.doc停止，那末我们必要利用[att$=val]这类格局。款式以下：

1. 123

复制代码

1. a[href$=".doc"]{background-position:right-160px}

复制代码

PDF、excle、mp3等格局的文档也是经由过程这类办法来完成的。
包括qianduan.net字段的链接

关于包括某个字符串的链接，可使用[att*=val]这类体例：

1. 123

复制代码

1. a[href*="qianduan.net"]{background-position:right-328px}

复制代码

最初让我们看看完全的款式吧：

1. 123456789101112

复制代码

1. a{background:url(a.gif)no-repeatright4px;padding-right:18px;color:#369;line-height:24px;}a[href^="mailto:"]{background-position:right-242px;}a[href$=".doc"]{background-position:right-161px}a[href$=".xls"]{background-position:right-282px}a[href$=".pdf"]{background-position:right-79px}a[href$=".mp3"]{background-position:right-204px}a[href$=".swf"]{background-position:right-120px}a[href$=".rar"]{background-position:right-38px}a[href*="qianduan.net"]{background-position:right-328px}

复制代码

而我们在利用的时分，也不必要增加分外的class：

1. a{background:url(a.gif)no-repeatright4px;padding-right:18px;color:#369;line-height:24px;}0

复制代码

1. a{background:url(a.gif)no-repeatright4px;padding-right:18px;color:#369;line-height:24px;}1

复制代码

仅此罢了。

对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

滚动条)层属性--溢出(visible/hidden/scroll/auto)

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

仓酷云

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.