Name: CSS揭秘
ISBN: 9787115416940

作者: [希] Lea Verou
出版社: 人民邮电出版社
原作名: CSS Secrets: Better Solutions to Everyday Web Design Problems
译者: CSS魔法
出版年: 2016-4
页数: 260
定价: 99.00元
装帧: 平装
丛书: 图灵程序设计丛书·Web开发系列
ISBN: 9787115416940

豆瓣评分

9.4

390人评价

5星

71.0%
4星

23.1%
3星

5.9%
2星

0.0%
1星

0.0%

评价:

内容简介 · · · · · ·

本书是一本注重实践的教程，作者为我们揭示了 47 个鲜为人知的 CSS 技巧，主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。

本书的读者对象为前端工程师、网页开发人员。

在线试读：

得到

作者简介 · · · · · ·

Lea Verou

W3C CSS工作组特邀专家，设计CSS语言的委员之一，此前曾在W3C担任开发者代言人。目前，她在麻省理工学院从事人机交互领域的研究。她还是一位博客作家，并经常在国际性的技术会议上担任讲师；她创建的多个开源项目广受开发者欢迎。

CSS魔法

原名张鹏，国内知名的CSS技术专家，百姓网前端架构师。拥有近十年的网站开发经验，在移动前端领域积累颇深，自称“披着工程师外衣的设计师”。他是CMUI、Action、GHX等开源项目的作者，曾为GitHub、Gulp、Stylus等网站和项目翻译过大量文档；其生动活泼、循序渐进的博客写作风格深受读者喜爱；在CSS Conf等技术会议上所作的演讲广受好评。

目录 · · · · · ·

译者序
序
前言
第1章引言
第2章背景与边框
第3章形状
· · · · · · (更多)

"CSS揭秘"试读 · · · · · ·

Web 标准：是敌还是友标准的制定过程与大众的理解大相径庭的是，W3C 并不“生产”标准。实际上，它扮演的是一个论坛的角色：W3C 以工作组的方式，把某项技术的相关各方聚集起来，最终由他们来产出标准。当然，W3C 并不只是一个观察者：它设定了整个平台的规则，监督整个进程。但这些技术规范（基本上）并不是由W3C 的工作人员编写完成的。 CSS 规范通常是由CSS 工作组的成员来...

第1章:引言

· · · · · · (查看全部试读)

原文摘录 · · · · · ·

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。 (查看原文)

Zoey 1赞 2016-10-08 12:07:45

—— 引自第1页

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

CSS 前端开发前端 Web前端开发网页设计编程计算机 css

丛书信息

　　图灵程序设计丛书·Web开发系列 (共171册), 这套丛书还有《响应式Web设计》,《SVG精髓（第2版）》,《MEAN Web开发》,《HTML5与CSS3设计模式》,《CSS重构：样式表性能调优》等。

喜欢读"CSS揭秘"的人也喜欢的电子书 · · · · · ·

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

: 高性能JavaScript

9.80元

: ES6标准入门（第2版）

27.60元

: 深入理解ES6

24.99元

: CoffeeScript小书

1.99元

喜欢读"CSS揭秘"的人也喜欢 · · · · · ·

: 你不知道的JavaScript（上卷）

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

: 编写可维护的JavaScript

: 精通CSS（第2版）

: CSS权威指南（第三版）

: 学习JavaScript数据结构与算法

: Node.js实战

: Effective JavaScript

: HTML5 Canvas核心技术

: CSS3专业网页开发指南

我来说两句

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

CSS揭秘的话题 · · · · · · ( 全部条 )

什么是话题

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

我要写书评

CSS揭秘的书评 · · · · · · ( 全部 6 条 )

热门 / 最新 / 好友 /只看本版本的评论

刘炬光 2018-08-28 11:48:19

中后台前端开发必读

前端目前得有70%的从业者主要开发后端管理系统，也就是我们常说的中后台架构，平时多是通过 Ant Design, ElementUI, Fusion 等搭一搭页面，产品对于页面长什么样子也没有一个认识，所以从CSS层面去对页面进行精细化控制的机会就非常少，导致大家平时都疏忽了CSS的学习。这本书... (展开)

0回应

朱朱 2016-08-10 16:42:46

请问各位是如何打开书中的“试一试”页面的？

喜欢这本书，特别的实用，不仅仅是使用技巧，里面更深远的是对于css思想的传递。但是非常遗憾，天朝威武，我完全打不开书中每一个 http://play.csssecrets.io 里面的“试一试”，作为一个无法翻墙的前端妹子来说，我对此表示森森的无奈，买了这本书却打不开书中的例子，偶既焦... (展开)

11回应

尹麻子 2020-05-03 01:10:43

CSS 是前端工程师的真正护城河

这本书的作者是希腊人，是 W3C CSS 工作小组特邀专家。目前本书在豆瓣的评分高达 9.4 分，可以说是 CSS领域/Web前端领域评分最高的一本书了。本书分为7大主题，通过47个CSS技巧，引入了很多鲜为人知的CSS特性已经实现方法。本书的内容在我看来，可以这样描述：这个特性... (展开)

0回应

涅瓦纳 2016-06-25 11:39:49 O'Reilly Media2015版

Based on two popular talks from author Lea Verou—including "CSS3 Secrets: 10 things you may not know about CSS"—this practical guide provides intermediate to advanced CSS developers with more than 40 undocumented techniques and tips for using CSS3 to crea... (展开)

1 0回应

birdstudio 2015-11-12 12:57:23 O'Reilly Media2015版

CSS Secrets 英文原版：近十年来最重要的 CSS 图书，没有之一

确实是多年难得一见的重磅 CSS 书籍，看得很过瘾，CSS 进阶必读。百姓网的魔法哥（CSS魔法）在翻译这本书，他把部分样章也发布出来了： http://book.cssmagic.net/ 这本书的中文版已经出来了： https://book.douban.com/subject/26745943/ (展开)

1 0回应

birdstudio 2016-03-16 23:18:53

《CSS Secrets》中文版千呼万唤始出来：多年难得一见的重磅 CSS 图书

据悉，这本书的中文版将在 2016 年四月初在各大书店上架。虽然书还没有正式面世，但这本书的翻译者 “CSS魔法” 已经把部分样章发布出来了，心急的读者可以先睹为快： http://book.cssmagic.net/ 我自己的感受是：这确实是多年难得一见的重磅 CSS 书籍，看得很过瘾，CSS 进... (展开)

2 0回应

> 更多书评 6篇

读书笔记 · · · · · ·

我来写笔记

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

展开收起
第7页

山人Hilda

#Trick1 { padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */ border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */ border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */ border-radius: 0.5em; background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */ box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */ color: white; text-shadow: 0 -.05em .05em r...
2017-09-14 06:38 1人喜欢

#Trick1 {
padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */
border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */
border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */
border-radius: 0.5em;
background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */
box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 100%;
line-height: 1.5; /* 行高依赖于字号, 用倍数 */
}
#Trick1:hover {
background-color: #c80; /* 因为边框,渐变皆为透明层叠加,所以改个背景色就能制造不同版本 */
}
#Trick2 {
padding: .3em 2.8em; border-radius: 0.5em;
background: transparent;font-size: 100%; line-height: 1.5;
color: crimson;
border: 2px solid currentColor; /* 使边框直接从字体取色! */
}
效果

推荐

回应 2017-09-14 06:38
展开收起
第1页前言

Zoey

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。
2016-10-08 12:07 1人喜欢

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。
引自前言

推荐

回应 2016-10-08 12:07
展开收起
背景渐变相关

寻海 (阅读改变自己，代码改变世界。)

[http://www.cnblogs.com/stoneniqiu/p/5706670.html]
2016-07-28 08:47

http://www.cnblogs.com/stoneniqiu/p/5706670.html

推荐

回应 2016-07-28 08:47
展开收起
第22页

寻海 (阅读改变自己，代码改变世界。)

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例子： padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; 如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字...
2016-07-13 17:02

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例子： padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; 如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字号的关系，因此我们还得做些算术，算出字号改变之后的行高该是多少在这个例子中，行高是字号的1.5 倍。因此，把代码改成下面这样会更易维护： font-size: 20px; line-height: 1.5; 如果我们把这些长度值都改成em 单位，那这些效果的值就都变成可缩放的了，而且是依赖字号进行缩放 2.currentColor css3增加了一个特殊的颜色关键字currentColor，这个特性让它成为了CSS 中有史以来的第一个变量举个例子，假设我们想让所有的水平分割线（所有<hr> 元素）自动与文本的颜色保持一致。有了currentColor 之后，我们只需要这样写： hr { height: .5em; background: currentColor; } 3.继承 inherit 可以用在任何CSS 属性中，而且它总是绑定到父元素的计算值。举例来说，要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用inherit 的特性即可： input, select, button { font: inherit; } 4.描边 background: yellowgreen; border: 10px solid #655; outline: 5px solid deeppink;

推荐

回应 2016-07-13 17:02

展开收起
第1页前言

Zoey

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。
2016-10-08 12:07 1人喜欢

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。
引自前言

推荐

回应 2016-10-08 12:07
展开收起
第7页

山人Hilda

#Trick1 { padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */ border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */ border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */ border-radius: 0.5em; background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */ box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */ color: white; text-shadow: 0 -.05em .05em r...
2017-09-14 06:38 1人喜欢

#Trick1 {
padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */
border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */
border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */
border-radius: 0.5em;
background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */
box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 100%;
line-height: 1.5; /* 行高依赖于字号, 用倍数 */
}
#Trick1:hover {
background-color: #c80; /* 因为边框,渐变皆为透明层叠加,所以改个背景色就能制造不同版本 */
}
#Trick2 {
padding: .3em 2.8em; border-radius: 0.5em;
background: transparent;font-size: 100%; line-height: 1.5;
color: crimson;
border: 2px solid currentColor; /* 使边框直接从字体取色! */
}
效果

推荐

回应 2017-09-14 06:38
展开收起
第22页

寻海 (阅读改变自己，代码改变世界。)

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例子： padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; 如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字...
2016-07-13 17:02

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例子： padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; 如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字号的关系，因此我们还得做些算术，算出字号改变之后的行高该是多少在这个例子中，行高是字号的1.5 倍。因此，把代码改成下面这样会更易维护： font-size: 20px; line-height: 1.5; 如果我们把这些长度值都改成em 单位，那这些效果的值就都变成可缩放的了，而且是依赖字号进行缩放 2.currentColor css3增加了一个特殊的颜色关键字currentColor，这个特性让它成为了CSS 中有史以来的第一个变量举个例子，假设我们想让所有的水平分割线（所有<hr> 元素）自动与文本的颜色保持一致。有了currentColor 之后，我们只需要这样写： hr { height: .5em; background: currentColor; } 3.继承 inherit 可以用在任何CSS 属性中，而且它总是绑定到父元素的计算值。举例来说，要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用inherit 的特性即可： input, select, button { font: inherit; } 4.描边 background: yellowgreen; border: 10px solid #655; outline: 5px solid deeppink;

推荐

回应 2016-07-13 17:02
展开收起
背景渐变相关

寻海 (阅读改变自己，代码改变世界。)

[http://www.cnblogs.com/stoneniqiu/p/5706670.html]
2016-07-28 08:47

http://www.cnblogs.com/stoneniqiu/p/5706670.html

推荐

回应 2016-07-28 08:47

展开收起
第7页

山人Hilda

#Trick1 { padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */ border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */ border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */ border-radius: 0.5em; background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */ box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */ color: white; text-shadow: 0 -.05em .05em r...
2017-09-14 06:38 1人喜欢

#Trick1 {
padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */
border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */
border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */
border-radius: 0.5em;
background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */
box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 100%;
line-height: 1.5; /* 行高依赖于字号, 用倍数 */
}
#Trick1:hover {
background-color: #c80; /* 因为边框,渐变皆为透明层叠加,所以改个背景色就能制造不同版本 */
}
#Trick2 {
padding: .3em 2.8em; border-radius: 0.5em;
background: transparent;font-size: 100%; line-height: 1.5;
color: crimson;
border: 2px solid currentColor; /* 使边框直接从字体取色! */
}
效果

推荐

回应 2017-09-14 06:38
展开收起
第1页前言

Zoey

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。
2016-10-08 12:07 1人喜欢

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。
引自前言

推荐

回应 2016-10-08 12:07
展开收起
背景渐变相关

寻海 (阅读改变自己，代码改变世界。)

[http://www.cnblogs.com/stoneniqiu/p/5706670.html]
2016-07-28 08:47

http://www.cnblogs.com/stoneniqiu/p/5706670.html

推荐

回应 2016-07-28 08:47
展开收起
第22页

寻海 (阅读改变自己，代码改变世界。)

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例子： padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; 如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字...
2016-07-13 17:02

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例子： padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; 如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字号的关系，因此我们还得做些算术，算出字号改变之后的行高该是多少在这个例子中，行高是字号的1.5 倍。因此，把代码改成下面这样会更易维护： font-size: 20px; line-height: 1.5; 如果我们把这些长度值都改成em 单位，那这些效果的值就都变成可缩放的了，而且是依赖字号进行缩放 2.currentColor css3增加了一个特殊的颜色关键字currentColor，这个特性让它成为了CSS 中有史以来的第一个变量举个例子，假设我们想让所有的水平分割线（所有<hr> 元素）自动与文本的颜色保持一致。有了currentColor 之后，我们只需要这样写： hr { height: .5em; background: currentColor; } 3.继承 inherit 可以用在任何CSS 属性中，而且它总是绑定到父元素的计算值。举例来说，要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用inherit 的特性即可： input, select, button { font: inherit; } 4.描边 background: yellowgreen; border: 10px solid #655; outline: 5px solid deeppink;

推荐

回应 2016-07-13 17:02