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

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

Пробовал оба пути. Не помогло.

<head>
<style type="text/css">
    @import url("/styles/decoration.css");
</style>
</head>

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

Ответ 1

Я думаю, что у 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.

Ответ 2

Я никогда не использовал первый, но второй синтаксически действителен и должен технически работать. Если это не работает, то относительный 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, тогда вам нужно удалить ведущую косую черту, чтобы она относилась к контексту current (одному из page.jsp)

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

Ответ 3

Обновленный метод 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.

Ответ 4

Я думаю, что проблема Серджионни в два раза.

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

Итак, вы должны указать

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

BTW 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}" />

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

В базовой команде вы сообщаете своему браузеру, где вы на самом деле.

Надеюсь, что это поможет.

И BTW еще одна странная вещь в этом странном мире jsf:

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

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

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

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

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

Ответ 5

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

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

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

</style>