如何使用 HTML 和 CSS 在框内创建文本

htmlcssweb developmentfront end technology更新于 2024/4/24 16:12:17

本文中我们将要执行的任务是如何使用 HTML 和 CSS 在框内创建文本。我们考虑一个简单的文本 -

Welcome

现在我们将把这段文本(我们)放在矩形框内，其余文本放在框外。

We
lcome

让我们深入研究本文，以便更好地理解如何使用 HTML 和 CSS 在框内创建文本。为此，我们将使用 HTML div 标签。

使用 HTML <div> 标签

在 HTML 文档中，<div> 标签指定分区或部分。HTML <div>标签用于对 HTML 元素进行分组，这些元素随后被赋予容器并指定 CSS 或 JavaScript 样式。class 或 id 属性可以轻松修饰 <div> 标签。<div> 标签可以接受任何类型的材质。

为了更好地了解如何使用 HTML 和 CSS 在框内创建文本，我们来看看以下示例。

示例

在下面的示例中，我们运行代码，在矩形框内创建文本。

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1 ;">
      <style>
      div {
         width: 120px;
         height: 60px;
         padding: 5px;
         border: 3px solid #8E44AD ;
         margin: 0;
      }
      </style>
      <div><h1>Welcome</h1></div><p><h2>To Tutorialspoint</h2>
   </body>
</html>

脚本执行时，将生成一个输出，其中包含框内的文本和框外显示在网页上的文本。

示例

请考虑以下示例，其中我们使用 CSS 和 <div> 将文本显示在框内。

<!DOCTYPE html>
<html>
   <body>
      <style>
         .tutorial {
            width: 11em;
            border: 3px solid #DE3163;
            box-shadow: 9px 6px 4px #5B2C6F;
            padding: 7px 11px;
            background-image: linear-gradient(150deg, #EAFAF1 , #E8DAEF 30%,#E5E8E8 );
        }
      </style>
      <div class="tutorial">
         <p>The Best E-Learning.</p>
      </div>
   </body>
</html>

运行上述脚本后，将弹出输出，显示框内的文本，该文本已应用 CSS 并在网页上显示框阴影。

示例

执行以下代码，观察我们如何使用 CSS 将文本放置在框内。

<!DOCTYPE html>
<html>
   <body>
      <style>
         .tutorial {
            display: inline-block;
            width: 65px;
            height: 20px;
            padding: 60px 11px;
            background-color:#DFFF00;
         }
         .tutorial1 {
            text-align: center;
         }
      </style>
      <div class="tutorial1">
         <div class="tutorial">MSD</div>
         <div class="tutorial">VIRAT</div>
      </div>
   </body>
</html>

当脚本执行时，它将生成一个输出，该输出由两个应用了 CSS 的框以及放置在网页上显示的框内的文本组成。