ホームページ  >  記事  >  ウェブフロントエンド  >  JSPにCSSを導入する方法

JSPにCSSを導入する方法

藏色散人
藏色散人オリジナル
2021-04-29 14:28:095205ブラウズ

jsp に css を導入する方法: 1. link タグの href 属性を使用して css ファイルのパスを導入します; 2. 内部スタイル シートを使用して css を導入します; 3. インライン スタイルを使用して css を導入します。

JSPにCSSを導入する方法

#この記事の動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

CSS スタイルを JSP ページに導入するには 3 つの方法があり、優先順位が異なります。詳細は、外部スタイル、内部スタイル、インライン スタイルです。順番に優先度が高くなります!

  • jsp は、link タグの href 属性を使用して、CSS ファイルのパスを導入できます。

まず、記述した CSS スタイル シートの内容を *.css 形式で保存します。たとえば、style.css

は、この CSS スタイル ファイルをページに導入します。以下の方法で導入してください。

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

ここでの href="./css/style.css" は、CSS ファイルが保存されているパスを指します。 '.'現在のディレクトリ (つまり、CSS ファイルを導入する JSP ページと同じディレクトリ) を要求します。

rel 属性は、現在のドキュメントとリンクされたドキュメントの間の関係を指定します。この例では、 rel 属性はリンク先のドキュメントを示します。 はスタイルシートです。

JSP で CSS を使用する他の 2 つの方法:

  • 内部スタイル

いつ単一のドキュメントには特別なスタイルが必要なため、内部スタイル シートを使用する必要があります。内部スタイル シートは、c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用してドキュメントの先頭で定義できます。

クラス セレクターを使用してスタイルを追加します。

<style type="text/css">
        .loginBtn{
            display:block;
            cursor: pointer;
            height: 32px;
            margin-bottom: 1px;
            width: 100px;
        }
    </style>

  • インライン スタイル

インライン スタイルでは、プレゼンテーションとコンテンツが混在するため、スタイル シートの利点の多くが失われます。たとえば、スタイルを要素に 1 回だけ適用する必要がある場合など、この方法は注意して使用してください。インライン スタイルを使用するには、関連するタグ内で style 属性を使用する必要があります。 Style プロパティには、任意の CSS プロパティを含めることができます。

<input type="text" name="authCode" style="vertical-align: middle" />

HTML/CSS の詳しい知識については、

CSS ビデオ チュートリアル 列をご覧ください。

以上がJSPにCSSを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。