I Sparkle

Sparkle my ideas

CSS 字体样式缩写测试

关注字体样式很久了,却没有专门去研究,今天不是太忙,就整理一下试试。

我之前一般会把这些样式独立来写,但是用的最多的也不外乎font-size, font-weight, line-height, text-decoration, text-indent等。

经过试验发现,这个缩写是有一定的顺序的:

font:font-style font-weight font-size/line-height font-family

比如,我常用的是font:700 14px Arial

【翻译】CSS Frameworks Collection(css框架收集)

什么是css框架

事实上让我们开始于什么是框架?

框架就是一个你可以用于你的网站项目的基本的概念上的结构体。

css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

查看全文 »

美丽网格

其实我最初接触网格还是在读大学的时候,而当时接触的网格也不过是网格计算,当时为了做毕业设计,看过一些这方面的文章,但显然没有深入了解,到现在我还觉得,网格计算和现在很热门的云计算有某些相似之处。

但今天我想说的是网页设计中的网格——Grid。

查看全文 »

css sprites的真谛

这篇文章的题目是css sprites的真谛,但是我承认,“真谛”这个词语,是为了吸引人的。不过从内容上来说,我认为,这篇文章可以说的上能够描述它的本质的。

事实上,CSS Sprites并不是什么高深的技术,它最多只能称得上技巧。 查看全文 »

6月的任务

很久以前就计划要研究一下CSS GRID(网格)技术的,但是一直太忙,没有时间去看,最近好了,稍微轻松了一点点。可以抽出时间来学习了。

虽然6月份快要过去一半了,但是这件事情不能再往后拖了。

这个月要研究一下当前主流的css框架,特别是GRID模型,尽量在月底之前自己开发出一个CSS Framework。

显然,如果不懂得CSS GRID技术,不算是CSS高手的。

加油!

DIV+CSS?不要再忽悠人了

在大约两年前,DIV+CSS是一对很诱人的组合,会用div+css制作网页的人,也常常会被人赞以大拇指的,记得06年初的时候,我用div+css布局的一个网站还拿了学校网页设计比赛的一个奖。

尽管现在很多的人提到div+css,还会双眼放光,但是我会对他摇头了,相信会有很多人对这对组合摇头的:div+css不是一切。

CSS的要义是,各个标签要各尽所用。

查看全文 »

CSS Sprite的优点

考虑写这篇文章是因为看到了FVzone的WP皮肤 dark-final :http://www.fvzone.com/blog/dark-final-to-wordpress.fv

这款皮肤很棒的,非常喜欢。

但是发现作者处理icon的方法有些原始:把那些小图标放到一个文件夹里,然后不同的class调用不同的ico图片。

如果用css spirit就可以省很多事情。

css spirit 的本质是通过定位调用某个图片的相应位置,也就是background:url(../images/icon2.png) mpx npx no-repet;m和n是相应的坐标。这样的话就可以把很多的小ico全部放到一个图片里面,这样有以下好处:

1、减少图片文件大小,经过测试,将多张图片集合可以将图片的总大小缩小好几倍。

2、减少数据请求,原来每加载一张小图,就会有一次数据请求,但是用了CSS spirit 使用该图片的所有class 只需要一次请求就够了

3、其它好处,比如减小CSS代码量,样式更容易管理等。

但是请注意,不要将repeat的图片和no-repeat的图片放到一起来,虽然这样基本不会有什么问题,但是目前来说,如果这样做的话,在Iphone中浏览页面会出现北京图片溢出的情况。

第2页/共 2页12