•  08-07-2019
  •  | 
  •  

Frage

Was ist Syntax externe CSS-Datei zu JSF hinzufügen?

versucht, beide ways.Didn't Hilfe.

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>
War es hilfreich?

Lösung

Ich denke, dass BalusC Ihre Antwort hat.

Aber ich möchte einige zusätzliche Punkte hinzuzufügen:

Nehmen wir an, dass Sie die in den Unterverzeichnissen der Web-Anwendung ausgeführt werden. Wie meine Erfahrung, können Sie dies versuchen: <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

Die '${facesContext.externalContext.requestContextPath}/' Link wird Ihnen helfen, an die Wurzel des Kontextes sofort zurückzukehren.

Bearbeiten : Entfernt / von 'href="/${facesContext.ex...' starten. Wenn die Anwendung im Stammkontext ausgeführt wird, beginnt die CSS URL mit // und der Browser könnte die CSS nicht finden, da es als http://css/style.css interpretiert wird.

Andere Tipps

Ich habe nie die ersten, aber der zweite ist syntaktisch gültig und soll technisch funktionieren. Wenn es nicht funktioniert, dann ist die relative URL im href Attribute ist einfach falsch.

In relativen URLs, die führenden Schrägstrich / Punkte auf den Domänenstamm. Wenn also die JSF-Seite zum Beispiel durch http://example.com/context/page.jsf angefordert ist, zeigt die CSS-URL unbedingt http://example.com/styles/decoration.css. Um die gültige relative URL kennt, müssen Sie die absolute URL wissen, sowohl die JSF-Seite und die CSS-Datei und extrahieren Sie das eine von dem anderen.

Lassen Sie vermuten, dass Ihre CSS-Datei tatsächlich auf http://example.com/context/styles/decoration.css befindet, dann müssen Sie den führenden Schrägstrich zu entfernen, so dass es relativ zu dem Strom Kontext (die eine der page.jsp): 

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

Die aktualisierte JSF 2.0-Methode ist ein wenig aufgeräumter. Statt: 

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

Sie jetzt tun: 

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

und die Stylesheet-Ressource sollte in resources\css. platziert werden, wo Ressourcen auf dem gleichen Niveau wie der WEB-INF ist.

Ich denke, das Sergionni Problem ist zweifach.

Als erstes ist es wahr, dass die so genannte Wurzel relativ ist wie BalusC sagte, in der Tat Domäne relativ, so wurde in dem Beispiel relativ zu http://example.com/ und nicht http://example.com/context/.

So müssen Sie angeben 

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

BTW BalusC, Glückwünsche, ist dies das erste Mal, wenn ich das richtig erklärt! Ich kämpfte ziemlich viel, dies zu entdecken.

Aber, wenn Sie wollen, zu vereinfachen und vorschlagen: 

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

unter der Annahme, dass der Stil dir eine sibbling der aktuellen Seite ist, dann können Sie das zweite Problem:

Sie sind dann in die relative URL-Methode und, wie ich Sie auf dieser Seite kam durch eine nach vorne und nicht einer Umleitung in Ihrem Browser täuschen kann und nicht in der Lage dem relativen Pfad zu folgen.

Dieses zweite Problem zu lösen, müssen Sie hinzufügen: 

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

Das Basiselement muss einen Link vorangestellt werden.

Mit dem Basis Befehl, sagen Sie Ihren Browser, wo Sie wirklich sind.

Hoffe, es hilft.

Und BTW andere bizarre Sache in dieser wondeful JSF Welt:

von einer Seite auf die Facelet Vorlage zu verknüpfen, die Wurzel relative Link, diesmal einschließlich dem Kontext so: 

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

diese Links wirklich http://example.com/context/layouts/layout.xhtml

und nicht http://example.com/layouts/layout.xhtml wie für <a> oder <link>.

Jean-Marie Galliot

Versuchen Sie den Code unten die CSS in Ihrer JSF page.It zu importieren wird sicher arbeiten. 

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

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

</style>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top