Внешний CSS для JSF

что такое синтаксис для добавления внешнего файла CSS в jsf?

пробовал в обе стороны.Не помогло.

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>
11
css external jsf

5 ответов

Я думаю, что BalusC может получить ваш ответ.

тем не менее, я хотел бы добавить некоторые дополнительные моменты:

предположим, что вы работаете в подкаталогах веб-приложения. Как мой опыт, вы можете попробовать это: <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

на '${facesContext.externalContext.requestContextPath}/' ссылка поможет вам немедленно вернуться к корню контекста.

редактировать: удален, начиная с / С 'href="/${facesContext.ex...'. Если приложение работает в корневом каталоге контекст, url CSS начинается с // и браузеры не смогли найти CSS, так как он интерпретируется как http://css/style.css.

11

Я никогда не использовал первый, но второй синтаксически действителен и должен технически работать. Если это не работает, то относительный URL-адрес в href атрибут просто неверен.

в относительных URL-адресах, ведущая косая черта / указывает на корень домена. Поэтому, если страница JSF, например, запрашивается http://example.com/context/page.jsf, URL CSS будет абсолютно указывать на http://example.com/styles/decoration.css. Чтобы узнать действительный относительный URL, вам нужно знать абсолютный URL-адрес как страницы JSF, так и файла CSS и извлеките одно из другого.

дайте угадать, что ваш файл CSS на самом деле находится в http://example.com/context/styles/decoration.css, затем вам нужно удалить ведущую косую черту, чтобы она была относительно настоящее контекст (один из page.jsp):

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
7

обновленный метод JSF 2.0 немного аккуратнее. Вместо:

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>

Теперь сделайте так:

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

и файл ресурсов должен быть помещен в resources\css. где ресурсы находятся на том же уровне, что и WEB-INF.

5

Я думаю, что проблема Sergionni в два раза.

во-первых, верно, что так называемый корневой родственник, как сказал Балуск, на самом деле является относительным доменом, поэтому в примере относительно http://example.com/, а не http://example.com/context/.

поэтому вы должны указать 

<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />

кстати BalusC, поздравляю, это первый раз, когда я вижу это правильно объяснено! Я изо всех сил старался это выяснить.

но, если вы хотите упростить и предлагаю:

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

предполагая, что стиль dir является сибблинг текущей страницы, то вы можете иметь вторую проблему:

вы затем в относительный метод URL и, я вы пришли на эту страницу вперед, а не перенаправление, Ваш браузер может быть обманут и не в состоянии следовать относительному пути.

чтобы решить эту вторую проблему, вы должны добавить это:

<head>
    <base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />

Базовый элемент должен предшествовать любой ссылке.

базовый command, вы говорите своему браузеру, где вы на самом деле.

надеюсь, что это помогает.

и кстати еще одна странная вещь в этом удивительном мире jsf:

чтобы связать страницу с ее шаблоном facelet, корневая относительная ссылка на этот раз, включая контекст, так:

<ui:composition template="/layouts/layout.xhtml">

это действительно ссылки на http://example.com/context/layouts/layout.xhtml

, а не http://example.com/layouts/layout.xhtml как <a> или <link>.

Жан-Мари Галлиот

3

попробуйте код ниже, чтобы импортировать css на страницу jsf.Это точно сработает.

<style media="screen" type="text/css">

  @import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"

</style>
1