简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

CSS インライン スタイルは内部スタイルですか?

青灯夜游
リリース： 2023-01-07 11:43:40
オリジナル
2462 人が閲覧しました

css インライン スタイルは内部スタイルではありません。インライン スタイルは、style 属性を使用してコード行内のタグに CSS スタイルを直接配置します。一方、内部スタイルは Web ページのソース ファイルの先頭に CSS スタイルを書き込み、HTML タグの "

CSS インライン スタイルは内部スタイルですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

インライン スタイル

インライン スタイルは、コード行内のタグ (通常はタグ内) に CSS スタイルを直接配置することですstyle 属性では、インライン スタイルがタグに直接挿入されるため、最も直接的な方法ですが、変更するのが最も不便なスタイルでもあります。

[例 1] CSS インライン スタイルを段落、

タグ、 タグ、 タグ、
タグにそれぞれ適用します。 




行内样式




    
行内元素，控制段落-1

    
行内元素，h2 标题元素

    
行内元素，控制段落-2

    行内元素，strong 比 em 效果要强
    
行内元素，div 块级元素

    行内元素，em 强调
ログイン後にコピー

ページのデモ効果は次のとおりです:

CSS インライン スタイルは内部スタイルですか?

上記の例では、インライン スタイルは HTML 要素の style 属性によって決定されます。つまり、CSS コードはスタイルに配置されます ="" は引用符で囲むことができ、複数の CSS 属性値はセミコロンで区切られます。たとえば、

タグのブロックを記述する例では、 level 要素 

行内元素，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タグ内の

测试文本！测试文本！测试文本！测试文本！测试文本！

测试文本！测试文本！测试文本！测试文本！测试文本！

测试文本！测试文本！测试文本！测试文本！测试文本！

ログイン後にコピー
上の例では、段落は次のように設定されています:

テキストは左揃えです

,

フォントのサイズは 14です

,

行の高さは25 ピクセル,幅 500 ピクセル, 下マージン 20 ピクセル,ブラウザの下の中央に配置,最初の行はテキスト サイズ 2 つのスペースでインデント## ＃。最初の行のインデントは相対単位を使用します。この設定の目的は、フォント サイズが変更された場合でも、たとえば font-size: 18px; のようにテキスト サイズ スペース 2 つ分インデントできるようにすることです。

インライン スタイルは、スタイルの変更に不便をもたらします。たとえば、前の例では、両方の段落で同じスタイルを使用していますが、2 回記述する必要があります。インライン スタイルを使用すると、すべての段落スタイルをまとめて配置できます。

style は CSS スタイルだけでなく JavaScript スクリプトも定義できるため、style を使用する場合は注意が必要です。 style の type 値が text/css の場合、CSS スタイルは内部的に書き込まれ、style の type 値が text/javascript の場合、JavaScript スクリプトは内部的に書き込まれます。

スタイル タグ

style の title 属性には特別な属性 title があります。title を使用してさまざまなスタイルのタイトルを設定でき、ビューアはタイトルに基づくタイトル。ブラウザで切り替えの効果を実現するにはさまざまなスタイルを選択しますが、IE ブラウザはこの効果をサポートしておらず、Firefox ブラウザはこの効果をサポートしています。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS インライン スタイルは内部スタイルですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css
ソース：php.cn
前の記事：スタイルシートCSSにはどのような種類があるのでしょうか？ 次の記事：Java配列とJavaScript配列の違いは何ですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
WordPress 6.0 (add_editor_style) が Gutenberg エディターで style.css を読み込まない カスタムWordPressブロックテーマを作成するためにUdemyWordPressコースを受講しています。 function.php にブロック タイプが正常に登録され、Gute...
から 2023-11-12 20:37:50
0
2
261
CSS の小数点の先頭のゼロが大きな数値では機能しない 最近、100 を超えるリスト項目を含む順序付きリストを作成したときに問題が発生しました。 list-style:10 進数先頭ゼロ;ol{list-style:10 進数先頭ゼロ;...
から 2023-11-07 10:35:53
0
1
236
Sass エラー: ファイルはすでにロードされています: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss 私は quasar フレームワークを使用しており、プロジェクトのコンパイル中に上記のエラーが発生しました。モジュールのビルドに失敗しました (./node_modules/sass...
から 2023-11-06 21:38:55
0
1
219
HTML/CSSに背景ビデオを埋め込むにはどうすればよいですか? 皆さん、こんにちは。最近問題が発生しました。自分のサイトにビデオの背景を設定しようとしていますが、中央揃えのテキストが一番下まで表示されます。理由はわかりませんが、ナビゲーション ...
から 2023-11-06 13:59:13
0
1
240
JavaScriptでCSS/HTMLの名前付きcolorのRGB値を取得する方法 [name-rgb] という名前の Javascript オブジェクトを作成しました。 Basic:namedColors={AliceBlue:[240,248,255],Ant...
から 2023-11-06 09:05:50
0
2
210
関連トピック
詳細>

人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！