超连接在指定区域显示不同的颜色和文章内容内的超连接颜色、字号的修改

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家



这个问题经常有朋友问到，诸如此类的问题，我也曾经回答过多遍。为了以后查找资料方便，特发一个主题贴便于新朋友以后搜索。

本贴分两个问题来讲解，一是针对站内的超连接在不同的栏目版块内显示不同的颜色，二是对发表的文章内容的超连接进行字号和颜色方面的控制。

一、超连接在指定的栏目区域显示不同的颜色

因为官方默认的css.css对全站的中的连接只做了一类条件,即所有连接的字体、字号、连接文字颜色等，那么如果要使不同的栏目或者不同的标签内的连接颜色有区别，就需要手动来修改官方的css.css文件，当然如果你不是用的官方的css.css，也可以按照本贴中的修改方法来实现。

修改的步骤如下：

1、用记事本打开css.css文件（官方的默认路径为：imagess/default/css.css）
查找下面的代码：
a {
font-size: 12px;
}
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #4E667B;
}
a:active {
text-decoration: none;
}

2.在这段代码的下面增加另外一段条件，变成：
a {
font-size: 12px;
}
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #4E667B;
}
a:active {
text-decoration: none;
}

a.a2{
font-size: 12px;
}
a.a2:link {
color: #ff0000;
text-decoration: none;
}
a.a2:visited {
text-decoration: none;
color: #ff0000;
}
a.a2:hover {
text-decoration: underline;
color: #18D7A5;
}
a.a2:active {
text-decoration: none;
}

以上红色标记的部分即为增加的部分。如果你想实现更多个栏目显示不同的连接字体颜色，那参照以上的改法来增加即可，如：增加a.a3,a.a4的条件……

3、学会运用：
拿上面的修改代码的例子来讲，在你想要修改连接颜色的地方，在连接html代码<a href=....>里面加上class="a2"，变成<a class="a2" href="......">即可。无论是修改模板，还是在标签的模板代码里修改均是一样的改法。如果在标签模板中修改的话，默认的连接代码中，还有一段 style="colortitlecolor"要去掉，不然样式可能重复冲突。

4、效果演示：



二、让发表文章内容内的超连接字的大小和文章内容统一并指定颜色


因为官方默认的文章内容的字号大小为15px，有的朋友在发表文章时，需要在内容里加上超连接，或者关键字替换时用上超连接。但实践证明，一旦在文章内容内用了超连接，字号就和文章内容的字号不统一，这还是因为官方默认的css.css文件只对文章内容的字号做了定义，而没有去定义文章内容页内的超连接，所以就按照统一的站内超连接来进行了。如果一页一页地修改，的确又非常烦琐。要想实现字号统一、超连接颜色区分，还是一个方法，修改css.css文件，再增加一个条件就行了。


修改的步骤如下：


1、打开css.css文件，查找下列条件：


/*****************************************************************
******************************************************************
文章内容页
.content_word,.content_word p多种格式的控制内容的样式,字号为15像素
******************************************************************
******************************************************************/
.content_word,.content_word p{
font-size:15px;
}


2、将上面的条件增加修改为：


.content_word,.content_word p,.content_word a{
font-size:15px;
}
.content_word a:link {
color: #ff0000;
text-decoration: none;
}
.content_word a:visited {
text-decoration: none;
color: #ff0000;
}
.content_word a:hover {
text-decoration: underline;
color: #4E667B;
}
.content_word a:active {
text-decoration: none;
}



上面红色标记的部分为增加的部分，原理很简单，就是增加了文章内容页的超连接.content_word a，但需要特别提醒的是，在前面还需要有一个英文状态下的“,”，不然不起作用。然后就是再继续定义这个超连接的颜色、鼠标悬停指向的颜色和下划线等。


希望这个帖子能对刚刚接触css和网页编辑制作的朋友有所帮助。

最后顺便晒下自己的网址:www.642vip.comhttp://item.taobao.com/item.htm?id=16435591656