css代码制作

CSS 基础语法

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

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

示例：将段落文字设为红色并居中

p {
  color: red;
  text-align: center;
}

常用选择器类型

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

  h1 {
    font-size: 24px;
  }

• 类选择器（以 . 开头）：匹配特定 class 的元素

  .highlight {
    background-color: yellow;
  }

• ID 选择器（以 # 开头）：匹配唯一 ID 的元素

  #header {
    padding: 20px;
  }

• 组合选择器：如后代选择器（空格分隔）

  div p {
    margin: 10px;
  }

盒模型属性

控制元素布局的核心属性：

.box {
  width: 200px;
  height: 100px;
  padding: 15px; /* 内边距 */
  border: 2px solid black; /* 边框 */
  margin: 20px; /* 外边距 */
  box-sizing: border-box; /* 包含边框在内的宽度计算 */
}

弹性布局（Flexbox）

实现水平或垂直方向的灵活布局：

.container {
  display: flex;
  justify-content: space-between; /* 主轴对齐 */
  align-items: center; /* 交叉轴对齐 */
}
.item {
  flex: 1; /* 等分剩余空间 */
}

动画效果

通过 @keyframes 创建动画：

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

响应式设计

使用媒体查询适配不同屏幕尺寸：

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

变量与自定义属性

定义可复用的 CSS 变量：

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

注意事项

• 属性值单位需明确（如 px, em, %）
• 多个样式表可通过 <link> 引入，优先级由加载顺序和选择器权重决定
• 使用浏览器开发者工具（F12）调试样式