出版社: 人民邮电出版社
副标题: 高级Web标准解决方案
原作名: CSS Mastery: Advanced Web Standards Solutions
译者: 陈剑瓯
出版年: 2010-5
页数: 266
定价: 49.00元
装帧: 平装
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版)的话题 · · · · · · ( 全部 条 )



精通CSS(第2版)的书评 · · · · · · ( 全部 59 条 )
> 更多书评59篇
-
偏爱 (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 -
偏爱 (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 -
偏爱 (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特有的。那些“拥有布局”的元素负责本身及其子元素的尺寸设置和定位。——————默认情况下拥有布局的元素有:htmltabletr/tdimghrinput/select/textarea/buttoniframe/embed/object/appletmarquee可以使用hasLayout函数查看一个元素是否拥有布局。——————设置以下CSS属性会自动使元素拥有布局:float:left或rightdisplay:inline-blockwidth:任何值height:任何值zoom:任何值writing-mode:tb-rl在IE7中,以下属性也成了布局触发器:overflow:hidden , scroll 或automin-width:任何值max-width:除none之外的任何值——————布局的效果:如果段落拥有布局,那么他就被限制为矩形,因此阻止文本围绕浮动元素。——————解决方法:IE条件注释<!--[if IE]> <link rel="stylesheet" href="/css/ie.css" /> <![endif]-->
回应 2016-08-03 19:32
-
共勉性质: 实现同一个目标,千万种方法 && 新方法 丰富的选择:生动有趣,但又 无所适从 从事这一行业的人,潜能无限,总能让我深受鼓舞,你肯定也不例外 大家都在,不断地美化Web环境 意见 & 想法 & 思想,丰富了彼此 学习可以: 了解-css定位模型,浮动,清理 关注-css设计社区,博客,某种技术-某站点 学习css,最好的一种方式,就是..
2013-08-15 00:53
共勉性质: 实现同一个目标,千万种方法 && 新方法 丰富的选择:生动有趣,但又 无所适从 从事这一行业的人,潜能无限,总能让我深受鼓舞,你肯定也不例外 大家都在,不断地美化Web环境 意见 & 想法 & 思想,丰富了彼此学习可以: 了解-css定位模型,浮动,清理 关注-css设计社区,博客,某种技术-某站点 学习css,最好的一种方式,就是:开始使用它 学习过程-看到出色的效果 -> 查看源代码 -> 大胆尝试平时应该: 简洁、清晰;代码结构,添加注释 懂技术的工作原理 && 要会用 html和css:清晰,结构良好 WYSIWYG:所见即所得回应 2013-08-15 00:53 -
偏爱 (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 -
1. 为元素命名 名称和表现无关,比如:红色字体的地方,用 red 作为类名,日后修改的时候如果这里变成黄色,必须修改所有类名为 red 的元素为黄色。使用 text-warning text-danger这样的类名会更好 === 评注:非常赞同这一点。实际项目我认为类名不仅应当与表现无关,还应当与行为无关。比如一个确定按钮,btn-success 就要比 btn-confirm 好很多,重用性也更高。
2014-05-26 12:47
-
早起的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
-
偏爱 (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特有的。那些“拥有布局”的元素负责本身及其子元素的尺寸设置和定位。——————默认情况下拥有布局的元素有:htmltabletr/tdimghrinput/select/textarea/buttoniframe/embed/object/appletmarquee可以使用hasLayout函数查看一个元素是否拥有布局。——————设置以下CSS属性会自动使元素拥有布局:float:left或rightdisplay:inline-blockwidth:任何值height:任何值zoom:任何值writing-mode:tb-rl在IE7中,以下属性也成了布局触发器:overflow:hidden , scroll 或automin-width:任何值max-width:除none之外的任何值——————布局的效果:如果段落拥有布局,那么他就被限制为矩形,因此阻止文本围绕浮动元素。——————解决方法:IE条件注释<!--[if IE]> <link rel="stylesheet" href="/css/ie.css" /> <![endif]-->
回应 2016-08-03 19:32 -
偏爱 (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 -
偏爱 (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
-
偏爱 (be true to yourself and relex)
论坛 · · · · · ·
新版本翻译的如何 | 来自Isabella | 2014-02-23 | |
第二版的p220实例的疑惑 | 来自12345678901234 | 1 回应 | 2014-02-04 |
南京应酷公司招募前端开发~ | 来自小雨滴 | 2012-02-15 | |
翻译不到位 | 来自arthur | 1 回应 | 2011-09-25 |
在哪儿借这本书 · · · · · ·
这本书的其他版本 · · · · · · ( 全部4 )
- friends of ED版 2006-02-13 / 262人读过
- 人民邮电出版社版 2006 / 1331人读过
- Apress版 2009-10-29 / 60人读过
以下豆列推荐 · · · · · · ( 全部 )
- 学编程的过程我都读了什么 (苏不西)
- web前端工程师读书单 (子龙)
- 书单-编程-前端 (LZX)
- Web程序员的修炼之道 (火丁笔记)
- Web编程与设计 (出版圈郭志敏)
谁读这本书?
二手市场
订阅关于精通CSS(第2版)的评论:
feed: rss 2.0
0 有用 [已注销] 2013-07-08
写的挺好的
0 有用 青溪 2012-05-10
最近做了几个页面,开始参考了好几本书,翻翻这本,找找那本,到最后才发现,翻的最多的还是这本,讲的知识点、例子也最是透彻。 若是初期自己摸索着做些布局、导航、列表之类的,之后再回头细看这本书,会觉得真不错,先前疑惑的一些小细节都有提到,既解惑,又帮忙梳理了知识点。
0 有用 三鲜 2013-09-12
豆瓣的评分的马太效应挺严重。这本真的不咋地。
6 有用 陀拉吉斯基 2015-08-27
翻译一度让我怀疑自己读不懂中文
1 有用 maajor 2016-02-19
基本和w3cschool上内容一样
0 有用 sonic souvenir 2018-04-21
实例没看了
0 有用 独行侠1988 2018-03-21
内容比较老,一些基本知识和思路还是可以参考的
0 有用 马良 2018-03-11
很多年前的入门经典,但是先对于2016年后的前端来说,内容真的有点过时了,简单的说布局,ie6的内容已经过时了,不推荐这本书
0 有用 kang 2018-03-08
此书于17年初研读。 本书适合初学者使用,介绍了选择器/可视化模型基础/样式使用/bug捕获等等。 并且书中有大量的代码可以在学习时参考。但是此书毕竟出版已久,不涉及css3之类的。但是还是建议初学前端者购入一本
0 有用 雪吟 2018-03-01
这本书到底过时了啊,14年前的书都可以不用追了,评价特别好的买电子版刷一下就好。