In JSF 2.0, you can use <h:outputStylesheet /> output a css file.

For example,

<h:outputStylesheet library="css" name="style.css"  />

It will generate following HTML output…

<link type="text/css" rel="stylesheet"

	href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" />

JSF outputStylesheet example

An example to show the use of JSF 2 <h:outputStylesheet /> to render a “style.css” file, locate in the “resources/css” folder, see figure below :

JSF file

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:h="http://java.sun.com/jsf/html"

      >

    <h:head></h:head>

    <h:body>

    	<h1>JSF 2 outputStylesheet example</h1>

    	<h:outputStylesheet library="css" name="style.css"  />

    	<div class="red">This is red color</div>

    </h:body>

</html>

It will generate following HTML output

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<link type="text/css" rel="stylesheet"

		  href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" />

	</head>

	<body>

    	   <h1>JSF 2 outputStylesheet example</h1>

    	   <div class="red">This is red color</div>

	</body>

</html>

Warning

When render CSS file via <h:outputStylesheet /> tag, remember put the <h:head /> tag as well; Otherwise the css file will not be included.

How to include cascading style sheets (CSS) in JSF的更多相关文章

  1. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

  2. 深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）

    标题中的 Cascading 亦可以理解为级联. 进入正文,这是一个很有意思的现象.可以直接跳到 总结一下 部分,看完再回过头来阅读本文. 引子 假设我们有如下结构: <p class=&quo ...

  3. CSS( Cascading Style Sheets )简书

    (注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...

  4. Qt Style Sheets帮助文档 Overview

    Qt Style Sheets are a powerful mechanism that allows you to customize the appearance of widgets, in ...

  5. CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  6. CSS（Cascading Style Sheet）简述

    CSS(Cascading Style Sheet)简述 什么是CSS? css是指层叠样式表 css定义了如何显示HTML元素 css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率 样 ...

  7. CSS(Cascading Style Shee)

    1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾 ...

  8. Qt Style Sheets制作UI特效

    使用Qt Style Sheets制作UI特效  博客出处:http://developer.nokia.com/community/wiki/%E4%BD%BF%E7%94%A8Qt_Style_S ...

  9. Qt Style Sheets Examples（官方例子目录，很全）

    Contents Style Sheet Usage Customizing the Foreground and Background Colors Customizing Using Dynami ...

随机推荐

  1. poi操作oracle数据库导出excel文件

    HSSFWorkbook workBook = new HSSFWorkbook();// 创建 一个excel文档对象 HSSFSheet sheet = workBook.createSheet( ...

  2. tornado中使用torndb，连接数过高的问题

    问题背景 最近新的产品开发中,使用了到了Tornado和mysql数据库.但在基本框架完成之后,我在开发时候发现了一个很奇怪的现象,我在测试时,发现数据库返回不了结果,于是我在mysql中输入show ...

  3. Entity Framework查询,EF执行SQl

    一.简介 EF 支持开放底层的 ADO.NET 框架,DbContext有三种常用方法 DbSet.SqlQuery //查询并返回Entities DbContext.Database.SqlQue ...

  4. Android 仿百度网页音乐播放器圆形图片转圈播放效果

    百度网页音乐播放器的效果  如下 : http://www.baidu.com/baidu?word=%E4%B8%80%E7%9B%B4%E5%BE%88%E5%AE%89%E9%9D%99& ...

  5. Spring4整合Hibernate4

    首先,要明确Spring整合Hibernate可以做什么? 答案是: 1.由IOC容器来管理Hibernate的SessionFactory 2.让Hibernate使用上Spring的声明式事务 整 ...

  6. 音频PCM格式

    经常见到这样的描述: 44100HZ 16bit stereo 或者 22050HZ 8bit mono 等等. 44100HZ 16bit stereo: 每秒钟有 44100 次采样, 采样数据用 ...

  7. YUV采样及存储格式

    YUV,分为三个分量,“Y”表示明亮度(Luminance或Luma),也就是灰度值:而“U”和“V” 表示的则是色度(Chrominance或Chroma),作用是描述影像色彩及饱和度,用于指定像素 ...

  8. UVA 10054 The Necklace

    完全就是哭瞎的节奏···QAQ 又是图论··· 题意:有一种项链,每个珠子上有两种颜色,相同颜色的两颗珠子的两头相连,如果能连成环输出珠子的顺序,不能连成环输出"some beads may ...

  9. Oracle中函数/过程返回结果集的几种方式

    原文 Oracle中函数/过程返回结果集的几种方式 Oracle中函数/过程返回结果集的几种方式:    以函数return为例,存储过程只需改为out参数即可,在oracle 10g测试通过.    ...

  10. DevExpress 中根据数据库字典动态生成卡式菜单 z

    第三方的Devexpress套件因为要使用权限机制控制不同用户进入系统显示菜单所以要配合字典数据动态生成.在WEB中这种问题灰常的轻松在winform里就稍微有点不同为了用DEV实现卡式菜单有组的概念 ...