标记语言——网页应用CSS样式

当我们创建网页时，HTML和CSS是两个必不可少的技术。HTML用于定义网页的结构和内容，而CSS用于定义网页的样式和布局。在本攻略中，我们将重点介绍如何使用CSS样式来美化网页。

CSS样式基础知识

在CSS中，可以使用多种方式来定义样式，包括选择器、属性和值。以下是一些基本的CSS样式属性：

color：用于指定文本颜色。
background-color：用于指定背景颜色。
font-size：用于指定字体大小。
font-family：用于指定字体类型。
text-align：用于指定文本对齐方式。
padding和margin：用于指定元素的内边距和外边距。
border：用于指定元素的边框样式。

CSS样式示例

以下是两个示例，演示如何使用CSS样式来美化网页：

示例1：使用CSS样式设置文本样式

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #333;
      background-color: #f5f5f5;
    }

    h1 {
      font-size: 24px;
      color: #007bff;
      text-align: center;
      margin-top: 50px;
    }

    p {
      line-height: 1.5;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Webpage</h1>
  <p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</body>
</html>

上述代码将创建一个简单的网页，其中包含一个标题和一个段落。CSS样式将设置文本颜色、背景颜色、字体大小、字体类型、文本对齐方式、内边距和外边距等属性。

示例2：使用CSS样式设置盒子模型样式

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #007bff;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 50px auto;
      text-align: center;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>Box Title</h2>
    <p>This is a box with some text in it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
  </div>
</body>
</html>

上述代码将创建一个包含一个盒子的网页。CSS样式将设置盒子的宽度、高度、背景颜色、边框样式、内边距、外边距、文本对齐方式和颜色等属性。