Cú pháp để thêm tệp CSS bên ngoài vào jsf là gì?CSS bên ngoài cho JSF
Đã thử cả hai cách. Không trợ giúp.
1.
<head>
<style type="text/css">
@import url("/styles/decoration.css");
</style>
</head>
2.
<head>
<link rel="stylesheet" type="text/css" href="/styles/decoration.css" />
</head>
Tôi đoán rằng BalusC có thể có câu trả lời của bạn.
Tuy nhiên, tôi muốn thêm một số điểm bổ sung:
Giả sử rằng bạn đang chạy trong các thư mục con của các ứng dụng web. Trải nghiệm của tôi, bạn có thể muốn thử điều này: <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
Liên kết '${facesContext.externalContext.requestContextPath}/' sẽ giúp bạn quay lại ngay lập tức với thư mục gốc của ngữ cảnh.
EDIT: Đã xóa bắt đầu / từ 'href="/${facesContext.ex...'. Nếu ứng dụng đang chạy trong ngữ cảnh gốc, url CSS bắt đầu bằng // và các trình duyệt không thể tìm thấy CSS vì nó được hiểu là http://css/style.css.
Tôi chưa bao giờ sử dụng đầu tiên, nhưng thứ hai là cú pháp hợp lệ và về mặt kỹ thuật nên làm việc. Nếu nó không hoạt động, thì URL tương đối trong thuộc tính href đơn giản là sai.
Trong URL tương đối, dấu gạch chéo hàng đầu / trỏ đến gốc của miền. Vì vậy, nếu trang JSF là ví dụ được yêu cầu bởi http://example.com/context/page.jsf, URL CSS sẽ hoàn toàn trỏ đến http://example.com/styles/decoration.css. Để biết URL tương đối hợp lệ, bạn cần phải biết URL tuyệt đối của cả trang JSF và tệp CSS và trích xuất một tệp từ một trang khác.
Để cho đoán rằng tập tin CSS của bạn là thực sự nằm ở http://example.com/context/styles/decoration.css, thì bạn cần phải loại bỏ các dấu gạch chéo hàng đầu để nó là tương đối so với hiện ngữ cảnh (một trong những page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
lạ, điều này không giúp ích, cũng sẽ thử phương pháp được đề xuất bên dưới và ghi lại kết quả sớm – sergionni
Cho URL tuyệt đối của cả trang JSF và tệp CSS, sau đó chúng tôi có thể giúp thực hiện phép toán. – BalusC
jsf: c: \ sample \ src \ main \ webapp \ store.xhtml css: c: \ sample \ src \ main \ webapp \ styles \ decoration.css – sergionni
Tôi nghĩ rằng vấn đề Sergionni là hai lần. Đầu tiên, đúng là cái gọi là thân nhân gốc, như BalusC đã nói, trên thực tế là tương đối miền, vì vậy, trong ví dụ này có liên quan đến http://example.com/ và không phải là http://example.com/context/.
Vì vậy, bạn phải xác định
<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />
BTW BalusC, xin chúc mừng, đây là lần đầu tiên tôi thấy điều này giải thích một cách chính xác! Tôi đã vật lộn khá nhiều để khám phá điều này.
Nhưng, nếu bạn muốn đơn giản hóa và đề nghị:
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
giả định rằng dir phong cách là một sibbling của trang hiện tại của bạn, sau đó bạn có thể có vấn đề thứ hai:
Bạn đang sau đó vào phương pháp URL tương đối và, tôi đã đến trang này bằng chuyển tiếp chứ không phải chuyển hướng, trình duyệt của bạn có thể bị lừa và không thể đi theo đường dẫn tương đối.
Để giải quyết vấn đề thứ hai này, bạn phải thêm này:
<head>
<base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />
Yếu tố cơ sở phải đặt trước bất kỳ liên kết.
Bằng lệnh cơ sở, bạn cho trình duyệt biết mình đang ở đâu.
Hy vọng điều đó sẽ hữu ích.
Và BTW một điều kỳ lạ trong thế giới này JSF wondeful:
để liên kết từ một trang để mẫu facelet của nó, là gốc liên kết tương đối IS, thời gian này, bao gồm bối cảnh như vậy:
<ui:composition template="/layouts/layout.xhtml">
liên kết này thực sự đến http://example.com/context/layouts/layout.xhtml
và không được để http://example.com/layouts/layout.xhtml thích cho <a> hoặc <link>.
Jean-Marie Galliot
Chỉ cần '
Gốc ngữ cảnh là gì, gốc tên miền là gì? –
Hãy thử mã bên dưới để nhập css vào trang jsf của bạn. Nó sẽ hoạt động chắc chắn.
<style media="screen" type="text/css">
@import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"
</style>
Phương pháp JSF 2.0 được cập nhật có chút ít gọn gàng hơn. Thay vì:
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>
bây giờ bạn làm điều này:
<h:outputStylesheet library="css" name="compass.css"/>
và tài nguyên stylesheet nên được đặt trong resources\css. đâu nguồn lực là ở cấp tương tự như thư mục WEB-INF.
Trong khi vẫn ghi nhớ việc sử dụng thích hợp thuộc tính thư viện như được giải thích [ở đây] (http://stackoverflow.com/q/11988415/840977) – Louise
vâng, điều đó làm việc cho tôi - mà không có dấu gạch chéo đầu tiên – sergionni