我爱水煮鱼» CSS

HTML5 和 CSS3 书籍推荐

Denis — Mon, 14 May 2012 17:01:59 +0000

HTML5 和 CSS3 是下一代 Web 开发标准，无论是针对内容结构还是媒体，HTML5 都引进了各种新元素。今天大多数的现代浏览器的都已经支持 HTML5 和 CSS3，学习体验 HTML5 和 CSS3 给 Web 开发的便捷、快速和强大功能是每一位 Web 设计和开发人员的当务之急。

现在网上已经有很多关于 HTML5 和 CSS3 的网站，包括介绍、教程以及使用技巧等等。市面上也开始有一些好的书籍，集中介绍了 HTML5 和 CSS3 特性，结合自己的学习经验，就给大家推荐下面这几本 HTML5 和 CSS3 学习的书籍。

《HTML5揭秘》

《HTML5揭秘》，推荐指数：★★★★★

在卓越购买 | 在当当购买 | 在京东购买

经常购买计算书的同学都知道，O’Reilly 出版书籍必属精品，而《HTML5揭秘》这本书又是 O’Reilly 和 Google 联合出版的书，绝对是学习 HTML5 技术的首选书籍。《HTML5揭秘》以诙谐的文字结合生动的实例介绍HTML5特性的同时，还深入剖析其内部原理。让读者不仅知其然，而且知其所以然。所以无论是刚接触Web前端技术的新人，还是经验丰富的老手，只要是HTML5技术爱好者，都会从《HTML5揭秘》中受益。

《HTML5高级程序设计》

《HTML5高级程序设计》，推荐指数：★★★★

在卓越购买 | 在当当购买 | 在京东购买

《HTML5高级程序设计》这本书是由旧金山 HTML5 用户组创建人联合另两位资深 Web 开发专家共同打造，为读者清晰解读了 HTML5 规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、WebStorage、Carlvas 及音频视频等前所未有的新特性构建先进的 Web 应用。并以大量的示例涵盖全部 HTML5 APl。这本书基本上让你了解了所有和 HTML5 相关的知识点。此外，还介绍了当今浏览器对HTML5特性的支持情况，以及探索了离线Web应用并展望了HTML5未来的发展前景。

《CSS3实用指南》

《CSS3实用指南》，推荐指数：★★★★

在卓越购买 | 在当当购买 | 在京东购买

想用纯 CSS3 代码写出很炫的网页吗？这个书会教你用很简单的代码就能实现。《CSS3实用指南》是一本传播很广的关于CSS3应用方面的图书。它介绍了如何应用CSS3才能比传统方法更加高效、灵活地实现一些常见而优美的网页设计效果。这本除了通过实例讲解CSS3应用的前沿技巧之外，还还整理了每一项 CSS3 属性、选择器和值的使用方法，你完全可以当做一份 CSS3 字典来使用。

《HTML5和CSS3实例教程》

《HTML5和CSS3实例教程》，推荐指数：★★★★

在卓越购买 | 在当当购买 | 在京东购买

这是我唯一推荐的一本同时介绍 HTML5 和 CSS3 的书，《HTML5和CSS3实例教程》这本书共分3部分，集中讨论了HTML5和CSS3规范及其技术的使用方法。首先是规范概述，介绍了新的结构化标签、表单域及其功能（包括自动聚焦功能和占位文本）和CSS3的新选择器。接下来是HTML对视频和音频的支持，讲述了画布上的图形绘制及CSS阴影、渐变和变换的使用方法。最后介绍使用HTML5的客户端特性（包括WebStorage、WebSQLDatabases以及离线支持）建立客户端应用，使用HTML5实现跨域消息和数据传送，以及操作浏览器历史等的方法。

《HTML5 Canvas基础教程》

《HTML5 Canvas基础教程》，推荐指数：★★★★★

在卓越购买 | 在当当购买 | 在京东购买

使用 HTML5 做游戏已经成为了潮流，国内外都已经有专门使用 HTML5 制作游戏的公司，所以学好 HTML5 做游戏也是一个不错的选择。《HTML5 Canvas基础教程》这本书通过带领你动手开发“太空保龄球”和“躲避小行星”这两款小游戏，让读者掌握开发游戏的基本流程，学会响应用户操作、创造虚拟环境、循环利用对象、设计计分系统等游戏开发必备的知识。

HTML5 和 CSS3 开发书籍总结

今天，大多数是现代浏览器的都已经支持 HTML5 和 CSS3。学习体验 HTML5 和 CSS3 带给 Web 开发的便捷、快速和强大功能，是每一位 Web 设计和开发人员的当务之急。并且随着 iOS 设备和其他移动设备使用得越来越广泛，Flash 等技术慢慢过时，所以学习 HTML5 和 CSS3 也成为程序员的必修课程，所以一开始一开始选择选择适合自己的学习工具书是不可少的，可以让你事半功倍，而对于已有 Web 开发敬仰的程序员来说，选择对自己现有知识体系有个很好梳理的书可能让你变得更加强大。

>>>继续阅读全文 ...

好书推荐

Bear CSS：基于 HTML 文件快速创建基本的 CSS 样式

Denis — Fri, 24 Feb 2012 14:03:33 +0000

当你创建一个网页的时候，一般会先创建 HTML 文件，然后在写 CSS 样式，当然也可以一边写 HTML 结构，一遍写样式。如果你是采用第一种方法，那么你在写 CSS 样式的时候，会很烦，因为要复制粘贴 class 和 id 名，其实可以通过 Bear CSS 这个服务，基于现有的 HTML 创建基本的 CSS 样式：

Bear CSS 就是一个这样的网页服务，基于现有的 HTML 文件，生成一个含有所有元素，id，class 的 CSS 样式文件。Bear CSS 使用也非常简单，上传你的 HTML 文件，Bear CSS 就会根据你的 HTML 文件，生成对应的 CSS 文件，然后你下载就好了。

在给非常长的 HTML 文件进行样式化的时候，这个应用是非常实用的，唯一的缺点就是在生成 CSS 文件的时候无法自己定义包含哪些 id 或者 class，生成的 CSS 文件有点冗余。

Bear CSS：http://bearcss.com/

>>>继续阅读全文 ...

CSS Prism：CSS 颜色查看器

Denis — Wed, 15 Feb 2012 06:23:23 +0000

颜色是网页设计中非常重要的一部分，如果一个网站中使用了太多了颜色显然是不太好的，那么如何检查网页的 CSS 文件中使用了几种颜色，显然不能一行一行查看 CSS 代码，我们需要一个自动化工具，CSS Prism 就是这方面最好的自动化工具。

CSS Prism 是一个 CSS 颜色查看在线服务，你只需按输入任何 CSS 文件，他就会扫描 CSS 文件中所有的 16 进制颜色代码并显示他们，然后你可以通过一个类似于 Photoshop 颜色选择器（使用 jQuery 的 color picker 插件）让你编辑不需要的颜色。

CSS Prism：CSS 颜色查看器

CSS Prism 是基于 Django 创建的的，并采用 jQuery 及其 color picker 插件，其详细功能有：

可以查看 CSS 文件中所有 16 进制颜色。
可以定位所有颜色在 CSS 中的位置。
可以在线编辑颜色，并且通过白色调和暗色调两种方式查看颜色。

CSS Prism 还提供一个 Bookmarklet： CSS Prism，通过它，你就可以查看任何网页使用的所有颜色了。

CSS Prism 是我最近使用比较多的服务，我用它来查看博客中 CSS 的所有的颜色，然后通过查看去掉比不要的颜色，使得博客中的颜色尽可能的少。如果你想对你博客中的颜色调整下，那么个人推荐你使用 CSS Prism 这个服务。

>>>继续阅读全文 ...

IE9 下如何实现 CSS3 圆角

Denis — Thu, 16 Sep 2010 07:07:08 +0000

微软最新发布的 IE9 浏览器也支持 CSS 圆角，IE 9 没有使用私有属性，直接使用 border-radius 定义圆角，border-radius 是定义四个角都是圆角，如果要具体的一个角，可以使用下面四个属性：

border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius

如果你正在使用 IE9，可以看到我的侧边栏标题已经是圆角了。另外点击这里查看 Firefox, Safari, 以及 Chrome 浏览器使用 CSS3 实现圆角效果。

>>>继续阅读全文 ...

使用 CSS3 实现圆角效果

Denis — Thu, 16 Sep 2010 07:05:00 +0000

我爱水煮鱼博客上使用的图片比较多，虽然我采用了服务器缓存，gzip 压缩以及对 CSS 和图片文件设置了一个比较合理的过期时间，但是还是比较慢。所以减少图片的使用还是速度加快的王道，所以我今天学习了下使用 CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。

W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari 也通过私有属性实现了该功能：

代码非常简单：

Firefox 和 Safari 实现圆角

效果如下：

Firefox 和 Safari 使用私有属性实现圆角效果

其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius 是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性，如果你只要指定某一个角是圆角的话，它们都分别定义了四个属性：

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

当然 IE9 以下版本还是不支持，所以该效果只能在 IE9, Firefox, Safari, 以及 Chrome 中查看。

最新的 IE9 已经支持 CSS3 圆角。

>>>继续阅读全文 ...

#grid：网页网格布局工具

Denis — Fri, 16 Jul 2010 19:36:23 +0000

如果你开始使用网格来进行网页设计，那么 #grid 是你必不可少的一个工具，#grid 是一个使用 jQuery 和 CSS 构建的小工具，它会在网页上插入布局网格线，让你能够检测和调整页面上元素位置。

#grid 适应所有宽度的页面，可以调整任意的高度布局（默认为 20px），可以实时隐藏和打开网格线，#grid 使用非常简单，一个 Javascript 文件，简单的几行 CSS 代码，和一个用于垂直网格的图片。

#grid 使用

#grid 使用非常简单，在你的页面上插入所需的 Javascript 和 CSS代码之后，只需按下 G 就会显示网格线，松开网格线消失，G + H 就会一直显示网格线，松开也不会消失，如果没有显示网格线，可以按下 G+F 把网格线调到前面。#grid：网页网格布局工具这篇日志已经启用了，你可以按下这些快捷键来测试下效果。

安装 #grid

下载 hashgrid.js 脚本，并且上传到服务器中。

然后在网页中添加如下 JavaScript 代码：

<!-- Grab latest version of jQuery -->
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<!-- Include the hashgrid script -->
<script type="text/javascript" src="hashgrid.js"></script>

然后在网页中添加如下 CSS 代码：

/**
 * Grid
 */
#grid{

    /* Vertical grid lines */
    background: url(bg-grid-980.gif) repeat-y 0 0;

    /* Dimensions - same width as your grid with gutters */
    width: 980px;

    /* Grid (left-aligned)
    position: absolute;
    top: 0;
    left: 0;
    */

    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -490px;

}

/**
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding
 */
#grid .horiz{

    /* 20px line height */
    height: 19px;
    border-bottom: 1px dotted #aaa;
    margin: 0;
    padding: 0;

}

#grid 可以支持各种网格系统的，目前默认提供 980 宽的布局（940 内容区，两边 20 边界），如果使用别的网格模式，需要调整下CSS 和制作一张新的用于垂直网格布局的图片。

下载：#grid
演示：#grid：网页网格布局工具

>>>继续阅读全文 ...

最佳 CSS 书籍推荐

Denis — Sun, 24 Jan 2010 09:20:34 +0000

最近利用 WordPress 给朋友创建一个工作室网站，朋友的设计图做得非常棒，在将其 PSD 转换成 XHTML+CSS 的时候，由于其工作室访问用户的还有相当大的比例用户使用 IE 6，所以在对兼容 IE 6 方面确实花了不少心机，不过这些问题大部分都是 mg12 帮忙解决的。

说到 CSS Hack 我想起了截至目前为止个人认为最好的一本 CSS 书：CSS Mastery – Advanced Web Standards Solutions. 中文版翻译的名字叫做精通CSS：高级Web标准解决方案。

在当当购买 | 在卓越购买

该书的官方介绍为：

本书将最有用的CSS技术汇总在一起，在介绍基本的 CSS 概念和最佳实践之后，讨论了核心的 CSS 技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯 CSS 布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复，最后由 Simon Collison 和 Cameron Moll 两位杰出的 CSS 设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补 CSS 知识不可或缺的参考书。

本书适合具有 (X)HTML 和 CSS 基本知识的任何网页设计人员阅读。

我在阅读该书的时候，觉得我个人最有用的两点是：

1. 介绍了 IE6/Win 在怪异模式下使用的非标准的 Box 模型，和对这一问题的解决方法。这一个介绍对 IE 6 在 CSS 下为什么老是出问题和解决方法都有很好的理解。

2. 各种浏览器 Bug 的修复，当然主要是 IE 6，这方面介绍得非常详细，几乎包含了当前所有的 CSS Hack 问题。如 IE 6 的双空白浮动 bug，3像素文本偏移 bug 等，IE 6 重复字符 bug 等。对解决问题很有帮助。

>>>继续阅读全文 ...

好书推荐

Float 和 List Style Image 的 CSS 问题

Denis — Fri, 07 Aug 2009 13:10:20 +0000

今天把主题修改了下，主要就是把 head 图片换张新的，原来的猪好久了，没有鲜新感了，不好看了，换头新的猪，哈哈。然后把侧边栏加大一点，为什么这么干？这样可以多放点广告，给晨晨多赚钱奶粉钱，虽然现在还没有人找我投放广告，但是我相信会有的，哈哈！

在把侧边栏加宽的之后，发现侧边栏的分类和友情链接列表太窄了，非常不协调，于是乎就把它改成两栏，代码如下：

#subcontent ul.categories li{
    list-style-image:url(images/categories.gif);
    width:100px;
    float:left;
    margin:2px 0 2px 18px;
}

但是发现在 IE7 中，List-type-image 的图片不会显示出来，于是 Google 之，发现在 IE 中，float 和list-style-image 不兼容，建议使用 background-image 来代替，修改之后的代码如下：

#subcontent ul.categories li{
    background:url(images/categories.gif.gif) no-repeat center left;
    list-style:none;
    width:100px;
    float:left;
    margin:2px 0 2px 0;
    padding-left:18px;
}

>>>继续阅读全文 ...

BlueTrip：含有全部功能的 CSS Framework

Denis — Sat, 27 Jun 2009 19:16:58 +0000

前面介绍了只有 1KB 的轻量级 CSS 框架：1KB CSS Grid，今天介绍一个含有全部功能的 CSS 框架：BlueTrip。

由 Blueprint 和 Tripoli 的最好的地方组成（名字也是截自 Blueprint 和 Tripoli）。
还包含 Hartija 的打印样式。
还有960.gs 的简单性
以及Elements 的图标。

BlueTrip：含有全部功能的 CSS Framework

所以基本上 BlueTrip 包含其他 CSS 框架的优点，使用它可以让你事半功倍，跳过过去繁重的工作，BlueTrip 的详细功能有：

24 列网格
明智的版式风格
整洁的代码
含有打印样式
一个空的简化版样式
性感按钮
状态信息样式

下载：BlueTrip，这里有 BlueTrip 的详细文档和演示。

>>>继续阅读全文 ...

轻量级的 CSS 网格系统：1KB CSS Grid

Denis — Sun, 21 Jun 2009 18:18:58 +0000

CSS 框架逐渐变得流行，其中的一些，如 BluePrints, YUI, YAML 等想去实现所有的东西，如网格系统，样式重置，基本板式，表单样式，其他的仅仅关注网格，但是还是显得臃肿，最后加上复杂性，这样只会使学习曲线变得陡峭，和增加开发时间，以及无穷的调试。

所以如果你仅仅需要一个轻量级的 CSS 网格系统，来构建你网站的主框架，那么你可以尝试下 1Kb CSS Grid。

轻量级的 CSS 网格系统：1KB CSS Grid

1KB CSS Grid 网站上提供了一个生成器用来定制 CSS 网格，并且可以直接下载定制好的 CSS 网格。

另外 Usability Post 这个博客上面还有3篇关于 1KB CSS 网格非常详细介绍：

Via WebresourcesDepot

>>>继续阅读全文 ...

PureCSS Theme

Denis — Fri, 05 Jun 2009 18:45:23 +0000

这是一个纯 CSS 打造的一个主题，没有一张图片。由 WordPress 主题设计爱好者非著名设计师 Leslie 设计，Yixia 编码，本人负责发布。

该主题兼容最新版本的 WordPress，支持 Widget，通过 CSS 和 XHTML 验证，在 IE6 / 7，FF2 / 3 等浏览器表现一致，不需要任何插件支持。

预览 | 下载

PS，我的英文博客 newfish 也用这个主题。

>>>继续阅读全文 ...

使用 Styleneat 重新组织 CSS

Denis — Fri, 27 Mar 2009 17:24:57 +0000

Styleneat 是一个能够帮你重新组织你 CSS 属性的免费服务。

Styleneat 能够把 CSS 的选择器（selectors），子选择器（ sub-selectors）和属性（properties）按照层式结构化重新组织，这样使得程序员更加容易去定义页面区域和查看它们之间的关系。

Styleneat

比如它会把下面这段 CSS 代码

id1 { width: 100px; }
id1 .class1 { background: #000; }
id1 .class1 a { text-decoration: none; color: #fff; }
id1 .class1 a span { text-indent: 10px; }
id2 { width: 200px; }

重新组织成：

id1 { width: 100px; }
    id1 .class1 { background: #000; }
        id1 .class1 a { color: #fff; text-decoration: none; }
            id1 .class1 a span { text-indent: 10px; }
 
id2 { width: 200px; }

Styleneat 提供三种使用方式：

直接粘贴 CSS 代码。
上传一个 CSS 文件。
提供 CSS 文件的 URL 地址。

另外 Styleneat 还提供一些选项，如按照 CSS 选择的字母顺序排列，单行格式或者多行格式等。Styleneat 在 CSS 优化方面还是提供了比较多的帮助。

>>>继续阅读全文 ...

更新 PureCSS 主题到 2.7

Denis — Sun, 28 Dec 2008 07:43:33 +0000

Leslie 设计的纯 CSS 的 WordPress 主题 PureCSS 更新到 2.7。

本次修改主要是在 PureCSS 主题上实现 WordPress 2.7 的 Thread Comments。由于我修改的时候没有兼容旧版本的 WordPress，所以现在该主题只适合最新的 WordPress 2.7。另外支持 Widget，通过 CSS 和 XHTML 验证，在 IE6 / 7，FF2 / 3 等浏览器表现一致，不需要任何插件支持。

预览 | 下载

>>>继续阅读全文 ...

把 WordPress 作为 CSS Gallery

Denis — Sat, 15 Dec 2007 18:45:39 +0000

虽然用 CSS Gallery 展示一些优秀设计已经不是什么新事物了，但是使用 WordPress 去驱动 CSS gallery 正成为潮流。用很多 WordPress 驱动的 CSS Grallery 中的一个，CSSRemix.com 来举个例子。如果要完全克隆 CSSRemix 的所有功能是一件很消耗时间的工具，但是去模仿基本的结构还是不太难的。

第一，你需要知道怎么使用自定义字段 (custom fields)。
第二，下载 Lester Chan 的 WP-PostRatings 插件，安装并集成它。这个插件不是必需的，但是人们喜欢对东西进行评定，那就用这个插件让他们评定吧。
第三，决定给每个精选的网站使用多少个自定义字段，包括健 (key) 和值 (values)。举个例子：url (key) = http://www.wpdesigner.com (value)，url_img (key) = wpdesigner_screenshot.png (value)。给每个站点的自定义字段健和值的数量越多，你就会为自己准备的工作量越多。

这里是一个如何实现上面说明的例子：

php the_title(); ?>
<a href="value of url"><img src="value of url_img" alt="" />a>

当你建立所有的东西之后，外包索引成千上万个优秀设计网站的工作。这样你就完成了一个 CSS 驱动的 CSS Gallery。

翻译自：Using WordPress as a CSS gallery

>>>继续阅读全文 ...

我爱水煮鱼» CSS

HTML5 和 CSS3 书籍推荐

《HTML5揭秘》

《HTML5高级程序设计》

《CSS3实用指南》

《HTML5和CSS3实例教程》

《HTML5 Canvas基础教程》

HTML5 和 CSS3 开发书籍总结

好书推荐

Bear CSS：基于 HTML 文件快速创建基本的 CSS 样式

CSS Prism：CSS 颜色查看器

IE9 下如何实现 CSS3 圆角

相关日志

使用 CSS3 实现圆角效果

#grid：网页网格布局工具

#grid 使用

安装 #grid

相关日志

最佳 CSS 书籍推荐

好书推荐

Float 和 List Style Image 的 CSS 问题

相关日志

BlueTrip：含有全部功能的 CSS Framework

轻量级的 CSS 网格系统：1KB CSS Grid

PureCSS Theme

相关日志

使用 Styleneat 重新组织 CSS

更新 PureCSS 主题到 2.7

相关日志

把 WordPress 作为 CSS Gallery

相关日志