HTML 樣式屬性

HTML 程式碼需要樣式屬性，以便在 Chrome、Firefox 和 IE 等網頁瀏覽器中呈現的網頁能夠如預期外觀顯示。 HTML 標籤可以包含各種訊息，而 style 屬性使用內嵌樣式來控制 HTML 區塊中資訊的外觀。

本文將了解有關 HTML 樣式屬性的更多信息，該屬性只不過是一組定義如何在 Web 瀏覽器中呈現頁面的規則。

HTML 樣式屬性清單

這裡列出了所有可用於影響和控制 HTML 元素設計的樣式屬性，並附有一個實際範例：

1.背景顏色

此 CSS 屬性可讓我們設定任何 HTML 元素的背景顏色，例如

、

等。

範例

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

輸出：

2.顏色

HTML 元素中文字的字體顏色可以透過將其顏色屬性設定為正確的顏色名稱、十六進位代碼或 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。」

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 id="背景-重複">5.背景-重複</h4>
<p>如您在上面的範例中所看到的，當使用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 id="背景位置">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 元素的所有四個邊上設定邊距的屬性，或者我們可以為元素的特定邊添加邊距。

使用margin-top可以為元素頂部添加邊距，margin-right會為元素右邊添加邊距，margin-left會為元素左邊添加邊距，而margin-bottom將在底部添加邊距。除了使用這四個屬性之外，我們還可以使用 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.