CCS3列表和超链接样式

在默认状态下，超链接文本显示为蓝色、下画线效果，当鼠标指针移过超链接时显示为手形，访问过的超链接文本显示为紫色；而列表项目默认会缩进显示，并在左侧显示项目符号。在网页设计中，一般可以根据需要重新定义超链接和列表的默认样式。

1、超链接样式

1.1、动态伪类

动态伪类选择器可以定义超链接的4种状态样式，简单说明如下：

a:link：定义超链接的默认样式。
a:visited：定义超链接被访问后的样式。
a:hover：定义光标指针移过超链接时的样式。
a:active：定义超链接被激活时的样式。

【示例】定义页面所有超链接默认为红色下画线效果，超链接被访问过之后显示为蓝色下画线效果，当鼠标移过时显示为绿色下画线效果，而当单击超链接时则显示为黄色下画线效果：

css 复制代码

    a:link {color: #FF0000;          /* 红色 */} /* 超链接默认样式 */
    a:visited {color: #0000FF;       /* 蓝色 */} /* 超链接被访问后的样式 */
    a:hover {color: #00FF00;         /* 绿色 */}/* 鼠标移过超链接的样式 */
    a:active {color: #FFFF00;        /* 黄色 */}/* 超链接被激活时的样式 */

提示：超链接的4种状态样式的排列顺序是固定的，一般不能随意调换。正确顺序是：link、visited、hover和active。如果仅希望超链接显示两种状态样式，使用a:link伪类定义默认样式，使用a:hover伪类定义鼠标经过时的样式。

1.2、定义下画线样式

超链接文本默认显示下画线样式，可以使用CSS3的text-decoration清除：

css 复制代码

    a {/* 完全清除超链接的下画线效果 */
         text-decoration:none;
    }

从用户体验的角度考虑，在取消下画线之后，应确保浏览者能够正确地识别超链接，如字体加粗、变色、缩放、高亮背景等，也可以设计当鼠标经过时增加下画线，因为下画线具有很好的提示作用：

css 复制代码

    a:hover {/* 鼠标经过时显示下画线效果 */
         text-decoration:underline;
    }

下画线样式不仅仅是一条实线，可以根据需要自定义设计。主要设计思路如下：

借助<a>标签的底边框线来实现。
利用背景图像来实现，背景图像可以设计出更多精巧的下画线样式。

【示例1】设计当鼠标经过超链接文本时，显示为下画虚线、字体加粗、色彩高亮的效果：

css 复制代码

    a {/* 超链接的默认样式 */
        text-decoration:none;               /* 清除超链接下画线 */
        color:#999;                         /* 浅灰色文字效果 */
    }
    a:hover {/*鼠标经过时样式 */
        border-bottom:dashed 1px red;       /* 鼠标经过时显示虚下画线效果 */
        color:#000;                         /* 加重颜色显示 */
        font-weight:bold;                   /* 加粗字体显示 */
        zoom:1;                             /* 解决IE浏览器无法显示问题 */
    }

1.3、定义特效样式

本例利用边框色的深浅模拟凸凹变化的立体效果。具体实现方法如下：

设置右边框和底边框同色，同时设置顶边框和左边框同色，利用明暗色彩的搭配模拟立体效果。
设置超链接文本的背景色为深色效果，营造凸起效果，当鼠标移过时，再定义浅色背景营造凹下效果。

【示例】定义超链接在默认状态下显示灰色右边和底边框线、白色顶边和左边框线效果。当鼠标移过时，清除右侧和底部边框线，并定义左侧和顶部边框线效果：

css 复制代码

    body { background:#fcc; }                     /* 浅色网页背景 */
    ul {list-style-type: none; }                  /* 清除项目符号 */
    li { margin: 0 2px; float: left;}             /* 并列显示 */
    a {/* 超链接的默认样式 */
        text-decoration:none;                     /* 清除超链接下画线 */
        border:solid 1px;                         /* 定义1 px实线边框 */
        padding: 0.4em 0.8em;                     /* 增加超链接补白 */
        color: #444;                              /* 定义灰色字体 */
        background: #f99;                         /* 超链接背景色 */
        border-color: #fff #aaab9c #aaab9c #fff;  /* 分配边框颜色 */
        zoom:1;                                   /* 解决IE浏览器无法显示问题*/
    }
    a:hover {/* 鼠标经过时样式 */
        color: #800000;                           /* 超链接字体颜色 */
        background: transparent;                  /* 清除超链接背景色 */
        border-color: #aaab9c #fff #fff #aaab9c;  /* 分配边框颜色 */
    }

1.4、定义光标样式

在默认状态下，鼠标指针经过超链接时显示为手形。使用CSS3的cursor属性可以改变这种默认效果，cursor属性定义鼠标移过对象时的指针样式，属性取值如下所示：

【示例】在样式表中定义多个鼠标指针类样式，然后为表格单元格应用不同的类样式：

css 复制代码

    .auto { cursor: auto; }
    .default { cursor: default; }
    .none { cursor: none; }
    .context-menu { cursor: context-menu; }
    .help { cursor: help; }
    .pointer { cursor: pointer; }
    .progress { cursor: progress; }
    .wait { cursor: wait; }
    ...

提示：使用自定义图像作为光标类型，IE和Opera只支持*.cur等特定的图片格式；而Firefox、Chrome和Safari既支持特定图片类型，也支持常见的*.jpg、.gif、.jpg等图片格式。

cursor属性值可以是一个序列，当浏览器无法处理第一个图标时，它会尝试处理第二个、第三个等，以此类推，最后一个可以设置为通用光标。例如，下面样式定义了3个自定义动画光标文件，最后定义了一个通用光标类型。

css 复制代码

    a:hover { cursor:url('images/1.ani'), url('images/1. cur'), url('images/1.gif'), pointer;}

2、列表样式

2.1、定义项目符号类型

使用CSS3的list-style-type属性可以定义列表项目符号的类型，也可以取消项目符号，该属性取值说明如下表所示：

使用CSS3的list-style-position属性可以定义项目符号的显示位置。该属性取值包括outside和inside，其中outside表示把项目符号显示在列表项的文本行以外，列表符号默认显示为outside，inside表示把项目符号显示在列表项文本行以内。

注意：如果要清除列表项目的缩进显示样式，可以使用以下样式实现：

css 复制代码

    ul, ol {
        padding: 0;
        margin: 0;
    }

【示例】定义项目符号显示为空心圆，并位于列表行内部显示，如下图所示：

css 复制代码

    body {/* 清除页边距 */
        margin: 0;                          /* 清除边界 */
        padding: 0;                         /* 清除补白 */
    }
    ul {/* 列表基本样式 */
        list-style-type: circle;            /* 空心圆符号*/
        list-style-position: inside;        /* 显示在里面 */
    }

提示：在定义列表项目符号样式时，应注意以下两点。

不同浏览器对于项目符号的解析效果，以及其显示位置略有不同。如果要兼容不同浏览器的显示效果，应关注这些差异。
项目符号显示在里面和外面会影响项目符号与列表文本之间的距离，同时影响列表项的缩进效果。不同浏览器在解析时会存在差异。

2.2、定义项目符号图像

使用CSS3的list-style-image属性可以自定义项目符号。该属性允许指定一个外部图标文件，以此满足个性化设计需求。用法如下所示：

css 复制代码

    list-style-image：none | <url>

默认值为none。

【示例】设计内部样式表，增加自定义项目符号，设计项目符号为外部图标bullet_main_02.gif，效果如下图所示：

css 复制代码

    ul {/* 列表基本样式 */
        list-style-type: circle;                            /* 空心圆符号*/
        list-style-position: inside;                        /* 显示在里面 */
        list-style-image: url(images/bullet_main_02.gif);   /* 自定义列表项目符号 */
    }

提示：当同时定义项目符号类型和自定义项目符号时，自定义项目符号将覆盖默认的符号类型。但是，如果list-style-type属性值为none或指定外部图标文件不存在时，则list-style-type属性值有效。

2.3、模拟项目符号

使用CSS3的background属性可以模拟列表项目的符号，实现方法如下：

【设计思路】

第1步，先使用list-style-type:none隐藏列表的默认项目符号。

第2步，使用background属性为列表项目定义背景图像，精确定位其显示位置。

第3步，使用padding-left属性为列表项目定义左侧空白，避免背景图像被项目文本遮盖。

【示例】先清除列表的默认项目符号，然后为项目列表定义背景图像，并定位到左侧垂直居中的位置，为了避免列表文本覆盖背景图像，定义左侧补白为一个字符宽度，这样就可以把列表信息向右缩进显示：

css 复制代码

    ul {/* 清除列默认样式 */
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    li {/* 定义列表项目的样式 */
        background-image: url(images/bullet_sarrow.gif);       /* 定义背景图像 */
        background-position: left center;                      /* 精确定位背景图像的位置 */
        background-repeat: no-repeat;                          /* 禁止背景图像平铺显示 */
        padding-left: 1em;                                     /* 为背景图像挤出空白区域 */
    }