JSF - h:outputStylesheet

h:outputStylesheet 標籤渲染一個型別為“link”且型別為“text/css”的 HTML 元素。此標籤用於向 JSF 頁面新增外部樣式表文件。

JSF 標籤

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

渲染輸出

<link type = "text/css" rel = "stylesheet"  
   href = "/helloworld/javax.faces.resource/styles.css.jsf?ln = css" />

示例應用程式

讓我們建立一個測試 JSF 應用程式來測試上述標籤。

步驟	描述
1	建立一個名為 helloworld 的專案，放在 com.tutorialspoint.test 包下，如 JSF - 第一個應用程式章節中所述。
2	在 src → main 資料夾下建立 resources 資料夾。
3	在 src → main → resources 資料夾下建立 css 資料夾。
4	在 src → main → resources → css 資料夾下建立 styles.css 檔案。
5	修改 styles.css 檔案，如下所述。
6	修改 pom.xml 檔案，如下所述。
7	修改 home.xhtml 檔案，如下所述。保持其餘檔案不變。
8	編譯並執行應用程式，以確保業務邏輯按要求工作。
9	最後，將應用程式構建成 war 檔案，並將其部署到 Apache Tomcat Web 伺服器。
10	使用最後一步中說明的相應 URL 啟動您的 Web 應用程式。

styles.css

.message{
   color:green;
}

pom.xml

<project xmlns = "http://maven.apache.org/POM/4.0.0" 
   xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation = "http://maven.apache.org/POM/4.0.0
   http://maven.apache.org/maven-v4_0_0.xsd">
   
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.tutorialspoint.test</groupId>
   <artifactId>helloworld</artifactId>
   <packaging>war</packaging>
   <version>1.0-SNAPSHOT</version>
   <name>helloworld Maven Webapp</name>
   <url>http://maven.apache.org</url>
   
   <dependencies>
      <dependency>
         <groupId>junit</groupId>
         <artifactId>junit</artifactId>
         <version>3.8.1</version>
         <scope>test</scope>
      </dependency>
      
      <dependency>
         <groupId>com.sun.faces</groupId>
         <artifactId>jsf-api</artifactId>
         <version>2.1.7</version>
      </dependency>
      
      <dependency>
         <groupId>com.sun.faces</groupId>
         <artifactId>jsf-impl</artifactId>
         <version>2.1.7</version>
      </dependency>
      
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>jstl</artifactId>
         <version>1.2</version>
      </dependency>
   </dependencies>
   
   <build>
      <finalName>helloworld</finalName>
      <plugins>
         
         <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>2.3.1</version>
            <configuration>
               <source>1.6</source>
               <target>1.6</target>
            </configuration>
         </plugin>
         
         <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.6</version>
            <executions>
               <execution>
                  <id>copy-resources</id>
                  <phase>validate</phase>
                  <goals>
                     <goal>copy-resources</goal>
                  </goals>
                  
                  <configuration>
                     <outputDirectory>${basedir}/target/helloworld/resources
                        </outputDirectory>
                     <resources>          
                        <resource>
                           <directory>src/main/resources</directory>
                           <filtering>true</filtering>
                        </resource>
                     </resources>              
                  </configuration>            
               </execution>
            </executions>
         </plugin>
      
      </plugins>
   </build>
</project>

home.xhtml

<?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:f = "http://java.sun.com/jsf/core"    
   xmlns:h = "http://java.sun.com/jsf/html">
   
   <h:head>
      <title>JSF Tutorial!</title>
      <h:outputStylesheet library = "css" name = "styles.css"  /> 
   </h:head>
   
   <h:body>
      <h2>h:outputStylesheet example</h2>
      <hr />
      <h:form>
         <div class = "message">Hello World!</div>
      </h:form> 		
   </h:body>

</html>

完成所有更改後，讓我們像在 JSF - 第一個應用程式章節中那樣編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果。

jsf_basic_tags.htm

列印頁面

步驟	描述
1	建立一個名為 helloworld 的專案，放在 com.tutorialspoint.test 包下，如 JSF - 第一個應用程式章節中所述。
2	在 src → main 資料夾下建立 resources 資料夾。
3	在 src → main → resources 資料夾下建立 css 資料夾。
4	在 src → main → resources → css 資料夾下建立 styles.css 檔案。
5	修改 styles.css 檔案，如下所述。
6	修改 pom.xml 檔案，如下所述。
7	修改 home.xhtml 檔案，如下所述。保持其餘檔案不變。
8	編譯並執行應用程式，以確保業務邏輯按要求工作。
9	最後，將應用程式構建成 war 檔案，並將其部署到 Apache Tomcat Web 伺服器。
10	使用最後一步中說明的相應 URL 啟動您的 Web 應用程式。