当前位置：首页 > CSS

html如何制作css

2026-03-12 01:27:57CSS

HTML 如何引入 CSS

HTML 可以通过多种方式引入 CSS 样式表，以下是常见的几种方法：

内联样式
直接在 HTML 标签中使用 style 属性添加 CSS 样式。
示例：

<p style="color: red; font-size: 16px;">这是一个段落。</p>

内部样式表
在 HTML 文件的 <head> 部分使用 <style> 标签定义 CSS 样式。
示例：

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>

外部样式表
通过 <link> 标签引入外部 CSS 文件，这是最推荐的方式，便于维护和复用。
示例：

<head>
  <link rel="stylesheet" href="styles.css">
</head>

在 styles.css 文件中定义样式：

p {
  color: green;
  font-size: 20px;
}

CSS 基本语法

CSS 规则由选择器和声明块组成，声明块包含属性和值。
示例：

选择器 {
  属性: 值;
  属性: 值;
}

常见选择器

标签选择器：直接使用 HTML 标签名称。
```
p {
  color: red;
}
```
类选择器：使用 . 加类名。
```
.text {
  font-weight: bold;
}
```
ID 选择器：使用 # 加 ID 名称。
```
#header {
  background: #333;
}
```
后代选择器：通过空格表示层级关系。
```
div p {
  margin: 10px;
}
```

常用 CSS 属性

文本样式

color：文本颜色。
font-size：字体大小。
font-family：字体类型。
text-align：文本对齐方式。

盒模型

width / height：宽度和高度。
margin：外边距。
padding：内边距。
border：边框。

布局

display：控制元素的显示方式（如 block、inline、flex）。
position：定位方式（如 relative、absolute）。
flexbox / grid：现代布局方式。

示例：完整 HTML 和 CSS 结合

HTML 文件：

<!DOCTYPE html>
<html>
<head>
  <title>CSS 示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>标题</h1>
  <p class="text">这是一个段落。</p>
  <div id="box">这是一个盒子。</div>
</body>
</html>

CSS 文件（styles.css）：

html如何制作css

h1 {
  color: #333;
  text-align: center;
}

.text {
  font-size: 16px;
  line-height: 1.5;
}

#box {
  width: 200px;
  height: 200px;
  background: #f0f0f0;
  margin: 20px auto;
}

通过以上方法，可以轻松在 HTML 中引入 CSS 并实现样式控制。