等。

範例

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

輸出：

2.顏色

HTML 元素中文字的字體顏色可以透過將其顏色屬性設(shè)定為正確的顏色名稱、十六進位代碼或 RGB 代碼來控制。

範例

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

輸出：

3.邊框顏色

如果我們想為其新增邊框，我們可以設(shè)定任何 HTML 元素的邊框顏色。

範例

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

輸出：

如上面的程式碼所示，border 屬性會依照以下順序接受三個屬性：「border-width border-style border-color?！?/p>

4.背景圖片

我們也可以使用background-image屬性將影像設(shè)定為背景，如下所示：

範例：

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

輸出：

5.背景-重複

如您在上面的範例中所看到的，當使用background-image屬性將影像設(shè)為背景時，預(yù)設(shè)情況下，它會在水平和垂直方向上重複該影像。然而，某些圖像可能需要垂直或水平重複，或者可能不需要重複。可以透過設(shè)定背景重複屬性所需的值來控制此行為，並且只能在使用背景圖像時使用；否則，當用作獨立屬性時，它不會添加任何樣式值。

值「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">

輸出：

我們可以透過對比上面的例子並透過背景圖片來理解；我們可以添加一張圖片作為背景，透過背景重複，我們可以控制背景圖片的重複。

6.背景位置

透過這個屬性，我們可以定義背景圖片的位置。

範例

<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 元素的所有四個邊上設(shè)定邊距的屬性，或者我們可以為元素的特定邊添加邊距。

使用margin-top可以為元素頂部添加邊距，margin-right會為元素右邊添加邊距，margin-left會為元素左邊添加邊距，而margin-bottom將在底部添加邊距。除了使用這四個屬性之外，我們還可以使用 margin 屬性並根據(jù)我們的要求設(shè)定其值。

範例

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

或

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

8.填充

padding 屬性定義元素內(nèi)容與其邊框之間的空間。我們可以使用「padding」屬性或單獨的填充屬性（例如 padding-top、padding-bottom、padding-left 和 padding-right）來設(shè)定元素內(nèi)容的頂部、底部、左側(cè)或右側(cè)的填充。

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

或

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

9.高度和寬度

用來定義任何 HTML 元素的高度和寬度的最基本的 CSS 屬性是高度和寬度。您可以將它們設(shè)定為像素值，例如 200px，或百分比，例如 10%、20% 等

10。文字對齊

您可以使用此屬性來設(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.