网页制作css笔记

CSS 基础语法

CSS（层叠样式表）通过选择器和声明块定义样式。选择器指定HTML元素，声明块包含属性和值，格式如下：

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

常用选择器类型

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

p {
  color: blue;
}

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

.highlight {
  background-color: yellow;
}

ID选择器：以#开头，匹配唯一id

#header {
  font-size: 24px;
}

后代选择器：用空格分隔层级

div p {
  margin: 10px;
}

盒模型

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

• content：实际内容区域
• padding：内边距（透明）
• border：边框
• margin：外边距（透明）

通过box-sizing控制计算方式：

* {
  box-sizing: border-box; /* 宽度包含padding和border */
}

常用布局方式

Flex布局
父容器设为display: flex，子项自动成为弹性项目：

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

Grid布局
二维网格系统：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 列宽比例 */
  gap: 10px; /* 网格间隙 */
}

响应式设计

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

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

动画与过渡

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

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

关键帧动画：

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

实用技巧

• 使用CSS变量统一管理颜色/尺寸：

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

• 伪类选择器：

  a:hover { color: red; }
  li:nth-child(odd) { background: #eee; }

• 文本处理：

  .text {
    white-space: nowrap; /* 禁止换行 */
    text-overflow: ellipsis; /* 溢出显示... */
    overflow: hidden;
  }