“CSS相关”目录存档

如何灵活利用免费开源图标字体-IcoMoon篇

2012年06月4日,星期一

本文实际上是围绕IcoMoon这个平台介绍的,IcoMoon是为了方便广大前端开发人员使用图标字体而开发的。确实很好用,体验也很好,也非常有实用价值,故介绍。

使用一步一步,有非常详尽的截图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

不同CSS布局实现与文字鼠标选择的可用性

2012年05月21日,星期一

我们平时因为A原因或B原因,需要复制web页面上的文字内容。常见的操作就是按住鼠标,选中要复制的文字区域,抬起鼠标按键,目标区域的文字就选中了。
不知你知不知道,有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。
这么说吧,假设你在微博上看见一个名为“屌丝逆袭”的标题,但是,由于孤陋寡闻,不知道这个标题啥意思,于是想百度之,最快的方式就是选择→复制→搜索。结果,像中了邪,这几个文字TMD就是选不准,老把旁边的“萝莉御姐”一起选中了;然后,这个标题又是链接,不能双击选……

本文重在抛砖引玉,希望对各个同行有所小小意识与启发。

阅读全文…

去除inline-block元素间间距的N种方法

2012年04月24日,星期二

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题。
这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?
本文的内容就是详尽展示各种去除这类元素间距的方法。一如既往,有必要的截图、demo页面以及源代码展示等。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: base64:URL背景图片与web页面性能优化

2012年04月13日,星期五

正如标题所示,本文内容就是介绍如何使用base64编码的CSS背景图片对web页面做性能优化。先介绍何为base64编码,如何base64编码,以及为何需要base64编码,最后付诸实际进行演示。
一如既往,有详尽的源代码展示,必要的截图以及demo演示页面。总之,希望本文的内容能够对你的学习有所帮助。

阅读全文…

小tip: CSS后代选择器可能的错误认识

2012年03月19日,星期一

本文通过几个简单的实例,介绍在CSS后代选择器上,一些同行可能存在的一些错误认识。虽是短篇,但是源代码展示,必要的demo页面以及效果截图俱全。希望本文的内容能够对您的学习有所帮助。

阅读全文…

你到了第几层?图片式标题、按钮与隐藏文本

2012年03月9日,星期五

本文标题有故弄玄虚之嫌,说是“图片式标题、按钮与隐藏文本”,其实本意重点是介绍z-index负值以及在文本隐藏中的实际应用。外甥点灯笼——照旧,demo多多,截图多多(还有gif动画演示图哦),源代码展示等等,都有。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

ol元素及相关属性:type, start, value, 和reversed

2012年03月5日,星期一

文章摘要:type, start, value, 和reversed每个的生世是不一样滴。reversed属于新兴人类,随着HTML5来到这个世界的,顾名思意表“反转”。而start和type都是在HTML4中被文革掉的,但是,现在,它们又回来了……

阅读全文…

小tip: 使用CSS(Unicode字符)让inline水平元素换行

2012年03月2日,星期五

本文旨在介绍一种自认为比较新颖有趣的技术。可以仅仅通过CSS控制inline元素元素换行的问题。其中,借助了特殊的Unicode字符编码字符。一如既往,有实例,有截图,有源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…

了解:使用CSS namespace进行分隔

2012年02月16日,星期四

一个XML文档可能包括来自多个XML词汇表的元素或属性,如果每一个词汇表指派一个命名空间,那么相同名字的元素或属性之间的名称冲突就可以解决。举一个简单的例子来说,在一个订单的XML文档中需要引用到客户和所购买的产品,customer元素和product元素可能都有一个叫做id的子元素。这时候要引用id元素会造成名称冲突,但是如果将两个id元素放到不同的命名空间中就会解决这个问题。

命名空间的声明就是将一个前缀与一个URI关联起来。

声明命名空间时,可以为命名空间定义前缀(见前例)。为命名空间定义前缀,而不直接使用命名空间的URI是因为URI为了唯一通常会很长,直接使用URI不但造成书写和阅读的不便,还会扰乱XML的语法。声明命名空间时,也可以不定义前缀。如……

阅读全文…

您可能不知道的CSS元素隐藏“失效”以其妙用

2012年02月14日,星期二

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。然而,其中有些隐藏方法会出现“失效”的情况。而这些“失效”的情况往往会有一些和巧妙的应用。本文就是介绍这些“失效”情况并列举了其一些比较巧妙的应用。一如既往,demo页面,截图,必要的代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…