用css制作html
CSS 制作 HTML 的基础方法
CSS 用于控制 HTML 的结构和样式。通过 CSS，可以定义 HTML 元素的布局、颜色、字体等视觉表现。以下是一些核心方法：
内联样式
直接在 HTML 标签中使用 style 属性定义样式。
<p style="color: red; font-size: 16px;">这是一段红色文字。</p>内部样式表
在 HTML 文件的 <head> 部分通过 <style> 标签定义样式。
<head>
<style>
p {
color: blue;
font-family: Arial;
}
</style>
</head>
<body>
<p>这是一段蓝色文字。</p>
</body>外部样式表
通过链接外部 .css 文件实现样式与结构的分离。
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css 文件内容示例：
p {
background-color: yellow;
padding: 10px;
}常用 CSS 属性示例
布局与盒模型
div {
width: 200px;
height: 100px;
margin: 10px auto; /* 上下边距 10px，左右自动居中 */
padding: 15px;
border: 1px solid black;
}文本样式
h1 {
color: #333;
text-align: center;
text-decoration: underline;
font-size: 24px;
}响应式设计
使用媒体查询适配不同设备：
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}实战技巧
Flexbox 布局
快速实现弹性布局：
.container {
display: flex;
justify-content: space-between;
}CSS Grid
创建网格系统：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}动画效果
通过 @keyframes 实现动画：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 2s infinite;
}通过合理组合这些方法，可以高效地构建现代化、响应式的 HTML 页面。
