ホームページ > 記事 > ウェブフロントエンド > CSS インライン スタイルは内部スタイルですか?
CSS インライン スタイルは内部スタイルですか?
- 青灯夜游オリジナル
- 2021-07-15 17:46:342628ブラウズ
css インライン スタイルは内部スタイルではありません。インライン スタイルは、style 属性を使用してコード行内のタグに CSS スタイルを直接配置します。一方、内部スタイルは Web ページのソース ファイルの先頭に CSS スタイルを書き込み、HTML タグの "
このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。
インライン スタイル
インライン スタイルは、コード行内のタグ (通常はタグ内) に CSS スタイルを直接配置することですstyle 属性では、インライン スタイルがタグに直接挿入されるため、最も直接的な方法ですが、変更するのが最も不便なスタイルでもあります。
[例 1] CSS インライン スタイルを段落、
タグ、 タグ、 タグ、 タグにそれぞれ適用します。 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>
<p style="background-color: #999900">行内元素，控制段落-2</p>
<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>
<em style="font-size:2em;">行内元素，em 强调</em>
</body>
</html>ページのデモ効果は次のとおりです:
上記の例では、インライン スタイルは HTML 要素の style 属性によって決定されます。つまり、CSS コードはスタイルに配置されます ="" は引用符で囲むことができ、複数の CSS 属性値はセミコロンで区切られます。たとえば、
タグのブロックを記述する例では、 level 要素 <div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素 </div>
では、これまでの HTML 構造とスタイルを放棄します。これらをまとめて記述する方法は、
段落
タグは背景色を茶色 (background-color: #999900) に設定し、タイトル
タグは背景色を赤色 (背景色 : #FF6633)。
タグのフォントを 30 ピクセル (font-size:30px;) に設定し、 タグの高さと行の高さを 30 ピクセルに設定し、背景色とcolor ( background-color:#66CC99; color:#993300; height:30px; line-height:30px;)、 タグはフォント サイズを相対単位に設定します (font-サイズ: 2em;)。 2 つの段落
タグは内容が異なりますが、同じ背景色設定を使用しますが、背景色を設定する 2 つの CSS インライン属性を追加します。背景色: #999900。
タグ、
タグ、
タグはブロックレベルの要素であり、CSS プロパティを設定し、ブラウザはそれらをサポートします。 タグ、タグはインライン要素であり、その CSS プロパティを設定し、ブラウザはそれをサポートしているため、CSS インライン スタイルはインライン要素またはブロックレベル要素に関係なく有効です。 つまり、インライン要素の記述は簡単ですが、例から次の欠点がわかります。
style 属性を追加するには、すべてのタグをスタイル設定する必要があります。
Web ページ作成者が HTML タグとスタイルを混在させていた以前との違いは、インライン スタイルは現在 CSS を通じて記述されており、以前は HTML タグの属性が使用されていたことです。は異なりますが、スタイル効果は同じです。後のメンテナンスコストが高くなります。つまり、ページを変更するときに、Web サイトの各ページを 1 つずつ開いて 1 つずつ変更する必要があり、役割が見えません。 CSS はまったく必要ありません。
インライン スタイルを多数追加するとページが大きくなり、ポータルがこのように記述されている場合、サーバーの帯域幅とトラフィックが無駄になります。
インターネット上の一部の Web ページでは、ソース ファイルを見るとこのような書き方がされていることがわかります。状況:
- #Web ページ作成者がこのようなインライン スタイルを作成した場合、以前に作成したスタイルの競合を考慮することなく、現在のスタイルをすぐに変更できます。
#この状況が Web ページに存在する場合、バックグラウンドで編集するときに、スタイルがエディターを通じて生成されるか、バックグラウンドが完全に開発されていません。エディターがスタイルを直接変更するのではなく、スタイルを選択するためのオプションを開発する必要があります。色、太さ、背景色、傾き、その他の効果をエディターで設定します。
-
#内部スタイル
内部スタイルは、Web ページのソース ファイルの先頭に CSS を記述することで記述されます。特徴は、との間で、HTMLタグ内の
[例2] 段落にインライン形式の記述方法を設定し、コード量を削減します。 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式</title>
<style type="text/css">
p{
text-align: left; /*文本左对齐*/
font-size: 18px; /*字体大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行缩进2个文字大小空间*/
width: 500px; /*段落宽度 500 像素*/
margin: 0 auto; /*浏览器下居中*/
margin-bottom: 20px; /*段落下边距 20 像素*/
}
</style>
</head>
<body>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！</p>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！</p>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！</p>
</body>
</html>上の例では、段落は次のように設定されています: テキストは左揃えです
, フォントのサイズは 14です
,行の高さは25 ピクセル,幅 500 ピクセル, 下マージン 20 ピクセル,ブラウザの下の中央に配置,最初の行はテキスト サイズ 2 つのスペースでインデント## ＃。最初の行のインデントは相対単位を使用します。この設定の目的は、フォント サイズが変更された場合でも、たとえば font-size: 18px; のようにテキスト サイズ スペース 2 つ分インデントできるようにすることです。 <p>インライン スタイルは、スタイルの変更に不便をもたらします。たとえば、前の例では、両方の段落で同じスタイルを使用していますが、2 回記述する必要があります。インライン スタイルを使用すると、すべての段落スタイルをまとめて配置できます。 </p>
<p>style は CSS スタイルだけでなく JavaScript スクリプトも定義できるため、style を使用する場合は注意が必要です。 style の type 値が text/css の場合、CSS スタイルは内部的に書き込まれ、style の type 値が text/javascript の場合、JavaScript スクリプトは内部的に書き込まれます。 </p>
<p><strong>スタイル タグ </strong></p>
<p>style の title 属性には特別な属性 title があります。title を使用してさまざまなスタイルのタイトルを設定でき、ビューアはタイトルに基づくタイトル。ブラウザで切り替えの効果を実現するにはさまざまなスタイルを選択しますが、IE ブラウザはこの効果をサポートしておらず、Firefox ブラウザはこの効果をサポートしています。 </p>
<p>(学習ビデオ共有: <a href="https://www.php.cn/course/list/12.html" target="_blank">css ビデオ チュートリアル</a>)</p>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>
<p style="background-color: #999900">行内元素，控制段落-2</p>
<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>
<em style="font-size:2em;">行内元素，em 强调</em>
</body>
</html>ページのデモ効果は次のとおりです:
上記の例では、インライン スタイルは HTML 要素の style 属性によって決定されます。つまり、CSS コードはスタイルに配置されます ="" は引用符で囲むことができ、複数の CSS 属性値はセミコロンで区切られます。たとえば、
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素 </div>
では、これまでの HTML 構造とスタイルを放棄します。これらをまとめて記述する方法は、 です。
段落
タグは背景色を茶色 (background-color: #999900) に設定し、タイトル
タグは背景色を赤色 (背景色 : #FF6633)。
タグのフォントを 30 ピクセル (font-size:30px;) に設定し、 2 つの段落 タグは内容が異なりますが、同じ背景色設定を使用しますが、背景色を設定する 2 つの CSS インライン属性を追加します。背景色: #999900。 タグ、 つまり、インライン要素の記述は簡単ですが、例から次の欠点がわかります。 style 属性を追加するには、すべてのタグをスタイル設定する必要があります。 Web ページ作成者が HTML タグとスタイルを混在させていた以前との違いは、インライン スタイルは現在 CSS を通じて記述されており、以前は HTML タグの属性が使用されていたことです。は異なりますが、スタイル効果は同じです。後のメンテナンスコストが高くなります。つまり、ページを変更するときに、Web サイトの各ページを 1 つずつ開いて 1 つずつ変更する必要があり、役割が見えません。 CSS はまったく必要ありません。 インライン スタイルを多数追加するとページが大きくなり、ポータルがこのように記述されている場合、サーバーの帯域幅とトラフィックが無駄になります。 インターネット上の一部の Web ページでは、ソース ファイルを見るとこのような書き方がされていることがわかります。状況: #この状況が Web ページに存在する場合、バックグラウンドで編集するときに、スタイルがエディターを通じて生成されるか、バックグラウンドが完全に開発されていません。エディターがスタイルを直接変更するのではなく、スタイルを選択するためのオプションを開発する必要があります。色、太さ、背景色、傾き、その他の効果をエディターで設定します。 内部スタイルは、Web ページのソース ファイルの先頭に CSS を記述することで記述されます。特徴は、との間で、HTMLタグ内の テキストは左揃えです フォントのサイズは 14です 行の高さは25 ピクセル background-color:#66CC99; color:#993300; height:30px; line-height:30px;)、 タグはフォント サイズを相対単位に設定します (font-サイズ: 2em;)。 タグ、
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式</title>
<style type="text/css">
p{
text-align: left; /*文本左对齐*/
font-size: 18px; /*字体大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行缩进2个文字大小空间*/
width: 500px; /*段落宽度 500 像素*/
margin: 0 auto; /*浏览器下居中*/
margin-bottom: 20px; /*段落下边距 20 像素*/
}
</style>
</head>
<body>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！</p>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！</p>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！</p>
</body>
</html>上の例では、段落は次のように設定されています: ,幅 500 ピクセル, 下マージン 20 ピクセル,ブラウザの下の中央に配置,最初の行はテキスト サイズ 2 つのスペースでインデント## ＃。最初の行のインデントは相対単位を使用します。この設定の目的は、フォント サイズが変更された場合でも、たとえば font-size: 18px; のようにテキスト サイズ スペース 2 つ分インデントできるようにすることです。 <p>インライン スタイルは、スタイルの変更に不便をもたらします。たとえば、前の例では、両方の段落で同じスタイルを使用していますが、2 回記述する必要があります。インライン スタイルを使用すると、すべての段落スタイルをまとめて配置できます。 </p>
<p>style は CSS スタイルだけでなく JavaScript スクリプトも定義できるため、style を使用する場合は注意が必要です。 style の type 値が text/css の場合、CSS スタイルは内部的に書き込まれ、style の type 値が text/javascript の場合、JavaScript スクリプトは内部的に書き込まれます。 </p>
<p><strong>スタイル タグ </strong></p>
<p>style の title 属性には特別な属性 title があります。title を使用してさまざまなスタイルのタイトルを設定でき、ビューアはタイトルに基づくタイトル。ブラウザで切り替えの効果を実現するにはさまざまなスタイルを選択しますが、IE ブラウザはこの効果をサポートしておらず、Firefox ブラウザはこの効果をサポートしています。 </p>
<p>(学習ビデオ共有: <a href="https://www.php.cn/course/list/12.html" target="_blank">css ビデオ チュートリアル</a>)</p>
以上がCSS インライン スタイルは内部スタイルですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。