整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

肖sir_html之A链接标签认识(2)

接标签

定义:从一个网页指向另一个网页的目的地,

有四种类型:

(1)链接覆盖原有的链接



(2)新开一个窗口



(3)图片链接



(4)死链接



html:

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>链接标签</title>

</head>

<body>

<a href="https://www.baidu.com/"><font color="blue">百度</font></a>

<a href="https://www.jd.com/" target="_blank"><font color="blue">京东</font></a>

<a href="https://www.hao123.com/" target="_blank"><img src="../img/男孩子.png"/></a>

<a href="#" target="_blank">死链接</a>

</body>

</html>

于很多刚从Java学习过渡到JavaScript学习的同学来说在定义方法的问题上最头疼,我们Java人员来学习JavaScript是非常容易上手的,因为语法大部分都相同。但是定义方法是个例外,JavaScript中没有方法重载的概念,匹配方法只去比较方法名,这跟Java大相径庭。今天我们来剖析一下这个问题, 既然JavaScript中没有重载的概念,那么我们定义两个方法名相同的方法,会出现什么问题呢?

<script >

function calc(a , b){

alert(a + b);

}

calc(1,2);

function calc() {

alert("空参方法");

}

calc();

</script>

这里一执行会弹出两个空参方法,而不是一个3和一个空参方法。

这是因为在JavaScript中如果定义的方法名相同,下面的会将上面的覆盖掉。

以上是具名方法声明的方法,我们如果用具名和匿名方法分别声明相同的方法名的方法会是一种什么样的情况呢?

<script >

function calc(a , b){

alert(a + b);

}

calc(1,2);

var calc = function(){

alert("空参方法");

}

calc();

</script>

出乎我们意料,竟然弹了个3又弹了个空参方法,好像互相不影响。

那请看下面这种情况:

<script >

function calc(a , b){

alert(a + b);

}

calc(1,2);

var calc = function(){

alert("空参方法");

}

calc();

function calc(a , b){

alert(a - b);

}

calc(1,2);

</script>

为什么会是这样一个顺序呢?第三个方法会将第一个方法覆盖掉,这个现象大家能理解。 但为什么第二个方法会将第三个方法覆盖掉呢?

是因为匿名方式声明的方法。只有在调用的时候才真正的被加载上。而具名方法在加载之前就会将相同的方法覆盖掉。所以在加载之前第三个方法会将第一个方法覆盖掉。所以先弹出了一个"-1"/接着执行到了匿名方法。也就是第二个方法。这时候这个方法才加载到内存中。所以会将已经加载好的第三个方法覆盖掉。

推荐学习视频:JavaScript教程_JavaScript视频教程|黑马程序员

SS样式覆盖规则

很多情况都会导致一个元素被运用上多种样式,样式覆盖的规则也需要根据不同的情况来定,具体规则如下。规则一:由于继承而发生样式冲突时,最近祖先获胜。CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况:

<html>

<head>

<title>rule1</title>

<style>

body {color:black;} p {color:blue;}

</style>

</head>

<body>

<p>welcome to <strong>加粗</strong></p>

</body>

</html>strong分别从body和p中继承了color属性,但是由于p在继承树上离strong更近,因此strong中的文字最终继承p的蓝色。

规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜。在上面的例子中,假如还指定了strong元素的样式,如:

strong {color:red;}那么根据规则二,strong中的文字最终显示为红色。

规则三:直接指定的样式发生冲突时,样式权值高者获胜。样式的权值取决于样式的选择器,权值定义如下表。CSS选择器 权值标签选择器 1伪元素(:first-child等) 1类选择器 10ID选择器 100内联样式 1000伪类(:link等) 10可以看到,内联样式的权值>>ID选择器>>类选择器>>标签选择器,除此以外,后代选择器的权值为每项权值之和,比如"#nav .current a"的权值为100 + 10 + 1 = 111。

规则四:样式权值相同时,后者获胜。考虑下面这种情况

<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p> .byline a {color:red;} p .email {color:blue;}".byline a"与"p .email"都直接指定了上面的a元素,且权值都为11,根据规则四,最终显示蓝色。由于样式表可以是外部的,也可以是内部的,规则四提醒我们要注意外部样式表引入的顺序(及<link>元素的顺序),以及外部样式表与内部样式表的出现位置。一般来说,内部样式表出现在所有外部样式表的引入之后,一般是在</head>之前。

规则五:!important的样式属性不被覆盖。!important可以看做是万不得已的时候,打破上述四个规则的"金手指"。如果你一定要采用某个样式属性,而不让它被覆盖的,可以在属性值后加上!important,以规则四的例子为例,

.byline a {color:red !important;}

可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖,不能滥用!important。