简单css制作
CSS 基础语法
CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成：
选择器 {
属性: 值;
}例如：
p {
color: blue;
font-size: 16px;
}内联样式
直接在 HTML 元素的 style 属性中编写 CSS：
<p style="color: red; font-size: 14px;">这是一段红色文字</p>内部样式表
在 HTML 文件的 <head> 部分使用 <style> 标签定义 CSS：
<head>
<style>
body {
background-color: lightgray;
}
h1 {
color: navy;
}
</style>
</head>外部样式表
将 CSS 代码保存在单独的 .css 文件中，通过 <link> 标签引入：
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css 文件内容：
body {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}常用选择器
元素选择器：选择所有指定标签的元素
div {
border: 1px solid black;
}类选择器：选择所有具有指定类的元素
.highlight {
background-color: yellow;
}ID 选择器：选择具有指定 ID 的元素
#header {
height: 100px;
}盒模型
CSS 盒模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成：
.box {
width: 300px;
padding: 20px;
border: 5px solid gray;
margin: 10px;
}常用布局属性
Flexbox 布局：
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid 布局：
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}响应式设计
使用媒体查询针对不同屏幕尺寸应用不同样式：
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}动画效果
创建简单的 CSS 动画：
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animated {
animation-name: example;
animation-duration: 4s;
}过渡效果
为属性变化添加平滑过渡：
.transition {
transition: background-color 0.5s ease;
}
.transition:hover {
background-color: blue;
}
