一招搞定css元素五彩斑斓的背景-css教程-PHP中文网

一招搞定css元素五彩斑斓的背景

醉折花枝作酒筹

发布： 2021-08-12 15:28:45

原创

2804人浏览过

本篇文章将开始新的一个章节。所有好看的事物都离不开颜色，今天我们就来学习一个最简单的，那就是给元素设置背景颜色。快来学习吧。

我们也知道没有背景颜色的元素是不好看的，所有我们还是需要给元素设置背景颜色的。

我们先来看一个小例子吧，了解一下什么是背景颜色，怎么去设置。

已知，我们有一个div元素，一个p元素，现在我们希望div元素的背景颜色是红色，而p元素的背景颜色是蓝色，请问该如何去做？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      background-color: red;
    }
    p{
      background-color:blue;
    }
  </style>
</head>
<body>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</body>
</html>

登录后复制

这个小例子的结果是

$UXK]FP{}[Y_OUF[8TY{ATGQ.png$