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

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

豆瓣评分

8.6

629人评价

5星

44.8%
4星

40.1%
3星

13.4%
2星

0.8%
1星

1.0%

评价:

内容简介 · · · · · ·

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

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

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

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

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

: 编写高质量代码

20.00元

: 你不知道的JavaScript（上卷）

19.99元

: jQuery基础教程（第3版）

20.00元

: JavaScript语言精粹

18.17元

: CoffeeScript小书

1.99元

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

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

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

: CSS权威指南（第三版）

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

: JavaScript模式

: JavaScript语言精粹

: 编写可维护的JavaScript

: 高性能JavaScript

: 锋利的jQuery

: JavaScript权威指南(第6版)

我来说两句

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

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

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

[已注销] 2006-11-18 00:36:26

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

16有用 / 5没用人民邮电出版社2006版

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

大森林 2006-10-25 08:03:17

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... (11回应)

21有用 / 2没用人民邮电出版社2006版

好书，但不经典

Cheney 2007-05-27 22:52:11

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

0有用 / 2没用人民邮电出版社2006版

实践性较强

西山 2012-09-02 14:22:01

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

4有用 / 0没用人民邮电出版社2006版

适合对CSS刚刚入门的读者

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

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

8有用 / 0没用 Apress2009版

> 更多书评59篇

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

我来写笔记

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

展开收起
第1页

偏爱 (be true to yourself and relex)

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

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

推荐

回应 2016-07-19 21:03
展开收起
第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

展开收起
第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 1人喜欢

两个好玩的称呼：
“标签汤”（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

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

在豆瓣书店有售 · · · · · ·

在哪儿买这本书 · · · · · ·

+ 加入购书单

在哪儿借这本书 · · · · · ·

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

friends of ED版 2006-02-13 / 263人读过
人民邮电出版社版 2006 / 1328人读过
Apress版 2009-10-29 / 60人读过 / 有售

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

谁读这本书?

aoweisi

9月18日读过

tags:css

L、y 🌌🎇

9月16日想读

> 200人在读

> 718人读过

> 1396人想读

二手市场

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

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

精通CSS（第2版）

内容简介 · · · · · ·

作者简介 · · · · · ·

目录 · · · · · ·

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

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

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

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

4 有用 BeiYuu 2012-03-29

0 有用 两天通宵真没劲 2015-09-06

0 有用 esus4 2013-08-20

5 有用 陀拉吉斯基 2015-08-27

1 有用 viking 2010-11-16

0 有用 ginnko 2017-08-13

0 有用 clark 2017-08-13

0 有用 蘑菇蘑菇糖。 2017-08-10

0 有用 褐叶鱼 2017-07-05

0 有用 Simon 2017-06-26

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

论坛 · · · · · ·

在豆瓣书店有售 · · · · · ·

在哪儿买这本书 · · · · · ·

在哪儿借这本书 · · · · · ·

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

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

谁读这本书?

二手市场

0 有用两天通宵真没劲 2015-09-06

5 有用陀拉吉斯基 2015-08-27

0 有用蘑菇蘑菇糖。 2017-08-10

0 有用褐叶鱼 2017-07-05