简单css制作

CSS 基础语法

CSS（层叠样式表）通过选择器和声明块定义样式：

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

示例：

p {
  color: blue;
  font-size: 16px;
}

常用选择器

• 元素选择器：直接匹配 HTML 标签（如 p、div）。
• 类选择器：以 . 开头（如 .header），匹配 class 属性。
• ID 选择器：以 # 开头（如 #main），匹配唯一 id 属性。
• 组合选择器：

  div.container { }  /* 同时满足 div 和 .class */
  ul > li { }        /* 直接子元素 */

盒模型

每个元素由以下部分组成：

• width / height：内容区域大小。
• padding：内边距（内容与边框的距离）。
• border：边框。
• margin：外边距（与其他元素的间距）。
  示例：

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

布局方式

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

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

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

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
  }

响应式设计

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

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

动画效果

通过 @keyframes 和 animation 实现：

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

实用技巧

• 变量：定义可复用的值。

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

• 伪类：如 :hover、:focus。

  a:hover {
    color: red;
  }