制作简单css

基础CSS结构

CSS（层叠样式表）用于控制HTML元素的样式。一个基本的CSS规则由选择器和声明块组成：

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

常用选择器类型

• 元素选择器：直接使用HTML标签名（如p、h1）

  p {
    color: blue;
  }

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

  .highlight {
    background-color: yellow;
  }

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

  #header {
    font-size: 24px;
  }

常用样式属性

• 文本样式：

  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
  }

• 盒模型：

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

• 背景与颜色：

  .banner {
    background-color: #f5f5f5;
    background-image: url('image.jpg');
    background-size: cover;
  }

布局技巧

• Flexbox布局：

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

• Grid布局：

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

响应式设计

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

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
}

动画效果

创建简单动画：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in;
}

实用技巧

• 变量定义：

  :root {
    --primary-color: #4285f4;
  }
  button {
    background-color: var(--primary-color);
  }

• 重置默认样式：

  

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

调试工具

浏览器开发者工具（F12）可以实时编辑和调试CSS，查看盒模型和计算样式。