简单css制作

CSS 基础语法

CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成：

选择器 {
  属性: 值;
}

例如：

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

内联样式与外部样式表

内联样式直接写在HTML标签的style属性中：

<p style="color: red;">这是红色文字</p>

外部样式表通过.css文件引入：

<link rel="stylesheet" href="styles.css">

常用样式属性

文字样式：

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

盒模型控制：

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

背景与颜色：

header {
  background-color: #f8f9fa;
  background-image: url('bg.jpg');
}

布局技巧

Flexbox布局：

.container {
  display: flex;
  justify-content: space-between;
}

Grid布局：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

响应式设计

媒体查询实现响应式：

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

动画效果

过渡动画：

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}

关键帧动画：

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