タグ内にCSSスタイルを記述する方法-CSSチュートリアル-php.cn

行内元素，h2 标题元素

タグは背景色を赤色 (background-color: #FF6633) に設定します。。

タグ、

ホームページ

ウェブフロントエンド

CSSチュートリアル

タグ内にCSSスタイルを記述する方法

青灯夜游

Dec 16, 2020 pm 05:02 PM

CSSスタイル html

方法: タグの style 属性に CSS スタイルを直接記述するだけです。style 属性は要素のインラインスタイルを指定できます。構文は "> です。要素>」。

タグ内にCSSスタイルを記述する方法

このチュートリアルの動作環境: Windows7 システム、css3 html5 バージョン、この方法はすべてのブランドのコンピューターに適しています。

(推奨チュートリアル: html チュートリアル、CSS ビデオチュートリアル)

CSS スタイルコードは .css タイプのテキストファイルに保存する必要があります。 Web ページ内の

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

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

タグ、タグ、 タグ、

タグにそれぞれ適用します。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>行内样式</title> </head> <body> <p style="background-color: #999900">行内元素，控制段落-1</p> <h2 id="行内元素-h-nbsp-标题元素">行内元素，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="max-width:90%">行内元素，div 块级元素 </div>
ログイン後にコピー
、これまでの Written together の HTML 構造とスタイル、つまり
を放棄します。
段落

タグは背景色を茶色 (background-color: #999900) に設定し、title

タグは背景色を赤色 (background-color: #FF6633) に設定します。。

ラベルのフォントを 30 ピクセル (font-size:30px;) に設定し、
ラベルの高さと行の高さを 30 ピクセルに設定し、背景色とcolor (background-color :#66CC99; color:#993300; height:30px; line-height:30px;)、タグはフォントサイズを相対単位 (font-size: 2em;) に設定します。
2 つの段落

タグは内容が異なりますが、同じ背景色設定を使用しますが、背景色を設定する 2 つの CSS インライン属性を追加します。背景色: #999900。

タグ、

タグ、

タグはブロックレベルの要素であり、CSS プロパティを設定し、ブラウザはそれらをサポートします。タグ、タグはインライン要素であり、その CSS プロパティを設定し、ブラウザはそれをサポートしているため、CSS インラインスタイルはインライン要素またはブロックレベル要素に関係なく有効です。
つまり、インライン要素の記述は簡単ですが、例から次の欠点がわかります。

style 属性を追加するには、すべてのタグをスタイル設定する必要があります。

Web ページ作成者が HTML タグとスタイルを混在させていた以前との違いは、インラインスタイルは現在 CSS を通じて記述されており、以前は HTML タグの属性が使用されていたことです。は異なりますが、スタイル効果は同じです。後のメンテナンスコストが高くなります。つまり、ページを変更するときに、Web サイトの各ページを 1 つずつ開いて 1 つずつ変更する必要があり、役割が見えません。 CSS はまったく必要ありません。

インラインスタイルを多数追加するとページが大きくなり、ポータルがこのように記述されている場合、サーバーの帯域幅とトラフィックが無駄になります。

インターネット上の一部の Web ページでは、ソースファイルを見るとこのような書き方がされていることがわかります。状況:

#Web ページ作成者がこのようなインラインスタイルを作成した場合、以前に作成したスタイルの競合を考慮することなく、現在のスタイルをすぐに変更できます。
#この状況が Web ページに存在する場合、バックグラウンドで編集するときに、スタイルがエディターを通じて生成されるか、バックグラウンドが完全に開発されていません。エディターがスタイルを直接変更するのではなく、スタイルを選択するためのオプションを開発する必要があります。色、太さ、背景色、傾き、その他の効果をエディターで設定します。

プログラミング関連の知識について詳しくは、
プログラミング学習
をご覧ください。！