css - JSFでのCSSの使用

Question

CSSを使用してスタイルを設定したいテキストの文字列を含むJSFファセットがあります。それはh1タグにあります：

<h1 align="center">Welcome Back</h1>

私の質問は、まず、JSFアプリのディレクトリ構造のどこにCSSファイルを配置するか、そして次に、CSSスタイルをテキストに追加するにはどうすればよいかということです。

ありがとう！

Answer 1

CSSを使用してスタイルを設定したいテキストの文字列を含むJSFファセットがあります。それはh1タグにあります：
<h1 align="center">Welcome Back</h1>

良い考えです。align属性が無効なHTML5です。CSSは、style独自の.cssファイルの属性、またはそれ以上になります。JSF / HTMLコードに属性がないように努める必要がありstyleます（したがって、すべてのスタイルが.cssファイルに保存されます）。

---

私の質問は、まず、JSFアプリのディレクトリ構造のどこにCSSファイルが入るのかということです。

すべてのJSFリソースは/resourcesフォルダーに配置する必要があります（必要に応じて、サブフォルダーにさらに分割します）。これはかなり基本的な例です：

WebContent
 |-- META-INF
 |-- WEB-INF
 |    |-- template.xhtml
 |    |-- faces-config.xml
 |    `-- web.xml
 |-- resources
 |    |-- image.png
 |    |-- script.js
 |    `-- style.css
 `-- index.xhtml

<h:head>マスターテンプレートので次のように参照する必要があります。

<h:outputStylesheet name="style.css" />

（同等に、JSと画像用にあります<h:outputScript>）<h:graphicImage>

---

2つ目は、CSSスタイルをテキストに追加するにはどうすればよいですか。

の次のエントリだけで、サイト全体で同じであるマスターレイアウトテンプレートに1つだけstyle.cssが含まれるようにWebサイトが設計されている場合。 <h1>

h1 {
    text-align: center;
}

idそれ以外の場合は、またはclass代わりにそれを与える必要があります。JSF用のCSSを作成する場合、CSSはサーバー側のJSFソースコードではなく、クライアント側でのみJSFで生成されたHTML出力で機能することに注意してください。したがって、HTML出力について疑問がある場合は、WebブラウザーでJSFページを開き、ソースの表示（またはWebブラウザーの開発者ツールセットを使用したツリー検査）を実行します。

参照：

• HTMLDog-CSS初心者向けチュートリアル
• JSFリソースライブラリは何のためにあり、どのように使用する必要がありますか？