catch the digital flow｜北极冰仔部落格

CSS 扫盲教程继续，这是第六期，主讲内容为 CSS 伪类。在与前五期扫盲教程相隔的这么多天中，我也陆续写过不多几篇 CSS 技巧或与 CSS 有关的东西，但最终没有归入这一系列，毕竟技巧归技巧，基础知识归基础知识嘛。——这一段其实全是废话，是我有意安排来凑版面的，下面正式开始：
CSS 伪类：用来给某些选择器或类添加特殊的效果。伪类的语法为：

阅读全文 - 1296 字

在网页上选中一段文字，默认的呈现总是深蓝色背景 + 白色文字。个性，个性哪儿去了？如果你也想换成下面这样，或换得比它们更漂亮，请继续往下看。
我的：

阅读全文 - 564 字

去年（是啊，今天可是 2008 年了，各位写日期时别搞错了啊 - -）写过一篇关于 CSS Sprites 的文章，由于已经有大量的文章写它的原理，我只是敷衍两句罢了。
CSS Sprites 这东西不知道能不能算上是个技术，我觉得充其量也就是个 CSS 技巧。但是当你网站上小图标数量特别多（例子）的时候，这个小技巧却有大用处。CSS Sprites 通过使用一张图片代替所有的小图标以节约 HTTP 连接开销以提高加载速度，再为不同的元素指定不同的 background-position 属性值将小图标分别显示在正确的位置上。更好玩的应用当属刚刚改版的谷歌首页了，下面那活灵活现的动画可不是 GIF 图片，不信你看看背景图，真的只有一张，还不会动：
阅读全文 - 555 字

我最早是在 Realazy 看到 CSS Sprites 的介绍（如果你不知道什么是 CSS Sprites，那么一定要读读这篇文章），紧接着 Zhang-Zi 在自己的阅微堂上应用了这一技术；此时此地，我也把它实现了，（基本上）这里的全部背景图片（虽然也只有几张）都用一张图片包办了，blog 加载的速度显然比之前快了一些。
------ 单薄的分割线 ------
刚才去阅微堂找链接的时候，发现了这篇文章：《加速 blog：序》，对此系列文章充满期待。

我写完 CSS 喜欢用 CSS Tidy（Clean CSS 基于 CSS Tidy 1.1）整理一下，压缩一下体积再上传至服务器（节省加载时间），一直没啥问题。不知咋地今天突然出状况了，修改过的 CSS 再压缩一下之后页面布局变得乱七八糟，左边的 #content 本来是 float:left，可呈现出来偏偏是 float:right 的样式，思来想去我只是改了改正文以外的字体，别的什么都没改，用插件强制清了 WP 的缓存也不行，那问题只能出在 CSS Tidy 身上了，估计是哪个清理选项把代码给改掉了，害我又重新写了一遍 CSS，今后使用 CSS Tidy 之前一定要做个备份。

自 Design Watercolor Effect Menu 后，今天 Nick 又发表了进阶的菜单制作教程：Advanced CSS Menu，按照教程制作出来的菜单果然相当精美，很有 Nick 独特的风格（Demo）。感兴趣的朋友请自行前往学习，我就不翻译了……
PS: Web Designer Wall 的 PageRank 在此次更新中直接由 0 到 7。OTZ...

虽然标题这样写，但实际上使用 JavaScript + DOM/CSS 组合可以实现很多强大的功能。昨天看到 fisio 提到这种鼠标悬停时展开的菜单，我原来也没有用过，经他一提醒觉得还是挺有用处的，尤其在有很多内容的页面上。
废话最后再说，直接给出代码先：
JavaScript
阅读全文 - 610 字

由于更换了新的主题，页面正文的宽度从 540px 缩到了 520px，导致原先一些日志中宽度大于 520px 的图片会把页面撑破，侧边栏掉到正文底下去，页面布局乱得不堪入目。因此，需要让这些超过限制宽度的图片自动缩小以适应当前页面，我摸索了一些方法，写出来抛抛砖。
Firefox 的解决办法
只需要修改 CSS 样式表的一行代码，给正文中的 img 加上 max-width 属性：
阅读全文 - 798 字

从这一期的CSS扫盲教程开始，我将陆续发表一些有趣的CSS应用实例——学习基础知识实在无聊。今天的内容是如何利用CSS制作漂亮的双引号引用标志。看下面的示例：

使用漂亮的双引号把引用内容放进来！
阅读全文 - 1030 字

由于对W3C标准支持程度的不同，往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭。以目前市场占有率最高的两个浏览器Microsoft Internet Explorer和Mozilla Firefox为例，前者对标准的支持明显不如后者，网页设计人员不得不花费大量的时间和精力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛苦的事情，顾此失彼的情况时有发生。但放弃任何一方的用户都是不明智的，以北极冰仔部落格来说，使用IE的访问者占所有访问者的49.57%，使用Firefox的访问者占46.78%，放弃一边就等于放弃掉了一半的访问者。
所以，使用简单的方法以保证网页显示的一致性最重要。
阅读全文 - 718 字

Jinwen在《为header的背景图片添加链接》一文中提到，要为header的背景图片（一般来说是给logo图片）加上链接，可以在定义有背景图片的div外面加上a属性：

阅读全文 - 852 字

距上一期的《CSS扫盲(三): 怎样插入一个样式表》又是一个月了, 今天我们讨论的是CSS中的背景: background.

设置网页元素的背景色
阅读全文 - 936 字

经常来看 catch the digital flow 的朋友一定发现了, 原先侧边栏上长长的blogroll列表不见了, 取而代之的是一个可以点击折叠/展开的动态列表. 整个侧边栏都因此一下子变得简洁不少.
如果你也想把网页上某些元素折叠起来, 那就继续往下读吧!
此次借助的是一个叫domCollapse的工具包, 它的特点是可以非常简单地实现网页上任意元素的折叠, 而不需要了解JavaScript, 只要在HTML中添加class selector配合CSS就可以实现. (class selector是什么? 参考CSS扫盲(二): syntax)
阅读全文 - 995 字

转载请注明本文地址：
http://hellobmw.com/archives/css-how-to-insert-a-style-sheet.html
怎样插入一个样式表
阅读全文 - 1438 字

距CSS扫盲(一): Padding半个月后, CSS扫盲(二): Syntax跟大家见面了.
这次的扫盲课程更加基础, 主要内容是CSS的语法构成. 废话不说, 马上开始吧!
一. 简单语法
阅读全文 - 1415 字