これは限られたコンテキスト、たとえばプログラマーではないユーザーが使用するWebシステム上のWYIWYGエディターなどの問題で、標準に従う可能性を制限している可能性があります。時々（TinyMCEのように）、コンテンツ/コードをtextareaタグ内に配置するライブラリであり、エディターによって大きなものとしてレンダリングされますdivタグます。また、これらのエディタの古いバージョンである場合もあります。
私はそれを仮定している：
- これらのプログラマーではないユーザーは、システム管理者（または教育機関のwebdev）とのオープンチャネルを持っていないため、システムのCSSルールを含めるように要求します。
stylesheetsます。実際、管理者（またはwebdev）にとっては、そういう意味でのリクエストの数を考えると、実際的ではありません。
- このシステムはレガシーであり、まだ新しいバージョンのHTMLをサポートしていません。
場合によっては、使用styleルールがないと、設計エクスペリエンスが非常に悪くなることがあります。したがって、はい、これらのユーザーはカスタマイズが必要です。わかりましたが、このシナリオでの解決策は何でしょうか？CSSをhtmlページに挿入するさまざまな方法を考慮して、私はこれらの解決策を仮定します：
最初のオプション：sysadmに問い合わせる
システムのにいくつかのCSSルールを含めることについて、システム管理者に依頼してくださいstylesheets。これは、外部または内部のCSSソリューションになります。すでに述べたように、それは不可能かもしれません。
2番目のオプション：<link>オン<body>
使用する外部スタイルシートを上bodyのすなわち、使用、タグlink、タグ内のあなたは（つまりなり、サイト上で、内部にアクセスしていた領域bodyタグやないでheadタグを）。MDNのように、これは大丈夫ですが、「良い方法ではない」との情報源もあります。
<link>要素は、のいずれかで発生することができ<head>、または<body>それは、リンクタイプ持っているかどうかに応じて、素子本体-OKを。たとえば、stylesheetリンクタイプはbody-okであるため<link rel="stylesheet">、ボディで許可されます。ただし、これは従うことをお勧めしません。<link>要素をボディコンテンツから分離してに配置する方が理にかなっています<head>。
w3schoolsの<head>ように、セクションに制限する人もいます。
注：この要素はヘッドセクションにのみ含まれますが、何度でも使用できます。
テスト中
私はここ（デスクトップ環境、ブラウザー上）でテストしましたが、私にとってはうまくいきました。ファイルを作成しますfoo.html。
<!DOCTYPE html>
<html>
<head></head>
<body>
<link href="bar.css" type="text/css" rel="stylesheet">
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
</body>
</html>
そして、同じディレクトリにあるCSSファイルbar.css：
.test1 {
color: green;
};
まあ、これは、CSSファイルを教育機関のシステムのどこかにアップロードする方法がある場合にのみ可能に見えるでしょう。たぶんこれは事実でしょう。
3番目のオプション：<style>オン<body>
タグにインターネットスタイルシートを使用しますbody。つまり、styleアクセスできる領域内（サイト上、bodyタグ内ではなくheadタグ内）でタグを使用します。これが、Charles SalviaとSzのここでの回答です。このオプションを選択するときは、彼らの懸念を考慮してください。
4、5、6番目のオプション：JSウェイ
警告これら<head>は、ページの要素の変更に関連しています。おそらく、これは教育機関のシステム管理者によって許可されないでしょう。そのため、最初に許可を求めることをお勧めします。
さて、許可が与えられていると仮定すると、戦略は <head>です。どうやって？JavaScriptメソッド。
第四オプション：新<link>上<head>
これは2番目のオプションの別のバージョンです。使用する外部スタイルシートで<head>の使用、すなわち、タグを<link>要素外あなたは（それがサイト上ではなく、内側になりますアクセスを持っているエリアbody内のタグとはいheadタグ）。このソリューションは、上記の2番目のオプションソリューションに関するMDNおよびw3schoolsの推奨事項に準拠しています。新しいLinkオブジェクトが作成されます。
JSを介して問題を解決するには、多くの方法がありますが、以下のコードラインで簡単な方法を示します。
テスト中
私はここ（デスクトップ環境、ブラウザー上）でテストしましたが、私にとってはうまくいきました。ファイルを作成しますf.html。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
scriptタグの内側：
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
次に、CSSファイルの同じディレクトリでbar.css（2番目のオプションと同様に）呼び出します。
.test1 {
color: green;
};
すでに述べたように、これは、CSSファイルを教育機関のシステムのどこかにアップロードする方法がある場合にのみ可能に見えます。
第5回オプション：新<style>上<head>
タグに新しい内部スタイルシートを<head>使用します。つまり、アクセスできる領域の外に新しい<style>要素を使用します（つまり、サイトでは、タグ内ではなく、タグ内にあります）。新しいオブジェクトが作成されます。bodyheadStyle
これはJSによって解決されます。1つの簡単な方法を以下に示します。
テスト中
私はここ（デスクトップ環境、ブラウザー上）でテストしましたが、私にとってはうまくいきました。ファイルを作成しますfoobar.html。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
scriptタグの内側：
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
6番目のオプション：既存の <style>上の<head>
タグに既存の内部スタイルシートを<head>使用します。つまり、アクセスできる領域の外にある<style>要素（サイト内、タグ内ではなく、タグ内にある）を使用します（存在する場合）。新しいオブジェクトが作成されるか、オブジェクトが使用されます（ここで採用されたソリューションのコードで）。bodyheadStyleCSSStyleSheet
これはある意味で危険です。
まず、<style> オブジェクトが存在しない可能性があるためです。このソリューションを実装する方法によっては、undefinedリターンが得られる場合があります（システムは外部スタイルシートを使用する場合があります）。
2つ目は、システムデザインの作成者の作業（作成者の問題）を編集するためです。
3つ目は、組織のITの安全性に関する方針では許可されていない可能性があるためです。だから、（他のJSソリューションと同様に）これを行う許可を求めてください。
もう一度、許可が与えられたとしましょう：
この方法で使用できるメソッドのいくつかの制限を考慮する必要がありますinsertRule()。提案されたソリューションはデフォルトのシナリオを使用し、最初の操作はstylesheetが存在する場合。
テスト中
私はここ（デスクトップ環境、ブラウザー上）でテストしましたが、私にとってはうまくいきました。ファイルを作成しますfoo_bar.html。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
scriptタグの内側：
function demoLoop(){ // remove this line
var elmnt = document.getElementsByTagName("style");
if (elmnt.length === 0) {
// there isn't style objects, so it's more interesting create one
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {" +
"color: green;" +
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
} else {
// Using CSSStyleSheet interface
var firstCSS = document.styleSheets[0];
firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
}
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too
このソリューションへの別のアプローチは、CSSStyleDeclarationオブジェクトを使用しています（w3schoolsおよびMDNのドキュメント）。しかし、システムのCSSの既存のルールを上書きするリスクを考えると、面白くないかもしれません。
7番目のオプション：インラインCSS
インラインCSSを使用する。これにより問題が解決しますが、（コード行の）ページサイズによっては、コードの保守（作成者自身または他の割り当てられた担当者による）が非常に困難になる場合があります。
しかし、教育機関での役割のコンテキストやWebシステムのセキュリティポリシーによっては、これが独自の利用可能なソリューションになる場合があります。
テスト中
ファイルを作成します_foobar.html。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
ガガンからの質問に厳密に答える
ブラウザーは、連続していないCSSをどのようにレンダリングすることになっていますか？
- ページ上のすべてのcssスタイルを使用してデータ構造を生成し、それをレンダリングに使用することになっていますか？
- それとも、表示される順序でスタイル情報を使用してレンダリングしますか？
（適応された引用）
より正確な回答を得るには、Googleに次の記事をお勧めします。
- ブラウザーのしくみ：最新のWebブラウザーの舞台裏
- レンダーツリーの構築、レイアウト、ペイント
- Webページを「レンダリングする」とはどういう意味ですか？
- ブラウザのレンダリングの仕組み—舞台裏
- レンダリング-HTML標準
- 10レンダリング— HTML5