当前位置：首页 > CSS

css教程制作网页

2026-03-12 11:01:10CSS

CSS基础概念

CSS（层叠样式表）用于控制网页的样式和布局。通过CSS可以定义字体、颜色、间距、背景等视觉表现。

基本语法结构

CSS规则由选择器和声明块组成：

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

示例：

body {
  font-family: Arial;
  background-color: #f0f0f0;
}

选择器类型

元素选择器：直接使用HTML标签名（如p、h1）。
类选择器：以.开头（如.header）。
ID选择器：以#开头（如#main-content）。
后代选择器：通过空格嵌套（如div p）。

常用样式属性

文本样式：font-size、color、text-align。
盒模型：width、height、padding、margin、border。
布局：display（flex/grid）、position、float。

引入CSS的方式

内联样式：直接在HTML标签中使用style属性。
```
<p style="color: red;">文本</p>
```
内部样式表：在HTML的<head>中嵌入<style>标签。
外部样式表：通过<link>引入独立的.css文件（推荐）。
```
<link rel="stylesheet" href="styles.css">
```

响应式设计

使用媒体查询适配不同设备：

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

实战示例：简单网页布局

HTML结构：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header class="header">页眉</header>
    <main class="content">主体内容</main>
    <footer class="footer">页脚</footer>
  </div>
</body>
</html>

CSS样式（style.css）：

css教程制作网页

.container {
  width: 80%;
  margin: 0 auto;
}
.header {
  background-color: #333;
  color: white;
  padding: 10px;
}
.content {
  padding: 20px;
  border: 1px solid #ddd;
}
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}