CSS说:无知的人类,颤抖吧!

css a'ゞ『完美』 3年前 (2016-08-14) 2390次浏览 已收录 0个评论 扫描二维码

其实前端不只是 JS 重要,HTML,CSS 这些基础也很重要!本篇文章纯属提升大家的眼界!

你知道吗,cole 属性和文字属性的作用范围。仔细看代码好像也有点明白的意思,毕竟是文字嘛,但是应该很少有人这么用过吧!

color 和文字属性

背景属性:background 的简写,以前写背景用到背景定位的时候总是要写 2 行 css,看完本篇文章就可以变成一行啦!

在 css2.1 中,background 是这 5 个值的缩写,background-color, background-image, background-repeat, background-attachment, background-position。现在,在 css3 中,又有三个成员被加进来了,现在总共有 8 个值,他们是:

background: [background-color] [background-image] [background-repeat]
[background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

clip 只对 absolute 元素和 fixed 元素有效

clip 例子

empty-cells 认识这个属性吗?它是用在表格中的,可以控制是否显示空的单元格。IE8 也支持哦!

empty-cells 属性

pointer-events 属性的一个 none 值来有效的禁用元素。不管是 JQuery 还是 JavaScript,点击事件都不会被触发。不过,只有 Chrome 31+, IE11+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+支持该属性

pointer-events 例子

用 css 你甚至可以在边框中使用渐变,只需要设置一个更低 z-index 的伪元素,让伪元素被容器遮住中间部分!

渐变边框

css 还有个 attr 属性,可以获取标签上的属性值作为 css 属性的值!(我测试发现只能对伪元素生效)

css 的 attr 属性

其实 CSS 里面还可以写 JS 代码哦!名字是:expression

expression 是在 IE5 版本之后支持使用的,用来把 CSS 属性和 Javascript 脚本关联起来,【这里的 CSS 属性可以是元素固有的属性,也可以是自定义属性。】是动态设置 CSS 属性的强大方法,但也存在着一定的

危险性

CSS 属性后面可以是一段 Javascript 表达式,CSS 属性的值等于 Javascript 表达式计算的结果。
在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
不过,这个东西现在貌似不能用了!想要了解的自己去查资料吧!

CSS 还有预处理语言

LESS 和 SCSS
CSS 说:无知的人类,颤抖吧!
CSS 说:无知的人类,颤抖吧!
什么是预处理语言:它是一种语法格式,它和 js 的一些概念很相似,最简单的就是定义一个变量,比如定义一个颜色变量,值为红色。那以后凡是用到红色的地方,你就可以用这个变量替换掉“red”。比如:

@r = red;
.a{color: @r;}字体为红色
.b{background: @r;}背景为红色
.c{border:1px solid @r;}1 像素的红色实线边框

当然,这是最简单的功能,它还有一些高级的功能,比如继承啊之类的。
什么是 CSS 预处理器呢,你可以理解为它是个“翻译”,它把你写的那些含有变量的预处理语言变成你所熟知的 CSS 代码。
这里有一份 LESS 的教程:
LESS 教程
还有一个我写的例子:
LESS 例子

CSS 自定义属性

上面我们是用预处理器实现的变量什么的,但是它们有些缺点,还有些人不喜欢使用它们。
所以,CSS 出现了原生的方式。准确的说是:自定义属性!
CSS 自定义属性
感觉 CSS 是不是很强大呢!

还有一些 CSS 其他技巧,可以自行查资料!


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明CSS 说:无知的人类,颤抖吧!
喜欢 (14)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址