为网页部分区域设置单独样式以指定特定区域文字超链接颜色

为网页部分区域设置单独样式以指定特定区域文字超链接颜色

前言：

本人在HTML语言与CSS方面没有任何系统的学习经验，本文只是对问题解决的记录，若有错漏请各位指正。几天前我在尝试将一Bootstrap模板修改为一个网站首页时遇到问题，我尝试为某个区域加上超链接后，其文字颜色产生变化，这与本人想要的页面整体风格冲突。遂作如下研究，以下内容这可能对有系统学习的人来说是常识，但我却费了一点劲。谨以此告诫大家：搞事情要量力而行，学习技术最好从基础学起。

操作：

首先，我了解到如果想修改整个网页超链为某个颜色，我们可以像下面一样在<style>标签中定义<a>标签的样式。 

<html>
<head>
<style type="text/css">
a {color:#333}    /*通常状态颜色，该值是深灰色*/
a:hover{color:#F00}  /*鼠标经过链接时颜色，该值是红色*/
a:active{color:#30F}  /*鼠标点击链接时颜色，该值是蓝色*/
</style>
</head>

<body>
<a href="http://lexsion.net">Lexsion.NET</a>
</body>
</html>

以上代码中，a {color:#333} 将a标签常态颜色定义为一种深灰色，a:hover{color:#F00}定义了鼠标经过时的颜色，而a:active{color:#30F} 则定义了鼠标点击下去时的颜色。因为代码中没有其他限制，所以这些定义是应用于整个body的。
如此，将以上代码其保存为一个HTML文件后用浏览器打开，鼠标未经过时是黑色，鼠标放在上面时红色，点击时蓝色。

HTML语言中， <div> 元素表示区块的概念，这是一种添加结构的通用机制。使用 <div> 元素来组合块级元素，这样就可以使用样式对它们分别进行格式化。我们可以使用id=*NAME*来标注div,id 属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。于是我们可以使用如下代码完成我们的需求。 

<html>
<head>
<!--以下语句前的 #test 表示该样式只对 id 为 test 的 div 生效-->
<style type="text/css">
#test a {color:#333}    /*通常状态颜色，该值是深灰色*/
#test a:link,a:visited{text-decoration:none}   /*此行定义链接以及点击后无下划线*/
</style>
</head>

<body>
<!--以下div的id命名为test-->
<div id="test">
    此行生效： <a href="http://lexsion.net">Lexsion.NET</a>
</div>

<!--以下div没有id-->
<div>
    此行不生效： <a href="http://lexsion.net">Lexsion.NET</a>
</div>
</body>
</html>

以上代码中，在代码片段a {color:#333}前添加的#test将该样式限定应用于 id 为test的<div>中,因为样式不是应用于整个<body>,所以虽然例程代码中两个都是<a>标签，但其位于不同的<div>，而应用于此的样式是不一样的，所以最终两个链接外观是不一样的。
我们将以上代码保存为HTML文档并使用浏览器打开，可以发现第一行的链接相比较第二行的链接，颜色是深灰色，没有下划线，至此完成需求。

后记:

看完上文相信应该呢能对div和id用途有一定概念了，下面再来举一个栗子！大家应该见过某些网站会在部分区域设置一个效果，即很多小点飘来飘去，靠近的点会自动产生连接线，给人一种很高大上的感觉。这个效果可使用canvas-nest.js脚本实现，在GitHub上有这个开源项目，大家可以去项目页查看具体说明。

该脚本的使用非常简单，只要脚本文件放在根目下，将下面的代码插入到 <body> 和 </body> 之间就可以了,强烈建议在 </body>标签上方。 

<script type="text/javascript" src="canvas-nest.js"></script>

我们可以针对以下项目进行配置：

color: 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
pointColor: 交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

栗子： 

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="canvas-nest.js"></script>

默认情况下，插入的代码会将此效果应用于整个页面。某些场景可能这并不是我们需要的，我们可能只需要将其应用于部分区域。这时我们就可以根据上文的原理来进行实现。以下代码为脚本中最终的实现，我们可以看到代码中绘制区域为body。 

(document.body, (f = document.getElementsByTagName("script"), {
        zIndex: (y = f[f.length - 1]).getAttribute("zIndex"),
        opacity: y.getAttribute("opacity"),
        color: y.getAttribute("color"),
        count: Number(y.getAttribute("count")) || 99
    }))

我们可以将其修改为一个id，比如cas,代码如下，我们修改后将其保存。

(document.getElementById("cas"), (f = document.getElementsByTagName("script"), {
        zIndex: (y = f[f.length - 1]).getAttribute("zIndex"),
        opacity: y.getAttribute("opacity"),
        color: y.getAttribute("color"),
        count: Number(y.getAttribute("count")) || 99
    }))

然后我们将canvas-nest.js文件丢入/js/目录，然后创建一个HTML文件，内容如下： 

<html>
<head>
</head>
<body>
<div>此行生效：</div>
<!--以下div的id命名为cas-->
<div id="cas">
    <h1>Lexsion.NET</h1>
    <p>Test;Test;Test;Test;Test;Test;</p>
    <p>&nbsp;</p>
    </div>
<div>此行不生效:</div>
<!--以下div没有id-->
<div>
    <h1>Lexsion.NET</h1>
    <p>Test;Test;Test;Test;Test;Test;</p>
    <p>&nbsp;</p>
    </div>
<script type="text/javascript" color="70,145,215" opacity='0.7' zIndex="0" count="100" src="/js/canvas-nest.js"></script>
</body>
</html>

使用浏览器打开即可查看成果。

参考：

  1. 我想问下如何让一个div 引入···这个div生效 而不是全局-百度知道
    https://zhidao.baidu.com/question/1307037709807339499

  2. css怎么让文字设定超链接后文字颜色不变?--ZOL问答
    http://ask.zol.com.cn/x/5417141.html

  3. README-zh--canvas-nest.js
    https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md

  4. 网页粒子背景插件 -Canvas-nest.js 指定具体位置展示--CSDN
    https://blog.csdn.net/L1558198727/article/details/81121524

标签: none

添加新评论

(头像使用Gravatar服务，如需自定义，请访问Gravatar.com)