分类：CSS

2016
08-01

扒一扒 CSS 语言的诞生史

扒一扒 CSS 语言的诞生史 实话说，在过去这一年，这已经成为我好心情的固定来源。即不断地告诉一波波想要像在TeX、MicrosoftWord等常见的文档处理工具中那样方便地控制HTML文档的样式的人们说——安全带系好，受伤别怪我：“很不好意思，你完蛋了！”——马克·安德森1994年在1991年，蒂姆·伯纳斯·李首次提出HTML的时候，并没有给页面添加样式的方法。给定的HTML该如何渲染决定... 继续阅读 >
2016
07-15

提高CSS技术技巧

前言在今天的文章中，我将要聊聊我在一年半的实践中，总结出来的css经验。首先让我提醒你，css是极其简单的一门语言，简单到可以用三个词概括：选择器，属性以及属性的值。这也是一些人不喜欢css的原因：他们觉得写css像孩子玩乐高玩具一样简单。是这样的。。如果你给一个9岁的孩子介绍css的基本原理，他就会搭建一个网站。不过这个网站不会很复杂，也就是一些包含头部，链接，内容图片的页面而已。事实上，css是一门简单的语... 继续阅读 >
2016
06-18

用 CSS 隐藏页面元素的 5 种方法

用 CSS 隐藏页面元素的 5 种方法 用CSS隐藏页面元素有许多种方法。你可以将opacity设为0、将visibility设为hidden、将display设为none或者将position设为absolute然后将位置设到不可见区域。你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点，让... 继续阅读 >
2016
04-24

CSS之父：Web事业未竞，尚需前赴后继

CSS之父：Web事业未竞，尚需前赴后继 提到Web设计，很少有人的影响会超过HåkonWiumLie。在CERN与Web之父TimBerners-Lee一起工作的Lie，发明了CSS。如果没有那次大胆的提议，我们今天谈论的Web设计很可能是完全不同的一回事。正如Lie所说：“这个技术可能会被一家公司占有，比如法国电信，比如微软。很可能会掌控在私人手中。”“当时的Web还比较混乱，有不少乱七八糟的东西，但同时那也正是人性的反映。而且所有人都可以免费使... 继续阅读 >
2016
04-11

CSS Grid布局指南

CSS Grid布局指南 简介CSSGrid布局（又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。如我们所知，CSS总是用于网页的样式设置，但它并没有起到很好的作用。刚开始的时候我们使用表格(table)，然后使用浮动(float)、定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。虽然Flexbox可以起到一定的补救作用，但是它只可... 继续阅读 >
2015
12-20

30+有用的CSS代码片段

30+有用的CSS代码片段 在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。除了那些解决常见的恼人的问题外，也包含了一些解决新问题的新技术。1.垂直对齐如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题：.vc{position:relative;top... 继续阅读 >
2015
11-09

css设计中的不变与可变

css设计中的不变与可变 “人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》如果重构分里子与面子的话，那么html应该是负责里子的，而css就是负责面子了。在上篇html结构的拆与合说了html之后，我们继续来说下css，这次我们从可变与不变的角度分析。一个面试题首先这是一个面试题，其次反正我是没做过这个面试题，最后忘了是哪个厂的面试题。具体的要求我忘了，大概的意思就是要这个内容在视窗内垂直方向居中，以图片为参考，文... 继续阅读 >
2015
09-30

使用字符串(STRINGS)设置样式

使用字符串(STRINGS)设置样式 今年在墨尔本(澳大利亚)举办的CSSConf中，我有一个主题需要演讲——"StylingWithSTRINGS"。该讲座主要介绍的是在组件中如何使用Flexbox、currentColor和em，在浏览器中快速实现Web应用程序所需要的风格。特别提醒：原文提供了一个视频，不过需要翻。大家都懂的。这里归纳了几个要点：布局(Layout)当你创建一个移动应用的布局时，并不是整个页面滑动，而只是某些部分。比如说，页面的头部和脚部是固定的，只是中间的主内容区... 继续阅读 >
2015
09-30

CSS中你不知道的小技巧

CSS中你不知道的小技巧 CSS中的级联(cascade)在同一时间可谓是幸福的，也可以说是痛苦不堪的。通常能工作得非常好，但有问题的时候，也让人们都很激动，甚至事件中也离开不CSS。我们所涉及的不仅是CSS的级联也还涉及到CSS的权重。不是说碰到特殊问题才显得困难，可以说CSS的困难无处不在。在这篇文章中，我将通过一些示例来向大家展示一些CSS的小技巧，让你知道如何使用CSS的级联能变得更友好，也减少一些不必要的需求，从而也减少权重上遇到的麻烦。... 继续阅读 >
2015
08-20

18个你可能不相信是用CSS制作出来的东西

18个你可能不相信是用CSS制作出来的东西 与流行的看法相反，CSS不仅仅是用来提供一个WEB页面的基本风格，以使它看起来更有吸引力。还有很多其他的事情，CSS也可以做的很好。由于它创建动画和交互的能力，CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会。浏览器就像一个空的画布，WEB开发者可以在这里尽情的发挥。下面是18个人们用CSS创建的又酷又有创造性的东西的例子，从原始字符到有趣的动画，有很多激励你自己将时间花费在CSS上。1.&nbs... 继续阅读 >
2015
08-06

几个CSS的黑科技

这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。border-radius很多开发者估计都没有正确认识这个border-radius，因为基本上很多人都是这么用的：.box{border-radius:4px;}稍微高端一点的是这样的：.box{border-radius:4px6px6px4px;}然而，终极黑科技是这样用的：.box{border-radius:5px5px3px2px/5px5px1px3px;}对，它可以赋8个值，没见过？... 继续阅读 >
2015
08-01

Web 设计师不可错过的 25+ CSS 工具

Web 设计师不可错过的 25+ CSS 工具 当涉及到简化CSS设计和开发相关的工作时，工具总能创造奇迹。值得指出的是，绝大多数的网页设计者和开发人员对不同的CSS工具都感到兴奋，这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。当涉及到执行一些重复的CSS标签时，这些值得推荐的CSS工具是最好的选择。在本文中，我为你收集25+个CSS工具，它们将通过最大限度的发挥CSS的功能来帮助你建立神奇的网站。来，让我们一起来看看吧！... 继续阅读 >
2015
07-20

yii2.0 灵活使用AssetBundle管理CSS样式及JS脚本

yii2.0 灵活使用AssetBundle管理CSS样式及JS脚本 2.0的变化相信大家都看到了，其中对一个资源包概念做出了很完美的实现，那就是AssetBundle，但是很多初学者朋友可能不太能够正确的领会其中的含义我画了一张图，大家可以将就看一下：其中，控制器动作的视图（view）渲染顺序是优先于我们的模板页（layout）的，那么一旦我们在某个视图中使用了新的JS库，或新的CSS样式文件，那么我们如何去处理呢？以下方式是错误的，请避免使用：有的人会直接在视图里添加对css或者js的link... 继续阅读 >
2015
07-10

15个实用的CSS在线实例教程

15个实用的CSS在线实例教程 前端技术可以说是必须学习的一个技术，现在做网站都需要懂DIV、CSS，在国内很多企业招网页设计师都要求会写基本的前端代码，所以前端技术是必须了解的，对网页设计师本身也有帮助，今天向大家推荐一些不错的实用CSS教程，学习这些可以提高自己的CSS技能，了解一些新的好用的用法，在日后项目也许会用上。用CSS背景给SVG上色有关SVG图像、cssmask、给背景SVG添加颜色等一些用法。查看教程CSS网球... 继续阅读 >