移动Web界面样式-CSS3

4次阅读

CSS2.1 发布至今已经有 7 年的历史，在这 7 年里，互联网的发展已经发生了翻天覆地的变化。CSS2.1 有时候难以满足快速提高性能、提升用户体验的 Web 应用的需求。CSS3 标准的出现就是增强 CSS2.1 的功能，减少图片的使用次数以及解决 HTML 页面上的特殊效果。

在 HTML5 逐渐成为 IT 界最热门话题的同时，CSS3 也开始慢慢地普及起来。目前，很多浏览器都开始支持 CSS3 部分特性，特别是基于 Webkit 内核的浏览器，其支持力度非常大。在 Android 和 iOS 等移动平台下，正是由于 Apple 和 Google 两家公司大力推广 HTML5 以及各自的 Web 浏览器的迅速发展，CSS3 在移动 Web 浏览器下都能到很好的支持和应用。

CSS3 作为在 HTML 页面担任页面布局和页面装饰的技术，可以更加有效地对页面布局、字体、颜色、背景或其他动画效果实现精确的控制。

目前，CSS3 是移动 Web 开发的主要技术之一，它在界面修饰方面占有重要的地位。由于移动设备的 Web 浏览器都支持 CSS3，对于不同浏览器之间的兼容性问题，它们之间的差异非常小。不过对于移动 Web 浏览器的某些 CSS 特性，仍然需要做一些兼容性的工作。

当前，CSS3 技术最适合在移动 Web 开发中使用的特性包括：

增强的选择器
阴影
强大的背景设置
圆角边框

接下来的章节我们将会重点介绍如何使用这些 CSS3 特性来实现移动 Web 界面。

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

在 CSS3 中，我们可以使用 HTML 元素的属性名称选择性地定义 CSS 样式。其实，属性选择器早在 CSS2 中就被引入了，其主要作用就是为带有指定属性的 HTML 元素设置样式。例如，通过指定 div 元素的 id 属性，设定相关样式。

属性选择器一共分为 4 种匹配模式选择器：

完全匹配属性选择器
包含匹配选择器
首字符匹配选择器
尾字符匹配选择器

其含义就是完全匹配字符串。当 div 元素的 id 属性值为 test 时，利用完全匹配选择器选择任何 id 值为 test 的元素都使用该样式。如下代码通过指定 id 值将属性设定为红色字体：

<div id="article"> 测试完全匹配属性选择器 </div>

[id=article]{

color:red;

}

</style>

包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串，元素就使用该样式。

其语法是：[attribute*=value]。其中 attribute 指的是属性名，value 指的是属性值，包含匹配采用“*=”符号。

例如下面三个 div 元素都符合匹配选择器的选择，并将 div 元素内的字体设置为红色字体：

<div id="article"> 测试完全匹配属性选择器 </div>
<div id="subarticle"> 测试完全匹配属性选择器 </div>
<div id="article1"> 测试完全匹配属性选择器 </div>
<style. type="text/css">
[id*=article]{color:red;}
</style>

首字符匹配就是匹配属性值开头字符，只要开头字符符合匹配，则元素使用该样式。

其语法是：[attribute^=value]。其中 attribute 指的是属性名，value 指的是属性值，首字符匹配采用“^=”符号。

例如下面三个 div 元素使用首字符匹配选择器后，只有 id 为 article 和 article1 的元素才被设置为红色字体。

<div id="article"> 测试完全匹配属性选择器 </div>
<div id="subarticle"> 测试完全匹配属性选择器 </div>
<div id="article1"> 测试完全匹配属性选择器 </div>
<style. type="text/css">
[id^=article]{color:red;}
</style>

尾字符匹配跟首字符匹配原理一样。尾字符只匹配结尾的字符串，只要结尾字符串符合匹配，则元素使用该样式。

其语法是：[attribute$=value]。其中 attribute 指的是属性名，value 指的是属性值，尾字符匹配采用“$=”符号。

例如下面三个 div 元素使用尾字符匹配选择器时，只有 id 为 subarticle 的元素才被设置为红色字体。

<div id="article"> 测试完全匹配属性选择器 </div>
<div id="subarticle"> 测试完全匹配属性选择器 </div>
<div id="article1"> 测试完全匹配属性选择器 </div>
<style. type="text/css">
[id$=article]{color:red;}
</style>

在 CSS3 选择器中，伪类选择器种类非常多。然后在 CSS2.1 时代，伪类选择器就已经存在，例如超链接的四个状态选择器：a:link、a:visited、a:hover、a:active。

CSS3 增加了非常多的选择器，其中包括: