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

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

前言:

本人在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

添加新评论