制作简单css
使用内联样式
在HTML元素的style属性中直接编写CSS，适用于快速测试或少量样式：
<p style="color: blue; font-size: 16px;">这是一段蓝色文字</p>嵌入样式表
在HTML的<head>标签内添加<style>标签，适用于单个页面：
<head>
<style>
body { background-color: #f0f0f0; }
h1 { color: red; text-align: center; }
</style>
</head>外部CSS文件
创建独立的.css文件并通过<link>引入，适合多页面复用：
- 新建
styles.css文件：/* styles.css */ .button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; } - 在HTML中链接该文件：
<head> <link rel="stylesheet" href="styles.css"> </head>
常用CSS属性示例
/* 文本样式 */
.text {
font-family: Arial, sans-serif;
line-height: 1.5;
text-decoration: underline;
}
/* 盒模型 */
.box {
width: 200px;
margin: 10px auto;
padding: 15px;
border: 1px solid #ddd;
}
/* 响应式设计 */
@media (max-width: 600px) {
.box { width: 100%; }
}快速布局技巧
使用Flexbox实现水平居中：
.container {
display: flex;
justify-content: center;
gap: 20px;
}使用Grid创建两列布局：
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
