CSS设计指南

出版时间：2013-5  出版社：人民邮电出版社  作者：史密斯  译者：李松峰  
Tag标签：无  

内容概要

《图灵程序设计丛书:CSS设计指南(第3版)》是一本面向初中级读者的经典设计指南。全书共分8章，前4章分别介绍了HTML标记和文档结构、CSS工作原理、定位元素、字体和文本，对规则、声明、层叠、特指度、选择符等基本概念进行了详细解读。随后4章介绍了页面布局、界面组件，CSS3圆角、阴影、渐变、多背景等视觉设计技巧，最后还对如何实现最前沿的响应式设计进行了通俗易懂的演示。

作者简介

Charles Wyke-Smith（作者）　一直从事媒体相关工作。1980年代，他与人在旧金山共同创办了PRINTZ Electronic Design公司，当时可是一家全部工作都使用计算机处理的设计工作室。另外，他曾在富国银行、ESPN电子游戏担任领导和顾问工作，在Benefitfocus公司担任过用户体验总监。2009年，他与人合办了PeopleMatter公司，提供人力资源服务。目前，他是一家新的创业公司Bublish的CEO，这家公司提供图书策划等方面的服务。 Charles是一位乐手和多本Web开发书的作者，除了本书之外，他还出版过Codin' for the Web、Scriptin' with AJAX和Visual Stylin' with CSS3。他和妻子，还有两个女儿住在美国南卡罗来纳州查尔斯顿市。

书籍目录

第1章 HTML标记与文档结构 1 1.1 HTML标记基础 2 1.1.1 文本用闭合标签 2 1.1.2 引用内容用自闭合标签 3 1.1.3 属性 4 1.1.4 标题与段落 5 1.1.5 复合元素 5 1.1.6 嵌套标签 6 1.2 HTML文档剖析 7 1.2.1 HTML模板 7 1.2.2 块级元素和行内元素 10 1.2.3 嵌套的元素 15 1.3 文档对象模型 19 1.4 小结 21 第2章 CSS工作原理 23 2.1 剖析CSS规则 24 CSS规则命名惯例 27 2.2 上下文选择符 28 2.3 特殊的上下文选择符 33 2.3.1 子选择符> 33 2.3.2 紧邻同胞选择符+ 34 2.3.3 一般同胞选择符～～ 34 2.3.4 通用选择符* 35 2.4 ID和类选择符 36 2.4.1 类属性 36 2.4.2 ID属性 39 2.4.3 什么时候用ID，什么时候用类 40 2.4.4 ID和类的小结 42 2.5 属性选择符 42 2.5.1 属性名选择符 43 2.5.2 属性值选择符 43 2.5.3 属性选择符的小结 44 2.6 伪类 44 2.6.1 UI伪类 44 2.6.2 结构化伪类 47 2.7 伪元素 48 2.8 继承 50 2.9 层叠 51 2.9.1 样式来源 51 2.9.2 层叠规则 52 2.9.3 计算特指度 54 2.10 规则声明 56 2.10.1 文本值 56 2.10.2 数字值 57 2.10.3 颜色值 58 2.11 小结 62 第3章 定位元素 63 3.1 理解盒模型 63 3.1.1 盒子边框 66 3.1.2 盒子内边距 68 3.1.3 盒子外边距 69 3.1.4 叠加外边距 70 3.1.5 外边距的单位 71 3.2 盒子有多大 71 3.3 浮动与清除 77 3.3.1 浮动 78 3.3.2 围住浮动元素的三种方法 80 3.4 定位 87 3.4.1 静态定位 88 3.4.2 相对定位 88 3.4.3 绝对定位 89 3.4.4 固定定位 90 3.4.5 定位上下文 91 3.5 显示属性 94 3.6 背景 95 3.6.1 CSS背景属性 96 3.6.2 背景颜色 96 3.6.3 背景图片 97 3.6.4 背景重复 98 3.6.5 背景位置 99 3.6.6 背景尺寸 101 3.6.7 背景粘附 102 3.6.8 简写背景属性 103 3.6.9 其他CSS3背景属性 103 3.6.10 多背景图片 104 3.6.11 背景渐变 106 3.7 小结 110 第4章 字体和文本 111 4.1 字体 111 4.1.1 字体族 112 4.1.2 字体大小 115 4.1.3 字体样式 118 4.1.4 字体粗细 119 4.1.5 字体变化 120 4.1.6 简写字体属性 120 4.2 文本属性 121 4.2.1 文本缩进 121 4.2.2 字符间距 124 4.2.3 单词间距 125 4.2.4 文本装饰 125 4.2.5 文本对齐 126 4.2.6 行高 127 4.2.7 文本转换 128 4.2.8 垂直对齐 129 4.3 Web字体大揭秘 130 4.3.1 公共字体库 131 4.3.2 打包的@font—face包 132 4.3.3 生成@font—face包 133 4.4 文字版式 134 4.4.1 简单的文本布局 134 4.4.2 基于网格排版 138 4.4.3 经典的排版练习 145 4.5 小结 154 第5章 页面布局 155 5.1 布局的基本概念 156 5.2 三栏—固定宽度布局 157 5.3 三栏—中栏流动布局 172 5.3.1 用负外边距实现 172 5.3.2 用CSS3单元格实现 176 5.4 多行多栏布局 179 5.4.1 CSS选择符的实际应用 181 5.4.2 内部DIV实战 183 5.5 小结 183 第6章 界面组件 185 6.1 导航菜单 185 6.1.1 纵向菜单 186 6.1.2 横向菜单 189 6.1.3 下拉菜单 190 6.2 表单 200 6.2.1 HTML表单元素 201 6.2.2 表单标记策略 208 6.2.3 设定表单样式 209 6.2.4 设计搜索表单 218 6.3 弹出层 220 6.3.1 堆叠上下文和z—index 223 6.3.2 用CSS创造三角形 225 6.4 小结 226 第7章 CSS3实战 227 7.1 规划页面结构 227 7.2 页眉 231 7.2.1 页面标题 232 7.2.2 搜索表单 235 7.2.3 菜单 236 7.3 专题区 242 7.3.1 登录表单 246 7.3.2 博文链接 249 7.4 图书区 251 7.5 页脚 257 7.6 小结 259 第8章 响应式设计 261 8.1 小设备上的大布局 261 8.2 媒体查询 263 8.2.1 @media规则 264 8.2.2 标签的media属性 266 8.2.3 断点 266 8.2.4 用标签设定视口 267 8.3 针对平板优化布局 268 8.4 针对智能手机优化布局 271 8.5 最后两个问题 275 8.5.1 移动Safari中的缩放bug 275 8.5.2 让下拉菜单支持触摸 276 8.6 小结 278 附录 技术提示 279 索引 287～

章节摘录

版权页：   插图：   5.1布局的基本概念 多栏布局有三种基本的实现方案：固定宽度、流动、弹性。 固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是900到1100像素宽。其中960像素是最常见的，因为这个宽度适合所有现代显示器，而且能够被16、12、10、8、6、5、4和3整除，不仅容易计算等宽分栏的数量，而且计算结果也能得到没有小数的像素数。 流行的CSS布局框架960 Grid，就是基于960像素宽的网格创建的。 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。网站的页面采用的就是流动中栏布局，在各栏宽度加大时通过为内容元素周围添加空白来保持内容居中，而且现在的导航条会在布局变窄到某个宽度时收缩进一个下拉菜单中，从而为内容腾出空间。 今天，越来越多的浏览器都支持CSS媒体查询了。这就让基于浏览器窗口宽度提供不同的CSS样式成为可能。在这种形势下，适应各种屏幕宽度的可变固定布局，正逐步取代流动布局。这种可变的固定布局能够适应最大和最小的屏幕，业界称之为响应式设计。本书第8章将专门介绍响应式设计相关的CSS技术。 弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了的感觉。到目前为止，我还没见过设计得非常好的弹性布局，主要是因为它太过复杂了。本章不介绍这种布局，而只把笔墨花在固定宽度布局和流动布局上。 下面，我们先来看一看页面的高度和宽度有什么区别。 布局高度与布局宽度 在实际地创建页面布局之前，我想先说说应该怎么看待布局的高度和宽度，因为这两者的控制方法实在太不一样了。 布局面度 多数情况下，布局中结构化元素（乃至任何元素）的高度是不必设定的。事实上，我甚至想告诉你根本不应该给元素设定高度。除非你确实需要这样做，比如在页面中创造一个绝对定位的元素。 为什么正常情况下都应该保持元素height属性的默认值auto不变呢？很简单，只有这样元素才能随自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推，而布局也能随着内容数量的增减而垂直伸缩。假如你明确设定了元素的高度，那么超出的内容要么被剪掉，要么会跑到容器之外——取决于元素overflow属性的设定。

媒体关注与评论

《CSS设计指南（第3版）》是一本面向初中级读者的经典设计指南。全书共分8章，前4章分别介绍了HTML标记和文档结构、CSS工作原理、定位元素、字体和文本，对规则、声明、层叠、特指度、选择符等基本概念进行了详细解读。随后4章介绍了页面布局、界面组件，CSS3圆角、阴影、渐变、多背景等视觉设计技巧，最后还对如何实现最前沿的响应式设计进行了通俗易懂的演示。

编辑推荐

讲解透彻、组织巧妙，专设一章讲解最前沿的响应式设计著译双馨，CSS设计入门首选 涵盖HTML5、CSS3和响应式设计

用户评论 (总计9条)

•   这本书是我目前买的5本CSS教材里面最好的，强烈推荐
•   这本书讲的挺好的，重在讲为什么，而不是怎样做。就喜欢这样的书
•   非常不错的书，解释了很多长久以来困扰我的问题。
•   书本提到的内容是国内书籍中没有提到过的，内容充实，真的是一本好书。
•   配合水晶石的那本书一起看是不错的，有些小细节的东西还是感觉讲的不很精粹
•   這本书，是我的第一本css书，看后感觉不错，尤其是原理部分，作者讲的很到位。
•   平时有些刁钻的CSS用法可以在上面找到，物超所值
•   这样的好书不多，绝对是css最好的书！
•   通俗易懂，适合象我这样的初学者