简单css制作
CSS 基础语法
CSS（层叠样式表）用于控制网页的样式。基本语法由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}例如：
p {
color: blue;
font-size: 16px;
}内联样式
直接在 HTML 标签中使用 style 属性添加样式：
<p style="color: red; font-weight: bold;">这是一段红色加粗文字</p>内部样式表
在 HTML 文件的 <head> 部分通过 <style> 标签定义样式：
<head>
<style>
body {
background-color: #f0f0f0;
}
h1 {
text-align: center;
}
</style>
</head>外部样式表
将 CSS 代码保存在单独的 .css 文件中，通过 <link> 标签引入：
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css 文件内容示例：
body {
margin: 0;
font-family: Arial;
}常用样式属性
- 文本样式
p { color: #333; /* 文字颜色 */ font-size: 14px; /* 字体大小 */ line-height: 1.5; /* 行高 */ text-align: center; /* 对齐方式 */ } - 盒模型
div { width: 200px; height: 100px; padding: 10px; /* 内边距 */ margin: 20px; /* 外边距 */ border: 1px solid #000; /* 边框 */ } - 背景与颜色
.box { background-color: #eee; background-image: url("image.jpg"); background-repeat: no-repeat; }
选择器类型
- 元素选择器：直接选中 HTML 标签
h2 { font-style: italic; } - 类选择器：通过
.classname选中元素.highlight { background-color: yellow; } - ID 选择器：通过
#idname选中唯一元素#header { height: 80px; }
响应式设计
使用媒体查询适配不同屏幕尺寸：
@media (max-width: 600px) {
body {
font-size: 12px;
}
}Flexbox 布局
实现灵活的容器布局：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}动画效果
通过 @keyframes 创建简单动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}
