精通CSS（第2版） (豆瓣)

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

豆瓣评分

8.6

555人评价

5星

47.4%
4星

39.3%
3星

11.7%
2星

0.5%
1星

1.1%

评价:

内容简介 · · · · · ·

本书汇集了最有用的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 小结
· · · · · · (更多)

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

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

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

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

: 你不知道的JavaScript（上卷）

24.99元

: jQuery基础教程（第3版）

25.00元

: 编写高质量代码

25.00元

: JavaScript权威指南（第6版）

30.00元

: CoffeeScript小书

1.99元

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

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

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

: CSS权威指南（第三版）

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

: JavaScript语言精粹

: JavaScript模式

: 编写可维护的JavaScript

: 高性能JavaScript

: 锋利的jQuery

: 基于MVC的JavaScript Web富应用...

我来说两句

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

书评 · · · · · · (共59条)

我来评论这本书

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

[已注销]

仅从应用的角度而言，《精通CSS》是一本非常的“好用”的书。同时也是一本非常“不好读”的书——从翻译角度看，本书最大的问题是语言逻辑混乱以及自创的专业词汇。就后者来说，专业词汇可以从很多地方获得，像是蓝色理想............ (13回应)

2006-11-18 00:36 15/18有用来自人民邮电出版社2006版

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

大森林

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

2006-10-25 08:03 21/23有用来自人民邮电出版社2006版

好书，但不经典

Cheney (reading makes a full man)

我本身英语不好，所以没资格说翻译好坏，但是，看的不爽，好歹接触CSS两三年了，经常要卡在那上下文翻来覆去的看。就我本人的喜好来说，我最喜欢的翻译是译它2/3的文字就行了，专业术语能不翻译就不翻译，让读者自己理解。不............

2007-05-27 22:52 来自人民邮电出版社2006版

实践性较强

西山之下 (日拱一卒)

只是略读，细节了解的不多，但是能够掌握全局就行 - 感觉css最主要的就是两点，一是selector，以及各种style是如何cascade的；二就是布局，box model+position+floating。这本书还有对background, links, list, form, table这............

2012-09-02 14:22 4/4有用来自人民邮电出版社2006版

适合对CSS刚刚入门的读者

砖头

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

2013-04-01 12:34 7/7有用来自 Apress2009版

也有不少好的评价嘛。

刘江

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

2006-11-16 23:26 4/7有用来自人民邮电出版社2006版

> 更多书评(共59条)

css的书籍，这本算不错

砖块工 (休止符的艺术)

这个书以css为切入点，非常深入的讲解了编写css过程中可能出现的问题，重点讲解了一系列的css开发技巧，是前端开发人员必备的手册。　　　　同时，本书还重点讲解了web的一些标准解决方案，非常棒。讨论了核心的CSS技术，............

2015-06-09 14:44 来自人民邮电出版社2006版

Andy Budd

M21

Andy Budd国际顶尖的网页设计师，著名的Web标准倡导者。他是网页设计咨询公司Clearleft（www.clearleft.com)的创意总监,曾经组织了英国首届Web2.0会议。他在Web设计方面著述甚丰，除本书外，他还曾经撰写了一本Blog设计方面的............

2014-03-16 00:26 来自 friends of ED2006版

说实话一开始看，觉得挺乱，后来再看到后面，又觉得翻译...

说实话一开始看，觉得挺乱，后来再看到后面，又觉得翻译得还可以，就是删减了很多废话，对于节省IT人的宝贵时间还是有好处的，所以还是给个4星吧。有关专业名词，也不用太过苛求，大家明白就好。 ......

2014-02-02 17:04 来自人民邮电出版社2006版

适合对CSS刚刚入门的读者

砖头

2013-04-01 12:34 7/7有用来自 Apress2009版

对自己是整合和提高

嘘嘘乐_ (我是认真的)

第二版涉及到CSS3的部分,很值得学习.对自己的CSS是一个整合和提高.还有两点问题: 1.平常看资料.nav要优于li.nav,对于浏览器对选择器的选择来说.但作者好多实例代码,都会加标签名,为了什么? 2.平常看资料,@import 导入CSS也不............

2013-01-30 12:26

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 d............

2012-09-18 09:57 来自 Apress2009版

> 更多书评(共59条)

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

我来写笔记

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

展开收起
第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
展开收起
第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

在醒目的位置记下常用的颜色值。
——————
避免图像被拉伸失真的方法：若想要一个图像（原始宽度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

展开收起
第1页

跑跑佳 (alert('跑跑佳'))

共勉性质：实现同一个目标，千万种方法 && 新方法丰富的选择：生动有趣，但又无所适从从事这一行业的人，潜能无限，总能让我深受鼓舞，你肯定也不例外大家都在，不断地美化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

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

推荐
收藏

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

wxiaoming

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页
wxiaoming
早起的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

在醒目的位置记下常用的颜色值。
——————
避免图像被拉伸失真的方法：若想要一个图像（原始宽度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篇）

论坛 · · · · · ·


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

在豆瓣App讨论这本书 · · · · · ·

用豆瓣App扫码，找人聊聊这本书。
没有豆瓣App？去下载

在哪儿买这本书?

加入购书单多本比价，批量购买

在哪儿借这本书?

> 图书馆合作找不到你需要的图书馆？

这本书的其他版本 · · · · · · ( 全部4 )

人民邮电出版社版 2006 / 1324人读过 / 有售
friends of ED版 2006-02-13 / 260人读过
Apress版 2009-10-29 / 59人读过 / 有售

以下豆列推荐 · · · · · · ( 全部 )

谁读这本书?

蜗牛小镇

昨天想读

tags:css

伍次仁

9月28日想读

圣无肠

9月28日想读

tags:前端开发 css

shxian

9月27日想读

> 179人在读

> 642人读过

> 1179人想读

二手市场

13本二手书欲转让 (1.00 至 40.00元)
> 点这儿转让有1179人想读,手里有一本闲着?

订阅关于精通CSS（第2版）的评论:
feed: rss 2.0

精通CSS（第2版）

内容简介 · · · · · ·

作者简介 · · · · · ·

目录 · · · · · ·

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

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

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

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

0 有用 小葵 2016-05-27

0 有用 灭灭 2014-02-11

0 有用 麥町呲溜变相 2011-01-26

0 有用 三鲜 2013-09-12

0 有用 maajor 2016-02-19

0 有用 狂气之瞳改 2016-09-26

0 有用 那个小明 2016-09-10

0 有用 薛定谔的猫 2016-09-07

0 有用 锋 2016-08-05

0 有用 偏爱 2016-08-03

书评 · · · · · · (共59条)

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

论坛 · · · · · ·

在豆瓣App讨论这本书 · · · · · ·

在哪儿买这本书?

在哪儿借这本书?

这本书的其他版本 · · · · · · ( 全部4 )

以下豆列推荐 · · · · · · ( 全部 )

谁读这本书?

二手市场

0 有用小葵 2016-05-27

0 有用灭灭 2014-02-11

0 有用麥町呲溜变相 2011-01-26

0 有用三鲜 2013-09-12

0 有用狂气之瞳改 2016-09-26

0 有用那个小明 2016-09-10

0 有用薛定谔的猫 2016-09-07

0 有用锋 2016-08-05

0 有用偏爱 2016-08-03