12

外部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>
4

5 に答える 5

13

BalusC があなたの答えを持っていると思います。

ただし、いくつかの追加点を追加したいと思います。

Web アプリケーションのサブディレクトリで を実行しているとします。私の経験として、これを試してみてください： <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

この'${facesContext.externalContext.requestContextPath}/'リンクは、コンテキストのルートにすぐに戻るのに役立ちます。

編集/:から削除され'href="/${facesContext.ex...'ました。アプリケーションがルート コンテキストで実行されている場合、CSS URL は で始まり//、ブラウザは CSS を として解釈するため、見つけることができませんでしたhttp://css/style.css。

于 2009-11-29T16:41:16.537 に答える
7

私は前者を使用したことがありませんが、後者は構文的に有効であり、技術的には機能するはずです。それが機能しない場合は、href属性の相対URLが単に間違っています。

相対URLでは、先頭のスラッシュ/はドメインルートを指します。したがって、たとえばJSFページがによって要求された場合、CSSURLhttp://example.com/context/page.jsfは絶対にを指しますhttp://example.com/styles/decoration.css。有効な相対URLを知るには、JSFページとCSSファイルの両方の絶対URLを知り、一方を他方から抽出する必要があります。

CSSファイルが実際ににあると仮定すると、現在のコンテキスト（の1つ）http://example.com/context/styles/decoration.cssを基準にするために、先頭のスラッシュを削除する必要があります。page.jsp

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
于 2009-11-29T15:59:59.490 に答える
6

更新された 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 と同じレベルにある場所に配置する必要があります。

于 2012-06-27T22:00:31.103 に答える
3

セルジオニの問題には 2 つの側面があると思います。

まず、いわゆるルート相対は、BalusC が言ったように、実際にはドメイン相対であることは事実です。したがって、この例では、相対であり、では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" />

スタイルディレクトリが現在のページの兄弟であると仮定すると、2番目の問題が発生する可能性があります。

次に、相対 URL メソッドに入ります。リダイレクトではなく転送によってこのページにアクセスした場合、ブラウザーがだまされて相対パスをたどることができない可能性があります。

この 2 番目の問題を解決するには、これを追加する必要があります。

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

base 要素は、どのリンクよりも前にある必要があります。

base コマンドを使用すると、ブラウザーに自分の実際の場所を伝えることができます。

それが役に立てば幸い。

そしてところで、この素晴らしい jsf の世界でもう 1 つ奇妙なことがあります。

ページからその facelet テンプレートにリンクするには、今回はルート相対リンク IS にコンテキストを含めます。

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

これは本当にhttp://example.com/context/layouts/layout.xhtml

またはをhttp://example.com/layouts/layout.xhtml好まない。<a><link>

ジャン＝マリー・ガリオット

于 2010-01-15T22:07:16.757 に答える
1

以下のコードを試して、css を jsf ページにインポートしてください。確実に機能します。

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

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

</style>
于 2011-02-21T09:44:11.813 に答える