📜  html 样式属性 - Html (1)

📅  最后修改于: 2023-12-03 15:31:17.475000             🧑  作者: Mango

HTML 样式属性

HTML 样式属性用于设置 HTML 元素的样式特性,包括字体、颜色、大小、对齐方式等等。本文将介绍常用的 HTML 样式属性。

1. font-family

font-family 用于设置文本的字体。可指定多个字体,浏览器将自动选择最适合的字体。

语法格式如下:

<p style="font-family: Arial, sans-serif;">这是一段文本</p>
2. font-size

font-size 用于设置文本的字号大小。常用的单位有 px、em、rem 等。

语法格式如下:

<p style="font-size: 16px;">这是一段文本</p>
3. color

color 用于设置文本的颜色。可以使用颜色名称、十六进制值或 RGB 值来指定颜色。

语法格式如下:

<p style="color: red;">这是一段红色文本</p>
<p style="color: #0000ff;">这是一段蓝色文本</p>
<p style="color: rgb(0, 255, 0);">这是一段绿色文本</p>
4. background-color

background-color 用于设置元素的背景色。

语法格式如下:

<div style="background-color: #cccccc;">这是一个有背景颜色的元素</div>
5. text-align

text-align 用于设置文本的对齐方式。常用的值有 left、center、right。

语法格式如下:

<p style="text-align: center;">这是一段居中对齐的文本</p>
6. border

border 用于设置元素的边框。可以指定边框的样式、宽度和颜色。

语法格式如下:

<div style="border: 1px solid black;">这是一个有边框的元素</div>
7. margin

margin 用于设置元素的外边距。可以指定上、右、下、左四个方向的外边距。

语法格式如下:

<div style="margin: 10px;">这是一个有外边距的元素</div>
8. padding

padding 用于设置元素的内边距。可以指定上、右、下、左四个方向的内边距。

语法格式如下:

<div style="padding: 5px;">这是一个有内边距的元素</div>
9. width

width 用于设置元素的宽度。可以指定具体的像素值,也可以用百分比来指定。

语法格式如下:

<div style="width: 50%;">这是一个宽度为父元素一半的元素</div>
10. height

height 用于设置元素的高度。可以指定具体的像素值,也可以用百分比来指定。

语法格式如下:

<div style="height: 100px;">这是一个高度为100像素的元素</div>

以上是 HTML 常用的样式属性介绍。通过灵活运用这些样式属性,可以让 HTML 页面更加美观和易读。