HTML コードには、Chrome、Firefox、IE などの Web ブラウザーでレンダリングされた Web ページが意図したとおりに表示されるように、style 属性が必要です。 HTML タグにはさまざまな情報を含めることができ、style 属性はインライン スタイルを使用して HTML ブロック内の情報の外観を制御します。
この記事では、HTML スタイル属性について詳しく説明します。HTML スタイル属性は、Web ブラウザーでのページのレンダリング方法を定義する一連のルールにすぎません。
これは、HTML 要素のデザインに影響を与え、制御するために使用できるすべてのスタイル プロパティのリストと実際の例です:
この CSS プロパティを使用すると、
例
<div style="background-color:blue">My background is blue</div>
出力:
HTML 要素内のテキストのフォントの色は、その color 属性を適切な色の名前、16 進数コード、または RGB コードに設定することで制御できます。
例
<div style="color:blue">My font color is blue</div>
出力:
HTML 要素に境界線を追加したい場合は、その要素の境界線の色を設定できます。
例
<p style="border: 1px solid red">My border is red</p>
出力:
上記のコードが示すように、border プロパティは、「Border-width border-style border-color」の順序で 3 つのプロパティを受け入れます。
次のように、background-image プロパティを使用して、画像を背景として設定することもできます。
例:
<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px">出力:
上記の例でわかるように、background-image プロパティを使用して画像を背景として設定すると、デフォルトで画像が水平方向と垂直方向の両方で繰り返されます。ただし、画像によっては、垂直方向または水平方向に繰り返す必要がある場合や、繰り返す必要がない場合があります。この動作は、background-repeat プロパティに対して必要な値を設定することで制御できます。これは、background-image が使用されている場合にのみ使用できます。それ以外の場合、スタンドアロン プロパティとして使用する場合、スタイル値は追加されません。
値「repeat-x」を使用すると、画像を水平方向にのみ繰り返すことができます。
値「repeat-y」を使用すると、画像を垂直方向にのみ繰り返すことができます。
値「no-repeat」は、背景画像の繰り返しを停止するために使用されます。
背景画像を改善するために上の例を変更してみましょう。
例
<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; background-repeat:no-repeat">出力:
上記の例を背景画像と比較すると理解できます。画像を背景として追加でき、背景の繰り返しを使用して背景画像の繰り返しを制御できます。
このプロパティを使用して、背景画像の位置を定義できます。
例
<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>出力:
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;
}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;
}HTML 要素の高さと幅を定義するために使用される最も基本的な CSS プロパティは、高さと幅です。 200px などのピクセル値、または 10%、20% などのパーセンテージに設定できます。
このプロパティを使用して、要素内のテキストの配置の水平方向を設定できます。値のオプションは、中央、右、または左です。
p {
text-align: center;
}または
p {
text-align: left;
}or
p {
text-align: right;
}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:
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:
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:
<p style="line-height: 0.7px">This paragraph has a small line-height.<br>This paragraph has a small line-height.<br> </p>
Output:
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:
This property adds a shadow to the text.
Example:
<p style="text-shadow: 3px 2px gray;"> I’ve got a gray shadow</p>
Output:
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.
Example:
<p style="font-style: oblique">This is oblique style.</p>
Output:
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.
以上がHTML スタイル属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
