HTML インライン スタイル

HTML インライン スタイルは、他の 2 つのスタイル設定方法 (内部スタイルと外部スタイル) と同様に、CSS スクリプト言語を使用して Web ページのスタイルを設定する方法です。この方法では、Web サイトまたは Web ページに固有のスタイルを追加します。この構文は '

' です。ここで、スタイルの正確なコードの後のセミコロンは、スタイルを含めるために使用されます。フォントの種類、フォントの色、境界線、テキストの配置、背景などのスタイル設定プロパティ。ユーザー インターフェイスは非常に便利で使いやすいものであることが期待されるため、これはあらゆる Web サイトにとって重要なポイントです。

構文

インライン スタイルは、外観と操作の形式で CSS として機能しますが、いくつかの基本的な違いがあります。セレクターを使用せずに、タグが記述されているタグに直接影響します。

コード内にインライン スタイルを含める構文は次のとおりです。

<h1 style="style code;"></h1>

上記の構文にインライン スタイル属性を含めます

タグ。 style 属性は別の HTML 属性と同様に機能します。等号 = の後に、その属性のスタイル値を含む「引用符」が style で始まります。インライン スタイル コードには、セレクターや中括弧のペアは含まれません。このコードは、値の後にセミコロンを使用しないと不完全です。

インライン スタイルを使用すると、サイズ、フォント、色、テキストと画像の配置、テキストの背景色、境界線、要素の輪郭、要素間のスペース、その他多くのスタイルなどの要素にスタイルを定義できます。コード。

セミコロンの前にすべてのスタイル コードをインラインで含める必要があります。

HTML でインライン スタイルを使用するのはどのような場合ですか?

開発者は主に、ユーザーが理解しやすいコンテンツを追加または強調する必要がある場合に、コード内でインライン スタイルを使用します。多くのメーラーでは

動的 Web サイトでは JavaScript を使用します。この場合、通常、JavaScript コードにより、ユーザーはこの要素にインライン スタイルを追加できます。コード内の

属性にインライン スタイルを追加するとします。スタイルは、指定された要素にのみ適用されます。ただし、内部スタイル内に追加したのと同じスタイルが、このドキュメントの

全体に適用されます。タグ。したがって、特定の属性にインライン スタイルを使用してスタイルを与えることは、常に有用なものとして扱われます。

インライン スタイルは常に最優先とみなされます。コード内の style 属性には、一連の CSS プロパティと値のペアが含まれています。

HTML インラインスタイルの例

次に、HTML コード内でインライン スタイルがどのように機能するかを示す例をいくつか示します。

<h1 id="Inline-style-Example"> Inline style Example </h1>
<p style="text-align:center; background-color: lightgrey; font-style:italic; font-size:24px;"> Inline style for paragraph</p>

例 #1

コード:

<h1 id="Types-of-style-in-HTML">Types of style in HTML </h1>

• HTML Inline CSS
• HTML Internal CSS
• HTML External CSS

HTML Inline style 

That some achieve great success is proof to all that others can achieve it s well

The hurdles in between the goals are actually the tonics to boost you up with more energy

Home Cinema Projectors

Imagine your favorite movie in true cinematic detail. From 4k to Full HD, create a real movie theatre feel at home.

While our 3D projectors bring the action to the life with incredible impact and depth of field

出力:

例 #2

コード:

<h2 id="Indian-Culture">Indian Culture</h2>
<img  src="/static/imghwm/default1.png" data-src="kids.png" class="lazy"   style="max-width:90%" alt="HTML インライン スタイル" >
<p style="background-color:aquamarine ;">
India is known in all over world for its unique culture. It has one of the oldest culture which is 4500 years ago. India is famous for the <i style="font-size: 20px; color:darkorange;">Invention of Zero </i> in Mathematics , advance in architecture like <i style="font-size: 20px; color:white;">Taj Mahal</i> , for in <i style="font-size: 20px; color: green;">  Ayurveda  </i> . It is nation of more than 1.2  billion people, Which is known as second most nation in population comes after China.
<br>
Indian culture is famous in the form of different food, Language, religion and arts are the key aspects of it. India is the country made up with combination of 28 states as well as 7 territories. Those having different cultures, different languages, different festivals, variety in clothing style, architure and art , state wise different delicious  food and many more things
</p>

出力:

例 #3

コード:

<h2 id="Famous-food-across-world">Famous food across      world</h2>
<p> <b>India</b> -Paneer ButterMasala, Dal-batti and many more.In drinks Tea, Old Monk rum</p>
<p> <b>Italy</b> - for Pizza, Pasata and more.In drinks Red Wine, Sparkling wine</p>
<p> <b>Greece</b> - Greek salad, Mousaka and In drinks ouzo, tsipouro</p>
<p> <b>China</b> - Noodles, Soy puff  and many  more.In drinks Tea, Chinese beer</p>
<p> <b>Mexico</b> - Chili con carne, Guacamole .In drinks Tea, Old Monk rum</p>

出力:

結論

上記のすべての情報から、インライン スタイルは、style 属性を使用して特定の要素の一意の CSS コードを表示するために利用されることがわかりました。ユーザーがコード内でも表示する必要がある重要なデータを表示したい場合、その時点で特定の要素について、このドキュメント内でインライン スタイルを使用します。

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