联合使用CSS、JavaScript和JSF精心打造Ajax应用程序(1)

　　本文示例源代码或素材下载

　　典型的 Web 应用程序都需要使用级联样式表（Cascading Style Sheets，CSS）、JavaScript 和服务器端的框架（比如 JavaServer Faces，JSF）。CSS 让您可以在 Ajax 和其他应用程序内部更改 Web 组件的可视特征，以使它们具备与众不同的友好外观。在这个包含两部分的系列文章的第 1 部分中，您将了解如何使用标准 JSF 组件的一些与 CSS 相关的特性。此外，您还将了解如何创建一个可用来设置嵌套组件默认样式的定制 JSF 组件，以确保 Web 应用程序的所有页面具有一致的外观。您还可以使用这个技巧来程序化设置其他的组件属性，本系列的第 2 部分将展示如何借助 JavaScript 让 JSF 表单更加动态。

　　使用 JSF 组件的样式属性

　　几乎每个 JSF HTML 组件都有两个可选属性，分别为 style 和 styleClass，这两个属性在 HTML 输出中呈现为 style 和 class 属性。一些组件，比如 <h:dataTable> 和 <h:panelGrid>，还有针对于其 facet 的额外样式属性。本节讨论与 CSS 相关的 JSF HTML 库属性。

　　将 CSS 文件链接到 JSF 页面

　　如果 Web 页面具有独特的样式，可以在页面页眉的 <style> 元素内定义样式规则。也可以使用 style 属性为单个 JSF 组件指定样式信息。但在大多数情况下，您可能更愿意在单独的 CSS 文件中包含样式规则，以便可以将这些样式规则应用到多个页面。可以使用 <link> 标记将外部样式表链接到一个 Web 页面，如清单 1 所示：

　　清单 1. 使用 <link> 标记

<link rel="stylesheet" type="text/css"
　　　href="${pageContext.request.contextPath}/MyStyles.css">
<link rel="stylesheet" type="text/css"
　　　href="<%=request.getContextPath()%>/styles/MoreStyles.css">