网页制作css笔记

CSS 基础概念

CSS（层叠样式表）用于控制网页的样式和布局。通过选择器和属性定义元素的显示方式。基本语法结构如下：

选择器 {
  属性: 值;
}

常用选择器类型

元素选择器：直接使用 HTML 标签名

p {
  color: blue;
}

类选择器：以 . 开头，匹配 class 属性

.highlight {
  background-color: yellow;
}

ID 选择器：以 # 开头，匹配 id 属性

#header {
  font-size: 24px;
}

盒模型

每个 HTML 元素都被视为一个矩形盒子，包含：

• content：实际内容区域
• padding：内边距（内容与边框之间的空间）
• border：边框
• margin：外边距（盒子与其他元素的距离）

示例代码：

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

布局技术

Flexbox：一维布局模型

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid：二维网格布局

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

响应式设计

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

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

动画效果

通过 @keyframes 创建动画：

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.slider {
  animation: slide 2s infinite;
}

实用技巧

• 使用变量维护主题色：

  :root {
  --main-color: #3498db;
  }
  .button {
  background-color: var(--main-color);
  }

• 重置默认样式：

• { margin: 0; padding: 0; box-sizing: border-box; }

调试工具

浏览器开发者工具（F12）可实时编辑和预览 CSS 修改，检查盒模型参数和计算样式。