HTML学习笔记7-HTML样式

最新推荐文章于 2024-08-27 11:27:35 发布

weeds606

最新推荐文章于 2024-08-27 11:27:35 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/98723264

版权

前端相关专栏收录该内容

42 篇文章 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>

实现效果如下：

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>

实现效果如下：

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>

实现效果如下