[分享]css内部样式设计网页

发布于 2024-11-11 15:26:15

CSS内部样式可以让网页的设计更加多样化和灵活，下面我们将介绍如何使用内部样式来设计一个网页。

<html>
  <head>
    <title>我的网页</title>
    <style type="text/css">
      body {
        background-color: #F5F5F5;
        font-family: Arial;
      }
      h1 {
        color: #FF4500;
      }
      p {
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 20px;
      }
      .box {
        border: 1px solid #999;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>欢迎访问我的网页</h1>
    <p>这是一个使用CSS内部样式设计的网页，背景色为淡灰色，字体为Arial。</p>
    <div class="box">
      <p>这是一个带有边框的盒子，使用了.box类选择器，边框为1px实线，颜色为#999，内部有10px的padding。</p>
    </div>
  </body>
</html>

在上面的代码中，我们使用了body选择器来设置页面的背景色和字体，使用h1选择器来设置标题的颜色，使用p选择器来设置段落的颜色、字号、行高和下边距。我们还定义了一个.box类选择器，用来设置一个带有边框和padding的盒子。

通过使用CSS内部样式，我们可以轻松地改变网页的布局、字体、颜色等样式，从而使网页变得更加漂亮和易于阅读。

css 教程