CSS

【转载】理解 CSS 属性值语法

万维网联盟(W3C) 使用了一套特别的语法来定义 CSS 的属性值,能让所有的 CSS 属性都用。如果你曾看过 CSS 规范,你可能已经见过这套语法了。如果你不知道这些符号以及它们如何工作的话,这套语法可能非常难理解。然而,这值得花时间来学。如果你理解 W3C 是如何定义这些属性值的,你就可以理解 W3C CSS 规范 中任意一个了。

【转载】CSS Grid!

Grid布局来了,Grid布局来了。千真万确,各大浏览器将发布对Grid布局的支持。唔哈哈哈哈~2017年3月,Chrome和Firefox将开始默认支持Grid布局。其中,Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid,所以,谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持,那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。

CSS变量和预处理器变量的差异

变量是CSS预处理器存在的主要原因之一。为某样东西设置变量的能力,比如颜色,在CSS中让变量保持一致,可DRY,并且易于改变是很有用的。出于相同原因,也可以使用原生CSS变量(“CSS自定义属性”)。但有一些重要的差异应该清楚。

CSS条件变量

我将从这里说起: 在W3C标准规范中,使用CSS变量并没有任何条件。我认为这是规范文档中的一个很大的缺陷,CSS变量已经实现了很多我们之前无法实现的功能,并且我们未来可能大量使用,缺失文档描述着实让人沮丧。但是如果现在我们需要这些对CSS变量的描述怎么办?好,借助其他的CSS知识,我们可以在一些实例中略窥一二。

你真的了解background-position

background属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-clipbackground-originbackground-size。你可能会说,这些属性再简单不过了,没有可讲的。这篇文章接下来要介绍的不是所有有关于background里面的属性,而是说说background-position属性。在详细介绍background-position之前,先要问大家,你真的了解这个属性吗?言外之意,接下来介绍是你所不了解的background-position相关细节。

【转载】CSS技巧-rgba函数的妙用

新出现的 CSS 颜色配置函数是一项非常有意思的功能,它给予我们在浏览器中直接操纵颜色的能力。例如,当鼠标悬停在按钮上时,可以使用color: color(black darkness(50%))改变颜色,而不需要使用 Sass 这类 CSS 预处理器。

如何在限宽的容器中实现全屏效果

在Web布局中,特别是在PC端中,常常可以看到这样的设计风格:内容居中,然后Banner区全屏。这也就是标题所说的效果,限宽的容器中实现全屏效果。那么问题来了,在实际中如何实现在限宽的容器中实现全屏效果。那么实际开发中以什么方式来做更为方便灵活呢?这就是这篇文章需要介绍的内容。

CSS新特性

前段时间有个关于CSS的话题“既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢”?其实这样的话题一直都存在。不过这里我要说的不是能不能写好CSS,我想和大家一起分享几个CSS的新特性。这个也是上周在天津在线回声公司分享的一个话题。整理一下有关于PPT中的内容,希望对大家有所帮助。

有趣的CSS像素

如今很多艺术被超清,高像素图片掩盖了光芒,像素艺术就是其中之一。我在逛CodePen的时候被一些像素作品惊呆了,它们又一次告诉了我像素艺术多么的了不起。

如何隐藏DOM元素

早在2011年整理了一篇有关于图片替换文本的方法,而前几天看到一篇有关于隐藏DOM元素的几种方法。今天这里也将继续说说如何隐藏DOM元素?

页面

返回顶部