出版社: 人民邮电出版社
副标题: 高级Web标准解决方案
原作名: CSS Mastery: Advanced Web Standards Solutions
译者: 陈剑瓯
出版年: 2010-5
页数: 266
定价: 49.00元
装帧: 平装
丛书: 图灵程序设计丛书·Web开发系列
ISBN: 9787115226730
内容简介 · · · · · ·
本书汇集了最有用的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的首席设计师,为许多全球知名的唱片公司...
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的首席设计师,为许多全球知名的唱片公司、乐队、艺术家开发过大量Web项目。除本书外,他还撰写过畅销书《CSS基础教程》。
目录 · · · · · ·
1.1 设计代码的结构
1.1.1 标记简史
1.1.2 文档类型、DOCTYPE切换和浏览器模式
1.1.3 有效性验证
1.2 小结
第2章 为样式找到应用目标
2.1 常用的选择器
2.2 通用选择器
2.3 高级选择器
2.3.1 子选择器和相邻同胞选择器
2.3.2 属性选择器
2.3.3 层叠和特殊性
2.3.4 继承
2.4 规划、组织和维护样式表
2.4.1 对文档应用样式
2.4.2 样式指南
2.5 小结
第3章 可视化格式模型
3.1 盒模型概述
3.1.1 IE和盒模型
3.1.2 外边距叠加
3.2 定位概述
3.2.1 可视化格式模型
3.2.2 相对定位
3.2.3 绝对定位
3.2.4 浮动
3.3 小结
第4章 背景图像效果
4.1 背景图像基
4.2 圆角框
4.2.1 固定宽度的圆角框
4.2.2 山顶角
4.3 投影
4.3.1 简单的CSS投影
4.3.2 来自Clagnut的投影方法
4.4 不透明度
4.5 图像替换
4.5.1 FIR
4.5.2 Phark
4.5.3 sIFR
4.6 小结
第5章 对链接应用样式
5.1 简单的链接样式
5.2 让下划线更有趣
5.2.1 简单的链接修饰
5.2.2 奇特的链接下划线
5.3 已访问链接的样式
5.4 为链接目标设置样式
5.5 突出显示不同类型的链接
5.6 创建类似按钮的链接
5.6.1 简单的翻转
5.6.2 图像翻转
5.6.3 Pixy样式的翻转
5.6.4 CSS精灵
5.6.5 用CSS3实现翻转
5.7 纯CSS工具提示
5.8 小结
第6章 对列表应用样式和创建导航条
6.1 基本列表样式
6.2 创建基本的垂直导航条
6.3 在导航条中突出显示当前页面
6.4 创建简单的水平导航条
6.5 创建图形化导航条
6.6 简化的"滑动门"标签页式导航
6.7 Suckerfish下拉菜单
6.8 CSS图像映射
6.9 远距离翻转
6.10 对于定义列表的简短说明
6.11 小结
第7章 对表单和数据表格应用样式
7.1 对数据表格应用样式
7.1.1 表格特有的元素
7.1.2 数据表格标记
7.1.3 对表格应用样式
7.1.4 添加视觉样式
7.2 简单的表单布局
7.2.1 有用的表单元素
7.2.2 基本布局
7.2.3 其他元素
7.2.4 修饰
7.3 复杂的表单布局
7.3.1 可访问的数据输入元素
7.3.2 多列复选框
7.3.3 表单反馈
7.4 小结
第8章 布局
8.1 计划布局
8.2 设置基本结构
8.3 基于浮动的布局
8.3.1 两列的浮动布局
8.3.2 三列的浮动布局
8.4 固定宽度、流式和弹性布局
8.4.1 流式布局
8.4.2 弹性布局
8.4.3 流式和弹性图像
8.5 faux列
8.6 高度相等的列
8.7 CSS3列
8.8 CSS框架与CSS系统
8.9 小结
第9章 bug和修复bug
9.1 捕捉bug
9.2 捕捉bug的基本知识
9.2.1 尽量在一开始就避免bug
9.2.2 隔离问题
9.2.3 创建基本测试案例
9.2.4 修复问题, 而不是修复症状
9.2.5 请求帮助
9.3 拥有布局
9.3.1 什么是布局
9.3.2 布局的效果
9.4 解决方法
9.4.1 IE条件注释
9.4.2 关于hack和过滤器的一个警告
9.4.3 明智地使用hack和过滤器
9.4.4 应用IE for Mac带通过滤器
9.4.5 应用星号HTML hack
9.4.6 应用子选择器hack
9.5 常见bug及其修复方法
9.5.1 双外边距浮动bug
9.5.2 3像素文本偏移bug
9.5.3 IE 6的重复字符bug
9.5.4 IE 6的"藏猫猫"bug
9.5.5 相对容器中的绝对定位
9.5.6 停止对IE的批评
9.6 分级浏览器支持
9.7 小结
第10章 实例研究: Roma Italia
10.1 关于这个实例研究
10.2 基??09
10.2.1 着眼于HTML 5
10.2.2 reset.css
10.3 1080布局和网格
10.4 高级CSS2和CSS3特性
10.4.1 网站需要在每种浏览器中看起来完全一样吗
10.4.2 属性选择器
10.4.3 box-shadow、RGBa和text-overflow
10.5 字体链接和更好的Web排版
10.5.1 按以前的方式设置font-size
10.5.2 标点符号悬挂
10.5.3 多栏文本布局
10.5.4 @font-face
10.5.5 Cufón, 向@font-face发展的过渡手段
10.6 用AJAX和jQuery增加交互性
10.6.1 AJAX
10.6.2 jQuery
10.6.3 使用AJAX和jQuery实现搜索
10.7 小结
第11章 实例研究: Climb the Mountains
11.1 关于这个实例研究
11.2 样式表的组织和约定
11.2.1 screen.css
11.2.2 reset
11.2.3 使用条件注释的IE样式表
11.3 网格灵活性
11.4 用body类控制导航
11.4.1 突出显示当前页面
11.4.2 控制blockquote所处的层
11.5 战略性地选择元素
11.5.1 深层后代选择器
11.5.2 :first-child伪类
11.5.3 相邻同胞选择器
11.6 透明度、阴影和圆角
11.6.1 我们的目标
11.6.2 说明图像覆盖和RGBa透明度
11.6.3 组合类
11.6.4 border-radius
11.6.5 box-shadow
11.7 定位列表和显示内容
11.7.1 圆角
11.7.2 主海拔图
11.8 小结
· · · · · · (收起)
丛书信息
喜欢读"精通CSS(第2版)"的人也喜欢的电子书 · · · · · ·
喜欢读"精通CSS(第2版)"的人也喜欢 · · · · · ·
精通CSS(第2版)的书评 · · · · · · ( 全部 59 条 )



适合对CSS刚刚入门的读者


CSS Mastery
> 更多书评 59篇
-
偏爱 (be true to yourself and relex)
两个好玩的称呼: “标签汤”(html标签没有语义化的使用,而是乱用一通) “多类症”(几乎每个元素都加了一个类) —————— 怎样为元素命名: 尽可能保持名称与表现方式无关。应该根据“它们是什么”来为元素命名,而不该根据“它们的外观如何”。比如通知消息是红色的,应该命名为“.notification”而不是“.red”。 —————— 用id还是class: 只有在绝对确定这个元素只会出现一次的时候才用id。 —————— 怎样...2016-07-19 21:03:27 2人喜欢
两个好玩的称呼: “标签汤”(html标签没有语义化的使用,而是乱用一通) “多类症”(几乎每个元素都加了一个类) —————— 怎样为元素命名: 尽可能保持名称与表现方式无关。应该根据“它们是什么”来为元素命名,而不该根据“它们的外观如何”。比如通知消息是红色的,应该命名为“.notification”而不是“.red”。 —————— 用id还是class: 只有在绝对确定这个元素只会出现一次的时候才用id。 —————— 怎样避免”多类症“: 只要发现类名中出现了重复的单词,比如news-head和news-link,就该考虑是否可以用news放在他们的父元素上,然后用层叠来识别具体的head和link。
回应 2016-07-19 21:03:27 -
偏爱 (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"></div> <div class="box">&...2016-08-03 18:18:50 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:50 -
/*CSS 3rd edition*/ 在本章中,我们已经研究了许多用于构成页面框的样式的技术。我们探讨了如何使用各种颜色语法,以及如何使用透明度。我们已经研究了如何掌握背景图像以及如何相对于元素框定位,调整大小,重复和裁剪它们。 我们还向您展示了如何使用边框,以及如何通过使用borderradius创建圆角甚至圆圈来突破四四方方的默认值。 我们开始使用阴影,既可以作为在页面中创建深度的方法(如框中的嵌入或开始阴影),也可以作...
2019-02-08 23:09:03
/*CSS 3rd edition*/
在本章中,我们已经研究了许多用于构成页面框的样式的技术。我们探讨了如何使用各种颜色语法,以及如何使用透明度。我们已经研究了如何掌握背景图像以及如何相对于元素框定位,调整大小,重复和裁剪它们。
我们还向您展示了如何使用边框,以及如何通过使用borderradius创建圆角甚至圆圈来突破四四方方的默认值。
我们开始使用阴影,既可以作为在页面中创建深度的方法(如框中的嵌入或开始阴影),也可以作为绘制“额外矩形”以创建其他视觉效果的方法。此外,我们研究了如何使用线性和径向渐变,既作为微妙的效果,也作为一种使浏览器为您绘制图像模式的方法。
我们详细介绍了内容图像和背景图像之间的差异,以及如何灵活地设置内容图像的样式 - 以及其他嵌入内容,包括aspect ratio–aware containers(宽高比感知容器)。我们将在第11章回到一些更高级(但不太广泛支持)的视觉效果。同时,在下一章中,我们最终将我们的尺寸,样式,定位框和文本的知识结合起来,为Web,使用新旧技术和属性.
回应 2019-02-08 23:09:03
-
偏爱 (be true to yourself and relex)
两个好玩的称呼: “标签汤”(html标签没有语义化的使用,而是乱用一通) “多类症”(几乎每个元素都加了一个类) —————— 怎样为元素命名: 尽可能保持名称与表现方式无关。应该根据“它们是什么”来为元素命名,而不该根据“它们的外观如何”。比如通知消息是红色的,应该命名为“.notification”而不是“.red”。 —————— 用id还是class: 只有在绝对确定这个元素只会出现一次的时候才用id。 —————— 怎样...2016-07-19 21:03:27 2人喜欢
两个好玩的称呼: “标签汤”(html标签没有语义化的使用,而是乱用一通) “多类症”(几乎每个元素都加了一个类) —————— 怎样为元素命名: 尽可能保持名称与表现方式无关。应该根据“它们是什么”来为元素命名,而不该根据“它们的外观如何”。比如通知消息是红色的,应该命名为“.notification”而不是“.red”。 —————— 用id还是class: 只有在绝对确定这个元素只会出现一次的时候才用id。 —————— 怎样避免”多类症“: 只要发现类名中出现了重复的单词,比如news-head和news-link,就该考虑是否可以用news放在他们的父元素上,然后用层叠来识别具体的head和link。
回应 2016-07-19 21:03:27 -
1. 为元素命名 名称和表现无关,比如:红色字体的地方,用 red 作为类名,日后修改的时候如果这里变成黄色,必须修改所有类名为 red 的元素为黄色。使用 text-warning text-danger这样的类名会更好 === 评注:非常赞同这一点。实际项目我认为类名不仅应当与表现无关,还应当与行为无关。比如一个确定按钮,btn-success 就要比 btn-confirm 好很多,重用性也更高。
2014-05-26 12:47:43
-
早起的WYSIWYG编辑器也倾向于在应用样式的每个地方都添加类,许多开发人员在使用编辑器学习CSS时候继承了这个坏习惯,这种现象称为 “多类症”(classitis),在某种程度上,这和使用基于表格的布局一样糟糕,因为它在文档中添加了无意义的类。 <h2 class="news-head">Hello World</h2> <p class="news-text"></p> == 评注:这里作者推荐用后代选择器,如:.news h2, .news p这样的写法。这里不敢苟同...
2014-05-27 20:58:07
早起的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:07 -
偏爱 (be true to yourself and relex)
div 标签实际上代表 部分 (division) —————— DTD(文档类型定义)是一组机器可以解读的规则,用来在解析网页时根据不同DTD做有效性验证。 浏览器通过我们在HTML文档开头写的DOCTYPE声明知道使用哪个DTD,从而知道使用HTML哪个版本,要遵循哪些规则。2016-07-20 20:17:59
-
/*CSS 3rd edition*/ 在本章中,我们已经研究了许多用于构成页面框的样式的技术。我们探讨了如何使用各种颜色语法,以及如何使用透明度。我们已经研究了如何掌握背景图像以及如何相对于元素框定位,调整大小,重复和裁剪它们。 我们还向您展示了如何使用边框,以及如何通过使用borderradius创建圆角甚至圆圈来突破四四方方的默认值。 我们开始使用阴影,既可以作为在页面中创建深度的方法(如框中的嵌入或开始阴影),也可以作...
2019-02-08 23:09:03
/*CSS 3rd edition*/
在本章中,我们已经研究了许多用于构成页面框的样式的技术。我们探讨了如何使用各种颜色语法,以及如何使用透明度。我们已经研究了如何掌握背景图像以及如何相对于元素框定位,调整大小,重复和裁剪它们。
我们还向您展示了如何使用边框,以及如何通过使用borderradius创建圆角甚至圆圈来突破四四方方的默认值。
我们开始使用阴影,既可以作为在页面中创建深度的方法(如框中的嵌入或开始阴影),也可以作为绘制“额外矩形”以创建其他视觉效果的方法。此外,我们研究了如何使用线性和径向渐变,既作为微妙的效果,也作为一种使浏览器为您绘制图像模式的方法。
我们详细介绍了内容图像和背景图像之间的差异,以及如何灵活地设置内容图像的样式 - 以及其他嵌入内容,包括aspect ratio–aware containers(宽高比感知容器)。我们将在第11章回到一些更高级(但不太广泛支持)的视觉效果。同时,在下一章中,我们最终将我们的尺寸,样式,定位框和文本的知识结合起来,为Web,使用新旧技术和属性.
回应 2019-02-08 23:09:03 -
偏爱 (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 width:任何值 hei...2016-08-03 19:32:41
拥有布局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条件注释
<!--[if IE]> <link rel="stylesheet" href="/css/ie.css" /> <![endif]-->
回应 2016-08-03 19:32:41 -
偏爱 (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"></div> <div class="box">&...2016-08-03 18:18:50 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:50 -
偏爱 (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:43
论坛 · · · · · ·
新版本翻译的如何 | 来自蒙娜丽芳 | 2014-02-23 13:56:09 | |
第二版的p220实例的疑惑 | 来自😅 | 1 回应 | 2014-02-04 13:18:59 |
南京应酷公司招募前端开发~ | 来自小雨滴 | 2012-02-15 11:28:17 | |
翻译不到位 | 来自arthur | 1 回应 | 2011-09-25 20:25:55 |
这本书的其他版本 · · · · · · ( 全部6 )
-
人民邮电出版社 (2006)8.4分 1334人读过
-
friends of ED (2006)8.8分 261人读过
-
Apress (2009)8.6分 61人读过
-
人民邮电出版社 (2019)7.5分 35人读过
-
每满100-50
在哪儿借这本书 · · · · · ·
以下书单推荐 · · · · · · ( 全部 )
- web前端工程师读书单 (子龙)
- 学编程的过程我都读了什么 (苏不西)
- 书单-编程-前端 (LZX)
- Web编程与设计 (敏子爱书)
- Web程序员的修炼之道 (火丁笔记)
谁读这本书?
二手市场
订阅关于精通CSS(第2版)的评论:
feed: rss 2.0
0 有用 灭灭 2014-02-11 10:40:24
标记..
2 有用 viking 2010-11-16 10:52:49
好吧 “并迅速登上Amazon图书排行榜前列,最高时甚至与《哈利·波特》并驾齐驱,创造了计算机图书的销售奇迹。”
0 有用 麥町呲溜变向 2011-01-26 23:37:09
比较精细。
0 有用 苏不西 2012-08-30 09:01:45
受益匪浅!
0 有用 礼拜文 2012-06-13 01:08:11
抛开翻译不谈,绝对是我读过的最赞的CSS教材
0 有用 Shane 2022-06-05 16:27:42
书柜中偶然翻到,简单重温了下
0 有用 豆饼 2021-05-04 19:48:26
入门可以读读
0 有用 向上 2021-01-14 23:37:39
中规中矩的css书籍,2021年看的第一本书。
0 有用 小甜甜^_^ 2020-06-17 02:17:44
出版早,部分内容有些过时。关于css精华的内容还是很不错。代码没有DOM编程那本书展示、解释得清楚,行文稍逊色。
1 有用 Fity 2020-02-22 13:39:13
书的内容还行,但确实太旧了,介绍了一吨已经不再需要的兼容/取巧技术