インライン<style>タグとインラインcssプロパティ

Question 1

CSSプロパティを設定するための推奨される方法は何ですか？

インラインスタイルのプロパティ：

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

<style>...</style>タグのスタイルプロパティ：

<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>

Question 2

スタイルルールは、次を使用して添付できます。

外部ファイル
ページはめ込みスタイルタグ
インラインスタイル属性

一般的に、私はリンクされたスタイルシートを使用することを好みます。

パフォーマンスのためにブラウザでキャッシュできます。そして
開発の観点から保守する方がはるかに簡単です。

ただし、あなたの質問は、styleタグとインラインスタイルについて具体的に尋ねています。styleこの場合、次の理由からタグを使用することをお勧めします。

マークアップとスタイリングを明確に分離します。
よりクリーンなHTMLマークアップを生成します。そして
セレクターを使用すると、ページ上の複数の要素にルールを適用して管理を改善し、ページサイズを小さくすることができます。

インライン要素は、それぞれの要素にのみ影響します。

styleタグとインライン属性の重要な違いは、特異性です。特異性は、あるスタイルが別のスタイルをオーバーライドするタイミングを決定します。一般的に、インラインスタイルはより高い特異性を持っています。

このテーマの面白い見方については、CSS：SpecificityWarsをお読みください。

お役に立てば幸いです。

Question 3

違いを支配する可能性のある1つの側面は次のとおりです。

JavaScriptで要素のスタイルを変更すると、インラインスタイルに影響を及ぼします。そこにすでにスタイルがある場合は、永久に上書きします。ただし、スタイルが外部シートまたは<style>タグで定義されている場合は、インラインシートを設定して、""そのソースからスタイルを復元します。

Question 4

場合によります。

重要な点は、コードの繰り返しを避けることです。

同じコードを2回以上再利用する必要があり、変更時に同期する必要がある場合は、外部スタイルシートを使用してください。

一度だけ使えばインラインでも大丈夫だと思います。

Question 5

あなたの直接の質問に答えるために：これらのどちらも好ましい方法ではありません。別のファイルを使用してください。

インラインスタイルは、最後の手段としてのみ使用するか、Javascriptコードで設定する必要があります。インラインスタイルは最高レベルの特異性を持っているため、実際のスタイルシートをオーバーライドします。これにより、制御が困難になる可能性があります（!important同じ理由で同様に回避する必要があります）。

埋め込まれた <style>サイトの複数のページにまたがってスタイルシートをキャッシュするブラウザの機能が失われるため、ブロックはお勧めしません。

つまり、可能な限り、スタイルを別のCSSファイルに入れる必要があります。

Question 6

保守性の観点からは、複数のファイルで複数のアイテムを管理するよりも、1つのファイルで1つのアイテムを管理する方がはるかに簡単です。

スタイリングを分離すると、特に職務がさまざまな個人に分散している場合に、生活がはるかに楽になります。再利用性と移植性により、将来の時間を大幅に節約できます。

インラインスタイルを使用すると、設定されている外部プロパティが上書きされます。

Question 7

私は、外部スタイルシートが好ましい方法であるという大多数の見解に同意します。

ただし、いくつかの実際的な例外があります。

動的な背景画像。CSSスタイルシートは静的ファイルであるため、インラインスタイルを使用して動的（データベース、CMSなどから）スタイルを追加する必要がありますbackground-image。
ページの読み込み時に要素を非表示にする必要がある場合、外部スタイルシートを使用することは実用的ではありません。スタイルシートが処理されるまでに常にある程度の遅延があり、それが発生するまで要素が表示されるためです。style="display: none;"これを達成するための最良の方法です。
アプリケーションがユーザーに特定のCSS値（テキストの色など）を細かく制御できるようにする場合は、これをインラインstyle要素またはページ内<style></style>ブロックに追加する必要がある場合があります。例style="color:#{{ page.color }}"、または<style> p.themed { color: #{{ page.color }}; }</style>

Question 8

可能な限り、クラス.myclass{}と識別子を使用することをお勧めします。そのため、html内で#myclass{}専用のcssファイルまたはタグを使用してください。インラインスタイルは、JavaScriptを使用してcssオプションを動的に変更するのに適しています。<style></style>

Question 9

どちらか一方を選択する理由はさまざまです。

プログラムで生成された要素にcssを指定する必要がある場合（たとえば、さまざまなサイズの画像のcssを変更する場合）、インラインcssを使用する方が保守しやすくなります。
一部のcssが現在のページでのみ有効な場合は、個別の.cssファイルではなくscriptタグを使用する必要があります。ブラウザがあまり多くのhttpリクエストを実行する必要がない場合は良いことです。

それ以外の場合は、前述のように、別のcssファイルを使用することをお勧めします。

Question 10

以下に説明するように、3つの異なる方法を使用してCSSを設定できます：-

1.External style sheet
2.Internal style sheet
3.Inline style

cssスタイルを設定するための好ましい/理想的な方法は、スタイルが多くのページに適用されるときに外部スタイルシートとして使用することです。外部スタイルシートを使用すると、1つのファイルを変更するだけで、Webサイト全体の外観を変更できます。

サンプルの使用法は次のとおりです：-

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

単一のドキュメントに一意のスタイルを適用する場合は、内部スタイルシートを使用できます。

インラインスタイルシートは、コンテンツとプレゼンテーションが混在し、多くの利点が失われるため、使用しないでください。