网页制作css笔记

CSS 基础概念

CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过选择器（Selector）和声明块（{}）定义样式规则。

选择器 {
  属性: 值;
}

常用选择器类型

元素选择器：直接匹配 HTML 标签名。

p {
  color: blue;
}

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

.highlight {
  background-color: yellow;
}

ID 选择器：以 # 开头，匹配 id 属性（唯一性）。

#header {
  font-size: 24px;
}

后代选择器：通过空格嵌套匹配。

div p {
  margin: 10px;
}

盒模型

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

• 内容区（Content）：显示实际内容。
• 内边距（Padding）：内容与边框之间的空白。
• 边框（Border）：盒子的边界线。
• 外边距（Margin）：盒子与其他元素的距离。

.box {
  width: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

布局技术

Flexbox：弹性布局，适合一维排列。

.container {
  display: flex;
  justify-content: center; /* 水平对齐 */
  align-items: center;     /* 垂直对齐 */
}

Grid：网格布局，适合二维结构。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  gap: 10px;                      /* 间隙 */
}

响应式设计

使用媒体查询（Media Queries）适配不同屏幕尺寸。

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

常见样式属性

文本样式

.text {
  font-family: Arial;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

背景与边框

.element {
  background-color: #f0f0f0;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

动画与过渡

过渡效果：平滑改变属性值。

.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #ddd;
}

关键帧动画：自定义动画序列。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: fadeIn 1s;
}

实用技巧

• 重置默认样式：使用 * { margin: 0; padding: 0; } 清除浏览器默认值。
• 变量定义：通过 :root 定义全局 CSS 变量。

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

调试工具

浏览器开发者工具（F12）可实时检查元素样式，修改 CSS 并预览效果。