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

例

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

出力:

2.カラー

HTML 要素內(nèi)のテキストのフォントの色は、その color 屬性を適切な色の名前、16 進(jìn)數(shù)コード、または RGB コードに設(shè)定することで制御できます。

例

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

出力:

3.枠線の色

HTML 要素に境界線を追加したい場(chǎng)合は、その要素の境界線の色を設(shè)定できます。

例

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

出力:

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

4.背景畫(huà)像

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

例:

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px">

出力:

5.背景-繰り返し

上記の例でわかるように、background-image プロパティを使用して畫(huà)像を背景として設(shè)定すると、デフォルトで畫(huà)像が水平方向と垂直方向の両方で繰り返されます。ただし、畫(huà)像によっては、垂直方向または水平方向に繰り返す必要がある場(chǎng)合や、繰り返す必要がない場(chǎng)合があります。この動(dòng)作は、background-repeat プロパティに対して必要な値を設(shè)定することで制御できます。これは、background-image が使用されている場(chǎng)合にのみ使用できます。それ以外の場(chǎng)合、スタンドアロン プロパティとして使用する場(chǎng)合、スタイル値は追加されません。

値「repeat-x」を使用すると、畫(huà)像を水平方向にのみ繰り返すことができます。

値「repeat-y」を使用すると、畫(huà)像を垂直方向にのみ繰り返すことができます。

値「no-repeat」は、背景畫(huà)像の繰り返しを停止するために使用されます。

背景畫(huà)像を改善するために上の例を変更してみましょう。

例

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; background-repeat:no-repeat">

出力:

上記の例を背景畫(huà)像と比較すると理解できます。畫(huà)像を背景として追加でき、背景の繰り返しを使用して背景畫(huà)像の繰り返しを制御できます。

6.背景の位置

このプロパティを使用して、背景畫(huà)像の位置を定義できます。

例

<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 辺すべてにマージンを設(shè)定するためのプロパティが用意されています。また、要素の特定の側(cè)にマージンを追加することもできます。

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

例

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 などの個(gè)別のパディング プロパティを使用して、要素のコンテンツの上部、下部、左、または右のパディングを設(shè)定できます。

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% などのパーセンテージに設(shè)定できます。

10.テキストの整列

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

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.

以上がHTML スタイル屬性の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。