出版社: 人民邮电出版社
原作名: Smashing CSS:Professional Techniques
译者: 姬光
出版年: 2012-7
页数: 226
定价: 49.00元
丛书: 图灵程序设计丛书·Web开发系列
ISBN: 9787115284792
内容简介 · · · · · ·
内容简介:
打造现代布局的专业技术
本书远非只是介绍基础知识,它不仅全面细致地讲解布局与效果,而且展望了HTML5和CSS3的未来。业内很少有人能像Eric A. Meyer一样详细阐明CSS,他在本书中深入分析了普遍适用的实用技术,讲解了如何选用正确的工具、如何通过jQuery使用CSS效果和CSS3技术。
本书主要内容如下:
显示或隐藏元素
通过XHTML为body或html元素设置背景
超过15种布局技巧,包括清除浮动、两栏/三栏布局、伪造栏布局、“唯一布局”、Holy Grail、基于em的布局、流式网格、固定页脚等
各种CSS效果,包括CSS弹出框、框冲切、圆角、CSS精灵、滑动门、流式漂白、参差浮动等
应用CSS表样式,包括使用表头、主体、脚注、行标题、面向列的样式、表的映射和图形化等
使用CSS3元素、多背景支持、RGBA,以及通过j...
内容简介:
打造现代布局的专业技术
本书远非只是介绍基础知识,它不仅全面细致地讲解布局与效果,而且展望了HTML5和CSS3的未来。业内很少有人能像Eric A. Meyer一样详细阐明CSS,他在本书中深入分析了普遍适用的实用技术,讲解了如何选用正确的工具、如何通过jQuery使用CSS效果和CSS3技术。
本书主要内容如下:
显示或隐藏元素
通过XHTML为body或html元素设置背景
超过15种布局技巧,包括清除浮动、两栏/三栏布局、伪造栏布局、“唯一布局”、Holy Grail、基于em的布局、流式网格、固定页脚等
各种CSS效果,包括CSS弹出框、框冲切、圆角、CSS精灵、滑动门、流式漂白、参差浮动等
应用CSS表样式,包括使用表头、主体、脚注、行标题、面向列的样式、表的映射和图形化等
使用CSS3元素、多背景支持、RGBA,以及通过jQuery执行CSS3选取操作等
本书适合具有一定的CSS和JavaScript使用经验的Web开发人员学习参考。
作者简介 · · · · · ·
作者介绍:
Eric A. Meyer
国际公认的HTML、CSS、Web标准方面的专家,自1993年开始从事与Web设计与开发相关的工作。著有《Eric Meyer谈CSS(卷1)》和《Eric Meyer谈CSS(卷2)》。
目录 · · · · · ·
第一部分 基本原理
第1章 工具 2
1.1 Firebug 2
1.2 Web Developer Toolbar 8
1.3 IE开发者工具栏 13
1.4 Dragonfly(Opera浏览器) 16
1.5 Web检查器(Safari浏览器) 20
1.6 XRAY 22
1.7 SelectORacle 23
1.8 诊断样式表 24
1.9 重启样式表 26
1.10 IE9.JS 29
第2章 选择器 31
2.1 伪类与伪元素 31
2.2 为目标元素添加样式 33
2.3 特殊性 34
2.4 重要性 35
2.5 省略简写属性值的关键词时会发生
什么 36
2.6 选择性地覆盖简写属性 37
2.7 通用选择 39
2.8 ID还是类 40
2.9 ID与类共用 42
2.10 多类 42
2.11 简单的属性选择 43
2.12 类的属性选择 45
2.13 ID还是属性选择器 46
2.14 部分属性值选择 47
2.15 更多部分属性值选择 48
2.16 选择后代元素 50
2.17 模拟部分子选择 51
2.18 兄弟选择 52
2.19 生成内容 54
第二部分 核心技术
第3章 提示 58
3.1 验证 58
3.2 调整字体值的顺序 59
3.3 玩转行高 60
3.4 无单位的行高值 61
3.5 避免缺少样式的边框值 62
3.6 使用颜色控制边框外观 62
3.7 抑制元素的显示 64
3.8 抑制元素的可见性 65
3.9 将元素移出屏幕 66
3.10 图像替换 68
3.11 打印样式 70
3.12 开发打印样式 71
3.13 块级链接 72
3.14 外边距还是内边距 73
3.15 凸排列表 75
3.16 为列表添加标记 76
3.17 通过背景实现列表标记 77
3.18 生成列表标记 79
3.19 不可不知的容器 81
3.20 文档背景 84
3.21 服务器特定的CSS 85
第4章 布局 88
4.1 用轮廓代替边框 88
4.2 居中块状框 90
4.3 通过溢出遏制浮动 93
4.4 通过浮动遏制浮动 95
4.5 清除浮动 96
4.6 相邻清除 98
4.7 简单的两栏布局 99
4.8 简单的三栏布局 100
4.9 伪造栏布局 103
4.10 流式漂白布局 106
4.11 唯一布局 109
4.12 Holy Grail 113
4.13 流式网格 117
4.14 基于em的布局 121
4.15 文档流中的负外边距 124
4.16 在特定的上下文中使用定位 127
4.17 将元素推出包含块 128
4.18 固定的页头和页脚 131
第5章 效果 134
5.1 复杂的螺旋 134
5.2 CSS弹出框 138
5.3 CSS菜单 140
5.4 框冲切 142
5.5 CSS3预备圆角 145
5.6 CSS3圆角 148
5.7 CSS精灵 150
5.8 滑动门 152
5.9 裁切的滑动门 155
5.10 CSS视差 157
5.11 参差浮动 160
5.12 更好的参差浮动 163
5.13 图像的框 166
5.14 受限的图像 168
第三部分 前沿技术
第6章 表格 172
6.1 表头、主体和脚注 172
6.2 行标题 175
6.3 面向列的样式 176
6.4 表的映射 180
6.5 表的图形化 186
第7章 可预见的未来 194
7.1 为HTML 5应用样式 194
7.2 像HTML 5一样给类命名 196
7.3 媒体查询 197
7.4 为特定的子元素应用样式 201
7.5 为特定的列应用样式 205
7.6 RGB alpha颜色 207
7.7 HSL颜色和HSL alpha颜色 208
7.8 阴影样式 210
7.9 多背景 212
7.10 二维变换 216
· · · · · · (收起)
"精彩绝伦的CSS"试读 · · · · · ·
CSS已经发展得非常成功了,甚至像HTML一样成功!尽管有时候它的确令人难以掌控。现在无论是在浏览器还是应用商店,甚至聊天客户端,CSS都无处不在并且没有任何消退的迹象。随着这门语言的应用愈加广泛,其能力也在不断增强。 本书涵盖了近100个使用CSS制作优秀网站的窍门、技术、工具以及一些技巧,其中每个部分都是相对独立的。你可以随便翻开一页就读,而不用担心会错过前面章节中...
丛书信息
喜欢读"精彩绝伦的CSS"的人也喜欢的电子书 · · · · · ·
喜欢读"精彩绝伦的CSS"的人也喜欢 · · · · · ·
精彩绝伦的CSS的书评 · · · · · · ( 全部 3 条 )
> 更多书评 3篇
-
在CSS中有两种“伪”字头的选择器:伪类(pseudo-class)和伪元素(pseudo-element)。CSS2.1中的伪类有: :link -- 未访问过的链接; :visited -- 访问过的链接; :hover -- 鼠标悬停的元素; :focus -- 获取焦点的元素; :activie -- 激活的元素(例如一个被单击的链接元素); :first-child -- 作为其它元素第一个子元素的元素; :lang() -- 根据元素的lang属性确定的元素。 CSS2.1中的伪元素有: ::first-line ::first-letter ::b...
2016-04-19 18:15:44
在CSS中有两种“伪”字头的选择器:伪类(pseudo-class)和伪元素(pseudo-element)。CSS2.1中的伪类有: :link -- 未访问过的链接; :visited -- 访问过的链接; :hover -- 鼠标悬停的元素; :focus -- 获取焦点的元素; :activie -- 激活的元素(例如一个被单击的链接元素); :first-child -- 作为其它元素第一个子元素的元素; :lang() -- 根据元素的lang属性确定的元素。 CSS2.1中的伪元素有: ::first-line ::first-letter ::before ::after 引自 第2章 选择器 回应 2016-04-19 18:15:44 -
#字体属性设置: 字体属性的设置:字号在前,字体在后,其他属性必须放在这两项之前,否则将被忽略 font:bold italic 100% sana-serif; #设置字体的行高方式: 1. 直接在字号后面设置行高,/后面为字体的行 font:100%/2.5 Helvetica,sans-serif; 2. 设置line-height,子元素会继承父元素的line-height属性,所以不推荐加单位,可以直接使用数字。 在css1中,li标签的行高继承父元素为15px,在css2中,li标签的行高继承父元素的...
2015-05-14 11:06:14
#字体属性设置: 字体属性的设置:字号在前,字体在后,其他属性必须放在这两项之前,否则将被忽略
font:bold italic 100% sana-serif;
#设置字体的行高方式: 1. 直接在字号后面设置行高,/后面为字体的行
font:100%/2.5 Helvetica,sans-serif;
2. 设置line-height,子元素会继承父元素的line-height属性,所以不推荐加单位,可以直接使用数字。 在css1中,li标签的行高继承父元素为15px,在css2中,li标签的行高继承父元素的换算系数1,而不是计算后的结果值15px。 ```html //html <ul> <li>item 1</li> <li>item 2</li> </ul> ``` ```css //css1 ul{ font-size:15px; line-height:100%; //line-height:1em; 效果相同 } li{ font-size:10px; } ``` ```css //css2 ul{ font-size:15px; line-height:1; } li{ font-size:10px; } ```
回应 2015-05-14 11:06:14
-
#字体属性设置: 字体属性的设置:字号在前,字体在后,其他属性必须放在这两项之前,否则将被忽略 font:bold italic 100% sana-serif; #设置字体的行高方式: 1. 直接在字号后面设置行高,/后面为字体的行 font:100%/2.5 Helvetica,sans-serif; 2. 设置line-height,子元素会继承父元素的line-height属性,所以不推荐加单位,可以直接使用数字。 在css1中,li标签的行高继承父元素为15px,在css2中,li标签的行高继承父元素的...
2015-05-14 11:06:14
#字体属性设置: 字体属性的设置:字号在前,字体在后,其他属性必须放在这两项之前,否则将被忽略
font:bold italic 100% sana-serif;
#设置字体的行高方式: 1. 直接在字号后面设置行高,/后面为字体的行
font:100%/2.5 Helvetica,sans-serif;
2. 设置line-height,子元素会继承父元素的line-height属性,所以不推荐加单位,可以直接使用数字。 在css1中,li标签的行高继承父元素为15px,在css2中,li标签的行高继承父元素的换算系数1,而不是计算后的结果值15px。 ```html //html <ul> <li>item 1</li> <li>item 2</li> </ul> ``` ```css //css1 ul{ font-size:15px; line-height:100%; //line-height:1em; 效果相同 } li{ font-size:10px; } ``` ```css //css2 ul{ font-size:15px; line-height:1; } li{ font-size:10px; } ```
回应 2015-05-14 11:06:14 -
在CSS中有两种“伪”字头的选择器:伪类(pseudo-class)和伪元素(pseudo-element)。CSS2.1中的伪类有: :link -- 未访问过的链接; :visited -- 访问过的链接; :hover -- 鼠标悬停的元素; :focus -- 获取焦点的元素; :activie -- 激活的元素(例如一个被单击的链接元素); :first-child -- 作为其它元素第一个子元素的元素; :lang() -- 根据元素的lang属性确定的元素。 CSS2.1中的伪元素有: ::first-line ::first-letter ::b...
2016-04-19 18:15:44
在CSS中有两种“伪”字头的选择器:伪类(pseudo-class)和伪元素(pseudo-element)。CSS2.1中的伪类有: :link -- 未访问过的链接; :visited -- 访问过的链接; :hover -- 鼠标悬停的元素; :focus -- 获取焦点的元素; :activie -- 激活的元素(例如一个被单击的链接元素); :first-child -- 作为其它元素第一个子元素的元素; :lang() -- 根据元素的lang属性确定的元素。 CSS2.1中的伪元素有: ::first-line ::first-letter ::before ::after 引自 第2章 选择器 回应 2016-04-19 18:15:44
-
在CSS中有两种“伪”字头的选择器:伪类(pseudo-class)和伪元素(pseudo-element)。CSS2.1中的伪类有: :link -- 未访问过的链接; :visited -- 访问过的链接; :hover -- 鼠标悬停的元素; :focus -- 获取焦点的元素; :activie -- 激活的元素(例如一个被单击的链接元素); :first-child -- 作为其它元素第一个子元素的元素; :lang() -- 根据元素的lang属性确定的元素。 CSS2.1中的伪元素有: ::first-line ::first-letter ::b...
2016-04-19 18:15:44
在CSS中有两种“伪”字头的选择器:伪类(pseudo-class)和伪元素(pseudo-element)。CSS2.1中的伪类有: :link -- 未访问过的链接; :visited -- 访问过的链接; :hover -- 鼠标悬停的元素; :focus -- 获取焦点的元素; :activie -- 激活的元素(例如一个被单击的链接元素); :first-child -- 作为其它元素第一个子元素的元素; :lang() -- 根据元素的lang属性确定的元素。 CSS2.1中的伪元素有: ::first-line ::first-letter ::before ::after 引自 第2章 选择器 回应 2016-04-19 18:15:44 -
#字体属性设置: 字体属性的设置:字号在前,字体在后,其他属性必须放在这两项之前,否则将被忽略 font:bold italic 100% sana-serif; #设置字体的行高方式: 1. 直接在字号后面设置行高,/后面为字体的行 font:100%/2.5 Helvetica,sans-serif; 2. 设置line-height,子元素会继承父元素的line-height属性,所以不推荐加单位,可以直接使用数字。 在css1中,li标签的行高继承父元素为15px,在css2中,li标签的行高继承父元素的...
2015-05-14 11:06:14
#字体属性设置: 字体属性的设置:字号在前,字体在后,其他属性必须放在这两项之前,否则将被忽略
font:bold italic 100% sana-serif;
#设置字体的行高方式: 1. 直接在字号后面设置行高,/后面为字体的行
font:100%/2.5 Helvetica,sans-serif;
2. 设置line-height,子元素会继承父元素的line-height属性,所以不推荐加单位,可以直接使用数字。 在css1中,li标签的行高继承父元素为15px,在css2中,li标签的行高继承父元素的换算系数1,而不是计算后的结果值15px。 ```html //html <ul> <li>item 1</li> <li>item 2</li> </ul> ``` ```css //css1 ul{ font-size:15px; line-height:100%; //line-height:1em; 效果相同 } li{ font-size:10px; } ``` ```css //css2 ul{ font-size:15px; line-height:1; } li{ font-size:10px; } ```
回应 2015-05-14 11:06:14
在哪儿借这本书 · · · · · ·
以下书单推荐 · · · · · · ( 全部 )
- web前端工程师读书单 (子龙)
- 书单-编程-前端 (LZX)
- Web编程与设计 (敏子爱书)
- 一个网站编辑的自我修养 (最后一支中南海)
- HTML+CSS修炼 (Kenny小狼)
谁读这本书?
二手市场
订阅关于精彩绝伦的CSS的评论:
feed: rss 2.0
1 有用 Ivy 2015-09-05 08:55:34
技术很实用,很多之前在用,看了书才知道具体的技术。此外,一直不喜欢的table还是挺酷(^-^)V
0 有用 boia 2013-08-22 11:14:08
作者5星,书本4星
0 有用 bystander 2013-06-30 19:49:54
那个css菜单那一节印象很深刻..
0 有用 修缘 2014-10-24 10:40:02
一本专门描述CSS的上佳技术书
0 有用 砂糖橘 2014-11-19 10:45:41
看不大下去。
0 有用 KK Wang 2016-03-08 16:49:36
怎么说呢,感觉一般吧。另外由于翻译的奇怪的很。。。
1 有用 Ivy 2015-09-05 08:55:34
技术很实用,很多之前在用,看了书才知道具体的技术。此外,一直不喜欢的table还是挺酷(^-^)V
1 有用 Shuping 2015-06-24 14:57:29
在读大师之作。
0 有用 eshua 2014-12-21 20:48:46
基本都是过时的技术了……估计只有我厂这种还要一定能兼容IE6的或许可以看看……
0 有用 砂糖橘 2014-11-19 10:45:41
看不大下去。