Name: 精通CSS（第2版）
ISBN: 9787115226730

作者: [英] Andy Budd / [英] Simon Collison / [英] Cameron Moll
出版社: 人民邮电出版社
副标题: 高级Web标准解决方案
原作名: CSS Mastery: Advanced Web Standards Solutions
译者: 陈剑瓯
出版年: 2010-5
页数: 266
定价: 49.00元
装帧: 平装
ISBN: 9787115226730

豆瓣评分

8.7

681人评价

5星

44.3%
4星

39.8%
3星

14.1%
2星

0.9%
1星

0.9%

评价:

内容简介 · · · · · ·

本书汇集了最有用的CSS技术，介绍了CSS的基本概念和最佳实践，结合实例探讨了图像、链接和列表的操纵，还有表单设计、数据表格设计、纯CSS布局等核心CSS技术。此外，书中着眼于创建跨浏览器的技术，讨论了bug及其捕捉和修复技术，还将所有技术组合成两个精彩的实例，讲述这些技术的工作原理和实际用法。本书适合具有HTML和CSS基础知识的读者阅读。

作者简介 · · · · · ·

Andy Budd 国际顶尖的网页设计师，著名的Web标准倡导者，网页咨询公司Clearleft的创始人之一。曾组织过英国首届Web 2.0会议，经常在Web Directions、An Event Apart、SXSW等国际会议上发表演讲，参与一些国际设计奖项的评选，他还是.NET Magazine的咨询委员会成员。

Cameron Moll 设计过大量优秀网站，常在有关用户界面设计的各种国内和国际会议上发言。其作品和理念曾被HOW期刊、Print杂志、Communication Arts杂志以及美国国家公共电台等知名媒体引用和推荐。他创办了Authentic Jobs公司。

Simon Collison创办了著名的Erskine Design公司，拥有八支卓越而富创造力的Web设计团队。曾任Agenzia的首席设计师，为许多全球知名的唱片公司...

(展开全部)

目录 · · · · · ·

第1章基础知识
1.1 设计代码的结构
1.1.1 标记简史
1.1.2 文档类型、DOCTYPE切换和浏览器模式
1.1.3 有效性验证
1.2 小结
· · · · · · (更多)

豆瓣成员常用的标签(共127个) · · · · · ·

css 前端开发 CSS Web开发前端网页设计 web Web标准

喜欢读"精通CSS（第2版）"的人也喜欢的电子书 · · · · · ·

支持 Web、iPhone、iPad、Android 阅读器

: 编写高质量代码

6.00元

: 你不知道的JavaScript（上卷）

24.99元

: jQuery基础教程（第3版）

25.00元

: JavaScript语言精粹

24.01元

: CoffeeScript小书

1.99元

喜欢读"精通CSS（第2版）"的人也喜欢 · · · · · ·

: JavaScript DOM编程艺术（第2版）

: JavaScript高级程序设计（第3版）

: CSS权威指南（第三版）

: 编写可维护的JavaScript

: JavaScript语言精粹

: JavaScript模式

: JavaScript高级程序设计:第2版

: 高性能JavaScript

: 锋利的jQuery

: JavaScript权威指南(第6版)

我来说两句

短评 · · · · · · ( 全部 230 条 )

精通CSS（第2版）的话题 · · · · · · ( 全部条 )

什么是话题

无论是一部作品、一个人，还是一件事，都往往可以衍生出许多不同的话题。将这些话题细分出来，分别进行讨论，会有更多收获。

我要写书评

精通CSS（第2版）的书评 · · · · · · ( 全部 59 条 )

汇总一下这本中译本的评价

china-pub上的：我想杀死这个翻译又糟蹋了一本好书 Chapter 8: Hacks and Filters 第八章招数和过滤器 9.1 Bug Hunting bug捕捉 Controlling content area with descendant selectors 用后代选择器控制控制内容区域 Fuax colmns Fuax列 Fixed-width, liquid, and elas... (展开)

2 11回应

[已注销] 2006-11-18 00:36:26 人民邮电出版社2006版

为什么不推荐——Re:人民邮电出版社编辑来信

仅从应用的角度而言，《精通CSS》是一本非常的“好用”的书。同时也是一本非常“不好读”的书——从翻译角度看，本书最大的问题是语言逻辑混乱以及自创的专业词汇。就后者来说，专业词汇可以从很多地方获得，像是蓝色理想之类专业社区，或参考一些台湾版的相关书籍——甚至... (展开)

5 13回应

刘江 2006-11-16 23:26:08 人民邮电出版社2006版

也有不少好的评价嘛。

我觉得大家应该向出版社多提一些建设性意见，促使他们在重印时改进。 ---------- 　　今天刚收到该书，粗略的看了下，感觉不错，纸张比《框架设计（第二版）CLR via C#》一书的纸张要好。排版也错落有致，看起来不会吃力。至于翻译方面，也还可以，没有什么很晦涩的句子（可能... (展开)

3 2回应

砖头 2013-04-01 12:34:10 Apress2009版

适合对CSS刚刚入门的读者

我是在看完《Head First HTML & CSS》之后继续看这本《CSS Mastery》的，感觉对新手学习CSS来说，这样的搭配算是比较合适 HF的特点是讲的很细，完全从0开始手把手教，包括如何搭建环境，如何开始写代码等背景知识，所以对于没有任何基础的人来说，HF是最佳入门书这本书在编... (展开)

2回应

Tony Yet 2007-08-03 16:52:53 friends of ED2006版

一本深入浅出的好书

本书由资深网站设计师Andy Budd撰写，正如作者在引言中所言： “CSS Mastery is aimed at anybody with a basic knowledge of (X)HTML and CSS. If you have just recently dipped your toes into the world of CSS design, or if you’ve been developing pure CSS sites for... (展开)

1 0回应

快乐的小套套 2008-06-26 13:32:05 人民邮电出版社2006版

从这本书踏入互联网的。

记得两年前的这个时候，大概06年中旬，离开校园开始工作，div+css学习的时候买的这本书，本来很薄的一本书，可是却看了半年的时间，原因主要有两个方面，第一，给一个连html都不知道是什么的人讲css，时间长一些很正常。第二，糟糕的翻译，本来css就是面向接触互联网不久的人... (展开)

1回应

风中的猪儿 2007-02-02 13:51:08 人民邮电出版社2006版

没必要死抠翻细节

看了好多人的评价都是死抠翻译术语有问题...我是觉得没有太大问题,我对翻译要求也不高...... 但是重要的是里面介绍了很多效果和方法,你觉得中文看着累,你可以看代码啊,代码不存在翻译问题吧. (展开)

0回应

西山 2012-09-02 14:22:01 人民邮电出版社2006版

实践性较强

只是略读，细节了解的不多，但是能够掌握全局就行 - 感觉css最主要的就是两点，一是selector，以及各种style是如何cascade的；二就是布局，box model+position+floating。这本书还有对background, links, list, form, table这些比较重要元素的的详细介绍，还带有两个case study... (展开)

0回应

Andy 2006-09-09 22:47:09 friends of ED2006版

css入门

是一本很好的css入门书，虽然是英文版的，但是里面的内容描述得很简单易懂，英文也用了很简单易懂的单词，有一定英文基础的人都可以读得懂。 (展开)

1 1回应

涅瓦纳 2012-09-18 09:57:13 Apress2009版

CSS Mastery

Building on what made the first edition a bestseller, CSS Mastery: Advanced Web Standards Solutions, Second Edition unites the disparate information on CSS-based design spread throughout the internet into one definitive, modern guide. Revised to cover CSS3,... (展开)

0回应

> 更多书评59篇

读书笔记 · · · · · · (共67篇)

我来写笔记

按有用程度
按页码先后
最新笔记

展开收起
第1页

偏爱 (be true to yourself and relex)

两个好玩的称呼： “标签汤”（html标签没有语义化的使用，而是乱用一通） “多类症”（几乎每个元素都加了一个类） —————— 怎样为元素命名：尽可能保持名称与表现方式无关。应该根据“它们是什么”来为元素命名，而不该根据“它们的外观如何”。比如通知消息是红色的，应该命名为“.notification”而不是“.red”。 —————— 用id还是class：只有在绝对确定这个元素只会出现一次的时候才用id。 ———...
2016-07-19 21:03 2人喜欢

两个好玩的称呼：
“标签汤”（html标签没有语义化的使用，而是乱用一通）
“多类症”（几乎每个元素都加了一个类）
——————
怎样为元素命名：
尽可能保持名称与表现方式无关。应该根据“它们是什么”来为元素命名，而不该根据“它们的外观如何”。比如通知消息是红色的，应该命名为“.notification”而不是“.red”。
——————
用id还是class：
只有在绝对确定这个元素只会出现一次的时候才用id。
——————
怎样避免”多类症“：
只要发现类名中出现了重复的单词，比如news-head和news-link，就该考虑是否可以用news放在他们的父元素上，然后用层叠来识别具体的head和link。

推荐

回应 2016-07-19 21:03
展开收起
第153页

偏爱 (be true to yourself and relex)

在醒目的位置记下常用的颜色值。 —————— 避免图像被拉伸失真的方法：若想要一个图像（原始宽度200px）占据整个框宽度的25%可以这样设置： img{width:25%;max-width:200px;} 这样图像的width超过了200px，就会被强制设置为实际宽度200px，不会被拉伸。 —————— 高度相等的列：3个 box <div class="wapper"> <div class="box"></div> <div class="box"&...
2016-08-03 18:18 1人喜欢

在醒目的位置记下常用的颜色值。
——————
避免图像被拉伸失真的方法：若想要一个图像（原始宽度200px）占据整个框宽度的25%可以这样设置：
img{width:25%;max-width:200px;}
这样图像的width超过了200px，就会被强制设置为实际宽度200px，不会被拉伸。
——————
高度相等的列：3个 box
<div class="wapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
主要思路：给三个box设置大的padding-bottom，再设置数值相似的负的margin-bottom抵消掉，最后给wrapper设置overflow:hidden;
eg:
padding-bottom:500px;
margin-bottom:-500px;
——————
CSS框架还不如表格哈哈哈哈

推荐

回应 2016-08-03 18:18
展开收起
第70页

苏不西 (everything from everywhere)

css要做出圆角和阴影图像还需要用photoshop先提供背景图像，这，好吧，还好第二版有介绍css3…… 嗯，松了一口气的感觉…… 然后，有一种以管窥见了豹的进化的感觉…… (2回应)
2012-08-21 13:40

css要做出圆角和阴影图像还需要用photoshop先提供背景图像，这，好吧，还好第二版有介绍css3……
嗯，松了一口气的感觉……
然后，有一种以管窥见了豹的进化的感觉……

推荐

2回应 2012-08-21 13:40
展开收起
第183页
偏爱 (be true to yourself and relex)
拥有布局hasLayout：这个概念是Windows上的IE特有的。那些“拥有布局”的元素负责本身及其子元素的尺寸设置和定位。 —————— 默认情况下拥有布局的元素有： html table tr/td img hr input/select/textarea/button iframe/embed/object/applet marquee 可以使用hasLayout函数查看一个元素是否拥有布局。 —————— 设置以下CSS属性会自动使元素拥有布局： float：left或right display：inline-block wid...
2016-08-03 19:32
拥有布局hasLayout：
这个概念是Windows上的IE特有的。那些“拥有布局”的元素负责本身及其子元素的尺寸设置和定位。
——————
默认情况下拥有布局的元素有：
html
table
tr/td
img
hr
input/select/textarea/button
iframe/embed/object/applet
marquee
可以使用hasLayout函数查看一个元素是否拥有布局。
——————
设置以下CSS属性会自动使元素拥有布局：
float：left或right
display：inline-block
width：任何值
height：任何值
zoom：任何值
writing-mode：tb-rl
在IE7中，以下属性也成了布局触发器：
overflow:hidden , scroll 或auto
min-width：任何值
max-width：除none之外的任何值
——————
布局的效果：
如果段落拥有布局，那么他就被限制为矩形，因此阻止文本围绕浮动元素。
——————
解决方法：
IE条件注释


推荐

回应 2016-08-03 19:32

展开收起
第1页

跑跑佳

共勉性质：实现同一个目标，千万种方法 && 新方法丰富的选择：生动有趣，但又无所适从从事这一行业的人，潜能无限，总能让我深受鼓舞，你肯定也不例外大家都在，不断地美化Web环境意见 & 想法 & 思想，丰富了彼此学习可以：了解-css定位模型，浮动，清理关注-css设计社区，博客，某种技术-某站点学习css，最好的一种方式，就是..
2013-08-15 00:53

共勉性质：
实现同一个目标，千万种方法 && 新方法
丰富的选择：生动有趣，但又无所适从
从事这一行业的人，潜能无限，总能让我深受鼓舞，你肯定也不例外
大家都在，不断地美化Web环境
意见 & 想法 & 思想，丰富了彼此
学习可以：
了解-css定位模型，浮动，清理
关注-css设计社区，博客，某种技术-某站点
学习css，最好的一种方式，就是：开始使用它
学习过程-看到出色的效果 -> 查看源代码 -> 大胆尝试
平时应该：
简洁、清晰；代码结构，添加注释
懂技术的工作原理 && 要会用
html和css：清晰，结构良好
WYSIWYG：所见即所得

推荐

回应 2013-08-15 00:53
展开收起
第1页

偏爱 (be true to yourself and relex)

两个好玩的称呼： “标签汤”（html标签没有语义化的使用，而是乱用一通） “多类症”（几乎每个元素都加了一个类） —————— 怎样为元素命名：尽可能保持名称与表现方式无关。应该根据“它们是什么”来为元素命名，而不该根据“它们的外观如何”。比如通知消息是红色的，应该命名为“.notification”而不是“.red”。 —————— 用id还是class：只有在绝对确定这个元素只会出现一次的时候才用id。 ———...
2016-07-19 21:03 2人喜欢

两个好玩的称呼：
“标签汤”（html标签没有语义化的使用，而是乱用一通）
“多类症”（几乎每个元素都加了一个类）
——————
怎样为元素命名：
尽可能保持名称与表现方式无关。应该根据“它们是什么”来为元素命名，而不该根据“它们的外观如何”。比如通知消息是红色的，应该命名为“.notification”而不是“.red”。
——————
用id还是class：
只有在绝对确定这个元素只会出现一次的时候才用id。
——————
怎样避免”多类症“：
只要发现类名中出现了重复的单词，比如news-head和news-link，就该考虑是否可以用news放在他们的父元素上，然后用层叠来识别具体的head和link。

推荐

回应 2016-07-19 21:03
展开收起
第6页

jiananshi

1. 为元素命名名称和表现无关，比如：红色字体的地方，用 red 作为类名，日后修改的时候如果这里变成黄色，必须修改所有类名为 red 的元素为黄色。使用 text-warning text-danger这样的类名会更好 === 评注：非常赞同这一点。实际项目我认为类名不仅应当与表现无关，还应当与行为无关。比如一个确定按钮，btn-success 就要比 btn-confirm 好很多，重用性也更高。
2014-05-26 12:47

1. 为元素命名
名称和表现无关，比如：红色字体的地方，用 red 作为类名，日后修改的时候如果这里变成黄色，必须修改所有类名为 red 的元素为黄色。使用 text-warning text-danger这样的类名会更好
===
评注：非常赞同这一点。实际项目我认为类名不仅应当与表现无关，还应当与行为无关。比如一个确定按钮，btn-success 就要比 btn-confirm 好很多，重用性也更高。

推荐

回应 2014-05-26 12:47
展开收起
第8页
jiananshi
早起的WYSIWYG编辑器也倾向于在应用样式的每个地方都添加类，许多开发人员在使用编辑器学习CSS时候继承了这个坏习惯，这种现象称为 “多类症”（classitis），在某种程度上，这和使用基于表格的布局一样糟糕，因为它在文档中添加了无意义的类。 /代码内容已省略/ == 评注：这里作者推荐用后代选择器，如：.news h2, .news p这样的写法。这里不敢苟同，我是使用BEM的，无论是从维护性和可..
2014-05-27 20:58
早起的WYSIWYG编辑器也倾向于在应用样式的每个地方都添加类，许多开发人员在使用编辑器学习CSS时候继承了这个坏习惯，这种现象称为 “多类症”（classitis），在某种程度上，这和使用基于表格的布局一样糟糕，因为它在文档中添加了无意义的类。
<h2 class="news-head">Hello World</h2> <p class="news-text"></p>
==
评注：这里作者推荐用后代选择器，如：.news h2, .news p这样的写法。这里不敢苟同，我是使用BEM的，无论是从维护性和可读性上考虑。BEM的一个规定就是：不要使用后代选择器！比如在导航栏中，我们写了一个：.nav li，那么li里面的内容都将背负继承下来的样式，而BEM中我们只需：.nav .nav-item，BEM让CSS更像是一门编程语言，命名（B）就好想是一个命名空间。（更多关于BEM可以看知乎上的回答：http://www.zhihu.com/question/21935157，我个人很喜欢 @大猫的回答）

推荐

回应 2014-05-27 20:58

展开收起
第183页
偏爱 (be true to yourself and relex)
拥有布局hasLayout：这个概念是Windows上的IE特有的。那些“拥有布局”的元素负责本身及其子元素的尺寸设置和定位。 —————— 默认情况下拥有布局的元素有： html table tr/td img hr input/select/textarea/button iframe/embed/object/applet marquee 可以使用hasLayout函数查看一个元素是否拥有布局。 —————— 设置以下CSS属性会自动使元素拥有布局： float：left或right display：inline-block wid...
2016-08-03 19:32
拥有布局hasLayout：
这个概念是Windows上的IE特有的。那些“拥有布局”的元素负责本身及其子元素的尺寸设置和定位。
——————
默认情况下拥有布局的元素有：
html
table
tr/td
img
hr
input/select/textarea/button
iframe/embed/object/applet
marquee
可以使用hasLayout函数查看一个元素是否拥有布局。
——————
设置以下CSS属性会自动使元素拥有布局：
float：left或right
display：inline-block
width：任何值
height：任何值
zoom：任何值
writing-mode：tb-rl
在IE7中，以下属性也成了布局触发器：
overflow:hidden , scroll 或auto
min-width：任何值
max-width：除none之外的任何值
——————
布局的效果：
如果段落拥有布局，那么他就被限制为矩形，因此阻止文本围绕浮动元素。
——————
解决方法：
IE条件注释


推荐

回应 2016-08-03 19:32
展开收起
第153页

偏爱 (be true to yourself and relex)

在醒目的位置记下常用的颜色值。 —————— 避免图像被拉伸失真的方法：若想要一个图像（原始宽度200px）占据整个框宽度的25%可以这样设置： img{width:25%;max-width:200px;} 这样图像的width超过了200px，就会被强制设置为实际宽度200px，不会被拉伸。 —————— 高度相等的列：3个 box <div class="wapper"> <div class="box"></div> <div class="box"&...
2016-08-03 18:18 1人喜欢

在醒目的位置记下常用的颜色值。
——————
避免图像被拉伸失真的方法：若想要一个图像（原始宽度200px）占据整个框宽度的25%可以这样设置：
img{width:25%;max-width:200px;}
这样图像的width超过了200px，就会被强制设置为实际宽度200px，不会被拉伸。
——————
高度相等的列：3个 box
<div class="wapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
主要思路：给三个box设置大的padding-bottom，再设置数值相似的负的margin-bottom抵消掉，最后给wrapper设置overflow:hidden;
eg:
padding-bottom:500px;
margin-bottom:-500px;
——————
CSS框架还不如表格哈哈哈哈

推荐

回应 2016-08-03 18:18
展开收起
第132页

偏爱 (be true to yourself and relex)

7.1.1表格特有的元素 1.summary和caption caption：表格标题 summary：表格描述 —————— 7.2.1有用的表单元素表单标签label:【label的for属性值与input的id的值是一致的】 <label for="email">email</label> <input id="email" type="text"> —————— 7.3.3表单反馈将错误信息放在label标签中
2016-08-03 18:16

7.1.1表格特有的元素
1.summary和caption
caption：表格标题
summary：表格描述
——————
7.2.1有用的表单元素
表单标签label:【label的for属性值与input的id的值是一致的】
<label for="email">email</label>
<input id="email" type="text">
——————
7.3.3表单反馈
将错误信息放在label标签中

推荐

回应 2016-08-03 18:16
展开收起
第112页

偏爱 (be true to yourself and relex)

两层导航栏：把子导航嵌套在无序列表中，把列表定位到屏幕之外，然后当鼠标悬停(hover)在父列表项上时重新定位它。子导航：{ position:absolute; left:-999em; } 父导航:hover 子导航{ left:auto; }
2016-08-02 19:12

两层导航栏：
把子导航嵌套在无序列表中，把列表定位到屏幕之外，然后当鼠标悬停(hover)在父列表项上时重新定位它。
子导航：{
position:absolute;
left:-999em;
} 父导航:hover 子导航{
left:auto;
}

推荐

回应 2016-08-02 19:12

> 更多读书笔记（共67篇）

论坛 · · · · · ·


新版本翻译的如何	来自Isabella		2014-02-23
第二版的p220实例的疑惑	来自12345678901234	1 回应	2014-02-04
南京应酷公司招募前端开发～	来自小雨滴		2012-02-15
翻译不到位	来自arthur	1 回应	2011-09-25