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

输出：

5.背景-重复

正如您在上面的示例中看到的，当使用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">

输出：

我们可以通过对比上面的例子并通过背景图片来理解；我们可以添加一张图片作为背景，通过背景重复，我们可以控制背景图片的重复。

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 元素的所有四个边上设置边距的属性，或者我们可以向元素的特定边添加边距。

使用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.

以上是HTML 样式属性的详细内容。更多信息请关注PHP中文网其他相关文章！