HTML学习笔记7-HTML样式-蒲公英云

HTML学习笔记7-HTML样式

傷城~ 2021-11-05 13:22 382阅读 0赞

一、HTML样式

style属性用于改变元素的样式，style属性的作用是提供一种改变HTML元素的样式

二、样式实例

1.定义背景颜色，使用的是background-color 属性。具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色练习</title>
</head>
<body style="background-color: aqua">
<h1 style="background-color: red">我是一个标题</h1>
<p style="background-color: blue">我是一个段落</p>
</body>
</html>

实现效果如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70

2.字体、颜色、尺寸分别使用font-family，color，font-size属性进行定义，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体颜色尺寸练习</title>
</head>
<body>
<h1 style="font-family: 宋体">我是一个标题</h1>
<p style="font-family: 华文中宋;color: red;font-size: 50px">我是一个段落</p>
</body>
</html>

实现效果如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 1

3.文本的对齐方式使用text-align属性进行定义，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本对齐练习</title>
</head>
<body>
<p style="text-align: right">我是一个<br />右对齐的文本</p>
</body>
</html>