css制作html
使用CSS美化HTML的基本方法
CSS（层叠样式表）用于控制HTML元素的外观和布局。通过CSS可以定义颜色、字体、间距等样式属性。
内联样式
直接在HTML标签中使用style属性添加CSS：
<p style="color: blue; font-size: 16px;">这是一段蓝色文本</p>内部样式表
在HTML的<head>部分通过<style>标签定义样式：
<head>
<style>
p {
color: red;
font-family: Arial;
}
</style>
</head>外部样式表
创建独立的.css文件（如styles.css），通过<link>引入：
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css文件内容示例：
body {
background-color: #f0f0f0;
}
h1 {
text-align: center;
}常用CSS选择器
元素选择器
通过标签名选择元素：
p {
line-height: 1.5;
}类选择器
通过class属性选择（前缀为点）：
.highlight {
background-color: yellow;
}ID选择器
通过id属性选择（前缀为井号）：
#header {
border-bottom: 1px solid #ccc;
}盒模型控制
CSS盒模型包含内容(content)、内边距(padding)、边框(border)和外边距(margin)：
.box {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px;
background-color: white;
}响应式布局
使用媒体查询实现不同屏幕尺寸的适配：
@media (max-width: 600px) {
.sidebar {
display: none;
}
.content {
width: 100%;
}
}动画效果
通过@keyframes创建动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease-in;
}Flexbox布局
弹性盒子模型简化布局：
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}
