CSS网页布局与浏览器兼容电子书

内容提要

前言

第1章 揭开CSS的神秘面纱

1.1 了解Web标准

1.1.1 W3C组织

1.1.2 Web标准的组成

1.1.3 什么是HTML

1.1.4 什么是CSS样式

1.1.5 HTML+CSS之最佳拍档

1.1.6 Web标准的发展趋势

1.2 CSS样式简介

1.2.1 CSS样式的发展

1.2.2 CSS3的突出特性

1.3 检查浏览器是否支持CSS3

1.3.1 使用Modernizr检查支持情况

1.3.2 各浏览器对CSS3的支持情况

1.4 CSS样式语法

1.4.1 CSS样式基本语法

1.4.2 CSS样式规则构成

1.5 跨浏览器的CSS

1.5.1 渐进增强与优雅降级

1.5.2 跨浏览器适配的通用方法

1.6 浏览器的私有CSS属性

1.6.1 不同核心的浏览器的私有CSS属性前缀

1.6.2 CSS属性前缀的排序

1.7 在HTML页面中使用CSS样式的4种方式

1.7.1 内联CSS样式

1.7.2 内部CSS样式

1.7.3 链接外部CSS样式表文件

1.7.4 导入外部CSS样式表文件

实战 在网页中链接外部CSS样式表文件

1.8 CSS样式的特性与注意事项

1.8.1 CSS样式的相关特性

1.8.2 CSS样式的注释

1.8.3 CSS样式的缩写

1.9 本章小结

第2章 从全新的CSS3选择器开始

2.1 认识CSS选择器

2.1.1 CSS3选择器的优势

2.1.2 CSS3选择器的分类

2.2 基础选择器

2.2.1 基础选择器语法

2.2.2 基础选择器的浏览器兼容性

2.2.3 通配选择器

2.2.4 标签选择器

实战 创建通配选择器与标签选择器样式

2.2.5 ID选择器

2.2.6 类选择器

实战 创建ID选择器与类选择器样式

2.2.7 群组选择器

实战 创建群组选择器样式

2.3 层次选择器

2.3.1 层次选择器语法

2.3.2 层次选择器的浏览器兼容性

2.3.3 后代选择器

2.3.4 子选择器

实战 使用后代选择器与子选择器

2.3.5 相邻兄弟选择器

2.3.6 通用兄弟选择器

实战 使用相邻兄弟选择器与通用兄弟选择器

2.4 伪类选择器

2.4.1 动态伪类选择器

2.4.2 动态伪类选择器的浏览器兼容性

实战 美化超链接按钮样式

2.4.3 目标伪类选择器

2.4.4 目标伪类选择器的浏览器兼容性

实战 实现页面中的指定内容高亮突出显示

2.4.5 语言伪类选择器

2.4.6 语言伪类选择器的浏览器兼容性

实战 不同语言版本显示不同的背景

2.4.7 UI元素状态伪类选择器

2.4.8 UI元素状态伪类选择器的浏览器兼容性

实战 设置网页中表单元素的UI状态

2.4.9 结构伪类选择器

2.4.10 结构伪类选择器的浏览器兼容性

2.4.11 结构伪类选择器使用详解

实战 使用结构伪类选择器美化新闻列表效果

2.4.12 否定伪类选择器

2.4.13 否定伪类选择器的浏览器兼容性

实战 实现图像列表的简单交互效果

2.5 伪元素

2.5.1 ::first-letter

2.5.2 ::first-line

实战 使用::first-letter和::first-line伪元素

2.5.3 ::before和::after

实战 使用::before伪元素添加图标

2.5.4 ::selection

实战 使用::seletion伪元素设置文字选中的高亮效果

2.6 属性选择器

2.6.1 属性选择器语法

2.6.2 属性选择器的浏览器兼容性

2.6.3 属性选择器使用详解

实战 为不同的下载链接应用不同的图标

2.7 本章小结

第3章 CSS3炫目的文字效果

3.1 文本的基础CSS属性

3.1.1 文字样式相关属性

实战 设置网页文字的基本效果

实战 设置网页文字的加粗和倾斜效果

实战 设置网页中英文字体的大小写

实战 设置文字间距并添加修饰

3.1.2 段落样式相关属性

实战 设置段落文字首行缩进效果

实战 设置文字水平对齐效果

实战 设置文字垂直对齐效果

3.1.3 列表样式相关属性

实战 设置新闻列表效果

3.2 CSS3溢出文本属性

3.2.1 text-overflow属性的语法

3.2.2 text-overflow属性的浏览器兼容性

实战 设置文字溢出处理方式

3.3 CSS3文本换行属性

3.3.1 word-wrap属性

实战 使用word-wrap属性控制内容换行

3.3.2 word-break属性

实战 使用word-break属性设置内容换行处理方式

3.3.3 white-space属性

3.4 CSS3文本阴影属性

3.4.1 text-shadow属性的语法

3.4.2 text-shadow属性的浏览器兼容性

实战 为网页文字添加阴影效果

3.5 使用CSS3嵌入Web字体

3.5.1 @font-face语法

3.5.2 自定义字体方法

3.5.3 声明多个字体来源

3.5.4 @font-face规则的浏览器兼容性

实战 在网页中实现特殊字体效果

3.6 本章小结

第4章 更加便捷的网页背景设置

4.1 背景的基础CSS属性

4.1.1 background-color属性

4.1.2 background-image属性

4.1.3 background-repeat属性

4.1.4 background-position属性

实战 为网页设置背景颜色和背景图像

4.1.5 background-attachment属性

实战 设置网页背景图像固定

4.2 CSS3背景尺寸属性

4.2.1 background-size属性的语法

4.2.2 background-size属性的浏览器兼容性

实战 实现始终满屏显示的网页背景

4.3 CSS3背景原点属性

4.3.1 background-origin属性的语法

4.3.2 background-origin属性的浏览器兼容性

实战 实现始终满屏显示的网页背景

4.4 CSS3背景裁切属性

4.4.1 background-clip属性的语法

4.4.2 background-clip属性的浏览器兼容性

实战 使用background-clip属性控制元素背景图像的显示区域

4.5 CSS3多背景属性

4.5.1 CSS3多背景属性的语法

4.5.2 CSS3多背景的优势

4.5.3 CSS3多背景的浏览器兼容性

实战 为网页设置多背景图像效果

4.6 本章小结

第5章 CSS3丰富的颜色设置方法

5.1 CSS3透明属性

5.1.1 opacity属性的语法

5.1.2 opacity属性的浏览器兼容性

实战 实现图片的半透明显示效果

5.2 CSS3颜色模式

5.2.1 RGBA颜色模式

5.2.2 alpha通道与opacity属性的区别

5.2.3 HSL颜色模式

5.2.4 HSLA颜色模式

5.2.5 RGBA、HSL和HSLA颜色模式的浏览器兼容性

实战 实现网页元素半透明背景颜色

5.3 CSS3渐变颜色

5.3.1 CSS3线性渐变的语法

5.3.2 CSS3径向渐变的语法

5.3.3 CSS3线性渐变与径向渐变的浏览器兼容性

5.3.4 CSS3线性渐变使用详解

实战 实现线性渐变的页面背景颜色

5.3.5 CSS3径向渐变使用详解

实战 实现径向渐变的页面背景颜色

5.4 了解CSS3重复渐变

5.5 本章小结

第6章 个性的边框设置属性

6.1 边框基础CSS属性

6.1.1 边框的基础属性

实战 为网页元素设置边框效果

6.1.2 边框基础属性的浏览器兼容性

6.2 CSS3多种颜色边框

6.2.1 border-color属性的语法

6.2.2 border-color属性的浏览器兼容性

实战 实现多彩绚丽的边框效果

6.3 CSS3圆角边框属性

6.3.1 border-radius属性的语法

6.3.2 border-radius属性的4个子属性

6.3.3 border-radius属性的浏览器兼容性

实战 为网页元素设置圆角效果

6.4 CSS3图像边框属性

6.4.1 border-image属性的语法

6.4.2 border-image属性使用详解

6.4.3 border-image属性的浏览器兼容性

实战 为网页中的元素应用图像边框效果

6.5 CSS3元素阴影属性

6.5.1 box-shadow属性的语法

6.5.2 box-shadow属性的浏览器兼容性

实战 为网页元素添加阴影效果

6.6 本章小结

第7章 揭开CSS3盒模型的秘密

7.1 W3C标准盒模型

7.1.1 什么是CSS盒模型

7.1.2 CSS盒模型的要点

7.1.3 CSS盒模型属性说明

实战 设置网页元素的盒模型

7.1.4 CSS盒模型的浏览器兼容性

7.2 揭开浮动布局的秘密

7.2.1 float属性

实战 制作图片列表效果

7.2.2 清除浮动

7.2.3 float与clear属性的浏览器兼容性

7.3 看穿CSS定位技术

7.3.1 position属性

7.3.2 相对定位技术

实战 实现网页元素的叠加显示

7.3.3 绝对定位技术

实战 使网页元素固定在页面右侧显示

7.3.4 固定定位技术

实战 实现固定在顶部的导航菜单

7.3.5 定位属性的浏览器兼容性

7.4 CSS3盒模型属性

7.4.1 box-sizing属性的语法

7.4.2 box-sizing属性的浏览器兼容性

实战 设置网页元素的尺寸大小

7.5 CSS3内容溢出属性

7.5.1 overflow-x和overflow-y属性

7.5.2 overflow-x和overflow-y属性的浏览器兼容性

实战 设置元素内容溢出的处理方式

7.6 CSS3自由缩放属性

7.6.1 resize属性的语法

7.6.2 resize属性的浏览器兼容性

实战 实现网页元素尺寸任意拖动缩放

7.7 CCS3外轮廓属性

7.7.1 outline属性的语法

7.7.2 outline与border属性的对比

7.7.3 outline属性的浏览器兼容性

实战 为元素添加轮廓外边框效果

7.8 本章小结

第8章 CSS3伸缩布局盒模型

8.1 伸缩布局盒模型基础

8.1.1 CSS中的布局模式

8.1.2 伸缩布局盒模型的特点

8.1.3 伸缩盒模型规范的发展

8.1.4 伸缩盒模型的浏览器兼容性

8.2 Flexbox模型的使用方法

8.2.1 伸缩容器display

8.2.2 伸缩流方向flex-direction

8.2.3 伸缩换行flex-wrap

8.2.4 伸缩流方向与换行flex-flow

8.2.5 主轴对齐justify-content

8.2.6 侧轴对齐align-items和alignself

实战 实现元素的水平和垂直居中显示

8.2.7 堆栈伸缩行align-content

8.2.8 伸缩容器中子元素属性设置详解

实战 使用伸缩盒模型制作多列布局页面

8.3 本章小结

第9章 轻松实现多列布局

9.1 CSS3多列布局简介

9.1.1 了解CSS3多列布局相关属性

9.1.2 break-before、break-after和break-inside属性

9.2 CSS3多列布局基本属性

9.2.1 columns属性的语法

9.2.2 columns属性的浏览器兼容性

实战 实现网页内容分列布局

9.3 CSS3多列布局其他属性

9.3.1 column-width属性

实战 使用column-width属性创建分列布局

9.3.2 column-count属性

实战 使用column-count属性创建分列布局

9.3.3 column-gap属性

实战 使用column-gap属性设置列间距

9.3.4 column-rule属性

实战 为分列布局添加分隔线效果

9.3.5 column-span属性

实战 使用column-span属性实现横跨所有列效果

9.3.6 column-fill属性

9.4 本章小结

第10章 出色的CSS3变形动画效果

10.1 CSS3变形属性简介

10.1.1 CSS3变形属性与函数

10.1.2 CSS3变形属性的浏览器兼容性

10.2 实现元素2D变形效果

10.2.1 旋转变形

实战 实现元素的旋转效果

10.2.2 缩放和翻转变形

实战 实现元素的缩放效果

10.2.3 移动变形

实战 实现网页元素位置的移动

10.2.4 倾斜变形

实战 实现网页元素的倾斜效果

10.2.5 矩阵变形

10.2.6 定义变形中心点

实战 设置网页元素的变形中心点位置

10.2.7 同时使用多个变形函数

实战 为网页元素同时应用多种变形效果

10.3 实现元素3D变形效果

10.3.1 3D位移

实战 实现网页元素的3D位移效果

10.3.2 3D旋转

实战 实现网页元素的3D旋转效果

10.3.3 3D缩放

实战 实现网页元素的3D缩放效果

10.3.4 3D矩阵

10.4 CSS3过渡简介

10.4.1 CSS3过渡属性

10.4.2 如何创建过渡动画

10.4.3 CSS3过渡属性的浏览器兼容性

10.5 CSS3实现元素过渡效果

10.5.1 transition-property属性——实现过渡效果

10.5.2 transition-duration属性——过渡时间

实战 实现网页元素变形过渡效果

10.5.3 transition-delay属性——过渡延迟时间

实战 设置网页元素变形过渡延迟时间

10.5.4 transition-timing-function属性——过渡方式

实战 设置网页元素变形过渡方式

10.6 CSS3关键帧动画简介

10.6.1 CSS3新增的animation属性

10.6.2 animation属性的浏览器兼容性

10.6.3 @keyframes的语法

10.6.4 @keyframes的浏览器兼容性

10.7 为网页元素应用关键帧动画

10.7.1 使用@keyframes声明动画

10.7.2 调用@keyframes声明的动画

10.8 CSS3动画子属性详解

10.8.1 animation-name属性——调用动画

10.8.2 animation-duration属性——动画播放时间

10.8.3 animation-timing-function属性——动画播放方式

10.8.4 animation-delay属性——动画开始播放时间

10.8.5 animation-iteration-count属性——动画播放次数

10.8.6 animation-direction属性——动画播放方向

10.8.7 animation-play-state属性——动画播放状态

10.8.8 animation-fill-mode属性——动画时间外属性

实战 制作关键帧动画效果

10.9 本章小结

第11章 媒体查询和响应式设计

11.1 媒体类型=各种浏览终端

11.1.1 媒体类型（Media Type）

11.1.2 在网页中引用媒体类型的方法

11.2 媒体查询（Media Query）

11.2.1 了解媒体查询（Media Query）

11.2.2 常用媒体查询（Media Query）特性

11.2.3 媒体查询（Media Query）的浏览器兼容性

11.2.4 媒体查询（Media Query）的使用方法

11.3 响应式设计

11.3.1 什么是响应式设计

11.3.2 响应式设计的相关术语

11.3.3 <meta>标签

11.4 设计响应式摄影图片网站

实战 制作页面导航区域

实战 制作页面主体内容区域

实战 制作页面版底信息区域

11.5 本章小结

第12章 综合案例实战

12.1 企业类网站

12.1.1 设计分析

12.1.2 布局分析

实战 制作企业类网站页面

12.2 房地产宣传网站

12.2.1 设计分析

12.2.2 布局分析

实战 制作房地产宣传网站页面

12.3 儿童教育网站

12.3.1 设计分析

12.3.2 布局分析

实战 制作儿童教育网站页面

12.4 本章小结