HTML5移动Web开发指南[试读]

CSS3 CSS2.1发布至今已经有7年的历史，在这7年里，互联网的发展已经发生了翻天覆地的变化。CSS2.1有时候难以满足快速提高性能、提升用户体验的Web应用的需求。CSS3标准的出现就是增强CSS2.1的功能，减少图片的使用次数以及解决HTML页面上的特殊效果。 在HTML5逐渐成为IT界最热门话题的同时，CSS3也开始慢慢地普及起来。目前，很多浏览器都开始支持CSS3部分特性，特别是基于Webkit内核的浏览器，其支持力度非常大。在Android和iOS等移动平台下，正是由于Apple和Google两家公司大力推广HTML5以及各自的Web浏览器的迅速发展，CSS3在移动Web浏览... 查看全部[ 6.1 CSS3 ]

选择器 选择器是CSS3中一个重要的部分，通过使用CSS3的选择器，可以提高开发人员的工作效率。在本节中，我们将为读者介绍属性选择器和伪类选择器的基本用法。... 查看全部[ 6.2 选择器 ]

属性选择器 在CSS3中，我们可以使用HTML元素的属性名称选择性地定义CSS样式。其实，属性选择器早在CSS2中就被引入了，其主要作用就是为带有指定属性的HTML 元素设置样式。例如，通过指定div元素的id属性，设定相关样式。 属性选择器一共分为4种匹配模式选择器：  完全匹配属性选择器  包含匹配选择器  首字符匹配选择器  尾字符匹配选择器 1．完全匹配属性选择器 其含义就是完全匹配字符串。当div元素的id属性值为test时，利用完全匹配选择器选择任何id值为test的元素都使用该样式。如下代码通过指定id值将属性设定为红色字体： <div id=&q... 查看全部[ 6.2.1 属性选择器 ]

伪类选择器 在CSS3选择器中，伪类选择器种类非常多。然后在CSS2.1时代，伪类选择器就已经存在，例如超链接的四个状态选择器：a:link、a:visited、a:hover、a:active。 CSS3增加了非常多的选择器，其中包括:  first-line伪元素选择器  first-letter伪元素选择器  root选择器  not选择器  empty选择器  target选择器 这些伪类选择器是CSS3新增的选择器，它们都能得到在Android和iOS平台下Web浏览器的支持。现在我们就为你介绍这部分的选择器。 1．before before伪类元素... 查看全部[ 6.2.2 伪类选择器 ]

阴影 现在，CSS3样式已经支持阴影样式效果。目前可以使用的阴影样式一共分成两种：一种是文本内容的阴影效果，另一种是元素阴影效果。下面我们就来为读者介绍这两种阴影样式。... 查看全部[ 6.3 阴影 ]

box-shadow CSS3的box-shadow属性是让元素具有阴影效果，其语法是： box-shadow:<length> <length> <length> || color; 其中，第一个length值是阴影水平偏移值；第二个length值是阴影垂直偏移值；第三个length值是阴影模糊值。水平和垂直偏移值都可取正负值，如4px或-4px。 目前，box-shadow已经得到Firefox 3.5+、Chrome 2.0+、Safari 4+等现代浏览器的支持。 可是，当我们在基于Webkit的Chrome和Safari等浏览器上使用bo... 查看全部[ 6.3.1 box-shadow ]

text-shadow text-shadow属性用于设置文本内容的阴影效果或模糊效果。 目前，text-shadow属性已经得到Safari浏览器、Firefox浏览器、Chrome浏览器和Opera浏览器的支持。IE8版本以下的IE浏览器都不支持该特性。从Web浏览器支持的情况来看，大部分移动平台的Web浏览器都能得到很好的支持。 text-shadow的语法和box-shadow的语法基本上一致： text-shadow:<length> <length> <length> || color 如下代码为使用text-shadow的简单示例： ... 查看全部[ 6.3.2 text-shadow ]

背景 在过去，我们经常使用CSS的背景属性对页面进行美化修饰，可惜的是，背景属性功能单一，往往无法满足页面修饰的需求。 在CSS3规范中，CSS3对背景属性增加了很多新特性。它既能支持背景的显示范围，也支持多图片背景。最重要的是它可以通过属性设置，为背景的颜色设置渐变或任何颜色效果，功能非常丰富。 CSS3对于背景属性的增强，以往我们使用图片来替代各种页面修饰，逐渐可以通过CSS3背景属性替换。这些功能对页面加载速度，特别是在移动设备平台，是一个页面性能的提升。... 查看全部[ 6.4 背景 ]

background-size background-size属性用于设置背景图像的大小。 目前，background-size属性已经得到Chrome浏览器、Safari浏览器、Opera浏览器的支持，同时该属性也支持Android和iOS平台的Web浏览器。 background-size属性在不同的Web浏览器下的语法方面有一定的差别。在基于Webkit的Chrome和Safari 浏览器下，其写法为-webkit-background-size；而在Opera浏览器下则不需要-webkit前缀，只需要写成background-size。 在移动Web开发项目应用中，建议采用兼容... 查看全部[ 6.4.1 background-size ]

background-clip background-clip属性用于确定背景的裁剪区域。 虽然background-clip属性支持除IE以外的大部分Web浏览器，但在实际项目应用中应用范围不广。其语法是： background-clip:border-box | padding-box | content-box | no-clip 其中border-box是从border区域向外裁剪背景；padding-box是从padding区域向外裁剪背景；content-box是从内容区域向外裁剪背景；no-clip是从border区域向外裁剪背景。... 查看全部[ 6.4.2 background-clip ]

background-origin background-origin属性是指定background-position属性的参考坐标的起始位置。 background-origin属性有三种值可以选择，border值指定从边框的左上角坐标开始；content值指定从内容区域的左上角坐标开始；padding值指定从padding区域开始。... 查看全部[ 6.4.3 background-origin ]

background background属性在CSS3中被赋予非常强大的功能。其中一个非常重要的功能就是多重背景。在过去设置图片背景时，只能使用一张图片，而在CSS3中，则可以设置多重背景图片，例如代码： background:url(background1.png) left top no-repeat, url(background2.png) left top no-repeat; Chrome浏览器和Safari浏览器都支持background属性的多重背景功能。由于它们都是基于Webkit的浏览器，因此该功能也支持Android和iOS移动平台的移动Web浏览器。但鉴于... 查看全部[ 6.4.4 background ]

圆角边框 以前，我们在Web开发过程中，经常需要实现一些圆角的功能，一般的解决方案是使用图像文件实现边框圆角的效果。 现在，CSS3已经能够轻松地实现圆角效果，代码中只要定义border-radius属性，就可以随意实现圆角效果。 到目前为止，border-radius属性已经得到Chrome浏览器、Safari浏览器、Opera浏览器、Firefox浏览器的支持。但浏览器之间样式名称的写法有些差别，例如Chrome浏览器和Safari浏览器需要写成-webkit-border-radius；Firefox浏览器需要写成-moz-border-radius；而Opera浏览器则不需要... 查看全部[ 6.5 圆角边框 ]

Media Queries移动设备样式 本节我们将为你带来一种全新的样式技术。通过Media Queries样式模块，可以实现根据移动设备的屏幕大小，定制网站页面的不同布局效果。它的优点是开发者只需要实现一套页面，就能够在所有平台的浏览器下访问网站的不同效果。... 查看全部[ 6.6 Media Queries移动设备样式 ]

传统网站在iPhone上的显示问题 在开始介绍Media Queries知识之前，先来看看一个传统的网站在各种移动设备上的页面显示效果。 首先，图6-1所示的是Google首页传统网站在iPhone Safari浏览器下的效果图。
... 查看全部[ 6.6.1 传统网站在iPhone上的显示问题 ]

viewport设置适应移动设备屏幕大小 1．什么是viewport Apple为了解决移动版Safari的屏幕分辨率大小问题，专门定义了viewport虚拟窗口。它的主要作用是允许开发者创建一个虚拟的窗口（viewport），并自定义其窗口的大小或缩放功能。 如果开发者没有定义这个虚拟窗口，移动版Safari的虚拟窗口默认大小为980像素。现在，除了Safari浏览器外，其他浏览器也支持viewport虚拟窗口。但是，不同的浏览器对viewport窗口的默认大小支持都不一致。默认值分别如下：  Android Browser浏览器的默认值是800像素；  IE浏览器的默认值是9... 查看全部[ 6.6.2 viewport设置适应移动设备屏幕大小 ]

Media Queries如何工作 前面提到，Media Queries样式模块在传统网页布局向移动版本网页布局转换中起着最重要的作用。为什么Media Queries能够作为在移动Web设备中进行页面布局的解决方案呢？首先来看一下如图6-3所示的效果。
... 查看全部[ 6.6.3 Media Queries如何工作 ]