当前位置：首页 > CSS

用css制作html

2026-04-02 03:18:07CSS

使用CSS制作HTML样式

CSS（层叠样式表）用于控制HTML元素的外观和布局。通过CSS可以定义字体、颜色、间距、背景等样式属性，使HTML内容更具视觉吸引力。

内联样式

直接在HTML元素的style属性中编写CSS代码，适用于单个元素的样式定制。

用css制作html

<p style="color: blue; font-size: 16px;">这是一段蓝色文字。</p>

内部样式表

在HTML文档的<head>部分使用<style>标签定义样式，适用于当前页面的样式控制。

<head>
  <style>
    p {
      color: red;
      font-family: Arial;
    }
  </style>
</head>
<body>
  <p>这是一段红色文字。</p>
</body>

外部样式表

将CSS代码保存在独立的.css文件中，通过<link>标签引入，适用于多页面共享样式。

用css制作html

styles.css

body {
  background-color: lightgray;
}
h1 {
  text-align: center;
}

HTML文件

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>居中标题</h1>
</body>

常用CSS属性

文本样式
color（颜色）、font-family（字体）、font-size（字号）、text-align（对齐方式）。
盒模型
margin（外边距）、padding（内边距）、border（边框）、width/height（宽高）。
布局
display（显示方式）、flexbox（弹性布局）、grid（网格布局）、position（定位）。

示例：按钮样式

<style>
  .button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .button:hover {
    background-color: #45a049;
  }
</style>
<button class="button">点击按钮</button>

通过以上方法，可以灵活地为HTML元素添加样式，实现丰富的页面视觉效果。