CSS设计指南（第3版）作品目录

时间：2023-02-15 03:45:02 | 来源：营销百科

时间：2023-02-15 03:45:02 来源：营销百科

CSS设计指南（第3版）作品目录：版权声明

Authorized translation from the English language edition,entitled Stylin' with CSS:A Designer's Guide,Third Edition by Charles Wyke-Smith,publishe……

内容提要

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

两个'之最'（译者序）

或许你不敢相信，这本书创下了不少'之最'。虽然只能说是我自己经历过的'之最'，但说不定它们也是'中国之最'，甚至'世界之最'。首先，这是翻译遍数最多的一本书。2006年，我翻译了本书第1版。当时是为了学习翻译而翻译，并没有出版（也没有出版社引进），翻译稿至今仍静静地躺在电脑硬盘的'翻译档案'里。2……

前言

前言对网页设计师来说，这是一个激动人心的时刻！互联网已经囊括了几乎所有媒体，有线电视、CD和DVD已经被Hulu、Netflix、Pandora和Spotify等这些按需取用的在线服务取代。当然，访问这些媒体的设备同样异彩纷呈。有传统的台式电脑、笔记本电脑，还有平板电脑、智能手机，甚至60英寸……

致谢

致谢首先感谢Peachpit的出版团队。感谢Micheal Nolan鼓励我写这个版本并保证选题通过，感谢项目编辑Nancy Peterson的指导、见解和耐心，还要感谢出版人Nance Ruenzel在7年间连续出版我的书。对于编辑团队，我要感谢对语法较真儿的校对编辑Darren Meiss……

第1章HTML标记与文档结构

这是一本讲CSS的书，所以，第1章要先讲讲HTML（Hypertext Markup Language，超文本标记语言）。之所以从HTML讲起，是因为CSS的用途就是为HTML标记添加样式。所以，你首先得知道怎么编写和构造HTML标记，才能让CSS更方便地为它添加样式。每个网页在呱呱坠地时都只包含……

1.1HTML标记基础

1.1.1文本用闭合标签

1.1.2引用内容用自闭合标签

1.1.3属性

1.1.4标题与段落

1.1.5复合元素

1.1.6嵌套标签

1.2HTML文档剖析

1.2.1HTML模板

1.2.2块级元素和行内元素

1.2.3嵌套的元素

1.3文档对象模型

1.4小结

第2章CSS工作原理

第1章我们了解了怎么通过HTML来创建文档结构。本章，我们来说一说CSS规则怎么为HTML添加样式，并解释层叠的工作机制——当元素的同一个样式属性有多种样式值的时候，CSS就要靠层叠机制来决定最终应用哪种样式。每个HTML元素都有一组样式属性，可以通过CSS来设定。这些属性涉及元素在屏幕上显示时的……

2.1剖析CSS规则

CSS规则命名惯例

2.2上下文选择符

2.3特殊的上下文选择符

2.3.1子选择符

2.3.2紧邻同胞选择符

2.3.3一般同胞选择符~

2.3.4通用选择符

2.4ID和类选择符

2.4.1类属性

2.4.2ID属性

2.4.3什么时候用ID，什么时候用类

2.4.4ID和类的小结

2.5属性选择符

2.5.1属性名选择符

2.5.2属性值选择符

2.5.3属性选择符的小结

2.6伪类

2.6.1UI伪类

2.6.2结构化伪类

2.7伪元素

2.8继承

2.9层叠

2.9.1样式来源

2.9.2层叠规则

2.9.3计算特指度

2.10规则声明

2.10.1文本值

2.10.2数字值

2.10.3颜色值

2.11小结

第3章定位元素

本章，我们该学习盒模型了。当然，还有position和display属性，以及如何浮动（float）和清除（clear）元素。这么说吧，要掌握CSS技术，核心就是要掌握元素定位，只有这样才能用CSS创造出专业水准的页面布局。所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们……

3.1理解盒模型

3.1.1盒子边框

3.1.2盒子内边距

3.1.3盒子外边距

3.1.4叠加外边距

3.1.5外边距的单位

3.2盒子有多大

3.3浮动与清除

3.3.1浮动

3.3.2围住浮动元素的三种方法

3.4定位

3.4.1静态定位

3.4.2相对定位

3.4.3绝对定位

3.4.4固定定位

3.4.5定位上下文

3.5显示属性

3.6背景

3.6.1CSS背景属性

3.6.2背景颜色

3.6.3背景图片

3.6.4背景重复

3.6.5背景位置

3.6.6背景尺寸

3.6.7背景粘附

3.6.8简写背景属性

3.6.9其他CSS3背景属性

3.6.10多背景图片

3.6.11背景渐变

3.7小结

第4章字体和文本

网页设计中很多时候都要处理文本，包括段落、标题、列表、菜单和表单中的文本。因此，理解本章要讲的字体和文本属性，对于创造出专业水准的网页排版非常重要。一个网站的品质如何，有时候只要看看它用的字体就能一目了然。如果说图片只是蛋糕上的糖衣，那么排版才是卓越设计的根本。这一章主要介绍字体和文本，以及与它们……

4.1字体

4.1.1字体族

4.1.2字体大小

4.1.3字体样式

4.1.4字体粗细

4.1.5字体变化

4.1.6简写字体属性

4.2文本属性

4.2.1文本缩进

4.2.2字符间距

4.2.3单词间距

4.2.4文本装饰

4.2.5文本对齐

4.2.6行高

4.2.7文本转换

4.2.8垂直对齐

4.3Web字体大揭秘

4.3.1公共字体库

4.3.2打包的@font-face包

4.3.3生成@font-face包

4.4文字版式

4.4.1简单的文本布局

4.4.2基于网格排版

4.4.3经典的排版练习

4.5小结

第5章页面布局

本章，我们来学习多栏页面布局。很多网站为了在第一屏尽可能多地显示信息，都采用了多栏布局。这里所说的'第一屏'就是用户无须滚动就能看到的页面区域，相当于传统报纸行业所说的'折痕之上'的版面。一般来说，两栏、三栏，甚至四栏布局都很常见。但无论几栏，每个页面都要涉及一些关键技术和指导思想，这些内容本章都将……

5.1布局的基本概念

布局高度与布局宽度

5.2三栏-固定宽度布局

为栏设定内边距和边框

5.3三栏-中栏流动布局

5.3.1用负外边距实现

5.3.2用CSS3单元格实现

5.4多行多栏布局

5.4.1CSS选择符的实际应用

5.4.2内部DIV实战

5.5小结

第6章界面组件

界面组件是我对HTML提供的常见用户界面（UI，User Interface）元素的称呼，包括列表和表单等。实际上，下拉菜单和弹出层也是很常用的界面组件，只不过HTML没有提供对应的原生标签而已，本章也将介绍如何通过标记和样式实现它们。除了介绍怎么实现这些界面组件，我还会告诉你怎么写代码才能更方便……

6.1导航菜单

6.1.1纵向菜单

6.1.2横向菜单

6.1.3下拉菜单

6.2表单

6.2.1HTML表单元素

6.2.2表单标记策略

6.2.3设定表单样式

6.2.4设计搜索表单

6.3弹出层

6.3.1堆叠上下文和z-index

6.3.2用CSS创造三角形

6.4小结

第7章CSS3实战

这一章我们要写一个完整的网页啦！这个网页要用到第5章介绍的页面布局技术，还有第6章讲解的界面组件设计技术。不仅如此，我们还会展示很多CSS3的新属性，涉及圆角、文字阴影、盒阴影、过渡和变换。这些CSS3样式，可以为页面的整体设计增添专业气息。还是说实话吧，本章这个网页其实就是我在写这本书的时候写的……

7.1规划页面结构

HTML结构

7.2页眉

7.2.1页面标题

7.2.2搜索表单

7.2.3菜单

7.3专题区

7.3.1登录表单

7.3.2博文链接

7.4图书区

7.5页脚

7.6小结

第8章响应式设计

今天的网页布局必须能根据它自己所处的不同环境作出响应。大屏幕上的最佳体验和手机中的最佳体验有着天壤之别。在大屏幕上，可能使用多栏布局效果很不错，但多栏布局到了手机上，每一栏都会窄得没法看。此时，所有内容'鱼贯而行'，即用一个栏来组织成了唯一可行的方案。这样，用户使用简单的扫屏手势，就可以轻松自如地滚……

8.1小设备上的大布局

8.2媒体查询

8.2.1@media规则

8.2.2标签的media属性

8.2.3断点

8.2.4用标签设定视口

8.3针对平板优化布局

8.4针对智能手机优化布局

针对竖屏进一步优化

8.5最后两个问题

8.5.1移动Safari中的缩放bug

8.5.2让下拉菜单支持触摸

8.6小结

附录技术提示

附录技术提示编写CSSCSS是HTML的排版语言。本书几乎所有例子都是从HTML代码块开始的，然后才是CSS代码。HTML代码类似如下所示。