Nhúng CSS(cascading style sheet) vào JSF
Posted: 25/2/2012.
Trong JSF 2.0, bạn có thể dùng thẻ để biểu diễn phần tử LINK trong HTML, và liên kết đến tập tin CSS.
![Nhúng CSS(cascading style sheet) vào JSF]( "Nhúng CSS(cascading style sheet) vào JSF")
Trong JSF 2.0, bạn có thể dùng thẻ <h:outputStylesheet/> để biểu diễn phần tử LINK trong HTML, và liên kết đến tập tin CSS.
Ví dụ:
JSF:
- <h:outputStylesheet library="css" name="style.css" />
thì kết quả HTML sẽ có dạng:
- <link type="text/css" rel="stylesheet"
- href="/JSFDemo/faces/javax.faces.resource/style.css?ln=css" />
Để thực hiện một ví dụ với thẻ <h:outputStylesheet />, bạn tạo một tập tin CSS và lưu vào thư mục “resources/css” như hình sau:
Trong tập tin JSP, chúng ta viết mã
- <?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>
Nó sẽ sinh ra mã HTML như sau:
- <?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>
Lưu ý: khi thông dịch tập tin CSS qua thẻ <h:outputStylesheet />, bạn cần phải để thẻ này trong thẻ <h:head>, nếu không thì tập tin CSS sẽ không tìm đến được .
[Nghean-Aptech st]
Các tin mới:
Hướng dẫn tích hợp giao diện trang quản trị SB Admin 2 vào Laravel 5.8.
Hướng dẫn tích hợp Google ReCaptcha v2 vào Laravel bằng curl.
Học lập trình React JS trong vòng 5 phút.
Sử dụng trình soạn thảo CKeditor tích hợp CKFinder với Laravel.
Hướng dẫn cài đặt Apache, PHP, MySQL, PHPMyAdmin trên Windows 10 và cấu hình SendMail.
Các tin cũ hơn:
Tạo và sử dụng Captcha trong ASP.NET.
Tạo bộ đếm số người online với Servlet.
Kết nối CSDL MySQL bằng Visual C#.
Lập trình kết nối CSDL từ Java vào MySQL.
Tạo ứng dụng web JSP hỗ trợ đa ngữ.