HTML スタイル属性

HTML コードには、Chrome、Firefox、IE などの Web ブラウザーでレンダリングされた Web ページが意図したとおりに表示されるように、style 属性が必要です。 HTML タグにはさまざまな情報を含めることができ、style 属性はインライン スタイルを使用して HTML ブロック内の情報の外観を制御します。

この記事では、HTML スタイル属性について詳しく説明します。HTML スタイル属性は、Web ブラウザーでのページのレンダリング方法を定義する一連のルールにすぎません。

HTML スタイル属性のリスト

これは、HTML 要素のデザインに影響を与え、制御するために使用できるすべてのスタイル プロパティのリストと実際の例です:

1.背景色

この CSS プロパティを使用すると、

、

などの HTML 要素の背景色を設定できます。

例

<div style="background-color:blue">My background is blue</div>

出力:

2.カラー

HTML 要素内のテキストのフォントの色は、その color 属性を適切な色の名前、16 進数コード、または RGB コードに設定することで制御できます。

例

<div style="color:blue">My font color is blue</div>

出力:

3.枠線の色

HTML 要素に境界線を追加したい場合は、その要素の境界線の色を設定できます。

例

<p style="border: 1px solid red">My border is red</p>

出力:

上記のコードが示すように、border プロパティは、「Border-width border-style border-color」の順序で 3 つのプロパティを受け入れます。

4.背景画像

次のように、background-image プロパティを使用して、画像を背景として設定することもできます。

例:

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px">
<p><strong>出力:</strong></p>
<p><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543789760801.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML スタイル属性" ></p>
<h4>5.背景-繰り返し</h4>
<p>上記の例でわかるように、background-image プロパティを使用して画像を背景として設定すると、デフォルトで画像が水平方向と垂直方向の両方で繰り返されます。ただし、画像によっては、垂直方向または水平方向に繰り返す必要がある場合や、繰り返す必要がない場合があります。この動作は、background-repeat プロパティに対して必要な値を設定することで制御できます。これは、background-image が使用されている場合にのみ使用できます。それ以外の場合、スタンドアロン プロパティとして使用する場合、スタイル値は追加されません。</p>
<p>値「repeat-x」を使用すると、画像を水平方向にのみ繰り返すことができます。</p>
<p>値「repeat-y」を使用すると、画像を垂直方向にのみ繰り返すことができます。</p>
<p>値「no-repeat」は、背景画像の繰り返しを停止するために使用されます。</p>
<p>背景画像を改善するために上の例を変更してみましょう。</p>
<p><strong>例</strong></p>
<pre class="brush:php;toolbar:false"><div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; background-repeat:no-repeat">
<p><strong>出力:</strong></p>
<p><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543789985182.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML スタイル属性" ></p>
<p>上記の例を背景画像と比較すると理解できます。画像を背景として追加でき、背景の繰り返しを使用して背景画像の繰り返しを制御できます。</p>
<h4>6.背景の位置</h4>
<p>このプロパティを使用して、背景画像の位置を定義できます。</p>
<p><strong>例</strong></p>
<pre class="brush:php;toolbar:false"><div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; width:500px;background-repeat: no-repeat; background-position: left bottom;">
</div>

出力:

7.余白

CSS には、HTML 要素の 4 辺すべてにマージンを設定するためのプロパティが用意されています。また、要素の特定の側にマージンを追加することもできます。

margin-top は要素の上部にマージンを追加でき、margin-right は要素の右側にマージンを追加し、margin-left は要素の左側にマージンを追加し、margin-bottom は要素の右側にマージンを追加します。下に余白を追加します。これら 4 つのプロパティを使用する代わりに、margin プロパティを使用し、要件に従ってその値を設定することもできます。

例

p {
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
}

または

p
{
margin: 25px 50px 75px 100px;
}

8.パディング

padding プロパティは、要素のコンテンツとその境界線の間のスペースを定義します。 「padding」プロパティ、または padding-top、padding-bottom、padding-left、padding-right などの個別のパディング プロパティを使用して、要素のコンテンツの上部、下部、左、または右のパディングを設定できます。

p {
padding-top: 25px;
padding-bottom: 75px;
padding-right: 50px;
padding-left: 100px;
}

または

p
{
padding: 25px 50px 75px 100px;
}

9.高さと幅

HTML 要素の高さと幅を定義するために使用される最も基本的な CSS プロパティは、高さと幅です。 200px などのピクセル値、または 10%、20% などのパーセンテージに設定できます。

10.テキストの整列

このプロパティを使用して、要素内のテキストの配置の水平方向を設定できます。値のオプションは、中央、右、または左です。

p {
text-align: center;
}

または

p {
text-align: left;
}

or

p {
text-align: right;
}

11. Text-Decoration

Text decoration property can be used to set decorations like underline, line-through, or overline over text in HTML.

Example:

<p style="text-decoration:underline">This is underline</p>

Output:

12. Letter-Spacing

As the name suggests, this property defines the spacing between letters/characters in a word. You can assign a positive or negative pixel value to increase or decrease the spacing between letters.

Example:

<p style="letter-spacing: -3px">My words are overlapped </p>

Output:

13. Line-Height

Line height defines the distance between vertical lines. You can set the line height to a positive or negative pixel value, similar to letter spacing. Let’s review the example below to understand better:

Example:

<p style="line-height: 0.7px">This paragraph has a small line-height.<br>This paragraph has a small line-height.<br>
</p>

Output:

14. Text Direction

Sometimes, if the web page’s content is not in English but in some other language like Arabic, which follows a right to the left convention, we would need to change the direction of the text. In such cases, we can reverse the text direction.

Example:

<p style="direction: rtl"><bdo dir="ltr">I am right to left</bdo></p>

Output:

15. Text Shadow

This property adds a shadow to the text.

Example:

<p style="text-shadow: 3px 2px gray;"> I’ve got a gray shadow</p>

Output:

16. Font Family

We can define the font class for text in an element. We can define multiple font families separated by a comma as a fallback system to handle scenarios where a preferred font class cannot be loaded.

• Font style: We can add italic or oblique effects to the text with the font-style property.

Example:

<p style="font-style: oblique">This is oblique style.</p>

Output:

• Font weight: This property defines the weight of a font.

Example:

<p style="font-weight: 900"> This is a bold paragraph</p>

Output :

The styling attributes showcased above are our building blocks with UI and UX designing. New versions of CSS continue to evolve.