制作简单css
基础CSS结构
CSS（层叠样式表）用于控制网页的样式和布局。一个简单的CSS文件通常包含选择器和声明块。选择器用于定位HTML元素，声明块包含属性和值，用于定义样式。
/* 选择器 */
selector {
property: value; /* 声明 */
}常用选择器
- 元素选择器：直接使用HTML标签名（如
p、h1）。p { color: blue; } - 类选择器：以
.开头，匹配HTML中class属性。.highlight { background-color: yellow; } - ID选择器：以
#开头，匹配HTML中id属性。#header { font-size: 24px; }
常用样式属性
- 颜色和背景：
body { color: #333; /* 文本颜色 */ background-color: #f4f4f4; /* 背景色 */ } - 字体和文本：
h1 { font-family: Arial, sans-serif; font-size: 2em; text-align: center; } - 盒模型：
.box { width: 200px; height: 100px; margin: 10px; /* 外边距 */ padding: 20px; /* 内边距 */ border: 1px solid #ccc; /* 边框 */ }
布局示例
- Flexbox布局：
.container { display: flex; justify-content: space-between; } - Grid布局：
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
响应式设计
使用媒体查询适配不同屏幕尺寸：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}动画效果
通过@keyframes创建简单动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in;
}链接CSS到HTML
在HTML文件的<head>部分添加：
<link rel="stylesheet" href="styles.css">
