xml地图|网站地图|网站标签 [设为首页] [加入收藏]
不可思议的颜色混合模式,遇见未知的
分类:web前端

有趣的CSS题目(17):不可思议的颜色混合模式 mix-blend-mode

2017/05/10 · CSS · CSS

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

CSS3 新增了一个很有意思的属性 — mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式

混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

我个人对混合模式的理解也十分浅显,本文只是带领大家走进 CSS 混合模式的世界,初浅的了解混合模式及尝试使用它制作一些效果。

遇见未知的 CSS

2017/06/11 · CSS · CSS

本文作者: 伯乐在线 - 追梦子 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

摘录自《CSS核心技术详解》

CSS 最核心的几个概念

2017/07/14 · CSS · CSS

原文出处: geekplux.   

本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS 中图层的概念替换为 HTML 中的元素。

看看可取的值有哪些:

JavaScript

{ mix-blend-mode: normal; // 正常 mix-blend-mode: multiply; // 正片叠底 mix-blend-mode: screen; // 滤色 mix-blend-mode: overlay; // 叠加 mix-blend-mode: darken; // 变暗 mix-blend-mode: lighten; // 变亮 mix-blend-mode: color-dodge; // 颜色减淡 mix-blend-mode: color-burn; // 颜色加深 mix-blend-mode: hard-light; // 强光 mix-blend-mode: soft-light; // 柔光 mix-blend-mode: difference; // 差值 mix-blend-mode: exclusion; // 排除 mix-blend-mode: hue; // 色相 mix-blend-mode: saturation; // 饱和度 mix-blend-mode: color; // 颜色 mix-blend-mode: luminosity; // 亮度 mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度
  
  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承 和 unset 还原这 3 个所有 CSS 属性都可以取的值外,还有另外的 16 个具体的取值,对应不同的混合效果。

如果不是专业的 PSer 天天和混合模式打交道,想要记住这么多效果,还是挺困难的。不过有前人帮我们总结了一番,看看如何比较好的理解或者说记忆这些效果,摘自Photoshop中高级进阶系列之一——图层混合模式原理:

图片 1

当然,上图是 PS 中的混合模式,数量比 CSS 中的多出几个,但是分类还是通用的。

1.1 CSS中你可能会疑问的几个问题

元素类型

HTML 的元素可以分为两种:

  • 块级元素(block level element)
  • 内联元素(inline element 有的人也叫它行内元素)

两者的区别在于以下三点:

  1. 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显式修改元素的 display 属性),而内联元素则都会在一行内显示。
  2. 块级元素可以设置 width、height 属性,而内联元素设置无效。
  3. 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。

最常见块级元素应该是 ``<div>吧,内联元素有 ``<img> ``````等等,完整的元素列表可以谷歌一下。

具体来说一下吧,

JavaScript

.example { width: 100px; height: 100px; }

1
2
3
4
.example {
    width: 100px;
    height: 100px;
}

我们为 `<div>` 设置上面的样式,是有效果的,因为其是块级元素,而对 设置上面的样式是没用的。要想让 ` 也可以改变宽高,可以通过设置display: block;` 来达到效果。当 display 的值设为 block 时,元素将以块级形式呈现;当 display 值设为 inline 时,元素将以内联形式呈现。 若既想让元素在行内显示,又能设置宽高,可以设置:

JavaScript

display: inline-block;

1
display: inline-block;

inline-block 在我看来就是让元素对外呈内联元素,可以和其他元素共处与一行内;对内则让元素呈块级元素,可改变其宽高。


HTML 代码是顺序执行的,一份无任何 CSS 样式的 HTML 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列,遇到内联元素则从左到右排列。这种无样式的情况下,元素的分布叫普通流,元素出现的位置应该叫正常位置(这是我瞎起的),同时所有元素会在页面上占据一个空间,空间大小由其盒模型决定。

mix-blend-mode 实例

眼见为实,要会使用 mix-blend-mode ,关键还是要迈出使用这一步。这里我写了一个简单的 Demo,包括了所有的混合模式,可以大概试一下各个模式的效果:

See the Pen mix-blend-mode 混合模式示例 by Chokcoco (@Chokcoco) on CodePen.

CodePen Demo(-webkit- Only)

当然,仅仅是这样是感受不到混合模式的魅力的,下面就列举几个利用了混合模式制作的 CSS 动画。

1.1.1 在CSS中为什么要有层叠

在CSS中可能会有多个样式表同时影响同一个元素的某个属性,设计这个功能的主要原因有两个,解决模块化和作者、用户、用户代理样式冲突。

  • 模块化

一个页面中的样式可以拆分成多个样式表,代码如下。

JavaScript

@import url(style/base.css); @import url(style/layer.css);

1
2
@import url(style/base.css);
@import url(style/layer.css);

但这种方式也会随之产生一个问题,即如果对某个元素的同一个属性设置样式,到底应用谁的呢?

  • 作者/用户/用户代理

当作者(写代码的人)和用户(浏览页面的人),以及用户代理(一般指浏览器)都能更改样式表时,也会产生同样的问题:究竟用谁设置的样式,因此CSS层叠机制就显得格外重要。

盒模型

页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model )。请看 Chrome DevTools 里的截图:

图片 2

可以显而易见的看出盒模型由 4 部分组成。从内到外分别是:

JavaScript

content -> padding -> border -> margin

1
content -> padding -> border -> margin

按理来说一个元素的宽度(高度以此类推)应该这样计算:

JavaScript

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

1
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

但是不同浏览器(你没有猜错,就是那个与众不同的浏览器)对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度,其余都要额外算。于是你规定一个元素:

JavaScript

.example { width: 200px; padding: 10px; border: 5px solid #000; margin: 20px; }

1
2
3
4
5
6
.example {
    width: 200px;
    padding: 10px;
    border: 5px solid #000;
    margin: 20px;
}

则他最终的宽度应为:

JavaScript

宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

1
宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

而在 IE(低于IE9) 下,最终宽度为:

JavaScript

宽度 = width(200px) + margin(20px * 2) = 240px;

1
宽度 = width(200px) + margin(20px * 2) = 240px;

我个人觉得 IE 的更符合人类思维,毕竟 padding 叫内边距,边框算作额外的宽度也说不下去。W3C 最后为了解决这个问题,在 CSS3 中加了 box-sizing 这个属性。当我们设置 box-sizing: border-box; 时,border 和 padding 就被包含在了宽高之内,和 IE 之前的标准是一样的。所以,为了避免你同一份 css 在不同浏览器下表现不同,最好加上:

JavaScript

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

1
2
3
4
5
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

这里还有两种特殊情况:

  • 无宽度 —— 绝对定位(position: absolute;) 元素
  • 无宽度 —— 浮动(float) 元素

它们在页面上的表现均不占据空间(脱离普通流,感觉像浮在页面上层一样,移动它们不影响其他元素的定位)。这就涉及到另外两个核心概念 position 和 float。

1.1.2 为什么“@import”指令需要写在样式表的开头

代码如下。

JavaScript

@import url(style/layer.css); body{ background-color:red; }

1
2
3
4
@import url(style/layer.css);
body{
  background-color:red;
}

“@import”指令之所以需要写在样式表的开头,是因为这样可以使后面的样式能更好地层叠导入进来的样式。

position

position 这个属性决定了元素将如何定位。它的值大概有以下五种:

position 值 如何定位
static position的默认值。元素将定位到它的正常位置(上文提到过),其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。
relative 相对定位,相对于元素的正常位置来进行定位。元素在页面占据位置。可以使用 top right bottom left 移动元素位置。
absolute 绝对定位,相对于最近一级的 定位不是 static 的父元素来进行定位。元素在页面不占据位置。 可以使用 top right bottom left 移动元素位置。
fixed 绝对定位,相对于浏览器窗口来进行定位。其余和 absolute 一样,相当于一种特殊的 absolute。
inherit 从父元素继承 position 属性的值。

具体效果可以参考w3school的实例,或者自己写一下就明白了。

每个网页都可以看成是由一层一层页面堆叠起来的,如下图所示。

图片 3

position 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素。会影响其他元素的位置。

而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事:

  1. 把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素。
  2. 该元素将变为块级元素,相当于给该元素设置了 display: block;(给一个内联元素,如 `` ,设置 absolute 之后发现它可以设置宽高了)。
  3. 如果该元素是块级元素,元素的宽度由原来的 width: 100%(占据一行),变为了 auto。

由此观之,当 position 设置为 absolute 或 fixed,就没必要设置 display 为 block 了。而且如果你不想覆盖下层的元素,可以设置 z-index 值 达到效果。

使用 mix-blend-mode: screen 滤色模式制作 loading 效果

为了照顾某些访问 codepen 慢同学,特意制作了该效果的 Gif,看看效果:

图片 4

See the Pen mix-blend-mode: screen by Chokcoco (@Chokcoco) on CodePen.

CodePen Demo(-webkit- Only)

这里使用了 mix-blend-mode: screen 滤色模式,这是一种提亮图像形混合模式。滤色的英文是 screen,也就是两个颜色同时投影到一个屏幕上的合成颜色。具体做法是把两个颜色都反相,相乘,然后再反相。简单记忆为”让白更白,而黑不变”。(不一定十分准确,如有错误还请指正)

我们将三个 div 按照不同延时(animation-delay)小幅度旋转起来,来达到一种很显眼很魔性的效果,适合做 loading 图。

1.1.3 当CSS值为0时为什么可以省略单位

因为当CSS值为0时,任何单位的结果都是一样的,就像数学中的0乘以任何数都得0。

float

float 顾名思义,就是把元素浮动,它的取值一共有四个:left right none inherit,光看名字就懂了,无需多言。

最初的 float 只是用来实现文字环绕图片的效果,仅此而已。而现在 float 的应用已不止这个,前辈们也是写了无数博文来深入浅出的讲解它。
浅如:
经验分享:CSS浮动(float,clear)通俗讲解 篇幅不长,通俗易懂,可以看完这篇文章再回过头来看本文。
深如:
CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)
从本质上讲解了 float 的原理。

我就不班门弄斧写原理了,只说说 float 的几个要点就行了:

  1. 只有左右浮动,没有上下浮动。
  2. 元素设置 float 之后,它会脱离普通流(和 position: absolute; 一样),不再占据原来那层的空间,还会覆盖下一层的元素。
  3. 浮动不会对该元素的上一个兄弟元素有任何影响。
  4. 浮动之后,该元素的下一个兄弟元素会紧贴到该元素之前没有设置 float 的元素之后(很好理解,因为该元素脱离普通流了,或者说不在这一层了,所以它的下一个元素当然要补上它的位置)。
  5. 如果该元素的下一个兄弟元素中有内联元素(通常是文字),则会围绕该元素显示,形成类似「文字围绕图片」的效果。(可参考CSS float浮动的深入研究、详解及拓展(一)中的讲解)。这个我还是实践了一下的:Demo
  6. 下一个兄弟元素如果也设置了同一方向的 float,则会紧随该元素之后显示。
  7. 该元素将变为块级元素,相当于给该元素设置了 display: block;(和position: absolute; 一样)。

这里还有个东西,就是广为人知的——清除浮动。具体的方法五花八门,可以看这篇:那些年我们一起清除过的浮动,我就不多说了。

写完本文后,脑子中又出现了一系列问题,假如 position 和 float 同时设置会出现什么问题?兼容性如何?哪个属性会被覆盖?还没来得及实践,改天以排列组合的方式看看到底是什么效果……如果有人实践过可以偷偷告诉我^_^


本作品采用知识共享 署名-非商业性使用-禁止演绎 4.0 国际 许可协议进行许可。

1 赞 7 收藏 评论

图片 5

1.1.4 margin垂直外边距折叠的意义是什么

margin垂直外边距折叠的特性主要来自传统排版,举个例子,代码如下。

XHTML

<style> body,ul,li{ margin:0; padding:0; } ul{ list-style:none; } ul>li{ margin:20px 0; } </style> <ul> <li>1111111111</li> <li>2222222222</li> <li>3333333333</li> </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  body,ul,li{
    margin:0;
    padding:0;
  }
  ul{
    list-style:none;
  }
  ul>li{
    margin:20px 0;
  }
</style>
<ul>
  <li>1111111111</li>
  <li>2222222222</li>
  <li>3333333333</li>
</ul>

效果如图 1.1

图片 6

从图1.1中可以看到3行数字的垂直外边距都是一样的。如果没有这个特性,第一行数字与下面两行数字的外边距就不一样了,因为我们给每个li都设置了一个上下外边距,假如没有外边距折叠,那么第1个li的下边距加上第2个li的上边距,就是两倍的间距了,但是第一个li上面没有其他元素,所以它只有一个上边距,最终导致的结果就是,第1个li和后面的几个li的外边距不一样,这显然不是我们所希望的。而margin外边距折叠功能正是要在这种情况下,让格式可以好看一点。

1.1.1 CSS层叠规则

在介绍CSS层叠规则之前首先举个例子,代码如下。

JavaScript

<style> .box{ color:red; font-size:18px; } </style> <div class="box"> <a href="#">层叠</a> </div>

1
2
3
4
5
6
7
8
9
<style>
  .box{
    color:red;
    font-size:18px;
  }
</style>
<div class="box">
  <a href="#">层叠</a>
</div>

结果如图1.2所示:

图片 7

按理说颜色是可以继承的,那么为什么a标签的颜色没有变成红色呢?审查一下元素,如图1.3所示。

图片 8

从图1.3中可以看到继承的颜色被划掉了,出现这个问题的原因是浏览器对a标签设置了默认样式,将继承的样式层叠了,因为继承的样式权重最小。下面介绍CSS关于层叠规则是怎么计算的。

在CSS中一个样式可能会来自不同的地方,分别是作者,用户以及用户代理。那么问题来了,如果在这几份样式中,他们对同一个元素的同一个属性做了不同的操作,那么用户代理应该如何处理这段CSS呢?举个例子,代码如下。

JavaScript

/* 作者 */ .box{ color:red; } /* 用户代理 */ .box{ color:green; } /* 用户 */ .box{ color:pink; }

1
2
3
4
5
6
7
8
9
10
11
12
/* 作者 */
.box{
  color:red;
}
/* 用户代理 */
.box{
  color:green;
}
/* 用户 */
.box{
  color:pink;
}

可以看到用户代理以及用户的代码和作者写的样式起冲突了,而CSS的层叠规则就是为了解决这些问题的,以下是一些CSS层叠规则。

在层叠中每个样式规则都有一个权重值,当其中几条规则同时生效时,权重值最大的规则优先。一般来说作者指定的样式权重值高于用户样式权重值,用户样式权重值高于客户端(用户代理)权重值。

使用 mix-blend-mode: difference 差值模式

再举个例子, mix-blend-mode: difference 差值模式。查看每个通道中的颜色信息,比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相;与黑色混合则不产生变化。

通俗一点就是上方图层的亮区将下方图层的颜色进行反相,暗区则将颜色正常显示出来,效果与原图像是完全相反的颜色。

看看利用了这个混合模式,运用在一些多图层效果里,可以产生十分绚烂的混合效果:

图片 9

See the Pen pureCssAnimation(webkit Only) by Chokcoco (@Chokcoco) on CodePen.

CodePen Demo(-webkit- Only)

上图看似复杂,其实了解原理之后非常的简单,6 个旋转的 div ,通过 mix-blend-mode: difference 混合在一起。

在层叠顺序中,以下权重值从小到大。
  1. 用户代理样式
  2. 用户一般样式
  3. 作者一般样式
  4. 作者重要样式(!important)
  5. 用户重要样式(!important)
  6. 如果是两个样式来自同一个地方,如都来自作者,并且它们的样式声明同样重要,则根据特异度来计算,特异度高的会覆盖特异度低的
  7. 如果特异度也相同,则越往后的样式优先级越高

!important声明规则

!important声明的样式比一般声明优先级高,并且用户设置的!important比作者设置的!important优先级高。这样做的原因是为了方便用户实现一些特殊的要求,例如页面字体大小的调整等。

下面举一个!important规则的例子,代码如下。

JavaScript

<style> .box{ color:red !important; } .box{ color:green; } </style> <div class="box">!important</div>

1
2
3
4
5
6
7
8
9
<style>
  .box{
    color:red !important;
  }
  .box{
    color:green;
  }
</style>
<div class="box">!important</div>

在正常情况下,后一个“color:green”会层叠前一个“color:red”,但这里我们给“color:red”设置了!important规则,所以前一个优先级高。

使用多混合模式制作文字故障效果

最后,想到我之前制作的一个文字故障效果,也可以很好的融合混合模式,制作出下列效果:

图片 10

See the Pen mixblendmode制作文字故障效果 by Chokcoco (@Chokcoco) on CodePen.

CodePen Demo(-webkit- Only)

不用怀疑你的眼睛,上图的效果是纯 CSS 实现的效果,运用了多种颜色混合模式实现颜色叠加,变亮等效果。

本文涉及的专业理论知识很少,没有用很大的篇幅去描述每一个混合模式的效果及作用。我对混合模式的理解也比较粗浅,本文旨在通过一些 Demo 让读者学会开始去使用这些混合模式效果,俗话说修行在个人,如果真的感兴趣的可以自行深入研究。

选择器特异度的计算
  1. 如果一个声明出现在元素的style属性中,则将a计为1
  2. b等于选择器中所有id选择器加起来的数量和
  3. c等于选择器中所有class选择器和属性选择器,以及伪类选择器加起来的数量和
  4. d等于选择器中所有标签选择器和伪元素选择器加起来的数量和

将a、b、c、d这4个数字连接起来(a-b-c-d)就组成了选择器的特异度。一段特异度的计算,如下所示。

JavaScript

.box{} /* a=0 b=0 c=1 d=0 特异度 = 0,0,1,0 */ .box div{} /* a=0 b=0 c=1 d=1 特异度 = 0,0,1,1 */ #nav li{} /* a=0 b=1 c=0 d=1 特异度 = 0,1,0,1 */ p:first-line{} /* a=0 b=0 c=0 d=2 特异度 = 0,0,0,2 */ style="" /* a=1 b=0 c=0 d=0 特异度 = 1,0,0,0 */

1
2
3
4
5
.box{}           /* a=0 b=0 c=1 d=0 特异度 = 0,0,1,0 */
.box div{}       /* a=0 b=0 c=1 d=1 特异度 = 0,0,1,1 */
#nav li{}        /* a=0 b=1 c=0 d=1 特异度 = 0,1,0,1 */
p:first-line{}   /* a=0 b=0 c=0 d=2 特异度 = 0,0,0,2 */
style=""         /* a=1 b=0 c=0 d=0 特异度 = 1,0,0,0 */

它们的比较顺序是先比较a,如果a的值都相同,那么接着比较b、c、d的值,谁的数大则优先级就越高。

在使用CSS选择器时,你需要注意以下两点。

  • 继承的优先级最低,没有特异度;
  • 结合符(如+、>等)及通用选择符(*)特异度为0。

因此,可以知道之前a标签color属性为什么没有被应用了,因为继承的优先级最低。

兼容性

最后,看一眼兼容性吧,这种奇妙的属性兼容性通常都不怎么好,我之前几篇文章也提到过了,面向未来编程,所以本文的 CodePen Demo 都要求在 -webkit- 内核浏览器下观看:

图片 11

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

  • 有趣的CSS题目(1): 左边竖条的实现方法
  • 有趣的CSS题目(2): 从条纹边框的实现谈盒子模型
  • 有趣的CSS题目(3): 层叠顺序与堆栈上下文知多少
  • 有趣的CSS题目(4): 从倒影说起,谈谈 CSS 继承 inherit
  • 有趣的CSS题目(5): 单行居中,两行居左,超过两行省略
  • 有趣的CSS题目(6): 全兼容的多列均匀布局问题
  • 有趣的CSS题目(7):消失的边界线问题
  • 有趣的CSS题目(8):纯CSS的导航栏Tab切换方案
  • 有趣的CSS题目(9):巧妙实现 CSS 斜线
  • 有趣的CSS题目(10):结构性伪类选择器
  • 有趣的CSS题目(11):reset.css 知多少?
  • 有趣的CSS题目(12):你该知道的字体 font-family
  • 有趣的CSS题目(13):巧妙地制作背景色渐变动画!
  • 有趣的CSS题目(14): 纯 CSS 方式实现 CSS 动画的暂停与播放!
  • 有趣的CSS题目(15): 谈谈 CSS 关键字 initial、inherit 和 unset
  • 有趣的CSS题目(16): 奇妙的 background-clip: text

打赏支持我写出更多好文章,谢谢!

打赏作者

1.1.6 CSS的命名

在代码复用时,也许你写过类似以下这样的代码,代码如下

JavaScript

size-10{ font-size:10px; }

1
2
3
size-10{
font-size:10px;
}

虽然这段代码看起来没什么问题,但如果考虑到可维护性,那就有很大问题了。假如有一天你不想用10px,想改成12px,也许你会想再加一个class就行了,修改后的代码如下

JavaScript

size-10{ font-size:10px; } size-12{ font-size:12px; }

1
2
3
4
5
6
size-10{
    font-size:10px;
}
size-12{
    font-size:12px;
}

但那些页面中原本用的size-10的class都得修改成size-12,所以不建议这么修改代码。笔者建议用语义的方式命名,代码如下

JavaScript

.size-small{ font-size:12px; }

1
2
3
.size-small{
  font-size:12px;
}

这样写代码的好处是当需要调整字体大小时,只需修改一处,而不必修改添加到元素上的class。也就是说不要按照显示的效果命名,而是根据这个class的用意命名。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 12 图片 13

3 赞 3 收藏 评论

1.2 CSS的一些技巧

关于作者:chokcoco

图片 14

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

图片 15

1.2.1 使用pointer-events控制鼠标事件

可以用CSS中的pointer-events来控制元素什么时候响应鼠标事件,比较常用的一个场景是获取验证码,如图1.4所示。

图片 16

图1.4 获取验证码

当用户单击“获取验证码”按钮后,需要等待60秒才能再次单击“重发验证码”按钮,在这种情况下,就可以尝试用pointer-events实现禁用鼠标单击事件。在pointer-events属性中有一个none值,将pointer-events的值设置成none就不会响应鼠标事件了。举一个获取验证码的例子,代码如下。

JavaScript

<style> a{ color:red; } .disable{ pointer-events:none; color:#666; } </style> <a href="javascript:;" id="btn">发送验证码</a> <script> var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ oBtn.classList.add('disable'); setTimeout(function(){ oBtn.classList.remove('disable'); },3000) }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    a{
        color:red;
    }
    .disable{
        pointer-events:none;
        color:#666;
    }
</style>
<a href="javascript:;" id="btn">发送验证码</a>
<script>
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){
        oBtn.classList.add('disable');
        setTimeout(function(){
            oBtn.classList.remove('disable');
        },3000)
    };
</script>

如果看不懂这段代码也没关系,将这段代码复制下来即可。这段代码的意义就是定义了一个鼠标事件禁用的class,单击“发送验证码”按钮后加上刚刚定义的.disable,3秒以后再将这个class去掉。默认情况下的按钮,如图1.5所示

图片 17

图1.5 默认情况下

单击此按钮后,在3秒内不会再次响应单击事件。

pointer-events除了可以实现此功能之外,还有很多用处,比如实现a标签禁止页面跳转,提高网页性能,用户在滚动页面时可能会不小心碰到一些元素上绑定的事件,这些事件就会被触发,从而浪费资源,但如果在页面滚动时给body加上pointer-events:none;属性,那么就避免了这个问题。

pointer-events还有一个妙用,比如将一个遮罩层元素的属性设置为pointer-events:none;,这样就可以单击到遮罩层后面的内容,如图1.6所示。

图片 18

图1.6 运用了pointer-events以后

如图1.6所示可以看到选中了遮罩层后面的内容,但需要注意的是,pointer-events:none只是用来禁用鼠标的事件,通过其他方式绑定的事件还是会触发的,比如键盘事件等。另外,如果将一个元素的子元素pointer-events设置成其他值,如auto,那么当单击子元素时,还是会通过事件冒泡的形式触发父元素的事件。

1.2.2 玩转CSS选择器
1. 当父元素只有一个子元素时会被选中,代码如下

JavaScript

<style> div:first-of-type:last-of-type{ color:red; } </style> <div>123</div>

1
2
3
4
5
6
<style>
    div:first-of-type:last-of-type{
        color:red;
    }
</style>
<div>123</div>

当只有一个div元素时,效果如图1.7所示。当有多个div时不会被选中,效果如图1.8所示。

图片 19

图1.7 当只有一个div时

图片 20

图1.8 当有多个div时

当然更简单的方法是直接用CSS3中的结构性伪类选择器,当父元素只有一个子元素时会被选中,如下:

JavaScript

:only-child

1
:only-child

不妨去试试。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:不可思议的颜色混合模式,遇见未知的

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文