CSS从入门到精通
2009-8
化学工业出版社
关涛
395
无
出版者的话 近年来我国IT产业发展迅猛，IT从业人数也不断增多，越来越多的人开始学习计算机技术。而作为计算机核心技术之一的程序设计更是受到了很多人的青睐，尤其是年轻人。如今很多年轻人开始学习编程，以使得自己在未来的职业生涯中更有竞争力。 但很多人刚开始学习时总觉得不得要领，感觉有一堵无形的墙竖在面前而无法逾越。究其原因是学习方法或者思路有问题所致。作为自学人员，学编程首先需要一本好书，适合自己阅读的书，这样才不至于走弯路，学习效果也好。然而图书市场上的图书虽然很多，但要真想找本很好的入门编程书却并不容易，很多书都是写给专家看的，把真正需要学习的人都给挡在了门外。基于这种原因，我们策划了这套《程序员书库》丛书，希望能降低读者学习编程的门槛，带领读者快速跨入编程的大门。 丛书包含书目 《Java从入门到精通》 《C++从入门到精通》 《PHP从入门到精通》 《Visual C++从入门到精通》 《Visual Basic从入门到精通》 《ASP.NET从入门到精通》 《Linux编程从入门到精通》 《JavaScript从入门到精通》 《CSS从入门到精通》 《ActionScript 3.0从入门到精通》 《Excel VBA从入门到精通》 《SQL Server 2008从入门到精通》 丛书主要特色 1．由浅入深讲解到位，轻松入门 本丛书对内容的讲解都是从最基本的配置和概念讲起，然后层层深入，最后还安排了综合案例，很适合读者学习，可以达到轻松入门、快速提高的效果。 2．程序代码详尽注释，易于理解 书中给出了典型的程序代码，而且对这些代码都进行了详尽的注释，读者阅读起来很容易理解，这对理解编程有很大的帮助。 3．以大量实例为示范，快速掌握 无论是对基本的语法讲解，还是应用开发，书中都列举了大量实例，最后还提供了综合实例，非常实用，读者可以通过这些例子很快掌握所学内容，学习效果好。 4．多媒体视频讲解，加速学习 丛书的每本书都配专门制作的多媒体学习光盘，方便读者学习，另外也提供了书中所涉及的源代码，以方便读者使用。 5．完善的售后服务，后顾无忧 本丛书提供技术论坛（http：//www.rzchina.net）和QQ群（QQ群号：21948169）答疑，读者可以在上面提问和交流。 丛书适合的读者对象 本丛书定位于如下没有编程基础的入门人员。 ? 自学编程的入门人员。 ? 各类程序设计爱好者。 ? 想学习一门技术以便找工作的人员。 ? 做课题设计和毕业设计的学生。 ? 需要迅速掌握一门编程语言的人员。 ? 大中专院校或电脑学校的学生。 学习建议 学习编程并不是想象的那么难，关键是要有合适的教程和正确的学习方法。如果您已经选择了这套书，那么恭喜您已经解决了第一个问题。但我们还有如下建议。 ? 入门人员自然按书中安排的顺序阅读最好。 ? 如果你有一定的基础，那也不妨跳跃式阅读，选择阅读。 ? 先弄懂书中的内容，然后可以适当拓展。 ? 要勤思考，多动手，必要时一定要上机操作。 ? 要学会利用网络资源，经常光顾各技术论坛，有不懂的地方可以利用百度来搜索解决方法。 希望这套书能成为您初学编程的良师益友，能带您轻松跨入编程的大门，并逐步成为编程高手。
《CSS从入门到精通》共分为四篇，循序渐进的讲述了网页基础知识和CSS布局的实战技术，从基本概念到具体实践、从对网页的认识到制作网页、从使用CSS进行网页局部的设计到进行整个网站的布局制作都进行了详细的阐述，并对具体知识点进行了详细的实例讲解。 本书内容丰富，注重思维方法的转变和提高实际操作能力，以最简单的方法介绍使用CSS进行符合Web标准的网页设计的相关知识和技巧。全书以CSS布局为主体内容，探讨CSS布局的入门知识与网站布局实战技巧、版式布局到细节、浏览器兼容性等，帮助读者改变传统的网站设计思维，进入基于Web标准的网页设计领域。本书含有大量实例，详细描述各个CSS属性，以及代码编写技巧，方便读者模拟实践。本书适合将要学习或者正在学习使用CSS布局技术的用户阅读，并可作为Web前端代码架构的从业人员的参考手册。
本丛书的作者团队对计算机程序设计类图书市场有很好的敏感性，对出版动态有准确的把握，对计算机技术的发展进行长期跟踪。该团队长期以来致力于计算机图书的内容提供和策划，已经出版的多个系列图书都在计算机图书市场上有良好的口碑，都曾经引领了当年的计算机程序设计畅销书。
第一篇 基础知识篇第1章 与网页有关的基本概念 31.1 网页的基本构成 31.2 网页的结构设计——HTML与XHTML 41.2.1 认识HTML 51.2.2 认识XHTML 51.2.3 制作一个简单的XHTML网页 61.2.4 XHTML的优势 71.3 CSS入门 81.3.1 感性体验CSS的魅力 81.3.2 CSS的概念 111.3.3 CSS的特点 111.3.4 CSS的优势 121.3.5 发挥CSS的优势 121.4 Web标准 131.4.1 什么是Web标准 141.4.2 Web标准的构成 141.4.3 Web标准的表现层技术 151.5 CSS+DIV建设网站 151.5.1 CSS+DIV的含义 151.5.2 CSS+DIV网站设计的优势 151.6 小结 16第2章 CSS基础知识 182.1 CSS的基本语法 182.1.1 CSS的基本语法构成 182.1.2 一个CSS样式的简单实例 182.2 CSS的选择符 192.2.1 类型选择符 202.2.2 群组选择符 202.2.3 包含选择符 202.2.4 id、class选择符 212.2.5 标签指定式选择符 222.2.6 组合选择符 222.2.7 伪类和伪对象 232.2.8 通配选择符 232.3 CSS的常用属性及属性值 242.3.1 color颜色属性 242.3.2 常用CSS长度单位 252.3.3 百分比值 262.3.4 URL路径 262.4 CSS的继承性 272.5 CSS的添加方法 282.5.1 在XHTML标识符里添加CSS 282.5.2 在XHTML头信息标识符里添加CSS 282.5.3 链接样式表 292.5.4 联合使用样式表 302.6 CSS的开发环境 312.6.1 编辑软件 312.6.2 浏览软件 322.7 小结 33第3章 XHTML与Javascript基础 353.1 XHTML基础知识 353.1.1 XHTML的格式文件 353.1.2 XHTML基本结构 363.1.3 XHTML网页实例 393.2 XHTML的语法构成 403.2.1 XHTML中的标签 403.2.2 XHTML的标签属性 413.3 XHTML的语法规范 423.3.1 标签不能重叠，可以嵌套 423.3.2 XHTML文件一定要有正确的组织格式 423.3.3 标签名字一定要用小写字母 433.3.4 所有的 XHTML 元素一定要关闭 433.3.5 独立的一个标签也要结束用 />来结束 433.4 div标签 433.4.1 什么是div 443.4.2 理解div 443.4.3 使用div 463.4.4 div的并列与嵌套 463.5 span标签 473.5.1 什么是span 473.5.2 span与div的区别 473.6 h1至h6标签 493.7 列表制作标签ul、ol、li 493.7.1 ul无序列表 503.7.2 ol有序列表 513.8 p标签和br标签 513.8.1 p标签 513.8.2 br标签 523.9 img标签 533.9.1 img标签的属性 533.9.2 img标签使用方法 533.10 表单标签 543.10.1 form标签 543.10.2 input标签 543.10.3 分组标签fieldset、legend 563.11 JavaScript简介 573.12 JavaScript语言基础 583.12.1 插入JavaScript 583.12.2 基本语法 593.12.3 变量和数据类型 593.12.4 语句 603.13 JavaScript的对象及其属性和方法 633.14 事件处理 643.14.1 事件处理的类型 643.14.2 指定事件处理 643.15 小结 65第4章 浏览器的兼容与解析问题 674.1 兼容问题的由来 674.2 需要兼容的常用浏览器 674.3 CSS hack技术 684.3.1 什么是CSS hack 684.3.2 使用CSS hack 694.4 常用CSS hack方法介绍 694.4.1 屏蔽IE 6浏览器 704.4.2 仅IE 7识别 714.4.3 仅IE 6识别 714.4.4 仅IE识别 724.4.5 兼容IE 6、IE 7、Firefox浏览器 734.5 CSS hack管理 754.6 IE条件注释功能 764.7 小结 76第二篇 实例制作篇第5章 使用CSS制作背景 815.1 制作颜色背景 815.2 给元素添加背景图片 825.2.1 指定背景图像 835.2.2 制作重复的背景图像 855.3 制作不动的背景 865.4 给网页添加背景 895.5 制作滚动的背景 915.6 综合使用背景 925.7 小结 94第6章 使用CSS布局页面顶部内容 956.1 制作包含文本logo的页面顶部 956.2 制作包含图像logo的页面顶部 976.2.1 制作实例 986.2.2 兼容问题 1006.3 制作包含文本banner的页面顶部 1026.3.1 图片logo的定位 1036.3.2 定义快捷方式的文本样式 1056.3.3 定义段落文本banner样式 1076.4 制作包含图像banner的页面顶部 1086.5 小结 112第7章 使用CSS制作网站导航 1147.1 制作一个简单的横向文字导航条 1147.2 制作方块导航条 1177.3 制作标签式导航 1197.4 制作按钮导航条 1227.5 CSS盒模型及盒模型hack 1267.5.1 盒模型尺寸 1267.5.2 盒模型hack 1287.5.3 简单盒模型hack方法 1297.6 制作会动的长城型导航条 1307.7 制作基于背景控制的导航条 1357.8 制作左右自由伸展的导航条 1387.8.1 九宫格技术原理 1397.8.2 制作自由伸展的导航条实例 1417.9 制作一个简单的纵向导航条 1447.9.1 使用ul、li列表标签制作导航条 1457.9.2 使用div+h1标签制作 1457.10 制作分行导航条 1487.11 制作增亮导航条 1497.12 制作动感的导航条 1517.13 制作下拉式导航条 1557.13.1 制作实例 1557.13.2 兼容问题 1597.14 制作多级弹出导航条 1607.14.1 制作实例 1607.14.2 兼容问题 1657.15 小结 167第8章 使用CSS制作列表 1698.1 制作新闻列表 1698.1.1 制作实例 1708.1.2 兼容问题 1738.2 制作排行榜 1748.3 制作自定义图片项目符号的列表 1778.3.1 使用列表符号样式属性制作列表 1778.3.2 使用背景图片属性制作列表符号 1808.3.3 兼容问题 1818.4 使用CSS改变列表排版 1828.5 列表缩进排版 1868.5.1 制作实例 1868.5.2 兼容问题 1898.6 复杂列表排版 1918.6.1 overflow属性语法结构 1918.6.2 制作实例 1918.6.3 兼容问题 1968.7 小结 198第9章 使用CSS制作表单 2009.1 制作登录表单 2009.1.1 label标签语法结构 2019.1.2 制作登录表单实例 2019.1.3 兼容问题 2049.2 制作用户注册表单 2059.2.1 制作页面的XHTML代码 2069.2.2 制作页面的CSS样式 2089.3 制作符合W3C标准的表单 2139.3.1 制作页面的XHTML代码 2139.3.2 制作页面的CSS样式 2169.3.3 兼容问题 2249.4 小结 224第10章 使用CSS制作内容的版式 22610.1 制作分栏的文字排版 22610.2 制作图文混合排版 22810.2.1 图文混排基本方式 22810.2.2 制作网站图文混排版式的实例 23010.3 制作全图排版的实例 23510.3.1 自由浮动布局 23510.3.2 其他显示方式布局 24010.4 小结 242第11章 使用CSS制作链接样式 24311.1 制作Windows风格样式的CSS按钮 24311.1.1 仿Windows经典样式的CSS按钮 24311.1.2 仿Windows XP风格的CSS按钮 24411.2 制作仿按钮下陷效果的实例 24511.3 面包屑导航链接 24611.3.1 制作实例 24711.3.2 兼容问题 24911.4 小结 250第12章 使用CSS制作数据表格 25212.1 制作基本的数据表格 25212.1.1 表示数据的表格对象标签 25212.1.2 使用表格标签制作表格 25212.1.3 使用CSS修饰表格样式 25412.2 制作CSS风格的数据表格 25812.2.1 表格对象标签属性 25812.2.2 CSS属性text-transform 25912.2.3 制作数据表格实例 25912.3 小结 266第13章 使用CSS制作页面底部内容 26713.1 制作文本信息的页面底部内容 26713.1.1 a标签的title属性 26713.1.2 制作包含文本信息的页面底部XHTML结构代码 26713.1.3 制作页面的CSS样式 26813.1.4 兼容问题 27213.2 制作包含导航链接的页面底部内容 27313.2.1 制作包含导航链接页面底部的XHTML代码结构 27313.2.2 制作页面的CSS样式 27413.3 制作包含图像友情链接的页面底部内容 27813.3.1 制作页面底部的XHTML结构 27813.3.2 制作页面的CSS样式 27913.4 小结 282第三篇 整体布局篇第14章 CSS基本布局 28714.1 一列固定宽度 28714.2 一列宽度自适应 28814.3 一列居中 29014.4 二列固定宽度 29214.5 二列宽度自适应 29314.6 两列右列宽度自适应 29414.7 两列固定宽度居中 29714.8 三列浮动中间列宽度自适应 29914.9 高度自适应 30214.10 小结 303第15章 CSS整体布局的实现 30515.1 顶行三列布局的实现 30515.1.1 制作思路 30615.1.2 制作顶部三列式布局实例 30715.2 多区域不规则布局 30915.2.1 制作思路 31015.2.2 制作多区域不规则布局的实例 31315.3 小结 316第16章 使用Dreamweaver制作页面的实例 31716.1 框架设计 31716.1.1 页面分析 31816.1.2 框架制作 31916.1.3 切图 32316.2 布局设计 32616.2.1 页面顶部布局设计 32716.2.2 页面中上部的布局设计 32916.2.3 页面中下部的布局设计 33216.2.4 页面底部的布局设计 33616.3 模块设计 33816.3.1 快速导航制作 33816.3.2 “面包屑”制作 34116.3.3 数据表格制作 34216.3.4 图片排版 34516.4 兼容性测试 34816.5 小结 350第四篇 综合应用篇第17章 博客类网页布局设计 35317.1 页面布局和规划 35417.1.1 界面设计分析 35417.1.2 规划页面布局 35417.2 CSS结构设计与整体布局设计 35617.2.1 CSS结构设计 35617.2.2 整体布局设计 35717.3 页面头部布局设计 36017.3.1 制作头部的结构代码 36017.3.2 编写头部的CSS代码 36117.4 日志部分的布局设计 36317.4.1 制作日志部分的结构代码 36417.4.2 编写日志部分的CSS代码 36517.5 边栏区域的布局设计 36917.5.1 制作边栏区域的结构代码 36917.5.2 编写右边栏区域的CSS代码 37017.6 页面底部的布局设计 37217.6.1 制作底部的结构代码 37217.6.2 编写底部的CSS代码 37317.7 小结 374第18章 企业类网页布局设计 37518.1 页面布局和规划 37518.1.1 界面设计分析 37618.1.2 规划页面布局 37718.2 CSS结构设计与整体布局设计 37818.2.1 CSS文件结构设计 37818.2.2 首页布局设计 37918.3 页面头部布局设计 38118.3.1 制作头部的结构代码 38118.3.2 编写头部的CSS样式 38218.4 页面banner区域的布局设计 38318.4.1 制作banner区域主体的布局设计 38318.4.2 制作banner区域各个元素的布局设计 38418.5 页面主内容区的布局设计 38918.5.1 制作页面主内容区结构 38918.5.2 编写CSS样式 39018.6 频道页面布局设计概述 39318.7 小结 394
在当前如火如荼的Web 2.0新浪潮中，一切基于Web标准。人们常常把Web 2.0描述为“作为平台的网络”，把网络看成是一个内容互动的平台之后，我们很容易发现这种变化对于网页设计的重大影响。想象一下，当来自不同领域的不同群体（公司、个人、政府等）存储了一系列数据之后，我们便能通过一个接口将信息混合，这一点是任何单一传统网站都不可能做到的。因此，这就使得Web 2.0网站必然有别于以前传统的网站，也优于传统网站。 Web 2.0的网站更趋向于风格和结构的分离，随着CSS的流行，人们通过添加一个定义了风格信息的独立CSS文件实现了页面风格和结构的分离。Web 2.0的网站更提倡使用语义标记语言编写页面代码。这些标记语言并非完全没有语义能力，设计师们用它们能够描述页面。对于Web 2.0来说，对页面的描述不仅是一项需求，它是实现Web 2.0的关键。 本书正是一本讲述基于Web标准，使用标记语言XHTML和CSS样式层叠表，实现风格和结构的相分离，并讲解网站布局实例的书。 笔者精心编写此书，目的是一步步的告诉大家如何开始新的、符合Web标准的CSS布局设计。本书的重点放在实例制作中，在制作实例的过程中，同时讲解CSS样式，将知识点的学习融入在实践之中，有目的地学习必要的CSS属性。笔者结合自己多年在Web前端代码架构的工作实践的经验，为广大喜爱或渴望从事Web前端代码架构的朋友介绍制作符合Web标准页面的各种技巧。 本书特点 本书作者是在国内综合门户网站从业的经验丰富的设计师。本书结合目前流行的网站制作实例，深入浅出地讲解了网站制作中各种常用的XHTML标签和CSS属性。在代码讲解过程中，笔者还结合自己在Web前端代码架构的从业经验，深入讲解了定义CSS属性的各种技巧。在每章的最后，还有对这一章讲到的知识点进行的归纳总结，使读者能够理清学习的重点，有重点地掌握CSS属性。 本书涵盖了制作网站过程中常用的XHTML标签和CSS属性，并且通过实例，讲解了网站各个部分和各种布局的实现方法。在制作实例的过程中，穿插了大量实用的CSS属性的使用方法，便于读者在使用中完成技能的提高和升华。 本书的特点主要体现在以下几个方面。 本书通过常用的网站实例，系统全面地讲解了常用的XHTML标签和CSS属性的使用方法，方便读者自己进行实践和演练。所有的实例制作方法，均可以在实际制作过程中直接使用，或者根据自己的实际情况进行调整，方便读者在实际工作中的使用。 本书除讲解基础的CSS和XHTML使用方法外，还适当加入目前流行的Web标准理论的思想，介绍如何使用CSS实现结构与表现的分离，使读者在制作符合Web 2.0网站的时候有理可依。 本书结合笔者多年在大型门户网站Web前端代码架构的经验，深入浅出地介绍CSS属性在实践中的应用，并在每章的最后对本章所涉及到的CSS属性进行了归纳总结，使读者能够理清学习的重点，有重点的掌握CSS属性。 本书在讲解网站制作实例的过程中，融入了笔者多年工作的经验，对很多问题提出了自己独到的见解。这些见解都是在实践的基础上总结出来的，能够帮助和启发读者拓展思路，同时也能指导读者在学习过程中对具体问题进行具体分析。 本书中列举了世界上各国的优秀网页，并且突出介绍这些网页的各自特点，并讲解了怎样借鉴它们各自的优点，改进我们制作网页的方法。 本书的编排采用循序渐进的方式，适合初级、中级学者逐步掌握运用XHTML和CSS制作Web标准的网站的基本方法。 本书的所有例子、源代码和各种免费工具都附在随书光盘中，方便读者使用。 本书内容 全书分为四篇，共18章，分别为网页的基本概念、CSS基础知识、XHTML基础知识和布局基础、浏览器兼容问题解决方法、CSS网页实例制作、CSS基本布局方法、CSS整体布局以及CSS布局综合应用的网站制作实例等，基础知识全面，实例实用，讲解透彻。 第一篇（第1章～第4章）CSS布局的基础知识篇。 讲述了CSS布局的基础知识，包括网页的基本概念、CSS的基础知识、XHTML与布局基础以及浏览器的兼容与解析问题，为渴望学习标准网页布局的朋友提供一些必要的基础知识，同时也为后面使用CSS进行布局实例制作奠定基础。第4章的浏览器的兼容与解析问题为有一定页面代码架构基础的朋友，系统归纳了解决浏览器兼容问题的方法，能够帮助提高代码架构的水平。 第二篇（第5章～第13章）CSS布局的实例制作篇。 讲述了使用CSS进行网页布局的实例，包括使用CSS制作背景实例、使用CSS制作页面顶部内容、使用CSS制作导航、使用CSS制作列表、使用CSS制作表单、使用CSS制作内容的版式、使用CSS制作链接样式、使用CSS制作数据表格以及使用CSS制作页面底部内容，从网页的不同组成部分，以实例的方式讲解使用CSS布局制作的方法。第7章列举了很多种类的导航制作方法，里面涉及到了大量的CSS属性和使用方法，是学习CSS应用的很好的途径。 第三篇（第14章～16章）CSS布局的整体布局篇。 讲述了CSS布局的整体布局方法，包括CSS的9种基本布局以及CSS整体复杂布局，介绍了常用的CSS基本布局，并且在基本布局的基础上，进行了复杂的布局实践。这对于在掌握了CSS基础之后，渴望进一步得到提高的读者来说，是一个很好的参考帮助。 第四篇（第17章～第18章）CSS布局的综合应用篇。 主要介绍了使用CSS布局进行网站制作的综合应用，包括了博客类网站的制作实例以及企业类网站的制作实例，综合运用CSS和XHTML的布局知识，制作一个网站的布局，并且可以举一反三地制作其他类型的网站。 本书由浅入深，由理论到实践，尤其适合初学者逐步学习和完善自己的知识结构。 本书内容丰富，注重思维方法与实践应用，适合初、中级网页设计爱好者和希望使用Web标准进行网页布局设计的专业网页设计师，是任何网站开发相关人员手中不可缺少的资料。 本书读者 ? 希望进入Web前端代码架构行业的新手。 ? 迫切希望提高个人Web前端代码架构的初级代码设计人员。 ? 具备一定的测试理论知识但是缺乏实践的前端代码设计人员。 ? 希望深入了解Web标准和Web 2.0网站制作的从业人员。 本书编者 本书主要关涛由编写，其他参与编写和资料整理的人员有刘成、马臣云、潘娜、阮履学、陶则熙、王大强、王磊、徐琦、许少峰、颜盟盟、杨娟、杨瑞萍、于海波、俞菲、曾苗苗、赵莹、朱存等。
所有的实例制作方法均可以在实际工作中直接使用，注重Web标准，使用CSS实现结构与表现的分离，对大量的优秀网页进行了介绍和分析，帮助读者拓展视野，全书提供了52个实例和5个综合案例，非常实用。 本丛书的作者团队对计算机程序设计类图书市场有很好的敏感性，对出版动态有准确的把握，对计算机技术的发展进行长期跟踪。该团队长期以来致力于计算机图书的内容提供和策划，已经出版的多个系列图书都在计算机图书市场上有良好的口碑，都曾经引领了当年的计算机程序设计畅销书。
无