CSS层叠性权重计算方法【CSS教程】

html-css016

CSS层叠性权重计算方法【CSS教程】,第1张

层叠性 是指多种CSS样式的叠加,也是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉。

定义CSS样式时,经常出现两个或更多规则应用在同一元素上

·选择器相同,则执行层叠性

·选择器不同,就会出现优先级的问题,就会涉及CSS权重计算。

下面我们详解介绍 CSS层叠性权重计算方法。

1) 权重计算公式

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)

值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

·关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)

2) 权重叠加

我们经常用交集选择器,后代选择器等,是有多个基础选择器组合而成,那么此时,就会出现权重叠加。

就是一个简单的加法计算

div ul li ------>0,0,0,3

.nav ul li ------>0,0,1,2

a:hover -----—>0,0,1,1

.nav a ------>0,0,1,1

注意:

数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。

3) 继承的权重是0

这个不难,但是忽略很容易绕晕。其实,我们修改样式,一定要看该标签有没有被选中。

1) 如果选中了,那么以上面的公式来计权重。谁大听谁的。

2) 如果没有选中,那么权重是0,因为继承的权重为0。

前端入门Web前端HTML5+CSS3+移动Web前端全套

css是美化html的!!你说的应该是javascript!

如下面代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<script language="JavaScript">

function sum(){

var s1 = document.f1.s1.value

var s2 = document.f1.s2.value

var s3 = Number(s1)+Number(s2)

document.f1.s3.value=s3

}

</script>

</head>

<body>

<form name="f1">

<input type="text" name="s1">+

<input type="text" name="s2">=

<input type="text" name="s3">

<input type="button" value="计算结果" onclick="sum()">

</form>

</body>

</html>

CSS动画中使用的是三阶曲线,如下图所示,三阶曲线共有P0,P1,P2,P3四个节点,其中P0是起点、P3是终点,P1和P2是控制点。同时CSS中使用的曲线,有些特殊,它固定了起点P0(0,0)和终点P3(1,1),仅有控制点可以移动。移动控制点可以改变曲线的曲率(弯曲的程度),通过曲率的变化反映出速率的变化,应用于动画之中。

之后我们来看下曲率对应速率变化的规律。X轴和Y轴,我们理解为时间轴和距离变化轴,那么单位时间内,距离变化的多少,反应出来的就是速度的快慢。

下图中,X轴的切分是均等的,同时虚线矩形内,x1对应的y1、x2对应的y2,也是相等的,那么认为起点到终点是匀速变化的。

下图中,X轴的切分是均等的,同时虚线矩形内,x1对应的y1 大于 x2对应的y2,那么认为起点到终点的运动过程中,速度是先快后慢的。

这两种曲线反应到具体的动画之中的效果如下。

CSS动画中,使用贝塞尔曲线作为值的属性有两个,transition-timing-function,animation-timing-function,格式为cubic-bezier(P1x,P1y,P2x,P2y),实际应用中的代码实例 transition: all 3.0s cubic-bezier(0.75, 0.25, 0.25, 0.75)。

可能你大多看到的是,ease,linear,ease-in-out 这样的属性值,其实它们也是贝塞尔曲线值,只不过是官方预定义的,以简化明了的名称,替代了复杂的数值书写方式。

以下是一些预定义名称对应的曲线值:

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)

linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)

ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out: cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)