如何更改网页中的文字大小？

由 发布于

我是建立网页的新手。只是为了培训，我做了一个非常简单的网站，但我不明白为什么我不能更改文本大小。

如果我删除背景图片代码，则可以，但是我不能这样做：

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

  <script src="jquery/jquery.min.js"></script>

  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $("h1, p").addClass("dark");
        $("div").addClass("important");
      });
    });
  </script>
  <style>
    body,
    html {
      height: 100%;
    }

    #grad1 {
      background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      p {
        font-size: 28px;
      }

      .important {
        font-weight: bold;
        font-size: xx-large;
      }

      .dark {
        color: dark;
      }
  </style>
</head>

<body>

  <div id="grad1">
    <div class="container">
      <h1 align="center">Dzīves jēga</h1><br><br>
      <p align="center"><dfn>“Dzīves jēga nav gaidīt, kad beigsies
          negaiss..
          bet gan iemācīties dejot lietū!”</dfn></p>
      <button type="button" class="btn  btn-lg btn-info">Izmaiņas ir
        neizbēgamas</button>
    </div>
  </div>

</body>

我只是想不通坐在这里呆了两天。