css基础制作
CSS 基础制作
CSS（层叠样式表）用于控制网页的样式和布局。以下是基础制作的关键要点：
基本语法
CSS 规则由选择器和声明块组成：
selector {
property: value;
}selector：选择 HTML 元素（如p、.class、#id）。property：样式属性（如color、font-size）。value：属性值（如red、16px）。
引入方式
内联样式（直接写在 HTML 元素中）：
<p style="color: blue;">文本</p>内部样式表（写在 <style> 标签内）：
<style>
p { color: blue; }
</style>外部样式表（通过 <link> 引入独立 .css 文件）：
<link rel="stylesheet" href="styles.css">常用属性
文本样式：
p {
color: #333;
font-size: 16px;
text-align: center;
line-height: 1.5;
}盒模型：
div {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 1px solid black;
}背景与颜色：
body {
background-color: #f4f4f4;
background-image: url("image.jpg");
background-repeat: no-repeat;
}布局基础
Flexbox 布局：
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid 布局：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}响应式设计
媒体查询适配不同屏幕尺寸：
@media (max-width: 600px) {
body {
font-size: 14px;
}
}调试技巧
- 使用浏览器开发者工具（F12）检查元素样式。
- 通过
border: 1px solid red;快速定位元素边界。
注意事项
- 避免过度使用
!important。 - 优先使用类选择器而非 ID 选择器以提高复用性。
- 使用 CSS 预处理器（如 Sass）可提升开发效率。
